UI Considerations: Layouts

This is the second entry in what I might make into a “UI Considerations” series. The first entry was UI Considerations for the Small Independent Developer that covered a few basic concepts like use-cases, Information Value and Interaction Impulse.  As a reminder, these entries are oriented toward to the hobby developers that do not have the resources of an expert UI design or test team, but are still seeking some easily digestible UI guidance that they can act on at design time.  To be clear, this is not canonical UI guidance nor is it intended as a substitute for expert advice. These are just a collection of my observations over the years as a hobbyist and a borderline-obsessed fan of design in general and UI design in particular.

A quick recap from the first entry:

• Ideally, use-cases should be implementation-agnostic.
• The best UI allows the user to accomplish their goal(s) with minimum cognitive impact.
• Reducing or eliminating elements with low Information Values should a goal of the UI designer.
• Minimizing or eliminating high Interaction Impulse elements that do not support the use case should be a goal of the UI designer.

In this entry, I’ll take a look at layouts from a pretty high level.  The focus will mostly be on the high-level layouts you see when you first encounter an application, a desktop environment, or website, not necessarily the low-level layout used for individual UI elements. These high-level layouts may also be how you recognize or remember the application.  For example, when you think of a Windows 7 desktop what is the first image that comes to mind? For me that image has two general sections: the desktop area on top and the taskbar area below.  How about a web browser like Chrome or Rekonq?  Address bar + tabs on top, page content below. How about a file manager like Dolphin or Nautilus?  Places on the left, list of file icons on the right. I’m talking about that high-level layout you encounter when you first ask yourself  “Ok, how does this thing work?” and proceed to visually scan the application for clues.  Go check out your favorite app, desktop environment or website and see if you can identify the top level layout pattern.

Worst… UI… eva…

Just a little UI humor I came across to lighten our over-worked days.  By the way, thanks Davide Bettio for the very helpful, tangible examples of the simple things we can do to improve our user interfaces.  I know I’ve found them helpful.

peace and respect.

Psst…  Pssssst…. hey… a little birdie told me a Bangarang beta is coming soon!