MoreWhite

Flexibility is Overrated: Having a ton of features isn’t great, it’s information overload. The geeks will always ask you for more - resist. Reduce decision making to a minimum. At any page of your application the user should only see the features relevant to the current context, not the application as a whole. Web applications are like story-boards: the user is meant to navigate them, being assisted as much as possible at every step.

Menus Hide Functionality: Placing functions within menus makes them extremely difficult for users to find. Don’t do it. Don’t mimic desktop applications that have all of their functions always available to you from a single giant menu or toolbar, simply disabling menu items when they are not applicable. Operations should always be visible next to the object they apply to. A typical example is photo manipulation. You can allow the user to manipulate thumbnails directly using some menu. A better solution is to have the thumbnail link to a separate page that allows manipulations on that object.

One View at a Time: Whilst ajax allows us to have sophisticated desktop style interaction, showing and updating multiple views, this is generally not recommended. The reason the web became so popular is due to simple story-board pages that reduce decision making to a minimum. Avoid using DHTML for pop-outs and having multiple windows - they don’t give the user a clear choice since the main UI is still operational. Instead, cover the current UI completely, like lightbox.

One Object at a Time: Each page should contain at most one object, and may have a side-pane on the right listing possible operations (functions) on that object. For example, a list of photos as thumbnails is an object, with a side-pane allowing us to to refine that list. However, the sidepane should not allow operations on individual photos - these should be moved to a seperate page.

Operations are Vertical: Toolbars are horizontal because they are static. Lists of operations are context sensitive. Always list operations applicable to the current viewed object vertically on the right side of the page. This differentiates operations from navigation, and allows any number of operations to be accessable by scrolling. Toolbars have limited space.

Navigation is Horizontal: Since operations are vertical, this is a natural choice. This is obviously where the logo belongs too.