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

I wireframed a tutor scheduling page to  highlight some of the recommendations that I had made in my earlier post.  I’m sure you will agree that this is a much better aesthetic experience than what is currently available but the application behavior is what I wish to highlight here.

(1) Left panel is menu for all pages in the application.  It appears on every page so that users do not become lost in the application.  A color and icon change indicates current page.

(2) Top numbered panel serves as a breadcrumb for the current page.  Colors change to indicate to users where they are in the process.  Number icons change as well for accessibility reasons.

(3) A dialog box appears at the top of the page to indicate what users should do first.  It disappears once users make an initial selection.  Experienced users may disable most dialog boxes through a user preference wizard.

(4) A question mark icon is displayed at top right of screen.  Clicking it opens a text modal box that might also feature a video demonstration.  This feature is contextual and brings up different information depending from what page it is clicked.

(5) A question mark icon is displayed at key functions in case users have specific non-global questions.  Mouseover opens up a pop-up text window.  The four here explain what services are offered by each center and the particulars of group and individual tutoring.

(6) To assist users with navigation, selections are featured in a logical and prescribed order.  Users have to think less about what they need to do.  This increases the likelihood that their default behavior is the correct one.

(7) Users cannot move forward until they complete the form in the order prescribed. Here course, date, type, and submit buttons are not selectable until center is selected.

(8) Course selection is automatically generated either from a predefined list of subjects or from a user’s own course registration previously uploaded by an administrator.

(9) Courses for which there are tutoring sessions are presented differently than courses for which there is no support.  Perhaps using color, icon, or different font such as italics.

(10) Once users have selected a course the date, type and submit button become selectable.  Date and type are optional so they do not have to select in order to submit.

(11) The date can either be written in or users can click the calendar icon to bring up a calendar graphic popup to select start and end dates.

(12) Calendar and start/end input boxes validate in real time so that users cannot enter other than appropriate dates as determined by administrator preference selection.  Here that is seven days in advance.

(13) Clicking submit displays a modal window of search results.  Users can select their preferred appointment times from this modal window without leaving this page.

(14) From the modal window, users will be able to select multiple appointment times before confirming their selection.

(15) Real time validation occurs here as well.  Users cannot select a session that has already ended.  They also cannot schedule an appointment while it is ongoing unless an administrator selects this preference feature nor can they schedule appointments that conflict with current selections or previously confirmed  appointments.

(16) If a search produces no results the user is informed of this fact, explained why it occurred, and provided with next step options.

(17) Users must either confirm or cancel their selection(s) before closing the modal window otherwise they will receive an error message.  This feature prevents them from logging out without completing the scheduling process.

(18) Once the student confirms they receive a confirmation successful message before the modal box collapses.

Since most users will be using the application without an initial demonstration it must perform logically, and handle errors in an intelligent manner.  This design gives users a better visual, functional and feature rich experience while minimizing frustration, confusion, and errors.  The helper features and error handling is unobtrusive and therefore won’t frustrate experienced users.  The design while aesthetically pleasing is utilitarian.  It is neither frivolous nor extravagant.

(No Ratings Yet)

 Loading ...

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

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.

(No Ratings Yet)

 Loading ...