SE 204 – Human Computer Interaction Lecture 5: From Requirements to Design Lecturer: Gazihan...

1

SE 204 – Human Computer Interaction

Lecture 5: From Requirements to Design

Lecturer: Gazihan Alankuş

2

Outline

• Requirements• Going from requirements to design• Storyboarding• Sketches

3

Requirements

• Going into the environment of the problem and the user– Immerse yourself in the user’s environment

• Deeply understanding the situation – Observe– Interview– Shadow– Serve

4

Requirements

• Observe people in their actual work context– “You can observe a lot just by watching” –Yogi Berra– Spend time with them, watch what’s going on– Occasionally ask questions

5

Requirements

• Interview people as they do their work– Talk to people to understand more about their

backgrounds, goals, workarounds, difficulties, etc.– Ask open-ended questions that will get them to talk• Don’t ask questions that they can answer with “yes” or “no”• Don’t ask leading and loaded questions

– Be comfortable with silence • Ask the question and silently look at the user, demanding an

answer • Don’t be satisfied with short answers • Don’t answer your own question

6

Requirements

• Shadow people for a long duration– Go into the environment where the user is carrying on

the tasks– Stay there for a long time– Stand in a corner, or any other place where you will not

stand out– Don’t interfere, just watch from a distance• If you want to ask questions, ask them later

7

Requirements

• Serve users’ requests– Act as the helper/facilitator for the user– Be the solution– It will teach you how a computer could help instead of

you

8

Requirements

• At the end, you should have– Low-level information• Specific users and their elaborate task examples

– High-level information that is derived from above• Personas and short task descriptions

9

Going from requirements to design

• What do you do to create a design? – Where do you start?

• You know about the problem, how do you create a solution? – You will probably find a way with your intuitions– As engineers, we need a repeatable methodology

10

Creating a design• The users are already carrying

out the tasks (current solution)– But they are doing it some other

way. You want to improve the situation.

• The users know other things (existing knowledge)– Computers– Smart phones– Pen and pencil

• Your solution will have to respect all this information

current solution

existing knowledge

Your Solution

11

Workflows• The current solution

represents one possible workflow to accomplish the tasks

• It gets the task done and respects the users’ knowledge

• You should find an alternative workflow that will get the job done better/easier while respecting users’ knowledge

current solution

Step 1 Step 2 Task done!

existing knowledge


12

Collect information (as a part of requirements)

• Current solutions– How are users currently

handling this task?– Are they using existing

products?• Are there pain points with

those products?• Are they inventing

workarounds for the products’ limitations?

– Are they handling the task manually?• What steps are they taking?

• Users’ existing knowledge– What do users know

already?– What are their abilities?

– Generalizing through appropriate personas is very important.

13

Activity Analysis

• Great tool for understanding the current solution– What are the steps?– What are the artifacts? – What are the goals? – What are the pain points?

• Example: starting your car– From http://www.nwlink.com/~donclark/hrd/isd/cognitive-task-analysis.html

http://www.nwlink.com/~donclark/hrd/isd/cognitive-task-analysis.html



14

Steps (starting your car)

• Unlock driver's door• Take a seat behind the wheel• Insert key in ignition switch• Turn key fully clockwise• When engine starts, release the key

15

Artifacts (starting your car)

• The car• Key• Car door• Ignition• Dashboard lights• Engine sound

16

Goals (starting your car)

• Turn on the car?• Go to the supermarket?• Buy cleaning supplies?• Have a clean house?

• A broader look helps you find more useful solutions and avoid being stuck with circumstantial solutions– Why should you have to drive to buy cleaning supplies

when you can get the cleaning company to come over and clean for you?

17

Pain points (starting your car)

• Turn the key to start the car• Press the clutch, change gears, etc.

• Can’t it just get me to the store easier?

18

Workflows• Activity analysis helps us

– learn about the current solution

– think of alternative workflows that might be better• (Could the car take me to the

store without me driving it?)

• Together with the knowledge about users, we can start thinking about better workflows.

current solution


existing knowledge


19

Workflows

• Independent of the specifics of the solution

• Specifically explains how the task will be achieved by the user

• How can we represent workflows?– Storyboards!


20

Storyboards

• Cartoon-like progression of the workflow that you envision

Source: notethesmile.org

21

Storyboards

• Help you create a concrete idea of your vision about how the workflow should be

• Do not include the specifics of the solution• Conveys how it will be used– In which context– By whom– In what order– For what goal

22

Storyboards

• Help you communicate– with your team members– with users– about what the workflow should be

• Help you decide– Seeing a concrete representation of your ideas help you think

more efficiently– You are stateful! – Decisions about the workflow are better made when looking

at the workflow. Not when staring at an empty page in Microsoft Word!

23

Communicate: Talking is not enough!

• When you try to explain your idea by talking, people will have different ideas in their heads

• When you are discussing about it, you won’t be discussing about the same things

• Discussions become concrete when you have a storyboard in front of you– You can point at things rather than convincing people

with words

24

Decide: Humans are stateful

You are a completely different person when you are in different situations!

• Cool store with banging music

• Staring at your credit card bill

• Lying on the beach • Having an exam

• In the new home you’ll buy • Staring at your mortgage bill

Understanding that certain states are better for certain decisions changes your life for the better!

• Looking at a cartoon of your workflow

• Typing in Microsoft Word

Leads to better decisions about your solution

25

Storyboard

• Create multiple versions• Discuss and verify it with users

• Once you understand the workflow, then what?– Sketches!

26

Sketches

• Crude drawings of possible interface screens

• Inspired by frames of your storyboard

27

Sketches

• Intentionally low quality– “This is just an idea, not the end product”

• Rooted on the workflow, the capabilities of computers and the abilities of users

• Help communicate and make decisions about possible screens for your application

28

An example

• Let’s look at an example on how we can go from tasks to storyboards to sketches

• This is one specific way of doing it, you don’t have to follow this strictly

• The following example is by Tom Yeh

CMSC 434 Introduction to Human Computer InteractionSpring 2010 14

Example Design Process

• University Life Manager for Students• Tasks• Storyboard• Sketches


Tasks


• 

• 

• 

• 

• 

• 

• 

• 

Tasks

Eat in the food courtGet cash from the ATMBuy books from the bookstore

Buy coffee from the canteenStudy in the librarySend mails in the post officeSocialize with friends in the Terp ZoneWatch a movie in the Huff


Problem

•  Too far from the dormitory•  Too many people

– Long lines

– Hard to find seats


Exploring the solution space

• 

• 

• 

• 

• 

• 

• 

Website?Mobile app?Software?

Call center?Interactive kiosk?Digital sign?Snail mail?


Let’s build a website

•  Main tasks– Order food for pickup

– Order food for delivery– Reserve a seat

•  Supporting tasks– Sign up for an account

– Leave feedback


Describe tasks in more details

•  Goal•  Preconditions•  Subtasks

22

Task 1:Order food for pickup

•  Goal:– Pickup food (too superficial)

•  Preconditions:– Must have registered an account

•  Subtasks1. 2. 3. 4. 5. 6. 

Spring 2010

Browse the restaurantsSelect a restaurantBrowse the menuSelect an itemPlace an orderPay

CMSC 434 Introduction to Human Computer Interaction

23

Task 1:Order food for pickup

•  Goal:– Get food without having to wait in line too long

•  Preconditions:– Must have registered an account

•  Subtasks1. 2. 3. 4. 5. 6. 

Spring 2010

Browse the restaurantsSelect a restaurantBrowse the menuSelect an itemPlace an orderPay


24

Task 2:Order food for delivery

•  Goal:–  Get food without having to walk to the food court

•  Preconditions:–  Must have registered an account

•  Subtasks1.  Browse the restaurants

2. 3. 4. 5. 6. 7. 

Spring 2010

Select a restaurantBrowse the menuSelect an itemPlace an orderSpecify the delivery locationPay



Task 3:Reserve a seat

•  Goal:–  Get a place to sit without looking around in vain

•  Preconditions:–  Must have ordered food for pickup

•  Subtasks1. 2. 3. 4. 

Select a time slotBrowse the seating chartFind an available seatMake a reservation


Storyboard


Why story board?

•  Get feedback from users and colleagues•  Do sanity check: is this realistic?•  Help us think about the design


How to draw?

•  Draw by hand instead of a drawingprogram

•  Draw on papers or a whiteboard•  Draw in black and white•  Design your own symbols if you can’t

draw something


Create scenarios

•  Persona– Name? Gender? Age? Job? Eating habit?

•  Context– When?Where?Why? Drama?

•  Tasks– How? Steps? Errors?


1. 2. 3. 4. 

5. 6. 

Steps

Browse the restaurantsSelect a restaurantBrowse the menuSelect an item

Place an orderPay


Examples


Design Sketch


A story board is a series ofinteractions

User Computer

Interact

User Computer

User Computer

Time


Example:Browse restaurants

 1.2. 3. 4. 

5. 6. 


Place an orderPay


Story board design sketches

UI

Spring 2010 39

User Computer

Each interaction involves anexchange of three messages

Prompt

Input

Feedback

UI



The content of each message

•  Prompt:Computer User–  Instruction

–  Data

•  Input:User Computer–  Instruction–  Data

•  Feedback



 1.2. 3. 4. 

5. 6. 


Place an orderPay


What, how, when, and where?

1.  Prompt (Computer User)– Instruction

•  What? You can browse all available restaurants•  How? caption•  When? always•  Where? on top

– Data•  What? names of restaurants•  How? list•  When? always•  Where? center



2.  Input (User Computer)– Instruction

• • • • 

What? filter the listHow? buttonWhen? After the filtering criteria are enteredWhere? Top of the page, next to the dropdown box forselecting filtering criteria

– Data• • • • 

What? Filtering criteriaHow? dropdown boxWhen? alwaysWhere? top



3.  Feedback (Computer User)•  What? show the list is filtered•  How? “shrink”visual effect on items filtered out•  When? after the filter button is clicked•  Where? center



1. 2. 3. 4. 

5. 6. 


Place an orderPay



1.  Prompt (Computer User)– Instruction

•  What?•  How?•  When?•  Where?

– Data•  What?•  How?•  When?•  Where?



2.  Input (User Computer)– Instruction

•  What?•  How?•  When?•  Where?

– Data•  What?•  How?•  When?•  Where?



3.  Feedback (Computer User)•  What?•  How?•  When?•  Where?

SE 204 – Human Computer Interaction Lecture 5: From Requirements to Design Lecturer: Gazihan...

Documents

Transcript of SE 204 – Human Computer Interaction Lecture 5: From Requirements to Design Lecturer: Gazihan...