Disrupting Your Web Development Workflow
Posted by fitzgeraldsteele in mobile, programming on March 22, 2013
I had a chance to speak at the Iowa Javascript meetup about Web Development Workflow tools.
There are three things which have really made me reconsider and revise the process by which I organize and deploy code to servers:
- The need to make ideas and concepts available for consumption as quickly as possible.
I work in a lot of collaborative areas, so it is important for me to say “what about this?” in an electronic medium where people can play with it, try it out, see how it feels. So I want to maximize the time I spend building awesome new stuff, and minimize, automate, or delagate some of the operations type considerations. - Cloud and mobile.
The days of deploying a site to one known server, to be viewed on a couple known desktop browsers are gone. You need to be able to scale up your app very quickly, and that’s much easier if you plan for that from the beginning. Plus, platform as a service providers make it so easy to try an experiment with different technology stacks, there’s really no reason not to start with this approach. - Keeping up with the craft.
I need to keep up with the state of the art, so that I can remain vibrant, creative, and competitive in the industry.
So I shared with the group a few tools that have helped me to continue to grow in these areas:
Super Awesome Code Completion
Project Scaffolding
Platform as a Service
Browser-based online IDE
And you can see the slides here:
http://www.haikudeck.com/p/IfEWc0USxR/disrupting-your-web-dev-workflow
Webdev in the Cloud: Develop, Version, Deploy in the Browser
Posted by fitzgeraldsteele in programming on November 22, 2012
Stay with me, old girl!
I have a 6 year old laptop. If I were more cynical, I’d say companies use planned obsolescence to make me buy a new one. With cloud web development, it can still be a useful development machine.
Old Bessy is my 6 year old Macbook Pro. I’ve formatted and reformatted, added memory, and replaced batteries. Even still, I’m having a hard time using her for modern web design and development. She’s stuck on Mac OSX 10.6 Snow Leopard, since Apple won’t let me put their latest operating systems on this hardware. Apple also doesn’t make the latest versions of XCode or their command line dev tools available on this machine. Adobe won’t let me put CS6 on her. Can’t use front end dev tools like yeoman.io. While those new Macbook Pros are skinny and sexy, I’d rather not spend cash on a new laptop.
But it’s almost 2013…everything’s in the cloud these days, right. How can I do my web development work in a browser, using cloud tools?
Web Development in the Cloud: Requirements
In my day job and side-consulting jobs, I need to be able to quickly throw up HTML design prototypes. In order to make a cloud-based web development workflow work, I need to be as productive as I am working on a local dev machine:
Must Haves
- A modern text-editor/IDE (code highlighting, suggestions and auto-complete: I currently use Sublime Text 2 or Textmate)
- Git version control
- Development server, either for quick static/HTML only demos, and more complex client-server-database sites (django, rails, I’m started to play with node a bit).
- Automated deployment to production level servers, via SSH, FTP, git, or whatever means.
Nice to haves
- Watch and auto compile SCSS and coffeescript
- Live reloading after HTML/CSS changes
- Persistance layer (database, nosql, filesystem, etc. Most of the time, I’m doing front-end/interaction design type prototypes, so I don’t need this every project)
- Free
The secret sauce that makes everything go is the Cloud9 IDE. I’ve been watching them on and off for a while, checking it out, playing with it here and there. The collaboration/sharing always seemed neat. But at the end of the day, it didn’t support the tools I use or the way I work. But then I saw that Cloud9 has embedded a fully functional terminal/command prompt inside their IDE:
That is a full-blooded terminal inside Cloud9…Below the surface the terminal is connected directly to the underlying infrastructure.
…the terminal is nearly indistinguishable from a regular terminal, with one massive difference: it’s running on the web. You can access it from anywhere, without any duplicate configurations, and even share the workspace with a friend so they can connect to it.
As far as I can tell, you can’t sudo, or open arbitrary ports. But it appears you can do just about anything else that you would expect to be able to do with user-level permissions. Python and ruby are available, you can run easy_install and install gems. Heck, you can download, install, and run a database! Of course you can ls and look around…even edit files in vi if that’s what you like.
Opening up the terminal in a full unix session inside the browser is a game changer for me. I can take my existing tools and workflow and make them work within a browser! I can work on my computer at home, my parents computer, the netbook that’s been gathering dust since the iPad came out, and have the same web development environment everywhere.
Cloud Development Workflow
Set up Github Repository
- Create a new empty repo in github. Cloud9 also plays nicely with bitbucket, and can clone from any git URL.
Start Your Project in Cloud9 IDE
- Clone this new repo into Cloud9, and start editing. Cloud9 can connect to you github or bitbucket account, and will automatically show you any repos you have.
- Make some code. You can, of course, use the functionality in the Cloud9 IDE to add files and edit them, but I don’t want to start from scratch. I’m gonna just pull in Twitter Bootstrapand their fancy marketing narrow example. From inside the Cloud9 editor I press Alt-T to bring up a terminal window. I can run pretty much whatever unix commands here, including git push back to github, or wget to pull the Bootstrap code I want:
wget http://twitter.github.com/bootstrap/assets/bootstrap.zip unzip bootstrap.zip wget http://twitter.github.com/bootstrap/examples/marketing-narrow.html //Here I had to update the HTML so that the bootstrap css/js files point to the right location
- Preview your new site. With Cloud9, you can run a server-based node, python, ruby, or php app with their Run and Debug settings. But since this is just static, the simple Preview button works fine.
Deploy to Infrastructure-as-a-service provider
Cloud9 comes with close integrated with Heroku and Microsoft Azure. I happen to like dotcloud. With dotcloud, I can easily install the dotcloud command line interface right into my Cloud9 infrastructure, and use dotcloud to deploy the site. Per the dotcloud instructions, install the command line client, create a instance and dotcloud.yml file to create a static www server, and push your project up to the new servers!
easy_install pip && pip install dotcloud vi dotcloud.yml //or you can do it from the C9 IDE dotcloud create c9dotcloudgithub dotcloud push
Mine ended up at here: http://c9dotcloudgithub-fitzgeraldsteele.dotcloud.com/marketing-narrow.html
Version Control and Push to Github
Finally, you’ll want to version that code, and push it back up to the origin at github.
- Create a .gitignore file: I ignored the .dotcloud directory, and the .c9revisions files.
- Stage your code: git add .
- Commit to your local repo (this one is stored on cloud9) git commit -m “Initial commit from Cloud9″ (use the command line, or the pulldown menu
- Push back to github: git push origin master
Conclusion
Like the Cloud9 blog post said, this is all pretty straightforward with one major exception: I did this all inside a browser window! I still need to explore what all can and can’t be done inside the c9 terminal, but I don’t see why I couldn’t install the scss/coffeescript watchers to get some of those nice to haves. I’m really excited to see how much of my web development needs can be handled with cloud systems through the browser. I’m also interested in learning how much can be free, and where to get these best bang for the buck in paid services. Looks like Old Bessy may still has a few good years in her yet.
What would your ideal cloud web development stack allow?
The User Experience of Building a Bear
Posted by fitzgeraldsteele in user experience, ux on May 16, 2011
I can’t remember a more jarring lapse in a customer experience than that which my family experienced this morning. It all started with a fuzzy blue bear.
The Setup
My wife and I took my daughter to a build-your-own-teddy-bear establishment. To a father resigned to spending coin on a toy that will be loved intensely and then put in a toybox, the teddy-bear building process is amusing:
- select a skinned bear, rabbit or other animal carcass
- stick a blower into it’s rear orifice and fill with cotton,
- complain about all the ridiculous clothes, furniture, and other accessories your child will want to buy,
- suck it up and pay,
- receive hugs and kisses from daughter.
The company, of course, has a much friendlier description of the process.
From buildabear.com: The process for building your own bear.
While the bear was being stuffed in a very uncomfortable place, I thought to myself what a great job the company had done making customer experience into a profitable business. They’re giving my daughter more than a bear; they create an engaging process to build a bear, but also to have the child establish a relationship with the bear before they even leave the store! The employees are critical to this. At every step they help the child personalize the bear, bring it to life in their eyes, and make the bear-building experience unique and memorable. It works. My daughter has dozens of stuffed animals, but she knows which ones are Build-A-Bears, and she remembers where, when, and with whom she got each of them. Because they had put together a fun, well designed experience, I kept my fatherly grumbling and immature comments on bear stuffing to a minimum.
The UX Fail
The experience started to break down when we got to the ‘Name Me’ step, where you create a personalized Birth Certificate. You’re supposed to scan the bear’s bar code, but of course the scanner didn’t work so we had to type in the numbers. I quietly laughed at the obviously 20-30 year old PC they had hidden inside a decorative wooden box, and sighed when my daughter tried to touch the icons on the screen, or reach for a nonexistent mouse.
I really started to get upset when I realized that this step was designed to get marketing information…name, dob, sign up for a newsletter including email address! We’re trying to have fun family activity, and here comes the marketers in the middle of our family fun! My four year old is sitting at the keyboard, painstakingly trying to enter all the information, trying to get her bear’s Birth Certificate. Everything up to this point she’s been able to do completely on her own…and the build-a-bear board room broke the illusion right here.
To be fair, every business needs to have accurate, detailed information about their customers. And as a user experience designer, I understand the need to balance customer-focused experiences with business needs. I can almost hear the meeting in which someone presented the flowchart and said, “we’ll ask for marketing information HERE…” They generally did a good job of balancing the customer experience with opportunities to upgrade, upsell, buy add-ons. But everything, except for the Name Me marketing survey, focused on the core activity; it centered on the experience of building and personalizing a stuffed animal.
Think Outside the Beige Box
As user experience designers, it is our job to help businesses think outside their own needs and goals. It is not realistic to say, “get rid of the marketing survey.” But the information could be captured without hijacking the core experience. Here are a couple things they might think about doing to make the Name Me step more engaging:
Use a graphical, touchscreen interface.
This is a no brainer. I know those beige boxes are super cheap, and you paid someone good money to write that Birth Certificate program for you 12 years ago. But today’s kids don’t understand your huge computer and clicky-clackety keyboard. They are daily iPhone or iPad users. They are inundated with extremely responsive multi-touch interfaces, and high resolution graphics. You can make this process easier and faster (or, increase customer satisfaction and loyalty, and increase customer throughput and sales rates) with a modern, touch user interface. Do you really need the standard web month-date-year dropdowns? Give her a bunch of big buttons with big numbers to press.
If that’s too expensive, just get a decent computer — remove the decorative box
The problem here is that you’ve now made the customer have to learn a completely new and foreign user-interface, which is much more restrictive that what they already use daily. My daughter is 4. She has a complete working knowledge of how to use the family laptop: she can log into her account, fire up a web browser, turn on Netflix to watch her favorite shows. She knows she can type words into the ‘G’ and get the answers she wants. She knows that if she can’t touch the screen, she can use the mouse to move the cursor, and click on things to make them do something. All of this knowledge and accumulated experience was useless on your computers because you tried to create a ‘simpler’ interface. If you can’t go touch, just give her a web browser and a mouse and be done with it.
Make the process conditional
I’m sort of ok with asking my daughter for her name — it is printed on the bear’s birth certificate (this bear belongs to…) so at least it’s part of the experience. Do you really need my daughter’s exact birthdate? Just ask her how old she is (she’ll tell you to 2 significant figures). If the respondent says they’re under 13, don’t ask them for an email address, or to sign up for a newsletter. Instead, ask me for my information when I get up to the checkout counter (after all, I have the checkbook). Give me a reason to friend you on Facebook, where you can get all this information and more.
Make the process part of your mobile app
Nice to see you have a mobile app. Why don’t you do some of this marketing stuff there. Connect my account with all my bear purchases. Give me Bear Bills for providing my real world identity information.
They have job openings for both an interactive user experience designer and a senior database marketer positions. Clearly, they know they need to improve in these areas. I wish you luck in filling these positions, and making things better!
Agile, Lean UX — What’s New is Old
Posted by fitzgeraldsteele in agile, mobile, social media, usability, user experience, ux on March 2, 2011
I’ve been interested in recent twitters, posts, and presentations about the emerging and changing role of user experience. Yet we’ve seen some resistance to the new terms or methodologies. I’d like to suggest the current transition in the UX field is similar to revolutions in scientific fields. Science historian Thomas Kuhn would say we’re in a period of crisis or revolution. (Don’t worry, it’s not as bad as it sounds). It’s normal, healthy.
Our field is going through change. Change is normal. I think this change is analagous to the changes and evolution of scientific fields described by Thomas Kuhn in 1962. He showed that scientific fields go through cycles:
- Pre-paradigm—Sort of a bright, green, new field of inquiry. There are no established rules, theories, practices, or paradigms. There might be a number of competing ideas.
- Normal —The field sort of settles on a general worldview (what problems are worth investigating, what tools are techniques are correct, etc). An elite group of guardians usually emerges to lead the field, and determine what ideas are shared or published widely to the field. If processes or findings occur that don’t agree with the established canon of the field, they’re regarded as anomalies.
- Revolutionary—As the anomalies pile up, it becomes harder and harder to reconcile them with the old ways. For awhile, the field is in crisis you have competing theories and processes again. Finally, there is a paradigm shift (the new ideas explain more things more elegantly, or are more useful than old ideas, the old elite guard retires or dies, etc) and the revolution becomes normal. Think of the Copernicus declaring that the Earth revoles around the Sun, or the beginnings of the atomic model of chemistry.
This phased evolution model neatly describes what we’ve been seeing in the user experience field.
Evolution of the UX field
Pre-paradigm UX
Twenty years ago we were talking about interaction design, usability, and user centered design. Computers were for work, graphics were bad, networks were bad, and building and deploying new systems was hard. I remember hating Windows 3.1 because it made me use a mouse…I could do things so much faster in DOS! As usability engineers, if we could improve task completion rates and reduce errors, we were pretty happy.
Normal UX
During the dot com boom and bust of the late 90′s and early 00′s, we talked about User Engineering, and Outside-In Design. I know it was around this time that I stopped being lumped in with the technical, programming team, and started working more with business users and stakeholders. We all agreed to stop using <blink> and <marquee>, and started to focus on not just building software that optimizes performance on a work task, but designing things that people will actually want to use. As we approached the late 00′s, we started building design patterns, and interaction frameworks. We more or less agreed on a set of UX deliverables. In the last two years there has been an explosion of user experience tools, templates, companies, techniques, andservices available. (Those are just a few that I use, that I could think of at the moment…there are hundreds more). In essence, we all now have a robust set of tools and techniques to address our client’s needs.
¡Viva La Revolución!
Today’s new challenges and assumptions that make us reconsider how we approach user experience.
- Networks are fast and ubiquitous (except when they’re not).
- Users are not only generally familiar with standard computing metaphors, but are innundated.
- Websites, webapps, mobiapps are all relatively quick and cheap to stand up and deploy to millions.
- Screen size is variable, and tasks may span screens.
- Apps are social — they know you and help you interact with your friends. Storage is cheap, data is abundant, and is available from the cloud.
- Location and context are unknown, and may not take place behind a desk.
While we’re still responsible for creating usable experiences (time on task, error rates, mental models, Fitt’s law, etc) the bigger challenge today is figure out exactly what provides value and delight to users. Developers need designs before the end of a 2 week sprint, it now may be as fast or faster to build experiences in an integrated team than to do visual comps. So we’re talking about UX in new ways, using new terms: Agile UX, Lean UX. We’re doing more more lo-fi prototyping. We’re doing lots of design workshops, story mapping, ethnography. We’re doing more of everything, however we can, so that our products and designs are things people will actually want to use.
At the end of the day, practitioners are looking for ways to redefine the field, and exploring new ideas to address today’s realities and assumptions. I don’t think we should disparage these efforts. It’s a normal cycle that one sees in healthy, evolving fields.
I’m seeing people on the leading edge of the User Experience field are having some success truly integrating user experience methodology into corporate culture and product development cycles. I don’t work for a startup. I’m not a consultant (anymore). But I’m excited because history tells me the current UX revolution will eventually become normal UX. It will eventually get to my UX team of one, nestled within an excellent team of web designers, in a conservative company, in the midwest.
In a follow up post, we’ll apply some systems thinking to find a way to bridge the old UX and the new.—
Bash Shell One Liner: Find and compress files
Posted by fitzgeraldsteele in programming on December 20, 2010
Mostly wanted to write this down so I can find it later…
This bash shell snippet will search a directory tree for files matching a number of regular expression criteria, and then add them all to tar/gzipped file.
find -X . -name "*201009*" -o -name "*201010*" -o -name "*201011*" | xargs tar czvf ~/Desktop/corplogs.tgz
I was using the Mac OS X terminal…this took me a long time to figure out because all the find tutorials on the web have the find criteria inside parentheses. Apparently the parentheses aren’t necessary in the Mac terminal.
In this case, I was looking for log files between September 2010 and November 2010. The “-o” argument is a logical OR. The find command spits out a list of file names, and xargs bundles them up and passes them to the tar command.
Is Mobile Design Really That Different?
Posted by fitzgeraldsteele in confernece, mobile, phone, programming, usability, user experience, ux on December 1, 2010
I’ll be honest. I’ve only dabbled in the mobile app design and development space: one app for fun, one app for work (hopefully to be released in the next couple months). At today’s iPhone Design Conference, Brian Fling argued that mobile design is totally different that web. But I still don’t see how mobile app design and development is that different from traditional software or web development. Mobile devices offer new capabilities and require learning new tools, but the fundamental design and development tasks remain the same.
Mobile design reminds me of designing desktop apps in the late 90s. Multiple platforms, small screen real estate, limited computing resources (although an iPhone would probably
Back in the day, VisualAge for Java provided a way for designers and developers to jointly build "cross-platform apps." It used a drag/drop GUI editor to generate java code. In other news, I'm old.
run circles around my 486). Each application was an island, with little or no way to share information or task flows between them. Users probably didn’t have that much experience with computers. Your job as a designer was to understand the users key tasks and success criteria, and iteratively perform design and development to reduce time on task or errors. You differentiated your product by closely aligning the user interface metaphor with the users’ mental model of the task or process. Back in the day, we called this User Centered Design, and later Usability Engineering. Over the next decade, hard drives got bigger, screens got bigger, processors got faster, and networks and application mashups were everywhere. Users learned what to expect on websites. We designers stopped talking about usability — how well do people get through the task flows we have created — and started talking more about a more holistic User Experience.
Mobile application design exploded with the iPhone. Again, we find ourselves designing around constraints of small screens, multiple platforms, and limited computing resources. This time around, however, we’ve got some additional capabilities. Geolocation, gesture and multitouch interfaces, photo and video streams, anytime/anywhere network availability. We have cloud processing and data storage that we can use to offset device limitations. Even better, we have a generation of millions of users that are eager to embrace new technologies, pretty much willing to pay for and try out whatever we can think up.
But some things haven’t changed.
The basic cognitive and physiological capabilities of people haven’t changed. We’re still resource constrained people, who can only focus on one thing at a time, have relatively shoddy memories. We can only get our fingers to click on something so fast.
We all have the same basic needs.
Because of these basic human traits, designers still have to take care of the same basic interaction design requirements:
- Visibility (also called perceived affordances or signifiers)
- Feedback
- Consistency (also known as standards)
- Non-destructive operations (hence the importance of undo)
- Discoverability: All operations can be discovered by systematic exploration of menus.
- Scalability: The operation should work on all screen sizes, small and large.
- Reliability: Operations should work. Period. And events should not happen randomly.
As Don Norman recently pointed out, we’re not doing a great job with this on gesture interface devices
When we build these interactions, we’re still not doing it by ourselves. We want to continually align our designs with users expectations and developer feedback.
We still need to understand users’ mental model of the task domain first and foremost.
Mobile gives us some new tools in our design toolbox, and we lose the assumption that the user is sitting at a desk, working on a single task by themselves. New device capabilities…natural voice control, natural human gestures, thought controlled interfaces, semantic or linked data…are in active research and will make even more things possible. But the basic job of the UX designer is still the same…to use the resources available to make our users more efficient, effective, safe, and if we’re lucky happier. We still need to work iteratively with developers, business stakeholders to make that happen.
Am I missing something? Am I thinking about it at the wrong level of abstraction?
On a side note, I’ve previously discussed that UX Designer/Developers should have a strong foundation in human factors, psychology, and computer science. I think that (and experience) gives you the background to see beyond the new shiny toys and identify the real trends and innovations. Jared Spool seems to agree.
UX, Psychology, Black Friday and You
Posted by fitzgeraldsteele in user experience, ux on November 26, 2010
One of the problems of working in the field of User Experience is that you start to see everything through that lens. For example, Black Friday shopping. Black Friday is the biggest shopping day of the season, as retailers and Wikipedia tell us. But that’s not accidental. A lot of people, in a lot of companies, spend a lot of time and effort to get you to come out, and spend a lot of money. As mentioned in a Live Science article today, retailers pull out all the psychology and human nature tricks to make that happen.
Retailers use psychology to convince people to wake up early and part with their hard earned cash.
Retailers use psychology to get you to spend money. UX designers use psychology to design engaging experiences. Whatever your motivation, it helps to know some psychology. Stephen Anderson’s Mental Notes cards are like psychology flash-cards. They beautifully present 50 psychology concepts that you can use to help engage your users in the experience you are designing. Here are some examples.
(Implied) Scarcity
People are attracted and energized to go after things they believe are limited. The sense of scarcity instills a sense of urgency in the person. The whole concept of ‘Doorbuster’ deals — extra deep discounts that expire by 10am — are an example of scarcity. Scarcity is a very powerful. The Dollar Stretcher Community noticed that retailers create a sense of scarcity using splashy displays of HUGE SAVINGS, even though they have actually increased the price.
Sensory Appeal
People are wired to pay more attention to things that stimulate multiple senses — sight and sound. If you’ve been watching commercials for the last week, you’ve got a sense for that. Once you’re in the stores, they play music, and have attractive displays to get you to pay attention. If you’ve ever been inside a casino, you will have experiences the same thing. This probably goes back to when humans first lived on the savannah…you had to pay attention to the moving, loud thing because it might be something you could eat, or something that could eat you.
Delighters
Delighters are unexpected surprises designed to give the person warm fuzzies about the experience. One store we were at today advertised the end of the ‘Doorbuster’ specials at 1pm. At 12:45, they came on the intercom and said, “Good news! We’re extending our doorbuster sales for another hour!” I’ve also heard of stores giving away special coupons or deals to people there before 5am.
On a side note, one might also argue that making the best deals very early in the morning encourages people to shop when they are tired, and probably hungry. It is more difficult for people to think objectively and rationally when they are tired and hungry.
I’ve had the pleasure of listening to Stephen Anderson speak at this year’s Web App Masters tour. His ideas for designing play into our experiences are really interesting. If you can’t find him speaking at an event, I’d recommending you Get Mental Notes.
What can you do?
Make a List; Check it Twice
If you go into the store with a written shopping list…what you’re going to buy, who you’re going to by for…you’ve got a better chance of combating the impulse buys the retailers are counting on you for. Remember, the good deals are really just a way to get you in the shop. You’re tired, hungry, you’ve conquered and gotten the best deals, and the store has given you a couple Delighters to make you feel good — now you’re ripe to buy some of the full priced merchandise that you REALLY want.
Think about the 50,000 foot view
According to The Story of Stuff, most of the stuff we buy ends up in a landfill within 6 months of purchase. Having stuff is fun, buying and giving gifts is nice, but rarely gives long term happiness or fullfillment. Maybe we can do Christmas without tons of presents? Bill McKibbern wrote a book promoting The Hundred Dollar Holidays, deemphasizing presents and focusing on family, friends…slowing down.
Shop Locally
I don’t know that this really addresses the psychology of Black Friday; just my own personal opinion. At the very least, small local merchants are less likely to be able to sell merchandise at very low margins to get you in the door, so they probably can’t play the same scarcity games as larger stores. I know in my community, local banks are encouraging people to support local, homegrown businesses, touting local employment, quality products, and personal service.
How Google Instant Got My Homepage Back
Posted by fitzgeraldsteele in social media, testing, ux on November 22, 2010
I’ve been using web browsers since Mosaic and Netscape Navigator. In my entire web browsing history, I think I’ve set my browser home page a total of 3 times. Google Instant has made me switch again…
What do you have as your browser homepage? What’s the first thing you see when you open your browser window? Facebook? Your work site? A weather page? If you think about it (and not many people do), your browser homepage setting is your way of saying, “this page represents the one thing that’s most useful to me — the one thing I want to deal with as soon as I start browsing.”
(As a side note…my wife has set her Firefox profile to start not one, but 5 pages on startup: Facebook, Feedly, NPR, Hulu, and Pandora. No matter what she’s planning on getting on the web to do, Pandora starts playing, which drives me crazy).
Clearly, I’m not the only one thinking about browser homepages. Facebook recently started asking users to make Facebook their homepage, and provided a handy bookmarklet to help users make the switch.
Facebook started prompting users to make Facebook their homepage, and even provided a drag-and-drop bookmarklet to do so.
Back in the day, say around 1995, Yahoo was THE place to find new and interesting websites (they had a dedicated staff that searched the web by hand, and sorted them into a directory). That was my first home page. Later, Yahoo created My Yahoo!, which aggregated a variety of sources and let you create a personalized front page. That was my second home page, but not for long. It had two problems: 1) it was slow to load, and 2) there’s no way to really accurately predict what I needed to see when I started my browser. And so, probably in 2002, I just turned off browser home pages; I asked the browser to load a blank page on start up.
Google’s recent launch of Google Instant has made me change my browser home page again. I really think Google has hit a sweet spot between speed and flexibility. When I open my browser, I want it to open and be usable immediately. Just like I want my TV to come on immediately, or I want my computer to book quickly…I don’t want to wait to start doing whatever it is I wanted to do when I double clicked the icon. A couple quick tests indicated that the Google Homepage with Instant completes page load and is usable in less than 3 seconds. Facebook, for comparison, took between 5-6 seconds. Doesn’t sound like much, but how many times do you open a web browser each day, or month, or year? It adds up.
But the real value to me is not the speed of loading, but that Google Instant gets me to whatever I need on the web faster, no matter where it is. I don’t have to pre-select the sites or information I want to see. Instead, the instant feedback between my search query and the results make is seem like Google is an actively helping me ask questions and find whatever information I need at the time.
Let’s look at it another way. There are a few sites — Facebook, Google Mail, My Yahoo, delicious — that I visit very frequently. But there are thousands of sites that I may visit only once, or a handful of times. Last week, for example, I wanted to find a WordPress Bundle for Textmate. I found one, and I may never land on any of those website ever again. This is a classic Long Tail (or power law, if you’re more technical) pattern which appears all over in internet and social media behavior. The Long Tail pattern means that there’s a good chance that when I get on the internet, I may want to see one of my frequently visited sites, but that there are a lot more sites that I use on an as-needed basis, and can’t really predict exactly which one I will want.
Google Instant provides my with better tools to get at this Long Tail of sites, more quickly. Because it queries Google’s massive index on each key stroke, taking advantage of specific information about the context of my search: my location, my search history, and probably a whole host of other things. Because there is so little time lag between my search query, the search term suggestions, and the search results, I can quickly tell Google what I’m looking for today, and I can know immediately whether it understands.
So instead of a command and control interface, where I have to tell the browser exactly what I want to see today, by loading Google Instant as my homepage, I’m engaging in a conversation with the web. I tell it what I want to know, and it answers in a fast, seamless way. That’s going to be tough for Facebook, and others, to beat.
jQuery Quickie: User Feedback with Fade Out/In
Posted by fitzgeraldsteele in programming, usability, user experience, ux on October 21, 2010
Here’s a little jQuery idiom I’ve come to use on a few web design projects that I thought might be nice to share. Let’s say you want to update a region of the page or widget based on some user action. For example, you might be building a screen with a list of orders on one side, and an details panel on another. Clicking on one of the orders replaces the data that shows up in the details panel.
I use this snippet when I want to visually reinforce an on-screen change that happens when the user takes some action.
$('#link').click(function(
$('#content_container').fadeOut("fast",function() {
updateContainer();
//other code here
}).fadeIn();
);
(view as Gist)
Pretty simple jQuery, really. When the user clicks on the link, we want to swap out the information in the content_container with the new data. This simply chains together a nice set of animations to:
- Quickly fade out the #content_container,
- Do something to update the #content_container. Or whatever you want really.
- Fade in the #content_container after all the updates are complete
I personally like the fast fade out, normal speed fade in. I feel like it gives the user a nice visual indication that something in this area changed, without drawing out the animation or drawing attention to the fading effect itself.
On a side note, this builds on some things I learned from Bill Scott at this year’s Web App Master’s Tour. He presented a nice framework for thinking about all the small ways designers can provide useful user feedback without drawing attention to the animation or UI itself.
