design: what it is, interventions, goals, constraints the
design process what happens when users who they are, what they are
like scenarios rich stories of design navigation finding your way
around a system iteration and prototypes never get it right first
time! 2
Slide 3
1. WHAT IS DESIGN? A simple definition is: achieving goals
within constraints golden rule of design: understand your materials
3
Slide 4
1. WHAT IS DESIGN? understand your materials understand
computers limitations, capacities, tools, platforms understand
people psychological, social aspects human error and their
interaction 4
Slide 5
2. THE PROCESS OF DESIGN: what is there vs. what is wanted
guidelines principles dialogue notations precise specification
architectures documentation help evaluation heuristics scenarios
task analysis Requirements analysis design implement and deploy
prototype 5
Slide 6
2. THE PROCESS OF DESIGN: Steps Requirements ( ) what is there
and what is wanted Analysis ( ) ordering and understanding Design (
) what to do and how to decide Iteration and prototyping ( )
getting it right and finding what is really needed! implementation
and deployment ( ) making it and getting it out there 6
Slide 7
3. USER FOCUS: who are they? probably not like you! talk to
them watch them use your imagination 7
Slide 8
One method that has been quite successful in helping design
teams produce userfocussed designs is the persona. A persona is a
rich picture of an imaginary person who represents your core user
group. 3. USER FOCUS: 8
Slide 9
example persona Betty is 37 years old, She has been Warehouse
Manager for five years and worked for Simpkins Brothers Engineering
for twelve years. She didnt go to university, but has studied in
her evenings for a business diploma. She has two children aged 15
and 7 and does not like to work late. She did part of an
introductory in- house computer course some years ago, but it was
interrupted when she was promoted and could no longer afford to
take the time. Her vision is perfect, but her right-hand movement
is slightly restricted following an industrial accident 3 years
ago. She is enthusiastic about her work and is happy to delegate
responsibility and take suggestions from her staff. However, she
does feel threatened by the introduction of yet another new
computer system (the third in her time at SBE). 9
Slide 10
A.Scenarios: Scenarios are stories for design: rich stories of
interaction. They are perhaps the simplest design representation,
but one of the most flexible and powerful. 10 4. DESCRIBING
TASKS
Slide 11
Brian would like to see the new film Moments of Significance
and wants to invite Alison, but he knows she doesnt like arty
films. He decides to take a look at it to see if she would like it
and so connects to one of the movie sharing networks. He uses his
work machine as it has a higher bandwidth connection, but feels a
bit guilty. He knows he will be getting an illegal copy of the
film, but decides it is OK as he is intending to go to the cinema
to watch it. After it downloads to his machine he takes out his new
personal movie player. He presses the menu button and on the small
LCD screen he scrolls using the arrow keys to Bluetooth connect and
presses the select button. On his computer the movie download
program now has an icon showing that it has recognized a compatible
device and he drags the icon of the film over the icon for the
player. On the player the LCD screen says downloading now, a
percent done indicator and small whirling icon. EXAMPLE : Movie
player 11
Slide 12
use scenarios to.. communicate with others designers, clients,
users validate other models play it against other models express
dynamics screenshots appearance scenario behaviour 12
Slide 13
B.Use case: A more formal definition than a scenario or story
From OO techniques, including UML, OOSE, etc. Note terms in text:
task scenario concrete use case essential use case use scenario 13
4. DESCRIBING TASKS
Slide 14
Use Case: A sequence of actions a system performs to yield an
observable result of value to a particular actor. Actor: Someone or
something outside the system that interacts with the system A user
of the system in a particular role Part of Use Case Modeling is
identifying and describing actors Important: We want an external
view of the system 14 User case modeling
Slide 15
Each use case has a name e.g. Borrow Copy of Book A family (or
set, or class) of scenarios One main scenario for normal behavior
or situation A sequence of interactions documenting Also set of
different but related scenarios Documenting Use Cases (Maybe) A UML
Diagram showing all of them - Actors are stick-figures; use cases
are ovals (Certainly) For each use case define using English - A
clear textual description (like a stories, a scenarios) - A set of
scenarios in outline form 15
Slide 16
Actors - BookBorrower - JournalBorrower - Browser (person who
browses, not software) - Librarian Use Cases - Borrow copy of a
book - Reserve a book - Return copy of book - Borrow journal -
Browse - Update Catalog EXAMPLE : A LIBRARY SYSTEM 16
Slide 17
Example Text Description Borrow copy of a book: A Bookborrower
presents a copy of a book. The system checks that the s/he is a
library member, and that s/he has not checked out too many books.
If both checks succeed, then the system records that the member now
as this copy of the book. Otherwise it refuses the loan. 17
Slide 18
Example UML use case diagram 18
Slide 19
5. NAVIGATION DESIGN: Levels: widget choice menus, buttons etc.
screen design application navigation design environment other apps,
O/S 19
Slide 20
5. NAVIGATION DESIGN: THE WEB: widget choice screen design
navigation design environment elements and tags page design site
structure the web, browser, external links 20
Slide 21
5. NAVIGATION DESIGN: PHYSICAL DEVICES: widget choice screen
design navigation design environment controls buttons, knobs, dials
physical layout modes of device the real world 21
Slide 22
5. NAVIGATION DESIGN: think about structure within a screen
local looking from this screen out global structure of site,
movement between screens relationship with other applications
22
Slide 23
goal seeking goal start 5. NAVIGATION DESIGN: Local structure:
Local structure: 23
Slide 24
start goal progress with local knowledge only... 5. NAVIGATION
DESIGN: goal seeking Local structure: Local structure: 24
Slide 25
goal start but can get to the goal 5. NAVIGATION DESIGN: goal
seeking Local structure: Local structure: 25
Slide 26
try to avoid these bits! goal start 5. NAVIGATION DESIGN: goal
seeking Local structure: Local structure: 26
Slide 27
four golden rules knowing where you are knowing what you can do
knowing where you are going or what will happen knowing where youve
been or what youve done 5. NAVIGATION DESIGN: Local structure:
Local structure: 27
Slide 28
5. NAVIGATION DESIGN: Global structure: Global structure:
hierarchical diagrams the system info and helpmanagementmessages
add userremove user 28
Slide 29
5. NAVIGATION DESIGN: Global structure: Global structure:
Network diagrams main screen remove user confirm add user 29
Slide 30
5. NAVIGATION DESIGN: Wider still: Wider still: style issues:
platform standards, consistency functional issues cut and paste
navigation issues embedded applications links to other apps the web
30
Slide 31
6. SCREEN DESIGN AND LAYOUT: available tools: grouping of items
order of items decoration - fonts, boxes etc. alignment of items
white space between items 31
Slide 32
6. SCREEN DESIGN AND LAYOUT: Grouping and structure: logically
together physically together Billing details: Name Address: Credit
card no Delivery details: Name Address: Delivery time Order
details: item quantity cost/item cost size 10 screws (boxes) 7 3.71
25.97 32
Slide 33
6. SCREEN DESIGN AND LAYOUT: Order of groups and items: think!
- what is natural order should match screen order! use boxes, space
etc. set up tabbing right! 33
Slide 34
6. SCREEN DESIGN AND LAYOUT: Decoration: use boxes to group
logical items use fonts for emphasis, headings but not too many!!
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ 34
Slide 35
6. SCREEN DESIGN AND LAYOUT: Alignment - text: you read from
left to right (English and European) align left hand side Willy
Wonka and the Chocolate Factory Winston Churchill - A Biography
Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate
Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior
Princess fine for special effects but hard to scan boring but
readable! 35
Slide 36
6. SCREEN DESIGN AND LAYOUT: Alignment - names: Usually
scanning for surnames make it easy! Alan Dix Janet Finlay Gregory
Abowd Russell Beale Alan Dix Janet Finlay Gregory Abowd Russell
Beale Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell 36
Slide 37
6. SCREEN DESIGN AND LAYOUT: Alignment - numbers: think
purpose! which is biggest? 532.56 179.3 256.317 15 73.948 1035
3.142 497.6256 37
Slide 38
6. SCREEN DESIGN AND LAYOUT: Alignment - numbers: visually:
long number = big number align decimal points or right align
integers 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87
56.34 38
Slide 39
scanning across gaps hard: (often hard to avoid with large data
base fields) sherbert75 toffee120 chocolate35 fruit gums27 coconut
dreams85 6. SCREEN DESIGN AND LAYOUT: Multiple columns: 39
Slide 40
use leaders : sherbert75 toffee120 chocolate35 fruit gums27
coconut dreams85 6. SCREEN DESIGN AND LAYOUT: Multiple columns:
40
Slide 41
or greying sherbert75 toffee120 chocolate35 fruit gums27
coconut dreams85 6. SCREEN DESIGN AND LAYOUT: Multiple columns:
41
Slide 42
sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85
6. SCREEN DESIGN AND LAYOUT: Multiple columns: or even (with care!)
bad alignment 42
Slide 43
6. SCREEN DESIGN AND LAYOUT: White space space to separate:
43
Slide 44
6. SCREEN DESIGN AND LAYOUT: White space space to structure: EF
D BC A 44
Slide 45
6. SCREEN DESIGN AND LAYOUT: White space space to highlight:
45
Slide 46
6. SCREEN DESIGN AND LAYOUT: Physical controls : grouping of
items defrost settings type of food time to cook type of food time
to cook defrost settings 46
Slide 47
grouping of items order of items 1) type of heating 2)
temperature 3) time to cook 4) start 4 2 2)temperature 3 3)time to
cook 1 1)type of heating 6. SCREEN DESIGN AND LAYOUT: Physical
controls : 47
Slide 48
grouping of items order of items decoration different colours
for different functions lines around related buttons different
colours for different functions lines around related buttons (temp
up/down) 6. SCREEN DESIGN AND LAYOUT: Physical controls : 48
Slide 49
grouping of items order of items decoration alignment centered
text in buttons ? easy to scan ? ? easy to scan ? centred text in
buttons 6. SCREEN DESIGN AND LAYOUT: Physical controls : 49
Slide 50
grouping of items order of items decoration alignment white
space gaps to aid grouping 6. SCREEN DESIGN AND LAYOUT: Physical
controls : 50
Slide 51
6. SCREEN DESIGN AND LAYOUT: user action and control: entering
information knowing what to do affordances 51
Slide 52
6. SCREEN DESIGN AND LAYOUT: entering information: forms,
dialogue boxes presentation + data input similar layout issues
alignment - N.B. different label lengths logical layout use task
analysis groupings natural order for entering information
top-bottom, left-right (depending on culture) Name: Address: Alan
Dix Lancaster Name: Address: Alan Dix Lancaster Name: Address: Alan
Dix Lancaster ? 52
Slide 53
6. SCREEN DESIGN AND LAYOUT: Knowing what to do: what is active
what is passive where do you click where do you type consistent
style helps e.g. web underlined links labels and icons standards
for common actions language bold = current state or action 53
Slide 54
6. SCREEN DESIGN AND LAYOUT: Affordances ( ): psychological
term for physical objects shape and size suggest actions pick up,
twist, throw also cultural buttons afford pushing for screen
objects buttonlike object affords mouse click physical-like objects
suggest use culture of computer use icons afford clicking or even
double clicking not like real buttons! mug handle affords grasping
54
Slide 55
6. SCREEN DESIGN AND LAYOUT: Appropriate appearance: presenting
information aesthetics and utility colour and 3D localisation &
internationalisation 55
Slide 56
6. SCREEN DESIGN AND LAYOUT: purpose matters sort order (which
column, numeric alphabetic) text vs. diagram scatter graph vs.
histogram use paper presentation principles! but add interactivity
softens design choices e.g. re-ordering columns chap1 chap10 chap11
chap12 chap13 chap14 17 12 51 262 83 22 sizename size chap10 chap5
chap1 chap14 chap20 chap8 12 16 17 22 27 32 namesize Presenting
information: 56
Slide 57
6. SCREEN DESIGN AND LAYOUT: Aesthetics and utility:
aesthetically pleasing designs increase user satisfaction and
improve productivity beauty and utility may conflict mixed up
visual styles easy to distinguish clean design little
differentiation confusing backgrounds behind text good to look at,
but hard to read but can work together 57
Slide 58
both often used very badly! colour older monitors limited
palette beware colour blind! use sparingly to reinforce other
information 3D effects good for physical information and some
graphs 6. SCREEN DESIGN AND LAYOUT: Color and 3D: 58
Slide 59
localisation & internationalisation changing interfaces for
particular cultures/languages globalisation try to choose symbols
etc. that work everywhere simply change language? use resource
database instead of literal text but changes sizes, left-right
order etc. deeper issues cultural assumptions and values meanings
of symbols e.g tick and cross +ve and -ve in some cultures but mean
the same thing (mark this) in others 6. SCREEN DESIGN AND LAYOUT:
Across countries and cultures: 59
Slide 60
7. Iteration and Prototyping : getting better and starting well
60
Slide 61
7. Iteration and Prototyping (( : you never get it right first
time prototypeevaluatedesign re-design done! OK? 61
Slide 62
7. Iteration and Prototyping (( : Why do we prototype? 62 Get
feedback on our design faster - saves money Experiment with
alternative designs Fix problems before code is written Keep the
design centered on the customer
Slide 63
7. Iteration and Prototyping (( : Fidelity in prototyping? 63
Fidelity refers to the level of detail High fidelity: prototype
look like the final product Low fidelity: artists renditions with
many details missing
Slide 64
7. Iteration and Prototyping (( : 64 High fidelity: Choice of
materials and methods similar or identical to the ones in the final
product Looks more like the final system appearance, not
functionality Common development environments Macromedia Director,
Visual Basic, Smalltalk,web development tools Misled user
expectations users may think they have a full system
Slide 65
7. Iteration and Prototyping (( : 65 low fidelity: Does not
look very much like the final product Uses materials that are very
different from the intended final version, such as paper and
cardboard rather than electronic screens and metal Used during
early stages of development Cheap and easy to modify so they
support the exploration of alternative designs and ideas It is
never intended to be integrated into the final system. They are for
exploration only.
7. Iteration and Prototyping (( : 67
PrototypeAdvantagesDisadvantages Low-fidelity prototype - low
developmental cost - evaluate multiple design concepts - limited
error checking - navigational and flow limitations High-fidelity
prototype - fully interactive - look and feel of final product -
clearly defines navigational scheme - more expensive to develop -
time consuming to build - developers are reluctant to change
something they have crafted for hours