Empathize Ideate Define Prototype Test CS 2520 HumanComputer

  • Slides: 50
Download presentation
Empathize Ideate Define Prototype Test CS: 2520 Human-Computer Interaction. Fall 2016.

Empathize Ideate Define Prototype Test CS: 2520 Human-Computer Interaction. Fall 2016.

Designing Prototypes From Preece, Rogers & Sharp’s Interaction Design CS: 2520 Human-Computer Interaction. Fall

Designing Prototypes From Preece, Rogers & Sharp’s Interaction Design CS: 2520 Human-Computer Interaction. Fall 2016.

Process • Conceptual design – What product will do – How it will behave

Process • Conceptual design – What product will do – How it will behave • Physical design – Actual visual design • After requirements are established • Iterative CS: 2520 Human-Computer Interaction. Fall 2016.

What is a prototype? • Can range from paper-based to programmed • Requirements can

What is a prototype? • Can range from paper-based to programmed • Requirements can be used to see what design will work best • Save resources by testing out design ideas before investing major resources in writing code CS: 2520 Human-Computer Interaction. Fall 2016.

Class discussion • Why should prototypes be used during the design process? CS: 2520

Class discussion • Why should prototypes be used during the design process? CS: 2520 Human-Computer Interaction. Fall 2016.

Prototypes • Many ideas can easily be sketched • Make it easier to communicate

Prototypes • Many ideas can easily be sketched • Make it easier to communicate ideas about how technology will work • Stakeholders can provide feedback • Helps in learning about strengths and weaknesses of alternative designs CS: 2520 Human-Computer Interaction. Fall 2016.

Class discussion • What do you think are the advantages of developing low-fidelity prototypes?

Class discussion • What do you think are the advantages of developing low-fidelity prototypes? CS: 2520 Human-Computer Interaction. Fall 2016.

Low-fidelity prototyping • Advantages – Simple – Inexpensive – Quick to develop – Quick

Low-fidelity prototyping • Advantages – Simple – Inexpensive – Quick to develop – Quick to modify – Easy to discard – Help concentrate on big picture rather than details CS: 2520 Human-Computer Interaction. Fall 2016.

Paper prototyping • Underline links • Text input fields with rectangular boxes • Check

Paper prototyping • Underline links • Text input fields with rectangular boxes • Check boxes and radio buttons use correction tape • Buttons with text inside oval • Sticky notes for dropdown • Drag and drop – hard to prototype CS: 2520 Human-Computer Interaction. Fall 2016.

Paper prototyping • Scrolling: cut a box out of a piece of paper and

Paper prototyping • Scrolling: cut a box out of a piece of paper and lay on top of screen, move as the user scrolls • Might be faster to type info and print as opposed to writing it by hand CS: 2520 Human-Computer Interaction. Fall 2016.

https: //youtu. be/B 7 M 0 f. VXdov. M CS: 2520 Human-Computer Interaction. Fall

https: //youtu. be/B 7 M 0 f. VXdov. M CS: 2520 Human-Computer Interaction. Fall 2016.

Storyboarding • One type of low-fidelity prototypes • Sketches showing how user would interact

Storyboarding • One type of low-fidelity prototypes • Sketches showing how user would interact with technology • Good for presenting ideas to non-users • Can be used to sell innovative ideas • Most useful for early concepts of highly innovative designs CS: 2520 Human-Computer Interaction. Fall 2016.

Storyboarding • May not get the best feedback from users because you show them

Storyboarding • May not get the best feedback from users because you show them how the system should be used • May not be the best for comparing different alternatives for same reason CS: 2520 Human-Computer Interaction. Fall 2016.

Storyboarding • • Setup context Clear progression Give a “script” of important events Leave

Storyboarding • • Setup context Clear progression Give a “script” of important events Leave out the details CS: 2520 Human-Computer Interaction. Fall 2016.

Storyboarding Five visual elements: 1. Level of detail 2. Inclusion of text 3. Inclusion

Storyboarding Five visual elements: 1. Level of detail 2. Inclusion of text 3. Inclusion of people and emotions 4. Number of Frames 5. Portrayal over time CS: 2520 Human-Computer Interaction. Fall 2016.

#1 Level of detail Comic by Scott Mc. Cloud. https: //laurenericksondotcom. files. wordpress. com/2011/09/understanding-comics

#1 Level of detail Comic by Scott Mc. Cloud. https: //laurenericksondotcom. files. wordpress. com/2011/09/understanding-comics 1. png CS: 2520 Human-Computer Interaction. Fall 2016.

#2 Inclusion of text Include text, but keep it short CS: 2520 Human-Computer Interaction.

#2 Inclusion of text Include text, but keep it short CS: 2520 Human-Computer Interaction. Fall 2016.

#3 Inclusion of people and emotions • Include people experiencing the system and their

#3 Inclusion of people and emotions • Include people experiencing the system and their reactions CS: 2520 Human-Computer Interaction. Fall 2016.

#4 Portrayal of Frames • 4 -6 frames ideal – Present a succinct story

#4 Portrayal of Frames • 4 -6 frames ideal – Present a succinct story – Less work to illustrate • If longer – May lose focus of story or attention CS: 2520 Human-Computer Interaction. Fall 2016.

#5 Portrayal of Time • Only use passage of time if necessary to understand

#5 Portrayal of Time • Only use passage of time if necessary to understand – E. g. a longer break is necessary between two frames CS: 2520 Human-Computer Interaction. Fall 2016.

Examples CS: 2520 Human-Computer Interaction. Fall 2016.

Examples CS: 2520 Human-Computer Interaction. Fall 2016.

Storyboarding Tips • If drawing is too difficult take pictures or use existing images

Storyboarding Tips • If drawing is too difficult take pictures or use existing images with credit • Blur out unnecessary details CS: 2520 Human-Computer Interaction. Fall 2016.

Sketching • Do not worry about your drawing skills – Best when they don’t

Sketching • Do not worry about your drawing skills – Best when they don’t look good – Avoids concentrating on details, colors • Helps everyone concentrate on whether design has the right elements and flows well CS: 2520 Human-Computer Interaction. Fall 2016.

Sketching • Does not tell users how to interact • Could be confusing if

Sketching • Does not tell users how to interact • Could be confusing if ideas are highly innovative • Not as useful for physical (non-screen) design CS: 2520 Human-Computer Interaction. Fall 2016.

Sketching • Sketch all screens (including variations) involved in the tasks you want to

Sketching • Sketch all screens (including variations) involved in the tasks you want to get feedback on • Usually useful to use a large sheet of paper • Pencils better for initial sketches • Colored pens may be used for more elaborate sketches • May use additional pieces of paper/other materials to show changes on the same screen (e. g. keep navigation menu, change content) CS: 2520 Human-Computer Interaction. Fall 2016.

Examples CS: 2520 Human-Computer Interaction. Fall 2016.

Examples CS: 2520 Human-Computer Interaction. Fall 2016.

Index cards • Use common for developing websites • Also useful for applications with

Index cards • Use common for developing websites • Also useful for applications with a large number of screens • Each card represents a screen • Can help organize websites • Can help with information architecture CS: 2520 Human-Computer Interaction. Fall 2016.

Examples CS: 2520 Human-Computer Interaction. Fall 2016.

Examples CS: 2520 Human-Computer Interaction. Fall 2016.

When prototyping • • Start building. Don’t spend too long on one prototype. Build

When prototyping • • Start building. Don’t spend too long on one prototype. Build with the user in mind Identify what is being tested CS: 2520 Human-Computer Interaction. Fall 2016.

When prototyping • Impose Constraints – Add a constraint while brainstorming (e. g. what

When prototyping • Impose Constraints – Add a constraint while brainstorming (e. g. what if it were morning? ) – Time (create artificial deadlines to work efficiently) CS: 2520 Human-Computer Interaction. Fall 2016.

Class discussion • How do you use low-fidelity prototypes to get feedback on your

Class discussion • How do you use low-fidelity prototypes to get feedback on your design? CS: 2520 Human-Computer Interaction. Fall 2016.

Evaluating prototypes • Go over user tasks to see how well the prototype will

Evaluating prototypes • Go over user tasks to see how well the prototype will work • Evaluate in terms of requirements, usability goals, user experience goals • Evaluate using usability principles and heuristics CS: 2520 Human-Computer Interaction. Fall 2016.

Evaluating prototypes • Examples – Can users complete tasks? – How many steps does

Evaluating prototypes • Examples – Can users complete tasks? – How many steps does it take to complete tasks? – Are all the necessary functions available? – Are the necessary actions easily identifiable? – Is it easy to recuperate from errors? – What is the likelihood that users will make mistakes? CS: 2520 Human-Computer Interaction. Fall 2016.

Evaluating prototypes • Ask users to complete a particular task • For each step

Evaluating prototypes • Ask users to complete a particular task • For each step in the task – Ask: what would you do next? – After they show you what they would do, show them how the system would react • Show sketch for another screen • Use materials to modify current sketch – Ask: how do you interpret the system’s response? CS: 2520 Human-Computer Interaction. Fall 2016.

Evaluating prototypes • Tell users you are not testing them, they are testing your

Evaluating prototypes • Tell users you are not testing them, they are testing your design • Do not be defensive about your design • Document any issues – Don’t know what to do – Surprised by response – Can’t find what they are looking for • Document what works well CS: 2520 Human-Computer Interaction. Fall 2016.

Class discussion What can go wrong with evaluating a low fidelity prototype? CS: 2520

Class discussion What can go wrong with evaluating a low fidelity prototype? CS: 2520 Human-Computer Interaction. Fall 2016.

What can go wrong? Artificial Constraints “First, using your account number, make 15 copies

What can go wrong? Artificial Constraints “First, using your account number, make 15 copies of a document. Then, make another 15 copies, but DO NOT use your account number for these. ” CS: 2520 Human-Computer Interaction. Fall 2016.

What can go wrong? • Artificial sub goals – Photocopying machine: Tell someone to

What can go wrong? • Artificial sub goals – Photocopying machine: Tell someone to photocopy a 2 -sided document on 8½” x 11” paper – Don’t say “make copies 50% dark”, “use bin b”, etc. – Let the user figure out for themselves what to do CS: 2520 Human-Computer Interaction. Fall 2016.

What can go wrong? • Artificial ordering – Enter in 10 copies, with lightness

What can go wrong? • Artificial ordering – Enter in 10 copies, with lightness set to 10%. – Choose 1 sided to 2 sided, use paper source bin A. – Cover sheet needed, using paper bin B for cover sheet. – Set stapling feature on and collating on. – Start printing. CS: 2520 Human-Computer Interaction. Fall 2016.

What can go wrong? Do not make this a data entry task • Make

What can go wrong? Do not make this a data entry task • Make 23 copies • With collate • Cover sheets • Default darkness • 1 Sided-> 1 Sided CS: 2520 Human-Computer Interaction. Fall 2016.

What can go wrong? “You are a teacher and are trying to make 40

What can go wrong? “You are a teacher and are trying to make 40 copies of a one-sided magazine article that is 10 pages long for your class tomorrow. Due to the large number of copies, you print the article double -sided. In other words, the 10 page article would be printed on 5 sheets of paper. Due to the high contrast of the article, you must lighten the copy. In other words, change the contrast. You then want the copies to be collated and stapled. ” CS: 2520 Human-Computer Interaction. Fall 2016.

What should I do? “It’s your first day in the office, starting a new

What should I do? “It’s your first day in the office, starting a new job. You would like to make some copies of several documents that your boss gave you to browse through. Your colleague in the next cubicle tells you that you need an access code to make copies. The code is 5150. You walk over to the copy machine at the end of the hall and realize that it is not the Xerox copier that you are accustomed too. . . Make 2 copies of the ‘Company Annual Report’. ” CS: 2520 Human-Computer Interaction. Fall 2016.

Class activity • How would you evaluate storyboards? • How about index card prototypes?

Class activity • How would you evaluate storyboards? • How about index card prototypes? CS: 2520 Human-Computer Interaction. Fall 2016.

Class activity • Sketch in your notebook, a design for a coloring system based

Class activity • Sketch in your notebook, a design for a coloring system based on your tasks • Join your group project team and discuss everyone’s designs • Develop a design for the team using large sheets of paper and markers • Present to the class CS: 2520 Human-Computer Interaction. Fall 2016.

Class discussion • What are some drawbacks to low-fidelity prototypes? CS: 2520 Human-Computer Interaction.

Class discussion • What are some drawbacks to low-fidelity prototypes? CS: 2520 Human-Computer Interaction. Fall 2016.

Low-fidelity prototyping • Disadvantages – Slower than a computer – Hard to implement dropdowns,

Low-fidelity prototyping • Disadvantages – Slower than a computer – Hard to implement dropdowns, drag and drop, audio, video – Won’t look like final product – Participants cannot use them on their own CS: 2520 Human-Computer Interaction. Fall 2016.

Low-fidelity prototyping • What you will do for Phase 2 of group project •

Low-fidelity prototyping • What you will do for Phase 2 of group project • Use low-tech materials – White and colored paper, medium tip pens, cardboard, scissors, post its, tape, overhead transparencies, paper correction tape CS: 2520 Human-Computer Interaction. Fall 2016.

Sketching: Medium Fidelity • Wireframes are a variation of sketching used for websites •

Sketching: Medium Fidelity • Wireframes are a variation of sketching used for websites • Developed in software • Some may be interactive • May be used after first round of paper-and-pencil prototypes • See https: //balsamiq. com/ for an example CS: 2520 Human-Computer Interaction. Fall 2016.

Examples CS: 2520 Human-Computer Interaction. Fall 2016.

Examples CS: 2520 Human-Computer Interaction. Fall 2016.

Credits These slides are adapted from: 1. Juan Pablo Hourcade 2. The University of

Credits These slides are adapted from: 1. Juan Pablo Hourcade 2. The University of Washington Introduction to Human-Computer Interaction (CSE 440): https: //courses. cs. washington. edu/courses/c se 440/ CS: 2520 Human-Computer Interaction. Fall 2016. 50