1. interaction design basics
chapter 4
interaction design basics

2. interaction design basics
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!

3. understand your materials فهم المواد الخاصة بك
1. WHAT IS DESIGN?
A simple definition is:
achieving goals within constraints
تحقيق الأهداف في حدود القيود
golden rule of design:
understand your materials
فهم المواد الخاصة بك

4. understand your materials
1. WHAT IS DESIGN?
understand your materials
understand computers
limitations, capacities, tools, platforms
understand people
psychological, social aspects
human error
and their interaction …

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

6. Steps … 2. THE PROCESS OF DESIGN: 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

7. who are they? probably not like you! talk to them watch them
3. USER FOCUS:
who are they?
probably not like you!
talk to them
watch them
use your imagination

8. 3. USER FOCUS:
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.

9. example persona 3. USER FOCUS:
Betty is 37 years old, She has been Warehouse Manager for five years and worked for Simpkins Brothers Engineering for twelve years. She didn’t 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).

10. 4. DESCRIBING TASKS
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.

11. EXAMPLE : Movie player
Brian would like to see the new film “Moments of Significance” and wants to invite Alison, but he knows she doesn’t 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. … … …

12. use scenarios to .. communicate with others validate other models
designers, clients, users
validate other models
‘play’ it against other models
express dynamics
screenshots – appearance
scenario – behaviour

13. A more formal definition than a scenario or story
4. DESCRIBING TASKS
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

14. Important: We want an “external view” of the system
User case modeling
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

15. A family (or set, or class) of scenarios
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

16. EXAMPLE : A LIBRARY SYSTEM
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

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.

18. Example UML use case diagram

19. Levels: widget choice screen design application navigation design
menus, buttons etc.
screen design
application navigation design
environment
other apps, O/S

20. THE WEB: elements and tags page design site structure
5. NAVIGATION DESIGN:
THE WEB:
widget choice
screen design
navigation design
environment
elements and tags
<a href=“...”>
page design
site structure
the web, browser, external links

21. PHYSICAL DEVICES: controls physical layout modes of device
5. NAVIGATION DESIGN:
PHYSICAL DEVICES:
controls
buttons, knobs, dials
physical layout
modes of device
the real world
widget choice
screen design
navigation design
environment

22. think about structure within a screen local global
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

23. 5. NAVIGATION DESIGN:
Local structure:
goal seeking
goal
start

24. Local structure: goal start 5. NAVIGATION DESIGN: goal seeking
progress with local knowledge only ...

25. Local structure: goal start 5. NAVIGATION DESIGN: goal seeking
… but can get to the goal

26. Local structure: goal start 5. NAVIGATION DESIGN: goal seeking
… try to avoid these bits!

27. Local structure: knowing where you are knowing what you can do
5. NAVIGATION DESIGN:
Local structure:
four golden rules
knowing where you are
knowing what you can do
knowing where you are going
or what will happen
knowing where you’ve been
or what you’ve done

28. hierarchical diagrams
5. NAVIGATION DESIGN:
Global structure:
hierarchical diagrams
the system
info and help
management
messages
add user
remove user

29. Global structure: 5. NAVIGATION DESIGN: Network diagrams main screen
remove
user
confirm
add user

30. Wider still…: style issues: functional issues navigation issues
5. NAVIGATION DESIGN:
Wider still…:
style issues:
platform standards, consistency
functional issues
cut and paste
navigation issues
embedded applications
links to other apps … the web

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

32. Grouping and structure:
6. SCREEN DESIGN AND LAYOUT:
Grouping and structure:
logically together  physically together
Billing details:
Name
Address: …
Credit card no
Delivery details:
Delivery time
Order details:
item quantity cost/item cost
size 10 screws (boxes)
…… … … …

33. Order of groups and items:
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!

34. 6. SCREEN DESIGN AND LAYOUT:
Decoration:
use boxes to group logical items
use fonts for emphasis, headings
but not too many!!
ABCDEFGHIJKLM
NOPQRSTUVWXYZ

35. 6. SCREEN DESIGN AND LAYOUT:
Alignment - text:
you read from left to right (English and European)
 align left hand side
boring but
readable!
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

36. 6. SCREEN DESIGN AND LAYOUT:
Alignment - names:
Usually scanning for surnames  make it easy!  
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
Dix , Alan
Finlay, Janet
Abowd, Gregory
Beale, Russell 
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale

37. 6. SCREEN DESIGN AND LAYOUT:
Alignment - numbers:
think purpose!
which is biggest?

38. 6. SCREEN DESIGN AND LAYOUT:
Alignment - numbers:
visually:
long number = big number
align decimal points
or right align integers

39. 6. SCREEN DESIGN AND LAYOUT:
Multiple columns:
scanning across gaps hard: (often hard to avoid with large data base fields)
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

40. 6. SCREEN DESIGN AND LAYOUT:
Multiple columns:
use leaders :
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

41. 6. SCREEN DESIGN AND LAYOUT:
Multiple columns:
or greying
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

42. 6. SCREEN DESIGN AND LAYOUT:
Multiple columns:
or even (with care!) ‘bad’ alignment
sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

43. 6. SCREEN DESIGN AND LAYOUT:
White space – space to separate:

44. 6. SCREEN DESIGN AND LAYOUT:
White space – space to structure: E F D B C A

45. 6. SCREEN DESIGN AND LAYOUT:
White space – space to highlight:

46. 6. SCREEN DESIGN AND LAYOUT:
Physical controls :
grouping of items
defrost settings
type of food
time to cook
defrost settings
type of food
time to cook

47. 6. SCREEN DESIGN AND LAYOUT:
Physical controls :
grouping of items
order of items
type of heating
temperature
time to cook
start 1
1) type of heating 2
2) temperature 3
3) time to cook 4
4) start

48. 6. SCREEN DESIGN AND LAYOUT:
Physical controls :
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)

49. 6. SCREEN DESIGN AND LAYOUT:
Physical controls :
grouping of items
order of items
decoration
alignment
centered text in buttons ? easy to scan ?
centred text in buttons
? easy to scan ?

50. 6. SCREEN DESIGN AND LAYOUT:
Physical controls :
grouping of items
order of items
decoration
alignment
white space
gaps to aid grouping
gaps to aid grouping

51. user action and control:
6. SCREEN DESIGN AND LAYOUT:
user action and control:
entering information
knowing what to do
affordances

52. entering information:
6. SCREEN DESIGN AND LAYOUT:
entering information:
Name:
Address:
Alan Dix
Lancaster
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

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

54. Affordances (إمكانيات الفعل):
6. SCREEN DESIGN AND LAYOUT:
Affordances (إمكانيات الفعل):
mug handle
psychological term
for physical objects
shape and size suggest actions
pick up, twist, throw
also cultural – buttons ‘afford’ pushing
for screen objects
button–like object ‘affords’ mouse click
physical-like objects suggest use
culture of computer use
icons ‘afford’ clicking
or even double clicking … not like real buttons!
‘affords’ grasping

55. Appropriate appearance:
6. SCREEN DESIGN AND LAYOUT:
Appropriate appearance:
presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation

56. Presenting information:
6. SCREEN DESIGN AND LAYOUT:
Presenting information:
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
chap10
chap5
chap1
chap14
chap20
chap8 … 12 16 17 22 27 32
name
size
chap1
chap10
chap11
chap12
chap13
chap14 … 17 12 51
262 83 22
size
name
size

57. Aesthetics and utility:
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

58. 6. SCREEN DESIGN AND LAYOUT:
Color and 3D:
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

59. 6. SCREEN DESIGN AND LAYOUT:
Across countries and cultures:
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  

60. 7. Iteration and Prototyping :
getting better …
… and starting well

61. 7. Iteration and Prototyping
((النماذج الأولية :
you never get it right first time
prototype
evaluate
design
re-design
done!
OK?

62. 7. Iteration and Prototyping
((النماذج الأولية :
Why do we prototype?
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

63. Fidelity in prototyping?
7. Iteration and Prototyping
((النماذج الأولية :
Fidelity in prototyping?
Fidelity refers to the level of detail „
High fidelity: „
prototype look like the final product
„ Low fidelity:
artists renditions with many details missing

64. 7. Iteration and Prototyping
((النماذج الأولية :
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

65. 7. Iteration and Prototyping
((النماذج الأولية :
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.

66. Low-fidelity prototype
7. Iteration and Prototyping
((النماذج الأولية :
Low-fidelity prototype
High-fidelity prototype

67. 7. Iteration and Prototyping
((النماذج الأولية :
Prototype
Advantages
Disadvantages
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