Some thoughts on graphical user interface design (GUI): part 1

Posted by 14 April, 2009

A well designed application for the most part is a pretty face on a database.  A pretty face is welcomed but brains and personality make for a complete package.  Constantine and Lockwood’s six user interface design principles along with  two others, the Aesthetics and the Accessibility Principle help in creating engaging and responsive applications.

THE STRUCTURE PRINCIPLE

Your design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users.

Clicky, a web analytics program, is an example of the Dashboard screen pattern.  This pattern provides multiple sources of information at a glance so that users can quickly ascertain a state of affairs and take purposeful action.

Macintosh Explorer, a file search application, takes it cue from Windows Explorer.  It’s an example of the Master/Detail screen pattern.  I include it here because it doesn’t depart from expectations, which is in fact one aspect of a well crafted application.  It doesn’t unnecessarily require you to learn an entirely new metaphor in order to use it.

THE SIMPLICITY PRINCIPLE

Your design should make simple, common tasks simple to do, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

Deleting a file from your computer is a very complicated task.  Yet the metaphor of a trash or recycle bin to which we simply drag and drop a file is both familiar and satisfying.  The ease of use and intuitiveness of this bit of user interaction belies the truly revolutionary thinking that goes into creating effective user interface.  A good application gets out of the way and allows you to get on with it.  A great application assists you in creating extraordinary products that you could not have created otherwise.  A bad application bogs you down in tedium and never gets out of the way long enough to allow you to forget that you’re using it.

The MicroSoft Windows upgrade feature is an example of the latter behavior in that after an upgrade it requires a system restart; however, it repeatedly requests a restart even after a user has indicated that they do not wish to restart.  It also doesn’t provide an option to delay restart for a certain period thereby requiring users to disrupt their focus or workflow and restart, or repeatedly cancel intrusive restart requests.  Macintosh’s Itunes is notorious for being similarly obnoxious.

THE VISIBILITY PRINCIPLE

Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with too many alternatives or confuse them with unneeded information.

Clicky also utilizes this principle well.  Notice that while selected functions are visible others are hidden behind tabs and that these tabs are clearly labeled and grouped in a coherent fashion.

Another example of the use of this principle is the Mac OSX dialog box which defaults to the six most frequently used options screen but enlarges to include more choices if the user invokes this option.

Yet another welcomed behavior is a popup tooltip that provides information about what’s behind a button or an icon.  This bit of information saves time from having to click through yet remains hidden until it’s needed.  These flourishes are not only helpful but can be executed skillfully and beautifully thereby changing an application UI rating from A to A+.

THE FEEDBACK PRINCIPLE

Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

Pageboss is an example of the successful application of this principle.  It is another web analytics program that returns key metrics about a website.  The interesting behavior to consider here is that it takes a while for the application to collect and return this information.   It, therefore, needs to keep the user informed about its current state and how long it will take to complete the task.  I would say that PageBoss gets an A for describing its current state, another A for doing so in a visually appealing manner and a B+ for informing the user about time to completion.  Had the task taken considerable more time to complete, a progress bar with a HH:MM:SS estimated time to completion would have been more useful.

Another example of the effective use of the feedback principle is the file transfer program, Transmission.  From the initial drag and drop to the automatic download, progress and color change to signal completion, Transmission gives conventional and unambiguous indication of its states, resulting in a satisfying experience for the user.

Other examples of feedback are data fields that glow, throb or change color when they gain focus or need user attention, buttons that become de-selectible when pressing them would not be appropriate, and workflow cues such as numbers, arrows or animation that help users to determine in what order to proceed through an application.

THE TOLERANCE PRINCIPLE

Your design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions reasonable.

No doubt you’re familiar with the ‘Do you really want to do this’ popup dialogs that come complete with the ‘Don’t ask me again’ option.  Developers initially assume that users are unaware that their actions might be harmful or irrevocable and so give them the option to backout of the action and once informed to opt out of any subsequent warnings.  A revert to default button is also an example of the Tolerance Principle in action as it keeps a user from making time wasteful or irrevocable decisions.   Given the repercussions, VisualHub, a video conversion application, has a perhaps too humerous although still effective warning for its users who wish to change their preferences.

An example of a poorly designed Tolerance Principle is a web mail client that I no longer use and that will go unnamed. The application will timeout if it does not get any input from the user.  Normally this would be a useful security feature except for the fact that it does not provide a warning before timing out.  It also does not recognize keystrokes as user input for its timeout feature and does not autosave.  Extraordinary omissions for a mail program.  The consequence being that if you type a very long email the program is almost guaranteed to timeout without saving your work.  In fact, it will have timed out leaving you typing unawares long before you invoke the send command.

THE REUSE PRINCIPLE

Your design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

Utilizing a familiar metaphor that is used consistently throughout the application can reduce learning time.  Soundsoap uses the metaphor of an electronics device that would be familiar to most users.

Assets such as radio buttons, click boxes, pulldown menus, etc.  should be used purposely and in the same manner and return the same types of result wherever they are encountered. The discussion found on the website linked here provides some insight into the considerations that go into where and how one might place buttons on a web form.  The point is that a developer can place any button anywhere.  A good developer makes defensible standards compliant choices in the interest of user experience.

THE AESTHETICS PRINCIPLE

Your design should have a consistent look and feel throughout.  It should be visually appealing and conform to longstanding principles of design aesthetics.

It is possible to design user interfaces that improve upon a users’ experience solely as a function of its aesthetic design in the same way that a beautifully decorated residence improves upon a resident’s living experience.  Visually appealing applications make use of icon design, formatting and color to create a sense of purpose, occasion and harmony.  It’s important to note that aesthetic considerations are always in service to improved functionality as discussed at usabilitypost.  The point is to move orange juice, [subtraction]; that is, rather than winning design awards the goal is to optimize an application so that users are more productive.  For instance, the use of color is important as it allows a user to quickly and easily scan an application’s interface thereby reducing eyestrain and improving the application’s usability.

The web analytics program Woopra is an example of design overwhelming usability issues.  Notice that the clash of colors does not enhance but rather competes with the data that is being displayed.  Everything on a application window is data that your brain needs to process.  Too much data processing leads to brain drain which does not optimize user productivity.  To avoid this, a good rule of thumb is that a third of any application window should to be whitespace.

THE ACCESSIBILITY PRINCIPLE

Your design should consider the needs of the entire range of potential users including those with accessibility issues and account for their experiences whenever possible.

While color is an important design factor it should be used as a secondary navigation or state change cue as some users who are visually impaired may have accessibility issues.  Users who are colorblind for instance may not be able to notice distinctions that are indicated solely by a color change.  Older or visually impaired users may need to adjust an application’s text size. It should be possible to do so along with other minor adjustments.

Update:  Click to read usabilityposts’ own list of design principles and sylvantechs own very helpful usability list.

Update:  Adobe Air app blog with UI critiques.

Reblog this post [with Zemanta]
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Categories : Tutortrac,webdesign Tags : ,

Comments
March 26, 2015

Totally agree with you, because he to some extent designer!

Posted by this site
April 4, 2015

This is an amazing piece of information

Posted by albert
May 25, 2015

Thanks on your marvelous posting! I quite enjoyed reading it, you can be a great author.I will be sure to bookmark your blog and will often come .

Posted by Lipozene
April 8, 2016

What Do You Use To Attach Your Trade Show Booth Graphics To Your Trade Show Pop Up Display?

Posted by criminal essays
Leave a comment

(required)

(required)