[ixd] week 11. design, prototyping and construction

57
Lecture 11 Design, Prototyping, and Construction Interaction Design / IID 2016 Spring Class hours : Tuesday 2 pm – 6 pm Lecture room : International Campus Veritas Hall B203 17 th May

Upload: dsdlab

Post on 13-Jan-2017

634 views

Category:

Design


1 download

TRANSCRIPT

Page 1: [IxD] Week 11. Design, Prototyping and Construction

Lecture 11

Design, Prototyping, and Construction

Interaction Design / IID 2016 Spring Class hours : Tuesday 2 pm – 6 pm Lecture room : International Campus Veritas Hall B203 17th May

Page 2: [IxD] Week 11. Design, Prototyping and Construction

Homework

Lecture #11 IID_Interaction Design 2

[Team] Establishing Requirements

[Team & Individual] Summer Show

Progress Report

[Individual] Complete the

studio activity

1 2 3

Outcomes - Descriptions of

users (Personas) - Scenarios - Use Cases - Essential Use

Cases - HTA

Team - week 01 Progress

Individual - Make a Pinterest board,

“Requirements” - Uploads sketches, diagrams,

renderings, and any sources of inspiration

Complete workshop #2 and try your first Unity project.

Page 3: [IxD] Week 11. Design, Prototyping and Construction

DESIGN, PROTOTYPING, AND CONSTRUCTION

Chapter 11

Lecture #11 IID_Interaction Design 3

Page 4: [IxD] Week 11. Design, Prototyping and Construction

Overview

• Prototyping

• Conceptual design

• Concrete design

• Using scenarios

• Generating prototypes

• Construction

Lecture #11 IID_Interaction Design 4

Page 5: [IxD] Week 11. Design, Prototyping and Construction

Prototyping

• What is a prototype?

• Why prototype?

• Different kinds of prototyping

– Low fidelity

– High fidelity

• Compromises in prototyping

– Vertical

– Horizontal

• Final product needs to be engineered

Lecture #11 IID_Interaction Design 5

Page 6: [IxD] Week 11. Design, Prototyping and Construction

What is a prototype?

• In other design fields a prototype is a small-scale model:

– a miniature car

– a miniature building or town

– the examples here come from a 3D printer

Lecture #11 IID_Interaction Design 6

Figure 11.1 (a) Color output from a 3D printer: all the gears and rods in this model were ‘printed’ in one pass from bottom to top, and when one gear is turned, the others turn too. Source: (a) The Computer Language Company, Inc., courtesy of Alan Freedman

Page 7: [IxD] Week 11. Design, Prototyping and Construction

What is a prototype?

Lecture #11 IID_Interaction Design 7

Figure 11.1 (b) James Bond's Aston Martin in Skyfall was in fact a 3D-printed model (http://www.telegraph.co.uk/technology/news/9712435/The-names-Printing-3D-Printing.html) Source: (b) Courtesy of voxeljet and Propshop Modelmakers Ltd

Page 8: [IxD] Week 11. Design, Prototyping and Construction

What is a prototype?

Lecture #11 IID_Interaction Design 8

Figure 11.1 (c) A teddy bear ‘printed’ from a wireframe design http://www.disneyresearch.com/project/printed-teddy-bears/ Source: (c) Courtesy of Scott Hudson, Human–Computer Interaction Institute, Carnegie Mellon University.

Page 9: [IxD] Week 11. Design, Prototyping and Construction

What is a prototype?

• In interaction design it can be (among other things):

– a series of screen sketches

– a storyboard, i.e. a cartoon-like series of scenes

– a Powerpoint slide show

– a video simulating the use of a system

– a lump of wood (e.g. PalmPilot)

– a cardboard mock-up

– a piece of software with limited functionality written in the target

language or in another language

Lecture #11 IID_Interaction Design 9

Page 11: [IxD] Week 11. Design, Prototyping and Construction

Why prototype?

• Evaluation and feedback are central to interaction design

• Stakeholders can see, hold, interact with a prototype more easily than

a document or a drawing

• Team members can communicate effectively

• You can test out ideas for yourself

• It encourages reflection: very important aspect of design

• Prototypes answer questions, and support designers in choosing

between alternatives

Lecture #11 IID_Interaction Design 11

Page 12: [IxD] Week 11. Design, Prototyping and Construction

What to prototype?

• Technical issues

• Work flow, task design

• Screen layouts and information display

• Difficult, controversial, critical areas

Lecture #11 IID_Interaction Design 12

Page 13: [IxD] Week 11. Design, Prototyping and Construction

Conceptual design

• Transform user requirements/needs into a conceptual model

• A conceptual model is an outline of what people can do with a product

and what concepts are needed to understand and interact with it

• Mood board may be used to capture feel

• Consider alternatives: prototyping helps

Lecture #11 IID_Interaction Design 13

Page 14: [IxD] Week 11. Design, Prototyping and Construction

Is there a suitable metaphor?

• Interface metaphors combine familiar knowledge with new knowledge in

a way that will help the user understand the product.

• Three steps: understand functionality, identify potential problem areas,

generate metaphors

• Evaluate metaphors:

– How much structure does it provide?

– How much is relevant to the problem?

– Is it easy to represent?

– ill the audience understand it?

– How extensible is it?

Lecture #11 IID_Interaction Design 14

Page 15: [IxD] Week 11. Design, Prototyping and Construction

Considering interaction and interface types

• Which interaction type?

– How the user invokes actions

– Instructing, conversing, manipulating or exploring

• Do different interface types provide insight?

– shareable, tangible, augmented reality, etc.

Lecture #11 IID_Interaction Design 15

Page 16: [IxD] Week 11. Design, Prototyping and Construction

Expanding the initial conceptual model

• What functions will the product perform?

– What will the product do and what will the human do (task allocation)?

• How are the functions related to each other?

– Sequential or parallel?

– Categorisations, e.g. all actions related to privacy on a smartphone

• What information is needed?

– What data is required to perform the task?

– How is this data to be transformed by the system?

Lecture #11 IID_Interaction Design 16

Page 17: [IxD] Week 11. Design, Prototyping and Construction

Concrete design

• Many aspects to concrete design

– Color, icons, buttons, interaction devices etc.

• User characteristics and context

– Accessibility, cross-cultural design

• Cultural website guidelines

– successful products “are … bundles of social solutions. Inventors succeed in

a particular culture because they understand the values, institutional

arrangements, and economic notions of that culture.”

Lecture #11 IID_Interaction Design 17

Page 18: [IxD] Week 11. Design, Prototyping and Construction

Using scenarios

• Express proposed or imagined situations

• Used throughout design in various ways

– as a basis for overall design

– scripts for user evaluation of prototypes

– concrete examples of tasks

– as a means of co-operation across professional boundaries

• Plus and minus scenarios to explore extreme cases

Lecture #11 IID_Interaction Design 18

Page 19: [IxD] Week 11. Design, Prototyping and Construction

Generate storyboard from scenario

Lecture #11 IID_Interaction Design 19

Figure 11.4 Some simple sketches for low-fidelity prototyping

Page 20: [IxD] Week 11. Design, Prototyping and Construction

Generating Prototypes

• Generating Storyboards from Scenarios

– The Thomson family gather around the organizer and enter a set of initial

requirements.

– The system's initial suggestion is that they consider a flotilla trip but Sky

and Eamonn aren't happy.

– The travel organizer shows them some descriptions of the flotillas written

by young people.

– Will confirms this recommendation and asks for details.

– The travel organizer emails the details.

Lecture #11 IID_Interaction Design 20

Page 21: [IxD] Week 11. Design, Prototyping and Construction

Low-fidelity Prototyping

• Uses a medium which is unlike the final medium, e.g. paper, cardboard

• Is quick, cheap and easily changed

• Examples:

– sketches of screens, task sequences, etc

– ‘post-it’ notes

– storyboards

– ‘Wizard-of-Oz’

Lecture #11 IID_Interaction Design 21

Page 22: [IxD] Week 11. Design, Prototyping and Construction

Storyboards

• Often used with scenarios, bringing more detail, and a chance to role

play

• It is a series of sketches showing how a user might progress through a

task using the device

• Used early in design

Lecture #11 IID_Interaction Design 22

Page 23: [IxD] Week 11. Design, Prototyping and Construction

Storyboarding

Lecture #11 IID_Interaction Design 23

Figure 11.3 An example storyboard for a mobile device to explore ancient sites such as The Acropolis.

Page 24: [IxD] Week 11. Design, Prototyping and Construction

Sketching

Lecture #11 IID_Interaction Design 24

Figure 11.4 Some simple sketches for low-fidelity prototyping

Page 25: [IxD] Week 11. Design, Prototyping and Construction

Sketching

• Sketching is important

to low-fidelity

prototyping

• Don’t be inhibited about

drawing ability.

Practice simple

symbols

Lecture #11 IID_Interaction Design 25

Page 26: [IxD] Week 11. Design, Prototyping and Construction

Filtering dimensions of prototyping

Lecture #11 IID_Interaction Design 26

Filtering dimension Example variables

Appearance size; color; shape; margin; form; weight; texture; proportion; hardness; transparency; gradation; haptic; sound

Data data size; data type (e.g. number; string; media); data use; privacy type; hierarchy; organization

Functionality system function; users’ functionality need

Interactivity input behavior; output behavior; feedback behavior; information behavior

Spatial structure arrangement of interface or information elements; relationship among interface or information elements – which can be either two- or three-dimensional, intangible or tangible, or mixed

Table 11.1 Example variables of each filtering dimension

Page 27: [IxD] Week 11. Design, Prototyping and Construction

Manifestation dimensions of prototyping

Lecture #11 IID_Interaction Design 27

Manifestation dimension Definition Example variables

Material

Medium (either visible or invisible) used to form a prototype

Physical media, e.g. paper, wood, and plastic; tools for manipulating physical matters, e.g. knife, scissors, pen, and sandpaper; computational prototyping tools, e.g. Macromedia Flash and Visual Basic; physical computing tools, e.g. Phidgets and Basic Stamps; available existing artifacts, e.g. a beeper to simulate a heart attack

Resolution

Level of detail or sophistication of what is manifested (corresponding to fidelity)

Accuracy of performance, e.g. feedback time responding to an input by a user (giving user feedback in a paper prototype is slower than in a computer-based one); appearance details; interactivity details; realistic versus faked data

Scope Range of what is covered to be manifested

Level of contextualization, e.g. website color scheme testing with only color scheme charts or color schemes placed in a website layout structure; book search navigation usability testing with only the book search related interface or the whole navigation interface

Table 11.2 The definition and variables of each manifestation dimension

Page 28: [IxD] Week 11. Design, Prototyping and Construction

Compromises in Prototyping

Lecture #11 IID_Interaction Design 28

Type Advantages Disadvantages

Low-fidelity prototype

Lower development cost Limited error checking

Evaluates multiple design concepts Poor detailed specification to code to

Useful communication device Facilitator-driven

Addresses screen layout issues Limited utility after requirements established

Useful for identifying market requirements Limited usefulness for usability tests

Proof of concept Navigational and flow limitations

High-fidelity prototype

Complete functionality More resource-intensive to develop

Fully interactive Time-consuming to create

User-driven Inefficient for proof-of-concept designs

Clearly defines navigational scheme Not effective for requirements gatherig

Use for exploration and test

Look and feel of final product

Serves as a living specification

Marketing and sales tool

Table 11.3 Advantages and disadvantages of low- and high-fidelity prototypes

Page 29: [IxD] Week 11. Design, Prototyping and Construction

Generate card-based prototype from use case

Lecture #11 IID_Interaction Design 29

Page 30: [IxD] Week 11. Design, Prototyping and Construction

Conceptual Design

Lecture #11 IID_Interaction Design 30

Figure 11.7 An example mood board Source: Image courtesy of The Blog Studio www.theblogstudio.com.

Page 31: [IxD] Week 11. Design, Prototyping and Construction

Key guiding principles of conceptual design

• Keep an open mind but never forget the users and their context.

• Discuss ideas with other stakeholders as much as possible.

• Use prototyping to get rapid feedback.

• Iterate, iterate, and iterate.

Lecture #11 IID_Interaction Design 31

Page 32: [IxD] Week 11. Design, Prototyping and Construction

How to really understand the users’ experience

Lecture #11 IID_Interaction Design 32

Figure 11.8 The patient kit for experience prototyping Source: Buchenau, M. and Suri, J. F. (2000) Experience prototyping. In Proceedings of DIS 2000, Design Interactive Systems: Processes, Practices, Methods, Techniques, pp. 17–19.

Page 33: [IxD] Week 11. Design, Prototyping and Construction

How to really understand the users’ experience

Lecture #11 IID_Interaction Design 33

Figure 11.9 The Third Age empathy suit helps designers experience the loss of mobility and sensory perception Source: Ford Motor Co.

Page 34: [IxD] Week 11. Design, Prototyping and Construction

Concrete Design

Lecture #11 IID_Interaction Design 34

Figure 11.10 Trutap: version 2.0 design concepts Source: © Trutap, Reproduced with permission.

Page 35: [IxD] Week 11. Design, Prototyping and Construction

Concrete Design

Lecture #11 IID_Interaction Design 35

Figure 11.10 Trutap: version 2.0 screenshots, inbox Source: © Trutap, Reproduced with permission.

Page 36: [IxD] Week 11. Design, Prototyping and Construction

Concrete Design

Lecture #11 IID_Interaction Design 36

Page 37: [IxD] Week 11. Design, Prototyping and Construction

Activity 11.4

Lecture #11 IID_Interaction Design 37

Figure 11.13 An example car-navigation system based on augmented reality Source: The Aeon Project, courtesy of Michaël Harboun

Page 38: [IxD] Week 11. Design, Prototyping and Construction

Activity 11.4

• Plus Scenario.

– This plus scenario shows some potential positive aspects of an augmented reality in-car

navigation system.

– Beth is on her way to her friend's new house. She hasn't been there before so she's

following the directions from her new in-car navigation system. While waiting in a traffic

light queue she brings up the overview map of her route and projects it on the

windscreen. From this view she sees that there is a traffic jam on the original

recommended route and tells the system to recalculate the route in order to avoid the

jam. The display automatically reverts to normal driving mode.

– Once through the traffic lights, there is quite a complicated set of road changes and

intersections. By projecting arrows and route boundaries directly on her windscreen, the

navigation system guides her through the road junction. Beth is surprised at how easy it

is to follow the system's directions, and as she avoids the traffic jams she arrives at her

friend's house on time.

Lecture #11 IID_Interaction Design 38

Page 39: [IxD] Week 11. Design, Prototyping and Construction

Activity 11.4

• Minus Scenario.

– This minus scenario shows some potential negative aspects of an augmented reality in-car

navigation system.

– Beth is on her way to her friend's new house. She hasn't been there before so she's following

the directions from her new in-car navigation system. It was quite difficult to set up the route

she wants to take because although the system can tell her about traffic jams, she has to

manually agree every section of her route and this took a long time because she doesn't know

the roads. Finally, she chose to have an ‘overview’ map of her route displayed as well as local

directions for the next turn and other landmarks. At last she set out in the right direction.

– Despite being in the bottom corner of her windscreen, the overview map is very distracting as it

is constantly changing and flashing information. Her directions are also displayed on her

windscreen but are quite difficult to interpret. Suddenly a large arrow appears right in her line

of sight highlighting an upcoming speed camera. This makes her jump and she swerves,

narrowly missing the car in front. Feeling quite flustered and nervous, Beth turns off the system

and telephones her friend for directions.

Lecture #11 IID_Interaction Design 39

Page 40: [IxD] Week 11. Design, Prototyping and Construction

Generating Prototypes

Lecture #11 IID_Interaction Design 40

Figure 11.14 The storyboard for the travel organizer focusing on environmental issues

Page 41: [IxD] Week 11. Design, Prototyping and Construction

Generating Card-Based Prototypes from Use Cases

Lecture #11 IID_Interaction Design 41

Figure 11.16 Cards one to three of a card-based prototype for the travel organizer

Page 42: [IxD] Week 11. Design, Prototyping and Construction

Generating Card-Based Prototypes from Use Cases

Lecture #11 IID_Interaction Design 42

Figure 11.17 Card four of a card-based prototype for the travel organizer

Page 43: [IxD] Week 11. Design, Prototyping and Construction

Explore the user’s experience

• Use personas, card-based prototypes or stickies to model the user

experience

• Visual representation called:

– design map

– customer/user journey map

– experience map

• Two common representations

– wheel

– timeline

Lecture #11 IID_Interaction Design 43

Page 44: [IxD] Week 11. Design, Prototyping and Construction

An experience map drawn as a wheel

Lecture #11 IID_Interaction Design 44

Figure 11.19 (a) An experience map using a wheel representation Source: (a) http://www.ux-lady.com/experience-maps-user-journey-and-more-exp-map-layout

Page 45: [IxD] Week 11. Design, Prototyping and Construction

An experience map drawn as a timeline

Lecture #11 IID_Interaction Design 45

Figure 11.19 (b) An example timeline design map illustrating how to capture different issues. Source: (b) Adlin, T. and Pruitt, J. (2010) The Essential Persona Lifecycle: Your guide to building and using personas. Morgan Kaufmann p. 134.

Page 46: [IxD] Week 11. Design, Prototyping and Construction

Card-based prototypes

• Index cards (3 X 5 inches)

• Each card represents one screen or

part of screen

• Often used in website development

Lecture #11 IID_Interaction Design 46

Page 47: [IxD] Week 11. Design, Prototyping and Construction

‘Wizard-of-Oz’ prototyping

• The user thinks they are interacting with a computer, but a developer

is responding to output rather than the system.

• Usually done early in design to understand users’ expectations

• What is ‘wrong’ with this approach?

Lecture #11 IID_Interaction Design 47

>Blurb blurb >Do this >Why?

User

Page 48: [IxD] Week 11. Design, Prototyping and Construction

High-fidelity prototyping

• Uses materials that you would expect to be in the final product

• Prototype looks more like the final system than a low-fidelity version

• High-fidelity prototypes can be developed by integrating existing

hardware and software components

• Danger that users think they have a complete system…….see

compromises

Lecture #11 IID_Interaction Design 48

Page 49: [IxD] Week 11. Design, Prototyping and Construction

Compromises in prototyping

• All prototypes involve compromises

• For software-based prototyping maybe there is a slow response?

sketchy icons? limited functionality?

• Two common types of compromise

– horizontal: provide a wide range of functions, but with little detail

– vertical: provide a lot of detail for only a few functions

• Compromises in prototypes mustn't be ignored. Product needs

engineering

Lecture #11 IID_Interaction Design 49

Page 50: [IxD] Week 11. Design, Prototyping and Construction

Construction: physical computing

• Build and code prototypes using electronics

• Toolkits available include

– Arduino

– LilyPad (for fabrics)

– Senseboard

– MaKey MaKey

• Designed for use by wide range of people

Lecture #11 IID_Interaction Design 50

Page 51: [IxD] Week 11. Design, Prototyping and Construction

Physical computing kits

Lecture #11 IID_Interaction Design 51

Figure 11.22 The Arduino board Source: Courtesy of Nicolai Marquardt

Page 52: [IxD] Week 11. Design, Prototyping and Construction

Physical computing kits

Lecture #11 IID_Interaction Design 52

Figure 11.23 The Lilypad Arduino kit Source: Photo courtesy of Leah Buechley http://web.media.mit.edu/~leah/LilyPad/build/turn_signal_jacket.html

Page 53: [IxD] Week 11. Design, Prototyping and Construction

Physical computing kits

Lecture #11 IID_Interaction Design 53

Figure 11.24 The MaKey MaKey toolkit

Page 54: [IxD] Week 11. Design, Prototyping and Construction

Physical computing kits

Lecture #11 IID_Interaction Design 54

Figure 11.25 A group of retired friends playing with a MaKey MaKey toolkit

Page 55: [IxD] Week 11. Design, Prototyping and Construction

Construction: SDKs

• Software Development Kits

– programming tools and components to develop for a specific platform, e.g. iOS

• Includes: IDE, documentation, drivers, sample code, application

programming interfaces (APIs)

• Makes development much easier

• Microsoft’s Kinect SDK has been used in research

Lecture #11 IID_Interaction Design 55

Page 56: [IxD] Week 11. Design, Prototyping and Construction

Summary

• Different kinds of prototyping are used for different purposes and at different

stages

• Prototypes answer questions

• The final product must be engineered appropriately

• Two aspects of design: conceptual and concrete

• To generate conceptual design, consider interface metaphors, interaction types

and interface types

• Storyboards can be generated from scenarios

• Card-based prototypes can be generated from use cases

• Physical computing kits and SDKs facilitate transition from design to construction

Lecture #11 IID_Interaction Design 56

Page 57: [IxD] Week 11. Design, Prototyping and Construction

Homework

Lecture #11 IID_Interaction Design 57

[Team] Sketching & Prototyping

[Team & Individual] Summer Show

Progress Report

[Individual] Complete the

studio activity

1 2 3

Outcomes - Conceptual Design

- Metaphor - Interaction - Interfaces

- Concrete Design

- Storyboard - Card-based

Prototypes

Team - week 02 Progress

Individual - Make a Pinterest board,

“Prototypes” - Uploads Storyboards,

Wireframes, and any possible prototypes or sketches of them.

Complete workshop #2 and try your first Unity project.

Submission Due : 11: 59 pm Sun. 22nd May