Human-Computer Interaction

saadh.info/hci

​

Week 6 (Tuesday): Scenarios, Prototyping

​

1

Attendance and Agenda

1. Scenarios
2. Prototyping

2

Announcements

• Assignment 1 due tonight
• Details on Canvas
• Continue making progress on projects
• Think about the other user research method you would be employing
• Have a gameplan for analysis, modeling, low-fidelity prototypes later this week and before fall break
• Milestone 1 due on October 11
• Test 1: October 8 or October 10?
• Syllabus: everything till Fall break
• Everything part of project milestone 1 + perception & cognition

3

What have we learned so far in this module?

4

Interviews

Contextual Inquiry

(and Surveys)

Thematic Analysis

Affinity Mapping

User Profiles

Personas

Scenarios

Collect

Analyze

Communicate

Scenarios

5

Scenarios

6

Task Scenarios

• Personalized fictional story with characters, events, products, and environments

​

• They can include tasks the user needs to complete, and how they go about completing them

7

Elements of a Scenario - Like a Theatre Play

• Setting (where)
• Where does the scene take place

​

• Actor (who)
• Use your personas!

​

• Motivation (why)
• Goals and objectives

​

• Plot (what)
• Sequence of actions
• Events

8

Forms of Scenarios

• Video
• Animations
• Demos
• Primarily
• Written like a story (paragraph form)

​

• Storyboards (A comic-strip representing the steps of someone using a design)

9

Types of Scenarios: Problem Scenarios

1. Problem Scenarios (also called “Task Scenarios”)
• A story about a task in the problem domain as it exists prior to technology introduction or the proposed system

​

​

10

Types of Scenarios: Design Scenarios

2. Design Scenarios (what the future will be like with your design)
• User Stories (these are like personas with more of a narrative)
• Minor stories that represent a type of user in context of a problem
• Activity Scenarios (also called “User Scenarios”)
• A real world story that explores requirements for the eventual testing and evaluation of a proposed system.
• Interaction Scenarios (also called “Use Cases”)
• Objects and actions possible in a system are represented and arranged in a way that facilitates perception and understanding.

11

Problem Scenario

• A story about a task in the problem domain as it exists prior to technology introduction or the proposed system

​

Character: Rachel a physical therapy student

​

“After each lecture , I review my notes and begin to make flashcards using standard 3x5 index cards. I take notes using my computer. I like to use various methods to create my cards. For many cards, I write them out by hand which takes a lot of time. Also, I like to use different colored pens and highlighters when I create the cards as this helps me to retain the information better. I also like to use index cards of different colors. For example, for my pharmacology class, I will put fat soluble drugs on pink cards and water soluble drugs on blue cards. I sometimes need to draw pictures on the cards. However, I will often print out pictures from the lecture Powerpoint slides and glue them onto the index cards. This process is very time consuming as I have to resize the images so that they will fit onto the cards, print them on my printer, cut them out and then glue them onto the cards. Sometimes I have to throw cards out and start over if I’ve made a mistake on a card. For example, if I accidently use a pink card for a water soluble drug, I will need to throw the card away and rewrite everything on a blue card.”

12

User Stories

• Minor stories that represent a type of user in context of a problem
• These are like personas with a narrative style

​

Characters: Clare and Gerald, retired grandparents

​

“Clare and Gerald are retired grandparents in their late 60 s who like to bring their grandchildren to historical places they had visited with their children . They want to share their knowledge with their growing family. Clare and Gerald often spoil their grandchildren while exploring sites. Gift shops are always the last stop before heading home. Ice Cream, candy, cork rifles and bonnets are always on display when they share the day's events with their parents.”

13

Activity Scenarios

• A real world story that explores requirements for the eventual testing and evaluation of a proposed system.

​

Characters: Clare and Gerald, retired grandparents

​

“Clare and Gerald are a retired grandparents in their late 60 s who are bringing their grandchildren to a living history museum today. They didn’t have a specific goal; so, they just walked around the field with tents that had actors in soldier uniforms from the Civil War. At the end of the visit, they stopped at the gift shop to get some souvenirs and toys for the kids. They also looked for a snack bar for some ice cream or candy. When they got home, the kids showed their parents the toy rifles and costumes they got at the museum.”

14

Interaction Scenario or “Use Case”

• Specify the mechanisms for accessing and manipulating task information
• Describes details of user action and feedback

​

Character: Rachel the physical therapy student

​

“After each lecture, I review my lecture notes while logged on to the XYZ website. I click on the Create New Deck icon and a window is displayed where I can start to create my flashcards. Because I use my computer to take notes in class, I am able to cut from my notes and simply paste the content onto each flashcard. I can use a highlighter tool to highlight important information on each card. I can also change the color of the text on each card. What is particularly easy is that I can copy images from the lecture Power Point directly onto each card. With a single click, I can change the color of each card so that I can use pink cards for fat soluble and blue for water soluble drugs. If I make a mistake, I can easily change the color of the card without losing any of my work. The deck is automatically saved in my account and I can study from the cards on my smart phone anywhere.”

15

You can design using personas and scenarios

• By creating user personas and scenarios, you can actually begin a design process.

​

• You haven’t built anything yet, but you can get your ideas onto paper, share them with others, and get feedback.

​

• You can identify good ideas, and then you can move forward with the best ones…

​

​

“Scenario Based Design”

​

16

Used throughout the design process

• In early design process
• Used as a target and communication tool aligning project team direction
• Showcases future technologies
• Highlights boundaries and constraints

​

• In software development phase
• The “tasks” are used to build user requirements
• Concrete examples of tasks (Interaction scenarios)

​

• In final evaluation phase
• The “tasks” are used to illuminate the expected experience
• Scripts for user evaluation of prototypes (Activity scenarios)

17

What have we learned so far in this module?

18

Interviews

Contextual Inquiry

(and Surveys)

Thematic Analysis

Affinity Mapping

User Profiles, Personas, Scenarios

Collect (Step 1)

Analyze (Step 2)

Communicate (Steps 3-4)

What next…

19

Prototyping

(Steps 5)

What is a Prototype?

A “concrete but partial implementation of a system design.” ( Rosson & Carroll)

​

A trial version of a product that is created early in the design process ... to help designers and/or users visualize the product and get a feel for working with it ... quickly and (relatively) inexpensively. (working-ish model)

20

Why do we prototype?

21

Communication Tool

Selling Idea Internally

Marketing Tool

Gauge Feasibility

Usability Evaluation

Design Iteration

Wizard of Oz

22

The Wizard of Oz method is a moderated research method in which a user interacts with an interface that appears to be autonomous but is

(fully or partially) controlled by a human.

​

Prototyping

• Benefits
• Enables designers to dive-in early
• Enable stakeholders to sample early
• Makes both of them more enthusiastic
• Better communication
• Gets user “used-to” the product paradigm

• Risks
• Has limited accuracy in representing real product
• Can be over-promising, misleading, or just wrong
• Designers and users might view it as the final product
• Might encourage over-design

23

Prototype: Dimensions of Classification

Medium Used

Level of Visual Detail

Level of Interactivity

Level of Actual Functionality

24

Medium Used

25

Paper Prototyping and Testing

Playing Computer and Facilitator

Don’t worry about your drawing!

26

Softwares

• Paint
• Figma
• HTML
• Powerpoint/Keynote/Google Slides
• Balsamiq
• Axure
• Appium

In general, start with paper prototype or sketches using

Axure/Ipad, get some feedback, then move to high fidelity

27

Prototype: Dimensions of Classification

Medium Used

Level of Visual Detail

Level of Interactivity

Level of Actual Functionality

28

Level of Visual Details

• Low Visual Detail
• Sketches, Wireframes
• Blocks of wood (Palm Pilot story) – Storyboards

​

• High Visual Detail
• High quality graphics
• Close to finished look and feel

​

• Not Dichotomous: Can be a range or combined: Some elements lo-fi some hi-fi. Can you think of why you would do this?

29

Low Visual Wireframe

30

High Visual Detail

31

Paper Prototyping but High Visual Detail

32

Pros and Cons of High Vs. Low Visual Design

Low Visual Design

• Pros
• Focus on functionality without being distracted by design
• Rapidly created/iterated
• Cheap

​

• Cons
• People don’t ``buy into them’’
• Limited in what they can communicate

High Visual Design

• Pros
• Easier to sell to stakeholders
• Easier for users to interact and usability evaluations

​

​

• Cons
• Cost
• Stakeholders become distracted by design
• Can be thought as functional

33

Prototype: Dimensions of Classification

Medium Used

Level of Visual Detail

Level of Interactivity

Level of Actual Functionality

34

Level of Interactivity

• Low-fidelity
• Rough sketch: paper, scissors, pens or crayons, manual animation
• User scenarios: storyboarding, illustration, keynote presentation

​

• Medium-fidelity
• Wireframes: implemented in detailed realization
• Mockup UI: sketched up but functional

​

• High-fidelity
• Alpha: software, database, operational with some bug fixes
• Beta: close to commercial, robust software and UI

35

What is a Prototype?

Medium Used

Level of Visual Detail

Level of Interactivity

Level of Actual Functionality

36

Level of Actual Functionality

1. Breadth (horizontal)
• Many features “usable” but over a narrow range of use - cases
• “You can click on the rotate button but it will only rotate 90 degrees.”

​

• Depth (vertical)
• A select few features “usable” but usually over a greater range/depth of use - cases for those features

​

• Fully Functional
• Everything works but it isn’t the final product. Not optimized.
• Wizard of Oz (Ghost in the machine) – Features operated by “wizard behind the curtain”

37

Fully Functional, Depth, Breadth

Fully functional

Breadth

Depth

38

Methods of Prototyping

Rapid

Prototyping

Evolutionary

Prototyping

Incremental

Prototyping

​

39

Rapid Prototyping

40

Quickly creating a working model of a product to test ideas, gather feedback, and refine the design. Discarded later.

Rapid Prototyping

• Pros
• Evaluating design early in the process
• Good for users who do not know all of their requirements
• Enables continued evaluation and refinement
• Increases chances of getting a well-designed system

• Cons
• Can consume a lot of resources: users, analysts
• Can take a long time to move from rapid prototypes to working system
• User may improperly view prototype as the final product
• Quickly become outdated as real system is implemented

41

Methods of Prototyping

Rapid

Prototyping

Evolutionary

Prototyping

Incremental

Prototyping

​

42

Evolutionary Prototyping

43

Refined over time. Rather than being discarded; evolves into the final product. Feedback and testing incorporated throughout the development cycle

Evolutionary Prototyping

• Pros
• The system and user can cope well with the change
• Helps to overcome gap between specifications and implementation
• User get some functionality quickly

• Cons
• Can lead to long development time
• Might have limited functionality, not apparent to user that the limitation is only because of the prototype nature
• User might believe this is the final product

44

Methods of Prototyping

Rapid

Prototyping

Evolutionary

Prototyping

Incremental

Prototyping

​

45

Incremental Prototyping

46

Incremental Prototyping

• Pros
• Enables large system to be built in phases
• Avoid delays between specification and implementation
• Prevents users from being overwhelmed by the complex system at once

​

• Cons
• Need to have an overall view of requirements
• Suitable development software must be used, not prototyping level of software
• Long development time before full functionality is obtained

​

47

Project

1. User Research Procedures (Two with details)
2. Data Analysis (Thematic Analysis or Affinity Mapping)
3. Data Modeling (User Profiles and Personas)
4. Scenarios (Three Problem Scenarios, User Stories, Activity Scenarios, and Interaction Scenario)
5. Low-fidelity Prototyping (Three interfaces, Testing with 3 Users)

48

Attendance & Next Time

• Prototyping

​

• Design Principles

49