Lou Franco's ECM Imaging Blog

I've been thinking a lot about what users expect in a web UI. Even with all of the advances of AJAX -- the user's expectations of what a browser hosted GUI can do will still not be the same as what they'd expect in a desktop application.

Users know how to interact with a GUI because of visual cues (affordances in GUI design-speak). In designing the look of GUI elements, it's important that the way the controls look suggests how we might interact with them. Common examples are:

• Using 3D for buttons to make them look like they can be pressed
• Changing the mouse cursor into a pointed finger to show that something is clickable. Blue underline wasn't enough when the web started, but now it is, because we learned it
• Putting a friction pad on the corner of a Window to suggest that it can be dragged,and the cursor changes into arrows to reinforce that.
• Fading controls to make them look like they are disabled. 

The best cues mirror things in the physical world, but some cues are completely new to computers and are learned. (Some people try to make GUI interactions work in the physical world -- like this back-port of hyperlinks to magazines and this one for phones).

The important thing is that once the link between the visual and the action is learned by users, new applications benefit. The more you use pre-existing cues, the more learnable your application will be.

Some GUI interactions are just assumed to work, and there are no cues for them.  For example, double-click means "open this" or "do the the most common action with this" and right-click means "give me a list of everything I can do with this", but there is no cue to tell you that. These are the ones that are the hardest to use on the web because 10+ years of substandard web GUIs have made us unlearn them.

On the web, buttons and other common controls look and act the same as desktop buttons, but when was the last time you expected right-click to work in a web application.  Either it brings up the browser context menu, a Flash context menu, or is disabled. Double-click is equally useless in a web application.  Most of the time it will select a word. 

The behavior you see is correct for a document, but not for an application -- most of the problems you see are because the browser was designed to view documents, not run applications. The closest thing that existed when browsers were first getting popular was Lotus Notes -- and I can tell you that many of these GUI cues in Notes were also wrong or non-existent.

Here at Atalasoft, we're really trying to push the envelope of what a web-based imaging application can do. Our AJAX Web Image Viewer control has features that people expect on desktop application. Some, like panning an image by dragging it, are expected on the web because Google Maps popularized it. But, some of the stuff that we're introducing in the next version is definitely not usual on the web (but is commonplace on the Desktop).

So it becomes even more important to get those cues right. Small touches like getting the mouse cursor correct and putting up visuals that people associate with image editing make a big difference in how learnable/discoverable our UI is. Sure, if someone tells you what to do, it's easy -- but web GUIs need to suggest their interactivity.

When it comes to right-click and double-click, I think it's harder. Tooltips help. Changing the look on rollover does too. In time, they will become more popular, but now, I think you need to hint that they will work.

So, what are you doing in your AJAX applications to suggest that your application is more interactive than your users are used to?