Interaction Design. Chapter 7 May 28th, 2014, 9am-12pm): Prototyping UX - From Sketch to Prototype

Transcription

1 Interaction Design Chapter 7 May 28th, 2014, 9am-12pm): Prototyping UX - From Sketch to Prototype

2 Recap Day 6: LMU München Medieninformatik Alexander Wiethoff + Andreas Butz Interaction Design SS2014 2

3 LMU München Medieninformatik Alexander Wiethoff + Andreas Butz Interaction Design SS2014 source: [8] 3

4 Jonas, Generative tools, 2001 ANALYSIS Definition of the system What is the problem? EVALUATION Possible alternatives What future do we want? SYNTHESIS Design of final solutions What do we implement? brief solution The designer is a problem-scouter The designer is a story-teller The designer is an executor LMU München Medieninformatik Alexander Wiethoff + Andreas Butz Interaction Design SS2014 source: [4] 4

5 frequent users novice users expert users infrequent users LMU München Medieninformatik Alexander Wiethoff + Andreas Butz Interaction Design SS2014 5

6 BMW Racing Cockpit image source BMW LMU München Medieninformatik Alexander Wiethoff + Andreas Butz Interaction Design SS2014 6

7 Different user types and usage frequency will require dedicated solutions. LMU München Medieninformatik Alexander Wiethoff + Andreas Butz Interaction Design SS2014 7

8 Summary Three main data gathering methods: interviews, questionnaires, observation Four key issues of data gathering: goals, triangulation, participant relationship, pilot Interviews may be structured, semi-structured or unstructured Observation may be direct or indirect, in the field or in controlled setting Techniques can be combined depending on study focus, participants, nature of technique and available resources CCtsource: [8] LMU München Medieninformatik Alexander Wiethoff + Andreas Butz Interaction Design SS2014 8

9 Summary Creating a Good Questionnaire: Keep your questionnaire short. In fact, the shorter the better. Use simple and direct language. The questions must be clearly understood by the respondent. Begin with a few non-threatening and interesting items. Place the most important items in the first half of the questionnaire Leave adequate space for respondents to make comments. Perform iterative pre-tests and eliminate or replace questions that are hard to understand or lead to useless / unsatisfying results. Accommodate all answers Note the difference between interviews and questionnaires LMU München Medieninformatik Alexander Wiethoff + Andreas Butz Interaction Design SS2014 source: [10] 9

10 Overview: Intro & Designprocess Phase Values and Levels of Prototyping UX Prototyping Techniques Prototyping Case Study

11 User-experience design Information architecture Communication design Interaction design Industrial design User Interface engineering Usability engineering Human factors Human-computer interaction source: [11]

12 User Experience Design Technology UX Business Design Peter Morville

13 User Experience Design Peter Morville

14 Getting the right Design and the Design right Bill Buxton - Sketching User Experiences source: [1]

15 User Study Design The Purpose of User Studies Research Aims: Reliability, Validity and Generalizability Research Methods and Experimental Designs Ethical Considerations HCI-related and practical information for your own studies Interpretation of Data and Presentation of Results Front Stage

16 Back Stage

17 User Interface Transferring Coordinating Storing

18 Double Diamond source: [8]

19 Double Diamond Why? and How? source: [8]

20 Double Diamond What? source: [8]

21 We focus on source: [8]

22 Overview Research Innovate Prototype A study of the design process - Design Council London source: [8]

23 Overview Tell a story Make it tangible Research Innovate Prototype

24 Overview: Intro & Designprocess Phase Values and Levels of Prototyping UX Prototyping Techniques Prototyping Case Study

25 For the Designer: For the End User: Exploration Visualisation Feasibly Inspiration Collaboration Effectiveness / Usefulness A change of viewpoint Usability Desirability For the Producer: Conviction Specification Benchmarking source: [5]

26 It s really hard to design products by focus groups. A lot of times, people don t know what they want until you show it to them. Steve Jobs

27 Fidelity v. Resolution low resolution low fidelity high resolution low fidelity high resolution high fidelity source: [5]

28 Low Fidelity High Fidelity Open Discussion Sharp Opinions Prompting Required Self Explanatory Quick and Dirty Deliberate and Refined Early Validation Concrete Ideas source: [5]

29 Low Resolution High Resolution Less Details More Details Focus on core interactions Focus on the whole Quick and Dirty Deliberate and Refined Early Validation Concrete Ideas source: [5]

30 1st Iteration low-res/low-fi

31 4th Iteration high-res/high-fi

32 80/20 rule source: [7]

33 A principle for setting priorities: users will use 20% of the features of your product 80% of the time. Focus the majority of your design and development effort (80%) on the most important 20% of the product. source: [7]

34 Overview: Intro & Designprocess Phase Values and Levels of Prototyping UX Prototyping Techniques Prototyping Case Study

35 Paper-prototyping

36 What is it? Paper prototyping is a widely used method in the usercentered design process, a process that helps developers to create products/screen based applications that meets the user's expectations and needs. It is throwaway prototyping and involves creating rough, even hand sketched, drawings of an interface to use as prototypes, or models, of a design.

37 History Paper prototyping started in the mid 1980s and then became popular in the mid 1990s when companies such as IBM, Honeywell, Microsoft, and others started using the technique in developing their products.

38 Paper prototype of a typical form-filling screen Paper prototype of a tabs-based design User test of a low-fidelity paper prototype of a website Typical set-up of the usability laboratory for a test session with a paper prototype photo credits NN Group

39 User test of a device-based interaction User test of a high-fidelity paper prototype of a homepage. Testing hardware user interfaces: mockup of a kiosk. photo credits NN Group

40

41 Source: YouTube

42 Video-prototyping Image Source: CIID

43 Intro Acting out the Scenario

44 Intro Quick Kiosk Mock-up

45 Sketching with Hardware photo credits alexander wiethoff

46 basic stamp bx 24 basic atom pic higher level lower level Assembly

47 Atmel AT Mega 328 Raspberry PI

48 Thermistor Bend Sensor PIR Sensor photo credits wikimedia

49 Force Sensor Potentiometer Magnet Switch photo credits wikimedia

50 Distance IR Sensor Touch QT Sensor Ultrasound Sensor photo credits wikimedia

51 photo credits alexander wiethoff

52 photo credits alexander wiethoff

53 Quick video overview photo credits alexander wiethoff

54 video alexander wiethoff

55 Overview: Intro & Designprocess Phase Values and Levels of Prototyping UX Prototyping Techniques Prototyping Case Study

56 Some Examples from a school called Copenhagen Institute of Interaction Design (CIID)

57 Some Examples from a school called Copenhagen Institute of Interaction Design (CIID)

58 Phase 1 User Research Field Research 2 Weeks 2 Weeks Desk Research Phase 2 Analysis and Concept Generation Concepts Phase 3 Prototyping Prototyping Phase 4 Usability Testing LO Fidelity HI Fidelity Phase 5 Implementation Final Prototype

59 IDII CASES 59

60 IDII CASES 60

61 IDII CASES 61

62 IDII CASES 62

63 IDII CASES 63

64 IDII CASES 64

65 IDII CASES 65

66 IDII CASES 66

67 IDII CASES 67

68 IDII CASES 68

69 CASES 69

70 CASES 70

71 CASES 71

72 CASES 72

73 CASES 73

74 CASES 74 Thanks for your attention

75 References (books) Bill moggridge: designing interactions Publisher: The MIT Press; 1 edition (October 1, 2007) ISBN-10: Bill buxton: sketching the user experience Publisher: Morgan Kaufmann (March 30, 2007) ISBN-10: Don norman: the design of everyday things Publisher: Basic Books (September 17, 2002) ISBN-10: Kevin mullet: designing visual interfaces Publisher: Prentice Hall PTR (December 15, 1994) ISBN-10: links: