Process of Interaction Design

1
Process of Interaction Design
2
Overview

• What is Interaction Design?
• Four basic activities
• Three key characteristics
• Some practical issues
• Who are the users?
• What are needs?
• Where do alternatives come from?
• How do you choose among alternatives?
• Some general guidelines

3
What is Interaction Design?

• It is a process
• a goal-directed problem solving activity informed
  by intended use, target domain, materials, cost,
  and feasibility
• a creative activity
• a decision-making activity to balance trade-offs
• It is a representation
• a plan for development
• a set of alternatives successive elaborations

4
Four basic activities
There are four basic activities in Interaction
Design 1. Identifying needs and establishing
requirements 2. Developing alternative designs 3.
Building interactive versions of the designs 4.
Evaluating designs
5
Three key characteristics
Three key characteristics permeate these four
activities 1. Focus on users early in the design
and evaluation of the artefact 2. Identify,
document and agree specific usability and user
experience goals 3. Iteration is inevitable.
Designers never get it right first time
6
Some practical issues

• Who are the users?
• What are needs?
• Where do alternatives come from?
• How do you choose among alternatives?

7
Who are the users?

• Not as obvious as you think
• those who interact directly with the product
• those who manage direct users
• those who receive output from the product
• those who make the purchasing decision
• those who use competitors products ???

8
Who are the stakeholders?
Check-out operators
Suppliers Local shop owners
Customers
Managers and owners
9
User categories

• Three categories of user
• primary frequent hands-on
• secondary occasional or via someone else
• tertiary affected by its introduction, or will
  influence its purchase.
• Wider term stakeholders

10
Who are the users? (contd)

• What are their capabilities? Humans vary in many
  dimensions!
• Some examples are
• size of hands may affect the size and positioning
  of input buttons
• motor abilities may affect the suitability of
  certain input and output devices
• height if designing a physical kiosk
• strength - a childs toy requires little strength
  to operate, but greater strength to change
  batteries

11
What are needs?

• Users rarely know what is possible
• Users cant tell you what they need to help
  them achieve their goals
• Instead, look at existing tasks
• their context
• what information do they require?
• who collaborates to achieve the task?
• why is the task achieved the way it is?
• Envisioned tasks
• can be rooted in existing behaviour
• can be described as future scenarios

12
Where do alternatives come from?

• Humans stick to what they know works
• But considering alternatives is important to
  break out of the box
• Designers are trained to consider alternatives,
  software people generally are not
• How do you generate alternatives?
• Flair and creativity research synthesis
• Seek inspiration look at similar products or
  look at very different products

13
How do you choose among alternatives?

• Evaluation with users or with peers e.g.
  prototypes
• Technical feasibility some not possible
• Quality thresholds Usability goals lead to
  usability criteria set early on and check
  regularly
• safety how safe?
• utility which functions are superfluous?
• effectiveness appropriate support? task
  coverage, information available
• efficiency performance measurements

14
Testing prototypes to choose among alternatives
15
ISDE Lecture Activity
16
Lecture Activity

• Consider the design issues involved for the
  following
• A mobile phone for old people
• A mobile phone for young children
• An office phone

17
Lecture Activity 10 15 mins

• Select one of these
• Identify the key functionality required
• Identify key user task characteristics
• Consider the design trade offs that might be
  required
• State some usability criteria that could be used
  to evaluate the design
• Produce a front end for your device

18
General design Principles

• Wide range of design principles
• Examples include
• Neilsens Heuristics
• Shneidermans Golden Rules
• Windows Interface Guidelines
• They cover
• Guidelines for physical design
• Menu design
• Screen formatting and presentation issues
• Designers can apply these but need to do so
  with care!
• Applying design guidelines alone does not lead to
  good design

19
Heuristics (after Neilsen)

• use simple and natural dialogue sequences
• speak the users language
• minimise user memory load
• be consistent
• provide feedback
• provide clearly marked exits
• provide shortcuts
• provide good error messages
• prevent errors

20
Shneidermans Golden Rules

• Here is another similar list
• strive for consistency
• enable frequent users to use shortcuts
• offer informative feedback
• design dialogues to yield closure
• offer simple error handling
• permit easy reversal of actions
• support internal locus of control
• reduce short term memory load

21
Windows Interface Guidelines

• Set of general principles for interface design
  in Microsoft's software development documentation

• directness
• user in control
• consistency
• forgiveness
• feedback
• aesthetics
• simplicity

22
Many common elements

• Shneiderman
• strive for consistency
• enable frequent users to use shortcuts
• offer informative feedback
• design dialogues to yield closure
• offer simple error handling
• permit easy reversal of actions
• reduce short term memory load

• Microsoft
• directness
• user in control
• consistency
• forgiveness
• feedback
• aesthetics
• simplicity

• Nielsen
• use simple and natural dialogue sequences
• speak the users language
• minimise user memory load
• be consistent
• provide feedback
• provide clearly marked exits
• provide shortcuts
• provide good error messages
• prevent errors

Be consistent
23
Consistency

• important to enable user to build a reliable
  model of how the interface works
• makes the interface familiar and predictable by
  providing a sense of stability
• allows users to transfer existing knowledge to
  new tasks and focus more on tasks because they
  need not spend time trying to remember the
  differences in interaction.
• important through all aspects of the interface,
  names of commands, layout of information, and
  operational behaviour.

24
Many common elements

• Shneiderman
• strive for consistency
• enable frequent users to use shortcuts
• offer informative feedback
• design dialogues to yield closure
• offer simple error handling
• permit easy reversal of actions
• support internal locus of control
• reduce short term memory load

• Nielsen
• use simple and natural dialogue sequences
• speak the users language
• minimise user memory load
• be consistent
• provide feedback
• provide clearly marked exits
• provide shortcuts
• provide good error messages
• prevent errors

• Microsoft
• directness
• user in control
• consistency
• forgiveness
• feedback
• aesthetics
• simplicity

Reduce memory load
25
Minimise user memory load

• Basic rule dont expect the user to remember
  what has already been done, make this visible at
  the interface
• If a command is made up of a number of pieces of
  data entered by the user in sequence, display
  these rather than expect the user to remember the
  data already entered
• Help the user remember where they are in a
  transaction sequence Menu 2/5 Step 1 - 4
• Will cover design implications later

26
Feedback American Airlines site
Place in transaction sequence
Data previously entered
27
Many common elements

• Nielsen
• use simple and natural dialogue sequences
• speak the users language
• minimise user memory load
• be consistent
• provide feedback
• provide clearly marked exits
• provide shortcuts
• provide good error messages
• prevent errors

• Shneiderman
• strive for consistency
• enable frequent users to use shortcuts
• offer informative feedback
• design dialogues to yield closure
• offer simple error handling
• permit easy reversal of actions
• support internal locus of control
• reduce short term memory load

• Microsoft
• directness
• user in control
• consistency
• forgiveness
• feedback
• aesthetics
• simplicity

Feedback to user
28
Feedback from the system

• Every action the user makes should produce a
  perceptible response.
• The intention is to reduce user uncertainty that
  the system has
• received the last input,
• is currently doing something about it,
• or is waiting for the next input.
• Commands should result in some visible change to
  the interface
• E.g mail has been sent in response to a Send
  command
• Presentation of objects on screen updated to
  reflect their current state
• Task analysis should enable appropriate
  information to be identified as feedback for a
  specific task

29
Feedback Response Time

• Response time for feedback should be appropriate
  to the type of user action
• e.g. response to keystroke - instantaneous res
  ponse to command input - may take longer
• Provide system busy feedback if time will
  exceed a few seconds or is unpredictable
• Provide indication of how many transactions
  remain, for example as a bar chart or as a
  percentage.
• This largely disappeared as a problem with fast
  single user PCs and has re-appeared with
  distributed web-based applications

30
Many common elements

• Nielsen
• use simple and natural dialogue sequences
• speak the users language
• minimise user memory load
• be consistent
• provide feedback
• provide clearly marked exits
• provide shortcuts
• provide good error messages
• prevent errors

• Shneiderman
• strive for consistency
• enable frequent users to use shortcuts
• offer informative feedback
• design dialogues to yield closure
• offer simple error handling
• permit easy reversal of actions
• support internal locus of control
• reduce short term memory load

• Microsoft
• directness
• user in control
• consistency
• forgiveness
• feedback
• aesthetics
• simplicity

Appropriate user support
31
Appropriate user support

• HELP messages
• important to recognise different types of help
• should be available when required and
  context-specific
• can the user get help about what responses are
  possible at a given point in a dialogue.
• ERROR messages
• should explain what is wrong and what corrective
  action is required
• should use jargon familiar to the user
• often this support is poorly designed in terms of
  what information is given to the user.

32
Many common elements

• Nielsen
• use simple and natural dialogue sequences
• speak the users language
• minimise user memory load
• be consistent
• provide feedback
• provide clearly marked exits
• provide shortcuts
• provide good error messages
• prevent errors

• Shneiderman
• strive for consistency
• enable frequent users to use shortcuts
• offer informative feedback
• design dialogues to yield closure
• offer simple error handling
• permit easy reversal of actions
• support internal locus of control
• reduce short term memory load

• Microsoft
• directness
• user in control
• consistency
• forgiveness
• feedback
• aesthetics
• simplicity

Flexibility
33
Flexibility

• Measure of how well a dialogue can cater for
  different levels of user skill.
• Provide alternative means of achieving the same
  goal which match different models of how the
  interface works.
• e.g. word selection cursor to start of word and
  double click, click and drag, click and
  shift-click.
• e.g. word deletion word highlighted and Control
  X key, select Cut menu option, backspace.

34
Flexibility

• Adapt to the skill level of the user by
• providing accelerators allow user to answer
  ahead,provide key bindings for menu options
• providing macro facility
• accepting abbreviations for command words
• accepting synonyms (alternative names)
• allowing user to choose level of instructions or
  help.

35
Many common elements

• Nielsen
• use simple and natural dialogue sequences
• speak the users language
• minimise user memory load
• be consistent
• provide feedback
• provide clearly marked exits
• provide shortcuts
• provide good error messages
• prevent errors

• Shneiderman
• strive for consistency
• enable frequent users to use shortcuts
• offer informative feedback
• design dialogues to yield closure
• offer simple error handling
• permit easy reversal of actions
• support internal locus of control
• reduce short term memory load

• Microsoft
• directness
• user in control
• consistency
• forgiveness
• feedback
• aesthetics
• simplicity

User in control
36
User in control

• user initiates actions, not the computer or
  software
• use techniques to automate tasks, but implement
  them in a way that allows the user to chose or
  control the automation.
• users must be able to personalize aspects of the
  interface, such as colour, fonts, or other options

37
Minimal user input

• Balance between number of keystrokes or mouse
  movements/clicks and memory load.
• Reducing keying errors increases speed of data
  entry.
• Allow selection from a list rather than typing in
  a value(recognise rather than recall).
• Edit a command that has produced an error rather
  than retyping the command.
• Do not request input of information which can be
  derived automatically or which has been entered
  previously.
• Use default values.

38
Menus

• Usually a collection of actions, structured into
  a list from which a user chooses
• Actions applied to objects
• Explicitly selected by user format font
  selected text
• Implicitly assumed by system print current
  file
• Pop-up menu over selected object shows common
  actions on that object
• Actions may be represented
• by text (e.g pull-down menu)
• by icons (e.g toolbar)
• Actions completed
• Immediately by selecting menu item
• Following collection of more data from user (via
  a dialogue box)

39
Overloading menus

• Most common Windows applications use an
  anything, anytime approach ie all commands
  are available to the user at all times
• Leads to large, cumbersome menu structures where
  the user can forget how to find a particular
  command
• Toolbars attempt to provide shortcuts to
  frequently used items
• order of icons in toolbars different from items
  in pull-down menus representing same actions
• Many CAD systems use an alternative, moded
  approach where a general type of operation, or
  task is selected
• Only a restricted set of menus relevant to that
  operation are displayed
• This approach is now used in some MS applications

40
(No Transcript)
41
Menu Structure

• Structures should reflect users expectations..
  and support users flow of work (ISO 9241/14)
• Priorities
• Conventional categories (file, edit,)
• Use of dividers to break menus into groups
• Logical groups of related actions
  (cut,copy,paste)
• Arbitrary groups
• consistently ordered, numerically or
  alphabetically

42
Sequencing options within groups

• consistency - use the same relative order of
  items where the group is presented again
• importance - place important items first in the
  group
• conventional order e.g days of the week
• order of use - e.g copy preceeds paste
• frequency of use
• if frequency of option is known, place frequent
  items first
• alphabetical order
• What ordering rules have been applied in the next
  slide?

43
(No Transcript)
44
Functional Objectives with Screen Layout

• arrange items on screen to give highest
  probability of elicting an acceptable level of
  human performance
• the user will be able
• extract information she is seeking
• identify related groups of information
• distinguish exceptional items (warnings and error
  messages)
• determine what action is necessary

45
Formatting recommendations

• split strings more than 6 alpha numerics into
  smaller groups
• (bad) (good)
• ABBA347686A2 ABBA 347686 A2
• ABBA456388A3 ABBA 456388 A3
• identical data should be presented in the same
  way even if varaitions in input format are
  tolerated
• 30 11 95
• 30 Nov 1995 -gt 30/11/95 (for example)
• 30 11 1995
• 30th nov 95

46
Formatting recommendations

• data should be presented in full version even if
  abbreviated input allowed, provide feedback to
  user
• Party
• Party ch,cai Chemical Bank, Cairo

47
Formatting recommendations

• numeric codes displayed with right justification
• 47321 47321
• 539 539
• 67 67
• 482645 482645
• lists of numeric with decimal points should be
  aligned around the point
• 34.723
• 43.908
• 2341.5

48
Labeling in screen design

• descriptive title or phrase adjacent to a group
  of related items or information
• ensure labels are meaningful to the user
• labelling should be visually distinct from the
  data
• data labelling should not be able to be confused
  with help messages or command descriptions

49
Labeling in screen design

• use consistent relationship between labels and
  data being described
• e.g. above and left justified
• Name
• include units in label to reduce ambiguity
• e.g. Weight( Kg)

50
Aesthetic issues

• Design is valued for its fitness to a particular
  user and task
• Design aesthetics is intended to make the product
  or system appear attractive appealing
• Nielsen advocates Simplicity particularly for
  Website design
• However careful use of colour, graphics and
  formatting can make the design more aesthetically
  pleasing
• Need to get the right balance

51
Style guides and sources of design guidance

• Plenty of these.
• Manufacturers
• Web-based style guides e.g Yale Style Manual
• http//info.med.yale.edu/caim/manual/index.html
• List of style guides
• http//www.indiana.edu/iirg/REFERENCES/guidelines
  .html