1. Interaction Design Basics– Part I
Lecture
Interaction Design
Basics– Part I

2. Today’s Outline Interaction Design Basics
Interactions And Intervention
what is design
Persona
Central message
The process of design

3. HCI Focus of Design
Some of HCI is focused on understanding: the academic study of the way people interact with technology.
However, a large part of HCI is about doing things and making things that is called a design.

4. 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!

5. Interactions And Interventions
design interactions not just interfaces
not just the immediate interaction
e.g. stapler in office – technology changes interaction style
manual: write, print, staple, write, print, staple, …
electric: write, print, write, print, …, staple
designing interventions not just artefacts
not just the system, but also …
documentation, manuals, tutorials
what we say and do as well as what we make

6. what is design? Achieving goals within constraints goals - purpose
who is it for, why do they want it
constraints
materials, platforms
trade-offs

7. Goal What is the purpose of the design we are intending to produce?
Who is it for?
Why do they want it?
For example, if we are designing a wireless personal movie player, we may think about young affluent users wanting to watch the latest movies whilst on the move and download free copies, and perhaps wanting to share the experience with a few friends.

8. Constraints What materials must we use? What standards must we adopt?
How much can it cost?
How much time do we have to develop it?
Are there health and safety issues?
In the case of the personal movie player: does it have to withstand rain?
Must we use existing video standards to download movies?
Do we need to build in copyright protection?

9. Trade-off
Choosing which goals or constraints can be relaxed so that others can be met.
For example, we might find that an eye-mounted video display, a bit like those used in virtual reality, would give the most stable image whilst walking along.
However, this would not allow you to show friends, and might be dangerous if you were watching a attention-grabbing part of the movie as you crossed the road.

10. Golden Rule Of Design
Part of the understanding we need is about the circumstances and context of the particular design problem. We will return to this later in the chapter. However, there are also more generic concepts to understand. The designs we produce may be different, but often the raw materials are the same. This leads us to the golden rule of design:
Understand your materials

11. For Human–Computer Interaction
Understand your materials
understand computers
limitations, capacities, tools, platforms
understand people
psychological, social aspects
human error
and their interaction …

12. To err is human accident reports .. but … human ‘error’ is normal
aircrash, industrial accident, hospital mistake
enquiry … blames … ‘human error’
but …
concrete lintel breaks because too much weight
blame ‘lintel error’ ? … no – design error we know how concrete behaves under stress
human ‘error’ is normal
we know how users behave under stress
so design for it!
treat the user at least as well as physical materials!

13. The user Central message …
In this book you will find information on basic psychology, on particular techno- logies, on methods and models. However, there is one factor that outweighs all this knowledge. It is about attitude. Often it is said that the success of the various methods used in HCI lies not in how good they are, but in that they simply focus the mind of the designer on the user. This is the core of interaction design: put the user first, keep the user in the center and remember the user at the end.

14. The process of design
Often HCI professionals complain that they are called in too late.
A system has been designed and built, and only when it proves unusable do they think to ask how to do it right!
In other companies usability is seen as equivalent to testing called checking

15. The process of design scenarios task analysis what is wanted
interviews
ethnography
what is there
vs.
what is wanted
guidelines
principles
dialogue notations
precise specification
architectures
documentation
help
evaluation
heuristics
scenarios task analysis
what is wanted
analysis
design
implement
and deploy
a roadmap or a strategic approach for someone to achieve a unique expectation. It defines the specifications, plans, parameters, costs, activities, processes and how and what to do within legal, political, social, environmental, safety and economic constraints in achieving that objective
prototype

16. Steps … requirements analysis design iteration and prototyping
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

17. Requirements What is wanted?
The first stage is establishing what exactly is needed. As a precursor to this it is usually necessary to find out what is currently happening.
For example, how do people currently watch movies? What sort of personal appliances do they currently use?

18. Requirements There are a number of techniques used for this in HCI:
interviewing people,
videotaping them,
looking at the documents and objects that they work with,
observing them directly.

19. Analysis
The results of observation and interview need to be ordered in some way to bring out key issues and communicate with later stages of design.

20. Design
We need to record our design choices in some way and there are various notations and methods to do this, including those used to record the existing situation.
Its about designing the concept of the system called conceptual design.

21. Iteration and prototyping
Humans are complex and we cannot expect to get designs right first time.
We therefore need to evaluate a design to see how well it is working and where there can be improvements.

22. Implementation and deployment
We need to create and deploy the design.
This will involve writing code, perhaps making hardware, writing documentation and manuals

23. … but how can I do it all ! ! limited time  design trade-off
usability?
finding problems and fixing them?
deciding what to fix?
a perfect system is badly designed
too good  too much effort in design

24. User focus
know your user
personae
cultural probes

25. know your user who are they? probably not like you! talk to them
watch them
use your imagination

26. Persona description of an ‘example’ user use as surrogate user
not necessarily a real person
use as surrogate user
what would Betty think
details matter
makes her ‘real’

27. 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 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).

28. Talk to users
It is hard to get yourself inside someone else’s head, so the best thing is usually to ask them.
This can take many forms: structured interviews about their job or life, open-ended discussions, or bringing the potential users fully into the design process.

29. Talk to users
People may also be able to tell you about how things really happen, not just how the organization says they should happen.
To encourage users to tell you this, you will need to win their trust, since often the actual practices run counter to corporate policy.

30. Cultural Probes direct observation probe packs used to …
sometimes hard
in the home
psychiatric patients, …
probe packs
items to prompt responses
e.g. glass to listen at wall, camera, postcard
given to people to open in their own environment they record what is meaningful to them
used to …
inform interviews, prompt ideas, enculture designers

31. Use your imagination
Even if you would like to involve many users throughout your design exercise this will not always be possible.
It may be too costly, it may be hard to get time with them (e.g. hospital consultant), it may be that there are just too many (e.g. the web).However, even if you cannot involve actual users you can at least try to imagine their experiences.

32. Scenarios stories for design use and reuse
In the performing arts, a scenario (from Italian: that which is pinned to the scenery) is a synopotical collage of an event or series of actions and events. In the Commedia dell'arte it was an outline of entrances, exits, and action describing the plot of a play, and was literally pinned to the back of the scenery. It is also known as canovacio or "that which is pinned to the canvas" of which the scenery was constructed.
Surviving scenarios from the Renaissance contain little other than character names, brief descriptions of action, and references to specific lazzi with no further explanation. It is believed that a scenario formed the basis for a fully improvisational performance, though it is also likely that they were simple reminders of the plot for those members of the cast who were literate. Modern commedia troupes most often make use of a script with varying degrees of additional improvisation.

33. Scenarios stories for design linearity communicate with others
validate other models
understand dynamics
linearity
time is linear - our lives are linear
but don’t show alternatives

34. scenarios … what will users want to do? step-by-step walkthrough
what can they see (sketches, screen shots)
what do they do (keyboard, mouse etc.)
what are they thinking?
use and reuse throughout design

35. Scenario – 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 recognised 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. … … …

36. Scenario – movie player
During lunchtime Brian takes out his movie player, plugs in his earphones and starts to watch. He uses the arrow keys to skip between portions of the film and decides that, yes, Alison would like it. Then he feels a tap on his shoulder. He turns round. It is Alison. He had been so absorbed he hadn’t noticed her. ‘What are you watching’, she says. ‘Here, listen’, he says and flicks a small switch. The built-in directional speaker is loud enough for both Brian and Alison to hear, but not loud enough to disturb other people in the canteen. Alison recognizes the film from trailers, ‘surprised this is out yet’ she says. ‘Well actually . . .’, Brian confesses, ‘you’d better come with me to see it and make an honest man of me’. ‘I’ll think about it’, she replies.

37. Also play act … mock up device pretend you are doing it
internet-connected swiss army knife …
use toothpick as stylus
but where is that thumb?

38. … Explore the depths explore interaction explore cognition
what happens when
explore cognition
what are the users thinking
explore architecture
what is happening inside

39. 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

40. linearity Scenarios – one linear path through system Pros: Cons: So:
life and time are linear
easy to understand (stories and narrative are natural)
concrete (errors less likely)
Cons:
no choice, no branches, no special conditions
miss the unintended
So:
use several scenarios
use several methods

41. Navigation design
local structure – single screen global structure – whole site
the systems
info and help
management
messages
add user
remove user
start
main
screen
remove
user
confirm
add user

42. levels widget choice screen design application navigation design
menus, buttons etc.
screen design
application navigation design
environment
other apps, O/S

43. The web … widget choice screen design navigation design environment
elements and tags
<a href=“...”>
page design
site structure
the web, browser, external links

44. Physical devices widget choice screen design navigation design
environment
controls
buttons, knobs, dials
physical layout
modes of device
the real world

45. Think about structure within a screen local global wider still
later ...
local
looking from this screen out
global
structure of site, movement between screens
wider still
relationship with other applications

46. Local structure
Much of interaction involves goal-seeking behavior. Users have some idea of what they are after and a partial model of the system. In an ideal world if users had perfect knowledge of what they wanted and how the system worked they could simply take the shortest path to what they want, pressing all the right buttons and links.

47. Goal seeking
goal
start

48. Goal seeking
goal
start
progress with local knowledge only ...

49. Goal seeking
goal
start
… but can get to the goal

50. Goal seeking
goal
start
… try to avoid these bits!

51. 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

52. Where you are – breadcrumbs
shows path through web site hierarchy
top level category
sub-category
web site
this page
live links
to higher
levels

53. Beware the big button trap
Public information systems often have touch screens and so have large buttons. Watch someone using one of these and see how often they go to the wrong screen and have to use ‘back’ or ‘home’ to try again. If you look more closely you will find that each button has only one or two words on it giving the title of the next screen, and possibly some sort of icon. Quite rightly, the button label will be in a large font as users may have poor eyesight.

54. Beware the big button trap
It is hard to choose appropriate labels that mean the same for everyone, especially when the breadth of the screen hierarchy is fixed by the maximum number of buttons. So it is no wonder that people get confused. However, there is usually plenty of room for additional explanation in a smaller font, possibly just the next level of button labels, or a sentence of explanation. It may not look as pretty, but it may mean that people actually find the information they are looking for.

55. Beware the big button trap
things
the thing from
outer space
more things
other things
where do they go?
lots of room for extra text!

56. Modes

57. Modes lock to prevent accidental use … if lock forgotten
remove lock - ‘c’ + ‘yes’ to confirm
frequent practiced action
if lock forgotten
in pocket ‘yes’ gets pressed
goes to phone book
in phone book … ‘c’ – delete entry ‘yes’ – confirm … oops !

58. Global
between screens
within the application

59. Hierarchical diagrams
the system
info and help
management
messages
add user
remove user

60. Hierarchical diagrams ctd.
parts of application
screens or groups of screens
typically functional separation
the systems
info and help
management
messages
add user
remove user

61. Navigating hierarchies
deep is difficult!
misuse of Miller’s 7 ± 2
short term memory, not menu size
optimal?
many items on each screen
but structured within screen
see /e3/online/menu-breadth/

62. what does it mean in UI design?
Think about dialogue
what does it mean in UI design?
Minister: do you name take this woman …
Man: I do
Minister: do you name take this man …
Woman: I do
Minister: I now pronounce you man and wife

63. what does it mean in UI design?
Think about dialogue
what does it mean in UI design?
marriage service
general flow, generic – blanks for names
pattern of interaction between people
computer dialogue
pattern of interaction between users and system
but details differ each time
Minister: do you name take this woman …

64. Network diagrams show different paths through system main screen
remove
user
confirm
add user
show different paths through system

65. Network diagrams cntd. what leads to what what happens when
including branches
more task oriented then hierarchy
main
screen
remove
user
confirm
add user

66. Wider still
between applications
and beyond ...

67. wider still … style issues: functional issues navigation issues
platform standards, consistency
functional issues
cut and paste
navigation issues
embedded applications
links to other apps … the web

68. Summary of today’s We have learnt today Interaction Design Basics
Interactions And Intervention
what is design
Persona
Central message
The process of design