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

AJAX stands for Asynchronous Javascript and XML which is just a flashy name for some technology that has been around for a while. It frees us from the shackles of the old request/response model of the web and allows us to update just *part* of the page without reloading the full page. This can lead to a *HUGE* increase in responsiveness and usability. Think of the old Mapquest vs. Google Maps.

Web UI Patterns

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.

Yellow Fade Technique http://basecamphq.com

Yellow fade technique. When you change a part of the page highlight it and then fade out the highlight. Description from 37signals guys here: http://www.37signals.com/svn/archives/000558.php

Death to Monolog Boxes

Most of the time JavaScript Alert Boxes are obnoxious. They block you from doing anything else in the browser, they don’t play nice with tabs, the text is small, they often don't make it clear whether the box is an informational messages or an error message, and you have to explicitly click a button to make them go away. You should never have a popup with just one button.

Transparent Messages http://transparent-message.xilinus.com/main/html

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 Modal / Inline Popup http://www.yarncountry.com/categories.aspx?catid=189

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) “

Yahoo! UI Library Libraries

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.

new Effect.Highlight( $( ‘id’ ), {duration: 2} ); Yellow Fade Script.aculo.us Code

Just to show how easy this is, that was all the JavaScript code required to apply the yellow fade technique to a div with script.aculo.us

ASP.Net AJAX Faded Background Modal < ajaxToolkit:ModalPopupExtender ID =&quot;MPE&quot; runat =&quot;server&quot; TargetControlID =&quot;LinkButton1&quot; PopupControlID =&quot;Panel1&quot; BackgroundCssClass =&quot;modalBackground&quot; DropShadow =&quot;true&quot; OkControlID =&quot;OkButton&quot; OnOkScript =&quot;onOk()&quot; CancelControlID =&quot;CancelButton&quot; PopupDragHandleControlID =&quot;Panel3&quot; />

And that was how you declare a Faded Background Modal with ASP.Net AJAX. http://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx

Tools Internet Explorer Developer Toolbar

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

Quality Is Free

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.