Techniques for a Modern Web UI Patrick Joyce May 23, 2007 http://pragmati.st
This talk is about some simple ways that can greatly improve the usability of our sites. The genesis for this talk came from a demo of an internal application I've worked on, where the developers who were new to the project were really intrigued by some of the UI things that we did and wanted to know a little more about them.
As far as the customer is concerned, the interface is the product.” - Jef Raskin, Designer of the Original Mac UI “
Why does this matter? The UI *is* the application. All the code, all the requirements, and the design, and the test documents, all that behind the scenes stuff doesn't directly matter to the user. And I think this is important to remember, because, as *creators* of the system we spend all day with that stuff. So I think it is easy to forget the user isn't ever going to see any of that and end up placing too low a priority of the interface.
Traditional Web Interfaces The user acts (Clicks a link, button, etc) A request is then sent to the server… And, eventually, a COMPLETE PAGE is returned
The old way of the Web was that the user clicks on something, a request gets sent to the server, and eventually the whole page is reloaded. This style sort of sucked from an interface perspective. But we gladly accepted the tradeoff, because the deployment and availability benefits were so big. But, let's face it was a HUGE step backwards from the desktop in terms of usability.
The New Way: AJAX The New Way: AJAX Dynamically update PART of the page. Which allows for more responsive UI, but introduces some new problems. http://www.wisc.edu/directories
The Problem: Now that you can update just a part of the page it is easy for the user to miss it. The solution: Provide feedback. Highlight change on the page with changes in color, size, and/or position.
Transparent Messages are a good alternative. Basically the message is overlaid on the screen in a very large font and remains there until the user takes some action, be it clicking, or just moving the mouse at which point the message fades away. Jef Raskin Humanized blog post I got the idea from: http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages/ Implementation built on Script.aculo.us with Rails integration: http://transparent-message.xilinus.com/
Faded Background Modals or Inline Popups are a technique where you temporarily layer a div over the page. It’s a good replacement for where you would normally use a popup or interrupt the user’s flow by jumping to another page. The Shopping Cart at http://www.yarncountry.com/categories.aspx?catid=189 provides an excellent example. Idle timeouts would also do well from using inline popups instead of full fledged popups.
Hiding Extra Information http://wiki.script.aculo.us/scriptaculous/show/Effect.toggle
Often times there is more information related to a page that you don’t want to show by default. Contextual help is a common example of this. Instead of using a popup, allow the user to show and hide by clicking a hyperlink and then use a blind effect to show or hide the information.
Show Progress with Spinners http://www.napyfab.com/ajax-indicators/
When you have an operations that takes some time you want to make sure that the user sees progress. Motion is a good way to convey this. In an ideal world the motion will be tied to the actual progress of the action but this can be rather difficult. A good compromise is simply to use an animated gif. This is especially good for relatively short operations (1-10 seconds)
Prevent User Errors with AJAX Validation https://www.blinksale.com/firms/new?plan=Free
The traditional way of validating a form was for the user to fill the whole thing out, submit it, and then if they’re errors the whole page gets returned to the user (hopefully with all the information that they already entered still there and the error fields highlighted) Now we can do better than that. Why make the user wait until the end to show them an error? You can kick off a validation when the user moves off the field.
A good example is the id portion of the signup page at BlinkSale. As you type it checks if the ID you have selected is available and lets you know. This way the user doesn't have to fill out and submit the entire form just to learn that their desired ID is already taken. https://www.blinksale.com/firms/new?plan=Free
Good artists copy. Great artists steal.” - Pablo Picasso (Most likely apocryphal) “
You don't have to reinvent the wheel for this stuff. There are a bunch of great libraries that give most of this to you for free and for the most part handle cross browser compatibility issues. We used prototype, script.aculo.us and Rico on a recent application all of which are available under very liberal licenses.
Now, with all this DHTML stuff you need to keep an accurate mental model of the DOM. I’m no where near smart enough to keep all of that in my head so I lean pretty heavily on two browser plugins. FireBug is amazing. If you're developing websites without it you are absolutely out of your mind. Check out the creator, Joe Hewitt, giving a demonstration of it at Yahoo here: http://ajaxian.com/archives/joe-hewitt-firebug-power-user-demo http://getfirebug.com
Unfortunately, we can't ignore IE. Thankfully there is now a plugin for IE called the Internet Explorer Developer Toolbar that gives you some of the features of FireBug. It is a small subset of FireBug, but lets you view and manipulate the DOM which is very useful. http://blogs.msdn.com/ie/archive/2007/01/09/ie-developer-toolbar-beta-3-now-available.aspx
The final thing I want to tell you is this: Quality is Free. This is a saying that comes out of the Lean Manufacturing community. What they mean is that it doesn’t cost more to follow process. I’m going to co-opt it a bit for my own purposes, and what I want to convey is that good UI doesn’t have to cost more money.
The amount of extra code required to use these techniques is trivial. The truth is that most web applications are terrible from a usability standpoint. It doesn’t have to be that way. If we just keep the user at the front of our mind while we design our applications and look for ways to improve their experience we can easily change that.