User Interface Design
Overview
• The Developer’s Responsibilities• Goals and Considerations of UI Design• Common UI Methods• A UI Design Process• Guidelines
+ Helpful Resources
The Developer’s Responsibilities
Software engineers must often take responsibility for user
interface design
Only large organizations normally employ special interface
designers
Technologies for GUIs
• Java Swing
• Win32/MFC
• HTML
• QT
• GTK
• Aqua
Programmers may be proficient using these
technologies
However, the UIs they develop are often unattractive and
inappropriate for their target users
Good user interface design is critical for system
dependability
Many “user errors” are caused by user interfaces that don’t consider
the capabilities of real users in their working environments
Goals and Considerations of UI Design
Important Factors to Keep in Mind when Creating UIs
• People have limited short-term memory
• We all make mistakes
• We have a diverse range of physical capabilities
• We have different interaction preferences
People have limited short-term memory
• We can instantaneously remember about seven items of information
• If you present too much information to the user at once, he/she may not be able to take it all in
We all make mistakes
• Especially when we have to handle too much information, or are stressed
• When systems go wrong and issue warning messages and alarms, this often puts more stress on the user
We have a diverse range of physical capabilities
• Some people see and hear better than others
• Some people are color-blind
• Some people are better than others at physical manipulation
• Don’t design for just your own capabilities
We have different interaction preferences
• Some people like to work with pictures
• Others, with text
• Direct manipulation is natural for some
• Others like command-oriented systems
Basic Considerations of UI Design
• User familiarity
• Consistency
• Minimal surprise
• Recoverability
• User guidance
• User diversity
User familiarity
• The interface should use terms and concepts drawn from the experience of the people who will make the most use of the system
Consistency
• The interface should be consistent in that, wherever possible, comparable operations should be activated in the same way
Minimal surprise
• Users should never be surprised by the behavior of a system
Recoverability
• The interface should include mechanisms to allow users to recover from errors
• Confirmation of destructive actions
• Undo/Multiple-Undo (checkpointing)
User guidance
• The interface should provide meaningful feedback when errors occur and provide context-sensitive user help facilities
User diversity
• The interface should provide appropriate interaction facilities for different types of system users
Common UI Methods
Five Common Approaches for User Interaction
• Direct manipulation
• Menu selection
• Form fill-in
• Command language
• Natural language
Direct manipulation
• The user interacts directly with objects on the screen
• Usually involves a pointing device (mouse, stylus, touchpad/finger)
Menu selection
• Possible commands are categorized and listed in menus
• So the user doesn’t have to remember exact command syntax
Form fill-in
• The user fills in fields of a form
• Some fields have associated menus and/or action buttons
Command language
• Similar to command-line input
• The user enters a command and possibly a list of parameters
Natural language
• Similar to command language, except that the language is more flexible (I.e. English)
• This could also be used for spoken interfaces
Interactionstyle
Main advantages Main disadvantages Applicationexamples
Directmanipulation
Fast and intuitiveinteractionEasy to learn
May be hard to implement.Only suitable where there is avisual metaphor for tasks andobjects.
Video gamesCAD systems
Menuselection
Avoids user errorLittle typing required
Slow for experienced users.Can become complex if manymenu options.
Most general-purpose systems
Form fill-in Simple data entryEasy to learnCheckable
Takes up a lot of screen space.Causes problems where useroptions do not match the formfields.
Stock control,Personal loanprocessing
Commandlanguage
Powerful and flexible Hard to learn.Poor error management.
Operating systems,Command andcontrol systems
Naturallanguage
Accessible to casualusersEasily extended
Requires more typing.Natural language understandingsystems are unreliable.
Informationretrieval systems
A GUI Design Process
UI design is an iterative process where users interact with designers and prototypes
Decide on features, organization, and the look-and-feel of the
system user interface
ExecutableprototypeDesignprototypeProduce paper-based designprototypeProducedynamic designprototype
Evaluate designwith end-usersImplementfinal userinterfaceEvaluate designwith end-usersAnalyse andunderstanduser activities
Guidelines
Presenting information? Answer the following
• Is the user interested in precise information or in the relationships between data values?
• How quickly do the information values change? Should the change value be indicated immediately to the user?
• Must the user take some action in response to a change in information?
• Does the user need to interact with the displayed information via a direct manipulation interface?
• Is the information to be displayed textual or numeric? Are relative values of information items important?
Text vs. Graphics
• Text requires less space and is more precise, but cannot be interpreted at a glance
• Graphics are useful for data that changes quickly or when relationships between data values are more important than precise values
Guidelines for Using Color
• Limit the number of colors– 4 to 5 in a window
– ≤ 7 in a system interface
• Use color change to show a change in system status
• Use color coding to support tasks– Highlight anomalies and/or similarities
– Be consistent and thoughtful
• Be careful about color pairing
Factor Description
Context Wherever possible, the messages generated by the system should reflect the currentuser context. As far as is possible, the system should be aware of what the user is doingand should generate messages that are relevant to their current activity.
Experience As u sers become familiar with a s ystem they become irritated by long, ‘meaningful’messages. However, beginners find it difficult to understand short terse statements of aproblem. You should provide both types of message and allow the user to controlmessage conciseness.
Skill level Messages should be tailored to the user’s skills as well as their experience. Messagesfor the different classes of user may be expressed in d ifferent ways depending on theterminology that is familiar to the reader.
Style Messages should be positive rather than negative. They should use the active ratherthan the passive mode of address. They should never be insulting or try to be funny.
Culture Wherever possible, the designer of messages should be familiar with the culture of thecountry where the system is sold. There are distinct cultural differences betweenEurope, Asia and America. A su itable message for one culture might be unacceptablein another.
Error Messages
Error Messages: A Video Clip
• WWDC 2003 Disc #1, Session 001, 15:08 - 17:45
Guidelines for Layout
• See Apple Human Interface Guidelines and MSDN User Interface Guidelines
– Links on Software Engineering website
Layout: A Video Clip
• WWDC 2003 Disc #1, Session 001, 22:00 - 32:47
Cross-Platform Best Practices
• Be consistent yet adaptive
• Provide identical functionality
• Deliver a platform-appropriate experience
• Deliver platform-appropriate behaviors
• Leverage platform strengths
• Embrace file name extensions and their display name
• Avoid lowest common denominator user experience
Overall, Good Design: A Video Clip
• WWDC 2003 Disc #1, Session 001, 17:45 - 21:15