Special Research Activity Reminder

1
Special Research Activity Reminder

• From Feb. 20 through Feb. 29, you will
  participate in a required research activity
  outside of class (worth 2 of your course grade
  participation in associated research study is
  optional)
• We already scheduled you for a 90 min. slot if
  you havent been scheduled, please talk to me
  after class
• Sessions continue through end of week, and take
  place in EME 228 (VEUPL)

2
What Did You Learn Last Week?

• What are the key differences between scenarios,
  use cases, essential use cases, and hierarchical
  task analysis?
• Perform a hierarchical task analysis of booking a
  trip on Orbitz.com.
• What is the purpose of state-transition networks?
  User action notation?
• Discuss the key tradeoffs between using
  state-transition networks vs. user action
  notation.

3
Lecture 8 Prototyping(Preece 8)
4
Lecture Overview

• Part I Prototyping (Video!)
• Part II Conceptual Design (Revisited)
• Part III Physical Design
• Part IV Participatory Design

5
Part I Prototyping OverviewLow-FidelityHigh-
Fidelity
6
What is a Prototype?

• In other fields a small scale model that
  communicates design
• In interaction design A model of a user
  interface, e.g.,
• a series of screen sketches
• a storyboard, i.e. a cartoon-like series of
  scenes
• a Powerpoint slide show
• a video simulating the use of a system
• a cardboard mock-up
• a piece of software with limited functionality

7
Why Create a Prototype?

• Fundamental tenet of user-centered design
  Involve users early and often
• A prototype is much easier to create than an
  actual implementation, and takes far less time
• A prototype communicates design and encourages
  feedback
• A user study with a prototype can provide
  designers with invaluable feedback, even if the
  prototype isnt fully functional
• People are more likely to give feedback on
  rough, unpolished sketches (see, e.g., Schumann
  et al., 1996)

8
What are the Benefits of Prototyping?

• Designers can get answers to specific research
  questions regarding a design
• Of several design alternatives, which is better?
• Will a given design work? If not, how can we fix
  it?
• What will users expect in certain interaction
  scenarios? (a prototype and task can provide a
  context for eliciting users expectations)
• Stakeholders can see, hold, interact with an
  emerging design before it is fully implemented

9
What Should We Prototype?

• Work flow and tasks
• Screen layouts and information display
• Difficult, controversial areas of design
• Prototype should respond to the questions that
  need answering
• Paper mockup can test feasibility of interface
  design
• Limited computer-based prototype can address
  technical feasibility (e.g., response times)

10
Low Fidelity Prototypes

• Uses art supplies, e.g., Post-it Notes, paper,
  index cards
• Is quick, cheap and easily changed
• Example Storyboards
• Series of sketches representing progression
  through task
• Supports role-playing provides context for
  interaction (as in wizard-of-oz study)

ChrisMedia
Artist Song Length Link
C. Wil Rain 345 Wil4
Play
Delete
Edit
Goto
11
Low Fidelity Prototypes (cont.)

• Example Wizard-of-Oz
• Books definition User sits at computer screen
  and types in commands human wizard responds
• Broader definition User interacts with a low
  fidelity prototype, using finger as pointer and
  mouse human wizard interprets users
  interactions and presents next screen

12
Example Wizard-of-Oz ALVIS DM Interface

• We ran a wizard-of-oz low fi prototyping study to
  develop the design of ALVISs new direct
  manipulation interface
• I need a volunteer to come to the front to try a
  task while I demonstrate the wizard of oz
  technique
• Task Write an algorithm that sums the values of
  an array of 7 random integers between 1 and 100.

13
High Fidelity Prototypes

• Uses materials that users would expect to be used
  for the final product
• Looks more like final system than a low-fidelity
  version
• Common high-fidelity prototyping environments
  include Macromedia Flash, Visual Basic, and
  Tcl/Tk
• Danger that users will think they have a full
  system, and then be disappointed

14
Comparison of Low and High Fidelity Prototypes
15
Compromises in Prototyping

• Implementation compromises slow response times,
  unfinished icons, limited functionality
• Breadth versus depth Horizontal versus vertical
  prototypes
• Horizontal provide a wide range of functions,
  but with little detail
• Vertical provide a lot of detail for only a few
  functions

16
Compromises in Prototyping (cont.)

• How to get from prototype to final product
• Evolutionary prototyping
• Lots of effort has gone into prototyping and
  testing why waste it?
• Prototype evolves into final product
• Evolution must be carefully planned, with quality
  assurance testing part of the overall process
• Throw-away prototyping
• Prototype is used to answer design questions, and
  then thrown away
• Less need to worry about robustness and quality
  assurance
• Final product is built from scratch
  

17
Nielsen/Norman Video on Prototyping
18
Part II Conceptual Design
19
Conceptual Design
Design Model
Users Model
DESIGNER
USER
SYSTEM
System Image

• Process of transforming requirements into a
  conceptual model
• No magic formula!
• Some perspectives can be helpful (see Lecture 2,
  which well review on next slide)

20
For Review

• Consider the software you are developing for your
  group project
• Is it based on a metaphor? Which one?
• How much structure does the metaphor provide
• How much of the metaphor is relevant to the
  domain?
• Is the metaphor easy to represent?
• Will users understand the metaphor?
• How extensible is the metaphor?
• What interaction paradigm does it support? (WIMP,
  pen, ubiquitous, pervasive, wearable)

21
Transforming the Conceptual Model into a
Conceptual Design

• Task allocation For each task to be supported,
  what will the user do, and what will the computer
  do?
• Task sequencing What constraints on task order
  are present?
• Data dependencies What information is required
  to complete each task?

22
Using Scenarios for Conceptual Design

• Help overall design
• Foster cooperation within design teams
• Foster cooperation across disciplines in a
  multidisciplinary design team
• Help sell ideas to stakeholders and managers
• Plus and minus scenarios
• Plus Using computer-based media player to play
  mp3 files off the net
• Minus Using computer-based media player to play
  LP or tape

23
Using Low Fi Prototypes for Conceptual Design

• Low Fidelity Prototypes are built to answer
  questions and get feedback on emerging design
  ideas
• Can be used as the basis for interviews and
  walkthroughs with team members and potential
  users
• Generate further questions shed light on
  feasibility
• You dont even have to design specific screens
  you can just test task sequencing and workflow

24
Part III Physical Design
25
Physical Design

• Concrete design of interface
• Icons
• Menus
• Layout
• Fonts
• No rigid border between conceptual and physical
  design
• However, do not allow physical design constraints
  to guide conceptual design too early!

26
General Approach to Physical Design

• Best approach is frequent evaluation and
  iteration, but guidelines and principles explored
  earlier in course can help (see Lectures 1b, 2,
  and 3)
• Norman constraints, visibility, affordances,
  natural mappings, feedback
• Nielsens heuristics Speak users language,
  allow easy escapes, design for error prevention
  and recovery, provide invisible accelerators,
  provide help, use minimalism

27
Widget Design

• Menus
• Place most commonly used functions on top
• Menu titles should be action verbs denoting core
  functionality groups
• Logically group menu items

28
Widget Design (cont.)

• Icons
• Its hard to design good icons!
• Meaning of icons is culturally and context
  sensitive
• Generate and test many ideas
• Some tips
• Draw on existing traditions or standards
• Concrete objects or things are easier to
  represent than actions
• From clip art, what do these mean to you?
• Even good icons may not be understoodby
  first-time users be sure to have an accompanying
  tool tip

29
Widget Design (cont.)

• Screen design
• Splitting a task across multiple screens
• Use task analysis as starting point for dividing
  up tasks one task per screen
• Too many simple screens can be just as
  frustrating as one complicated one try to strike
  a balance
• Make sure that information salient to current
  task is always available (7 /- 2 rule)
• Individual screen design
• Draw users attention to salient aspects
• Group related items to aid comprehension
• Make liberal use of whitespace

30
Tool Support for Physical Design

• Interactive GUI Builders with embedded event
  languages
• Visual Basic
• DreamCard
• Scripting languages
• Perl, Python, Tcl/Tk, JavaScript (with HTML)
• Object-oriented programming languages and
  environments
• Java/JBuilder, Visual Studio .NET
• Low fidelity, sketch-based user interface design
  tools
• SILK and DENIM
• WOZ Pro (you will use!)

31
Using WOZ Pro to Create Low Fidelity Prototypes

• Pedros PC Example
• (WOZ Pro Tutorial Available off of schedule page)

32
Part IV Participatory Design
33
Participatory Design

• Customers/clients become an active part of design
  team
• Technique developed in Scandinavia in late 1960s
  and early 1970s
• Arose out of labor unions pleas to have say in
  their working conditions
• Walkthroughs with low fidelity prototypes a key
  component of the design process
• Enable customers to simulate their work practices
• Enable designers to gain key insights into work
  practices

34
Aspects of Participatory Design

• Finding representatives from the user community?
  (Interaction may need to be assisted by a
  facilitator)
• Using simple tools such as paper or video
  scenarios to design cooperatively
• Facilitating communication between designers and
  users about proposed designs
• Evaluating prototypes cooperatively

35
Summary

• Prototypes help designers answer questions and
  get feedback
• Different kinds of prototyping are used for
  different purposes and at different stages of
  design
• Conceptual design process transforms requirements
  into a conceptual model
• Physical design process transforms conceptual
  model into concrete artifact, e.g. menus, icons,
  screen design, information displays
• Prototypes and scenarios support design
  throughout
• Participatory design gives users a place on the
  design team

36
Please Note

• Id like you to prepare for Activity 7 by
  meeting with your group before Thursdays class
• Develop three key scenarios
• Develop detailed sequence of steps for completing
  task within that scenario
• Use WOZ Pro (or simple art supplies) to prepare a
  low fi prototype