GUI Design

User Interfaces Everywhere Bad User Interfaces are Everywhere telephone systems automobiles automated teller machines doors! Bad User Interfaces are Everywhere

What is a good GUI design? If you are asked the following question: What is a good GUI design?

A good UI is: Intuitive Feels fast - eg. no white screen, threading code Consistent Minimal popups No clutter - not busy Good error handling Easy to customize + apps (aka a platform)

A good UI does not need instruction

The only problem with Microsoft is that they have no taste.

People never knew how to use styles people know intuitively how to use styles

Do Interfaces Matter? Users Complains Lost Productivity Real Disasters

The USS Vincennes Shot Down a Civilian Plane Because of Bad Cursors

Three Mile Island Happened Because of a Light on the Console The control panel had a light to show the status of the relief valve that prevents the reactor from overheating. Light's on, valve's open; light's off, valve's closed. The design of the control panel was the light to go off once the computer had sent the signal to close the valve -- which isn't the same as when the valve was actually closed.

Common mistakes Forgetting users Give users no control Give users too many features at the top level

Different user needs Occasional users want to know how to use program quickly Simple controls Clear, descriptive labels Help files Frequent users want to minimize effort Few button clicks, little typing No long sentences that must be read Different domain users may be familiar with different concepts, objects and operations

Golden rules for GUI design Simple and intuitive Progressive disclosure Complete & efficient Informative feedback Principle of least surprise Minimize effort

Simple and intuitive design Simple and powerful makes programs elegant An interface is intuitive if a new user grasps immediately how to use it Intuitive means different things for different people

The human brain: Never searches for OR compares all options Prefers smaller sets of options (4 or less) Picks the first option that looks good enough Prefers a shorter option to a longer one Makes a compromise between speed and accuracy Our visual short term memory has a capacity of 4 items. So options are easier for our brain to digest when presented in sets of 4.

Progressive disclosure Less is more - keep your design as simple and uncluttered as possible Simple design does not mean less functions available Understand the importance of defaults - Aim for 'Next', 'Next', 'Next' Hide advanced options, but make them easy to find! Hide complexity until it is needed For example, look at the Preferences... menu on almost any large program

People Rarely read word by word; instead, they scan the page, picking out individual words and sentences that seems more relevant. It is important to divide information, not show it all at once. The visual organization of information is vital to legibility.

Information structure Relation between elements When displaying information or controls, designers need to visually convey: Information structure Relation between elements Importance and relevance of elements

Want to check in?

A great example of removing complexity.

Organize data

reordering side by side comparison totals.

Complete and efficient Access all the functionalities available Timing response

Informative feedback Every action users take should result in feedback For example, Typing text or click radio button should Cause text typed display Radio button enabled clicking a button should either show the results, display a message, start a “progress bar” going, pop up a dialog box to provide warning/confirming

Principle of least surprise Use common sense (GUI/color/icon) Strive for consistency Offer simple error handling by permitting easy reversal of actions Offer warning for critical actions

Minimize effort Reduce number of mouse clicks For example, if the user’s action is successful, provide feedback, but don’t pop up a dialog box with a message “Your file has been saved. [OK]” If the user’s action is not successful, make sure that the feedback is highly visible and this is a good place to use a dialog box Enable frequent users to use shortcuts

If users want to make some information public, then make it easy for them.

GUI design process Design the application’s navigation model Define GUI standards Create GUI prototype according to user requirements Code review and user testing Iterative process

How Far Along Basic requirements description or prototype of interface know who users are (and their experience) a task description a list of actions to complete the task (walkthrough scenario) Viable once the scenario and interface sketch are completed

How to Proceed For each action in the sequence tell the story of why the user will do it ask critical questions will the user be trying to produce the effect? will the user see the correct control? will the user see that the control produces the desired effect? will the user select a different control instead? will the user understand the feedback to proceed correctly?

More on Questions to be asked Some extras can be helpful: What happens if the user is wrong? Feedback to self-correct? How would a former user of <alternative product> react here?

An error generated by IE 6.0x in Windows XP Professional Cryptic dialog box title Incorrect grammar ("components") One course of action ("Never download…) makes more demands on fine motor skills and eye/hand/mouse And when you click "Download," the default option,

We’re Sorry (the penalty for following directions)

No links to save or print the active page

OK, I will sign in first before I am worried about Security options.

Is Windows Media Player in real "Compact" Mode?

How consistent can it be?

References http://www.ssw.com.au/ssw/Standards/Rules/RulesToBetterinterfaces.aspx http://www.cracked.com/article_19776_6-disasters-caused-by-poorly-designed-user-interfaces.html http://www.slostc.org/topics/usability/poor_ui_examples.html http://www-users.itlabs.umn.edu/classes/Spring-2007/seng5115/