user interface design principles gabriel spitz 1 lecture # 4
TRANSCRIPT
User Interface Design Principles
Gabriel Spitz
1
Lecture # 4
Today
Why do we need UI design principles
List of UI design Principle
And - Show how they contribute to usability
Gabriel Spitz
2
What is a usable Product
A product that meet the 5 S of usable product Easy to learn – no need for special instructions or lots
of manuals Efficient – minimal number of steps to complete a task Effective – ability to complete tasks with no errors Engaging – fun to use Error tolerant – easy to recover from errors
Gabriel Spitz
3
Achieving Usability
A key approach to achieving good usability is to continuously iterate our design with users But iterations consume resources
To minimize the number of iterations we capitalize on our collective past experience to create as usable design as we can already on our first design cycle
Usability principles are our collective past experience and can help us maximize usability early in the design
Gabriel Spitz
4
Usability and Product Success
Gab
riel S
pit
z
5
MS BOB Renault 4 circa 1970
Users rejected anthropomorphisms Negative transfer of training resulting in many errors
• Ignoring usability can impact the bottom line and safety
What is a UI Design Principle
Knowledge gained from past design experience and usability studies about how to impact the usability indicators
It’s a guide post pointing the way to a usable design
It is not by itself an end or a rule
One should try and follow it when it makes sense, and deviate from it when needed
Gabriel Spitz
6
Key UI Design Principles
Gabriel Spitz
7
UI Design Principles
Know your user
Let the user control the interaction
Capitalize on what the user already knows
Maintain consistency at the interface
Provide effective feedback
Expose the interaction to the user
Minimize reliance on user memory
Minimize the impact of user error
Aesthetic matters
Always test your interface with users
Gabriel Spitz
8
1) Know Your User
S/he is not you
Effective user interface is one that is compatible with and focuses on users and their tasks. It considers: General human characteristics Characteristics of our application’s users
Domain specific vocabulary Computer literacy General education
Task specific characteristics of your users Touch typists Frequency of task performance
Gabriel Spitz
9
Self Check-In Kiosk
Gabriel Spitz
10
Designed for the general traveling population –
What can you assume about the users of this system?
2) Let the User Control the Interaction
People want to control their environment
Software applications should be designed to support the users, their task, and their interaction style
Constraining users’ action is fine
Controlling users’ action should be avoided
Controllability can impact user satisfaction
Gabriel Spitz
11
Gabriel Spitz
12
Let the user decide whether to continue or logout
Ways to Increase User Control
Don’t force users to perform a task in a predetermined way Allow Select & than create an account or vice versa
Always allow users to change their mind cancel out
Allow users to save partial work such as forms
Gabriel Spitz
13
3) Capitalize on what Users Know
Using metaphors or familiar idioms (cut & paste) at the interface will enable users to instantly understand the details of the application
Reusing knowledge will significantly reduce the amount of learning needed to achieve proficiency
Gabriel Spitz
14
Using Metaphor– CD Control
Gabriel Spitz
15
Using Metaphor - PIM
Gabriel Spitz
16
4) Maintain Consistency
Consistency enables users to anticipate events and reuse learned behaviors -Positive Transfer
It is achieved by reusing UI design patterns within and between applications Complying with standards or guidelines for example
Reuse of knowledge reduces learning and enhances performance
Gabriel Spitz
17
Consistent Menu and Tool Bars
Gabriel Spitz
18
Consistency is not Always Good
Gabriel Spitz
19
Usability is maximized by reusing usable elements – Duplicating bad design will result in a consistently bad design
This is a poor design for water temperature control and rinsing soapy hands
When Inconsistency is Good
Inconsistent pattern or design can be used to attract user attention and prevent an automated response e.g., The delete dialog box
Gabriel Spitz
20
5) Provide Effective Feedback
Feedback closes the action loop and “enables” the user to continue with his/her task or sequence of actions
Effective feedback is feedback that is provided to users: Immediately following their action At an appropriate level
E.g., Action, Context, System state level At an appropriate place
E.g., at the locus of attention
Feedback improves performance and learning
Gabriel Spitz
21
Effective Feedback
Gabriel Spitz
22
6) “Expose” the Interaction to the User
Let the user see clearly the functions that are available at the interface
Exposing the interaction facilitates learning and performance
Recall the action Model by D. Norman
Gabriel Spitz
23
Poor Visibility
Gabriel Spitz
24
7) Minimize Reliance on Memory
Ability of users to recall commands, object names, sequence of actions, etc. is limited
Make the interface visual with limited reliance on recall
Allow selection rather than relying on users to remember a command or object name
Exceeding memory limits hinders performance-errors and speed
Gabriel Spitz
25
Supporting Memory Limitation
Gabriel Spitz
26
One way of supporting memory limitation is to use name recognition
Supporting Memory Limitation
Gabriel Spitz
27
A better way of supporting memory limitation is to capitalize on both name recognition and visual recognition
Supporting Memory Limitation
Gabriel Spitz
28
Another way of supporting memory limitation with both name recognition and visual recognition
8) Minimize the Impact of Error
Cost of errors impacts user performance We are all afraid to err or loose our work
When possible enable users to reverse their actions Undo Confirm delete
Else, limit the cost of error Auto Save
But don’t over protect the user
Easy recovery from errors enhances user satisfaction and performance
Gabriel Spitz
29
9) Aesthetics Matter
Consider function first, form later But don’t ignore form
Form or presentation often sets the moods of the user which in turns impacts users’ experience
Form or presentation facilitates: Visual scanning of a dialog box, window, page Location or detection of objects
Aesthetics enhances user satisfaction and performance
Gabriel Spitz
30
Poor Aesthetics
Gabriel Spitz
31
Poor alignment
Inconsistent use of colors
Also poor task flow
Use of color to convey information in the interface should be accompanied with clear secondary cues
If red vs. green is the only way to tell which section is within bounds, about 6% of all users will have trouble telling the difference (9% Male, 2% Female)
Everyone is colorblind in low light
Gabriel Spitz
32
Use Colors carefully
10) Always Test Your Interface
We don’t have strong models of the human operator/user
We can not predict (but can anticipate) how certain design attributes will effect performance or satisfaction
We use testing to assess and refine our designs
Gabriel Spitz
33
Main Points
Effective interaction design is built on understanding how human act and the factors that impact human activity within a given context
Many of these factors have been captured by UI design principles
Adhering to these design principles will significantly enhance the usability of an interface
Gabriel Spitz
34
Summary
UI design principles are important design-aid
Don’t sign off on a design without verifying that your design meets the above UI design principles
Different UI designers have their own set of key design principles, but more often than not there is an overlap among the various sets
Gabriel Spitz
35