How can you design an interface which is both easy to understand the first time you use it and efficient once you’ve learned it?

This is a dilemma which designers wrestle with because it’s difficult to understand what domain knowledge the user has with your product and how easily they can execute certain actions. One common mechanism used in the first time experience is a wizard. The wizard is useful when guiding the user through a complex set of inputs. It breaks the series down into small manageable chunks of questions so the user isn’t overwhelmed.

But what happens after the user has gone through the wizard and now has a reference? Understand what inputs are needed and can easily complete the task with little effort? Why force them through the same series of screens and ask the same questions?

Adobe Dreamweaver has an interesting method to allow both user’s the ability to interact with their site properties based on their level of expertise and familiarity with the process.

Basic View

Advanced View

This method allows the user to become more efficient with each subsequent task once they have learned what each property means.

Good user experience design allows the product to adapt based on the user’s knowledge of the product. Here is another example of how the design should remember what the user wants.

Your application should account for all these user decisions and serve only what the user needs to successfully accomplish their goals.

Documenting interaction design can be a little tricky. What the designer is trying to convey is form(visual) and function(behavior). Often what needs to be articulated is the movement and actions of the user. Movement isn’t easily translated into static documents. Showing screen to screen interaction is usually done with a flow diagram:

There are some established tools for creating these (Visio, OmniGraffle, Illustrator) and a few libraries that make it easy. I prefer Jesse James Garrett’s IA Visual Vocabulary

But when it comes to on screen events the practice of documentation and it’s intended benefit aren’t as established. Some examples are:

Callouts: A document with boxes of text which describe the interaction on the screen. e.x “User clicks “submit button” - open JavaScript Alert box “confirm all changes”

Behavior tables: Similar to above but instead of cluttering the document with boxes the designer uses indicators to denote interaction and uses a legend to fully describe the function.

Animated Gifs/Flash: These are a bit more labor intensive but they can be very useful to show the exact interaction (blind open 1.2seconds after click). Creating these artifacts is also a good exercise for the designer so they can explore different options and see the interaction before it has been coded.

Prototyping: This is probably the most time intensive but usually yields the best results. If done well the up front design work can be integrated into the product. There are some great new tools (WPF and Flex) being developed to make this process easier with less “throw away” work.

As interfaces become more complex and the user experience becomes more of a differentiator in the marketplace, designers will need to adapt to more robust and integrated design tools to remain competitive and relevant.

I just installed Fire Fox 3 (beta).The first thing I noticed was the change to the forward and back buttons.

All browser buttons are not created equal. The back button gets much more use than the forward button. From Nielsen:

The Back button is the lifeline of the Web user and the second-most used navigation feature (after following hypertext links). Users happily know that they can try anything on the Web and always be saved by a click or two on Back to return them to familiar territory.

Since the back button gets much more use, the designers at Mozilla have grown it in size in comparison to it’s brother the forward button. Allowing for a larger target makes it faster for the user to accomplish their task. (see Fitz Law)

Drag and drop is becoming more common with web applications. While the desktop has had this functionality for a long time and users understand and execute a drag and drop many times daily, there are some affordances to keep in mind.

First the user must know an item is able to be dragged. Without messages like “drag me” the user will interact with an object and look for visual clues that the object can be moved. Some common indicators are: cursor change, highlighting and making the object semi-transparent.

Once the item is being dragged potential targets should also indicated they are willing to accept a dragged item. Targets should announce their acceptance using visual clues like highlighting.

Example A shows drag and drop with these affordances.

Example B shows drag and drop without these affordances.