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

Transcription

1 Empathize Ideate Define Prototype Test

2 Designing Prototypes From Preece, Rogers & Sharp s Interaction Design

3 Process Conceptual design What product will do How it will behave Physical design Actual visual design After requirements are established Iterative

4 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

5 Class discussion Why should prototypes be used during the design process?

6 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

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

8 Low-fidelity prototyping Advantages Simple Inexpensive Quick to develop Quick to modify Easy to discard Help concentrate on big picture rather than details

9 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

10 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

11

12 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

13 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

14 Storyboarding Setup context Clear progression Give a script of important events Leave out the details

15 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

16 #1 Level of detail Comic by Scott McCloud.

17 #2 Inclusion of text Include text, but keep it short

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

19 #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

20 #5 Portrayal of Time Only use passage of time if necessary to understand E.g. a longer break is necessary between two frames

21 Examples

22 Storyboarding Tips If drawing is too difficult take pictures or use existing images with credit Blur out unnecessary details

23 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

24 Sketching Does not tell users how to interact Could be confusing if ideas are highly innovative Not as useful for physical (non-screen) design

25 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)

26 Examples

27 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

28 Examples

29 When prototyping Start building. Don t spend too long on one prototype. Build with the user in mind Identify what is being tested

30 When prototyping Impose Constraints Add a constraint while brainstorming (e.g. what if it were morning?) Time (create artificial deadlines to work efficiently)

31 Class discussion How do you use low-fidelity prototypes to get feedback on your design?

32 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

33 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?

34 Evaluating prototypes Users can also evaluate low-fidelity prototypes Decide which tasks you want to get feedback on Make sure your low-fidelity prototype shows every step user would have to go through in completing those tasks

35 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?

36 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

37 Class discussion What can go wrong with evaluating a low fidelity prototype?

38 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.

39 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

40 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.

41 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

42 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.

43 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 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.

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

45 Class activity Sketch in your notebook, a design for a peanut butter and jelly sandwich maker based on your task analysis 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

46 Class discussion What are some drawbacks to low-fidelity prototypes?

47 Low-fidelity prototyping Disadvantages Computer buggy 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

48 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

49 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-andpencil prototypes See for an example

50 Examples

51 Credits These slides are adapted from: 1.Juan Pablo Hourcade 2.The University of Washington Introduction to Human-Computer Interaction (CSE 440): se440/ 51