1. GUI Design

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

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

4. 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)

5. A good UI does not need instruction

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

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

9. Do Interfaces Matter?
Users Complains
Lost Productivity
Real Disasters

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

11. 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.

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

13. 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

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

15. 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

17. 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.

20. 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

21. 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.

22. 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

23. Want to
check in?

24. A great example of removing complexity.

25. Organize data

26. reordering
side by side comparison
totals.

27. Complete and efficient
Access all the functionalities available
Timing response

28. 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

30. 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

31. 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

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

34. 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

35. 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

36. 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?

37. 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?

38. 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,

39. We’re Sorry (the penalty for following directions)

40. No links to save or print the active page

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

42. Is Windows Media Player in real "Compact" Mode?

43. How consistent can it be?

44. References