SE 204, IES 506 Human Computer Interaction

Transcription

1 SE 204, IES 506 Human Computer Interaction Lecture 4: The Design Process Lecturer: Gazihan Alankuş Please look at the end of the presentation for assignments (marked with TODO)

2 Addison Wesley is an imprint of CHAPTER 3: Managing Design Processes Designing the User Interface: Strategies for Effective Human-Computer Interaction Fifth Edition Ben Shneiderman & Catherine Plaisant in collaboration with Maxine S. Cohen and Steven M. Jacobs Revised by Gazihan Alankuş 2010 Pearson Addison-Wesley. All rights reserved.

3 The Lean Startup #leanstartup Eric Ries

4 Organizational Design and Support Usability Design is inherently creative and unpredictable. Interactive system designers must blend knowledge of technical feasibility with a mystical esthetic sense of what attracts users. Design is a process, not a state. The design process is nonhierarchical. The process is radically transformational. Design intrinsically involves the discovery of new goals. We will learn how to manage the design process Pearson Addison-Wesley. All rights reserved. 3-4

5 Organizational Design and Support Usability (cont.) Usability engineering has evolved into a recognized discipline with maturing practices and a growing set of standards Usability engineers and user-interface architects, sometimes called the user experience (UX) team are gaining experience in organizational change There are numerous papers and reporting addressing return on investment (ROI) for usability testing IBM, $1 on usability brings $100 payoff! Another analysis shows 720% improvement! Pearson Addison-Wesley. All rights reserved. 3-5

6 The Four Pillars of Design Pearson Addison-Wesley. All rights reserved. 3-6

7 How should we do it? What s the first step? What s next? 3-7

8 Traditional Product Development Unit of progress: Advance to Next Stage Waterfall Requirements Problem: known Design Implementation Solution: known Verification Maintenance Waterfalls are dangerous!

9 Spirals are better

10 Agile Unit of progress: a line of working code Product Owner or in-house customer Problem: Known Solution: Unknown

11 Product Development at Lean Startup Unit of progress: validated learning about customers ($$$) Problem: Unknown Solution: Unknown

12 Here is the core iterative loop IDEAS LEARN BUILD DATA CODE MEASURE

13 3-13 The Four Pillars of Design

14 Here is the core iterative loop IDEAS Requirements LEARN BUILD DATA CODE MEASURE

15 Requirements Goal: identify users and tasks USERS: Who will use this? How do they think? What do they like/know? TASKS: What does this need to do? What tasks do we need to support?

16 A sample iteration to start collecting requirements These must be the users These seem to be the tasks IDEAS We don t know much, yet. Maybe we should observe them while they are in the tasks If our software did this, it would help them! LEARN BUILD There is a problem that needs to be solved with software DATA CODE Create an environment to put users in this situation We saw that this and that happens during the task MEASURE Use the situation to learn what is going on Observe Ask questions

17 A sample iteration to start collecting requirements These must be the users These seem to be the tasks IDEAS We don t know much, yet. Maybe we should observe them while they are in the tasks If our software did this, it would help them! LEARN BUILD There is a problem that needs to be solved with software DATA CODE Create an environment to put users in this situation We saw that this and that happens during the task MEASURE Ethnographic Observation: Use the situation to learn what is going on Observe Ask questions

18 Ethnographic Observation Preparation Understand organization policies and work culture. Familiarize yourself with the system and its history. Set initial goals and prepare questions. Gain access and permission to observe/interview. Field Study Establish rapport with managers and users. Observe/interview users in their workplace and collect subjective/objective quantitative/qualitative data. Follow any leads that emerge from the visits. Record visits 2010 Pearson Addison-Wesley. All rights reserved

19 Ethnographic Observation (cont.) Analysis Compile the collected data in numerical, textual, and multimedia databases. Quantify data and compile statistics. Reduce and interpret the data. Refine the goals and the process used. Reporting Consider multiple audiences and goals. Prepare a report and present the findings Pearson Addison-Wesley. All rights reserved. 3-19

20 What could be next? Use what you learned! If our software did this, it would help them! IDEAS Maybe we can do this to enable it LEARN BUILD We saw that this and that happens during the task DATA CODE What do you create here? MEASURE

21 Prototypes 3/5/

22 Prototyping After you have some idea on what is necessary, you can start creating prototypes What you have is a prototype as you keep looping. The final software will be one of the better prototypes Paper prototypes Non-functional software mockups Working prototypes 3-22

23 Prototypes are a tool for measuring and learning IDEAS LEARN BUILD DATA PROTOTYPES CODE MEASURE

24 3-24 The Four Pillars of Design

25 Paper Prototypes Remember playing with your toys when you were 6 years old? Toys + imagination = loads of fun! Let s play cars! Shared imagination Make your friend experience a car race He can step into your imagination and contribute Any other board game Same idea Create a low-fidelity interactive experience that enables you to share imagination with others 3/5/

26 Why Paper Prototype? Communicate (with users and other team members) Demonstrate Make them experience rather than convince Decide (yourself and with team members) You are stateful! Decisions about the interface are better made when playing/using. Not when staring at Microsoft Word. 3/5/

27 Communicate A picture is worth a thousand words -Napoleon You are not a painter. You are designing interactive experiences! A one-minute user experience is worth a thousand pictures! -Gazihan 3/5/

28 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! Using your interface Typing in Microsoft Word Leads to better decisions about your interface 3/5/

29 Decide Use -> Better decisions How can you use it before creating it? PAPER PROTOTYPE! Paper prototypes allow you to simulate using the interface you want to create, so that you can make better decisions without using the actual interface 3/5/

30 Paper prototype how? Don t worry about how it looks Not only paper. Can use plastic props, too. Create your main interface elements Enough detail for core mechanics Enough detail for whatever you want to demonstrate 3/5/

31 Example 3/5/

32 Using Paper Prototypes Don t get attached Plan to throw one or two away Throwing away is not easy. Force yourself at least once. The whole point of prototypes is to feel free! Forget about it and create a new one with a different idea, rather than trying to force things to work together Parallelize them Keep more than one working paper prototype when you have multiple really good options 3/5/

33 Creating Paper Prototypes You can use what you learned or You can get users to help you with it!

34 Participatory Design Pearson Addison-Wesley. All rights reserved. 3-34

35 Participatory design is one way of creating prototypes LEARN IDEAS BUILD Participatory design DATA PROTOTYPES MEASURE

36 Participatory Design (cont.) Controversial More user involvement brings: more accurate information about tasks more opportunity for users to influence design decisions a sense of participation that builds users' ego investment in successful implementation potential for increased user acceptance of final system Pearson Addison-Wesley. All rights reserved. 3-36

37 Participatory Design (cont.) On the negative side, extensive user involvement may: be more costly lengthen the implementation period build antagonism with people not involved or whose suggestions rejected force designers to compromise their design to satisfy incompetent participants build opposition to implementation exacerbate personality conflicts between designteam members and users show that organizational politics and preferences of certain individuals are more important than technical issues Pearson Addison-Wesley. All rights reserved. 3-37

38 Participatory Design (cont.) Pearson Addison-Wesley. All rights reserved. 3-38

39 3-39 The Four Pillars of Design

40 Guidelines Guidelines documents and processes Each project has different needs, but guidelines should be considered for: Words, icons, and graphics Terminology (objects and actions), abbreviations, and capitalization Character set, fonts, font sizes, and styles (bold, italic, underline) Icons, graphics, line thickness, and Use of color, backgrounds, highlighting, and blinking Pearson Addison-Wesley. All rights reserved. 3-40

41 Guidelines Screen-layout issues Menu selection, form fill-in, and dialog-box formats Wording of prompts, feedback, and error messages Justification, white space, and margins Data entry and display formats for items and lists Use and contents of headers and footers Input and output devices Keyboard, display, cursor control, and pointing devices Audible sounds, voice feedback, touch input, and other special devices Response time for a variety of tasks Pearson Addison-Wesley. All rights reserved. 3-41

42 Guidelines Action sequences Direct-manipulation clicking, dragging, dropping, and gestures Command syntax, semantics, and sequences Programmed function keys Error handling and recovery procedures Training Online help and tutorials Training and reference materials Command syntax, semantics, and sequences 2010 Pearson Addison-Wesley. All rights reserved

43 Guidelines Guidelines creation should be a social process within an organization to help it gain visibility and build support 2010 Pearson Addison-Wesley. All rights reserved

44 What s left? (next week) IDEAS LEARN BUILD DATA CODE MEASURE

45 TODO: Homework We would like to build a mobile application (iphone, Android, etc.) that introduces visitors to the IEU campus. Using things that we learned, identify requirements for such an application Explain what you have done to identify these requirements ( I came up with them while sitting on my desk is one answer) Create a paper prototype that aims to satisfy most of the requirements that you identified Submission Write down the requirements in the body of an Take pictures of your paper prototype and attach them separately to the . No zips or rars! Send them to gazihan.ieu@gmail.com with the title [SE204] HW Week 4 before next class If you don t receive a reply from me saying thank you, that means I did not receive your