Screen design and layout
Generic design guidelines
Readings:
Dix et al:
Chapter 5. Section on Screen Design and Layout
Chapter 7. Section 7.5 on Golden Rules and
Heuristics (Schneiderman + Norman)
1
Basic principles at the screen level
{ Ask: What is the user doing
{ Think: What information is required
{ Design: Form follows function
2
Tools for layout
{ grouping of items
{ order of items
{ decoration - fonts, boxes etc.
{ alignment of items
{ white space between items
Key issue: combining structure and style
3
grouping and structure
logically together ⇒ physically together
Billing details: Delivery details:
Name Name
Address: … Address: …
Credit card no Delivery time
Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
4
Grouping for data comparison
5
Order of groups and items
{ Group data by the natural sequence of use
(from task analysis, HTA)
{ Flow of control –how users progress
through a screen when doing their work
{ Flow of control means that the focus of
activity moves across a screen or page
while the user performs a certain task.
{ Flow of control is important for
{ (1) efficiency in performing a task
{ (2) transparency and understandability of a
screen or page.
6
From Gerd Waloszek, [Link]
A “natural” flow of control
{ cultural constraints
{ for Western cultures the natural flow is
from left to right and from top to bottom
Which flow of control is correct?
7
From Gerd Waloszek, [Link]
Layout Hierarchy
{ use boxes to group logical items
{ use fonts for emphasize groupings,
headings
{ but not too many!!
ABCDEF*HIJKLM
NOPQR VWXYZ
8
From Gerd Waloszek, [Link]
Containers and non-containers
{ Screen or page elements can either be containers
or non-containers.
{ containers can contain other elements; non-
containers cannot.
! Too much nesting can visually overload a page
9
From Gerd Waloszek, [Link]
A simple application pattern
Area on the left: overview list (affords for selecting
a certain item)
The selected item is displayed in the upper right
area: it may contain other sub-items (nesting)
Details of the selected item (or its sub-items) can
be inspected in the lower right area.
10
From Gerd Waloszek, [Link]
A real-world web application
11
Decoration: changing the look but not
the concept
12
From Gerd Waloszek, [Link]
Decoration: changing the look but not
the concept
13
From Gerd Waloszek, [Link]
Decoration: changing the look but not
the concept
14
Simplicity
{ “Perfection is achieved not when there is
nothing more to add, but when there is
nothing left to take away” (Antoine de St-
Exupery)
{ “Simplicity does not mean the absence of
any decor…It only means that the decor
should be belong intimately to the design
proper, and that anything foreign to it
should be taken away”
{ “Keep it simple, stupid” (KISS)
15
Techniques for simplicity: reduction
{ Remove inessential elements
{ Decide what essentially needs to be conveyed by
design
{ Examine every element (label, control, color, line
width) to decide whether it serves an essential
purpose
{ Remove it if it is not essential
16
from Dr. Miller’s Lecture notes on UI Design and Implementation, MIT 2005.
Techniques for simplicity: regularity
{ Use a regular pattern in your screen layout
z Use same font, color, line width, dimensions,
orientation for items at an equal hierarchical
level.
{ Limit inessential variation among elements
Why?
- irregularities in your design will be magnified in the
user’s eyes and assigned meaning and significance.
17
from Dr. Miller’s Lecture notes on UI Design and Implementation, MIT 2005.
Techniques for simplicity: double-duty
{ Combine elements and make them
serve multiple roles in the design
{ Example: scroll bar thumb
z affords for dragging
z indicates the position of the scroll window
relative to the entire document
z indicates the fraction of the document
displayed in the scroll window.
18
from Dr. Miller’s Lecture notes on UI Design and Implementation, MIT 2005.
White space
{ Essential role in screen layout
{ Real estate issue vs insufficient white space
{ Use margins to draw eye around design
{ Integrate figure and ground
z Object should be scaled proportionally to its
background
{ Don’t crowd controls together
z Crowding creates spatial tension and inhibits
scanning
19
from Dr. Miller’s Lecture notes on UI Design and Implementation, MIT 2005.
Crowded dialog
20
from Dr. Miller’s Lecture notes on UI Design and Implementation, MIT 2005.
Interface Design and Usability Engineering
Articulate: Brainstorm Refined Completed
•who users are designs designs designs
Goals: •their key tasks
Task
Psychology of Participatory Graphical
centered
everyday interaction screen
system
Evaluate things design Usability Field
design
tasks User involvement Interface testing testing
Methods: Participatory Task scenario guidelines
design Representation & walk-
metaphors through Style Heuristic
User-
guides evaluation
centered
design
low fidelity high fidelity
prototyping prototyping
methods methods
Products: User and Throw-away Testable Alpha/beta
task paper prototypes systems or
descriptions prototypes complete
specification
21
From Dr. Greenberg Lecture Notes, University of Calgary
Design guidelines
{ Readings: Dix 7.5
22
Heuristics=usability guidelines
{ Plenty to choose from
z Nielsen’s 10 principles
z Norman’s rules from Design of Everyday
Things
z Schneiderman’s eight golden rules
z Mac, Windows guidelines
{ Help designers choose design alternatives
{ Help evaluators find problems in
interfaces (“heuristic evaluation”)
23
from Dr. Miller’s Lecture notes on UI Design and Implementation, MIT 2005.
Guidelines from earlier lectures
{ User-centred design
z Know your users
z Understand their task
{ Fitz’s Law
z Tiny controls are hard to hit
z Screen edges are precious
{ Colour guidelines
z Don’t depend solely on colour cues (colour
blindness)
z Avoid red on blue text (chromatic aberration)
{ Memory: use chunking to simplify information
presentation
z Minimize working memory
z Recognition rather than recall
{ Schneiderman’s principles in direct manipulation
Adapted from Dr. Miller’s Lecture notes on UI Design and Implementation, 24
MIT 2005.
Schneiderman’s eight golden rules
1. Strive for consistency
z Consistent sequences of actions should be
required in similar situations;
z identical terminology should be used in prompts,
menus, and help screens;
z consistent commands should be employed
throughout.
25
Schneiderman’s eight golden rules
{ Kinds of consistency: internal, external,
metaphorical
Adapted from Dr. Miller’s Lecture notes on UI Design and Implementation, 26
MIT 2005.
Adapted from Dr. Miller’s Lecture notes on UI Design and Implementation,
MIT 2005.
Schneiderman’s eight golden rules
2. Enable frequent users to use shortcuts.
{ Shortcuts should be easy to learn (keyboard
accelerators, command abbreviations,
bookmarks, history)
{ Hall of Shame example:
Explorer (Windows 95)
27
Adapted from Dr. Miller’s Lecture notes on UI Design and Implementation,
MIT 2005.
Schneiderman’s eight golden rules
3. Offer informative feedback for every user
action
z Keep user informed of system state:
{ Cursor change
{ Selection highlight
{ Status bar
{ Don’t overdo it…
{ Response time:
z <0.1 s: seems instantaneous
z 0.1 – 1 s: user notices, but no feedback is needed
z 1-5 s: display busy cursor
z >1-5 s: display progress bar
28
Schneiderman’s eight golden rules
{ 4. Design dialogs to yield closure
{ Sequences of actions should be organized into
groups with a beginning, middle, and end.
{ Ex:
{ The informative feedback at the completion of a
group of actions gives the operators the
satisfaction of accomplishment, a sense of relief,
the signal to drop contingency plans and options
from their minds
{ It is also an indication that the way is clear to
prepare for the next group of actions.
29
Schneiderman’s eight golden rules
5. Error prevention and handling
{ Selection is less error-prone than typing
{ But don’t overdo it…
{ Disable illegal commands (gray-out)
{ Keep dangerous commands away from common
ones
Adapted from Dr. Miller’s Lecture notes on UI Design and Implementation, 30
MIT 2005.
Schneiderman eight golden rules
{ Error messages
z Be precise: restate user’s input
{ Not “cannot open file” but “Cannot open
file named [Link]”
z Give constructive help
{ Why error occurred and how to fix it
z Be polite and non-blaming
{ Not fatal error, not illegal
z Hide technical details until requested
Adapted from Dr. Miller’s Lecture notes on UI Design and Implementation, 31
MIT 2005.
Source: Interface Hall of Shame
32
Schneiderman’s eight golden rules
{ 6. Permit easy reversal of actions
{ Relieves anxiety
{ Encourages exploration of unfamiliar
options
{ Dimensions of reversibility:
z a single action,
z a data entry,
z a complete group of actions.
33
Schneiderman’s eight golden rules
{ 7. Support internal locus of control
{ The user should be in control of the system, which
should respond to his actions.
{ Long operations should be cancelable
{ All dialogs should have a cancel button
34
Schneiderman’s eight golden rules
{ 8. Reduce short-term memory load
z Keep displays simple
z Consolidate multiple-pages display
z Provide time for learning action sequences
z Recognition, not recall
{ Use menus, not command languages
{ Use generic commands when possible (Open,
Save, Copy, Paste)
{ All needed information should be visible
Adapted from Dr. Miller’s Lecture notes on UI Design and Implementation, 35
MIT 2005.
Schneiderman’s eight golden rules
36
Interface Design and Usability Engineering
Articulate: Brainstorm Refined Completed
Goals: •who users are designs designs designs
•their key tasks
Task
Psychology of Participatory Graphical
centered
everyday interaction screen
system
Evaluate things design Usability Field
design
tasks User involvement Interface testing testing
Methods: Participatory Task scenario guidelines
design Representation & walk-
metaphors through Style Heuristic
User-
guides evaluation
centered
design
low fidelity high fidelity
prototyping prototyping
methods methods
Products: User and Throw-away Testable Alpha/beta
task paper prototypes systems or
descriptions prototypes complete
specification
37
From Dr. Greenberg Lecture Notes, University of Calgary
Sample questions for graphical design and screen
layout
List two techniques for achieving greater simplicity in
graphical design:
• Reduction; regularity; using the same element for multiple
purposes
• Observe carefully the two design alternatives below. Which
design scheme is better? Justify your response by using
concepts related to graphic design and screen layout.
38
Sample questions for generic design
guidelines
{ Define internal, external, and metaphorical
consistency. You don’t need to give
examples.
{ State four out of the eight golden rules
from Shneiderman’s heuristics. Their
names are enough.
{ Long question: analyze a given UI (or a
prototype) using generic design guidelines
(heuristic rules)
39