View
634
Download
1
Category
Preview:
Citation preview
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
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.
DESIGN, PROTOTYPING, AND CONSTRUCTION
Chapter 11
Lecture #11 IID_Interaction Design 3
Overview
• Prototyping
• Conceptual design
• Concrete design
• Using scenarios
• Generating prototypes
• Construction
Lecture #11 IID_Interaction Design 4
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
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
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
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.
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
Why prototype?
Lecture #11 IID_Interaction Design 10
Figure 11.2 A paper-based prototype of a handheld device to support an autistic child Source: Reprinted by permission of Sigil Khwaja. Link to see the full story of SITU at https://www.kickstarter.com/projects/situ/situ-smart-food-nutrition-scale
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
What to prototype?
• Technical issues
• Work flow, task design
• Screen layouts and information display
• Difficult, controversial, critical areas
Lecture #11 IID_Interaction Design 12
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
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
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
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
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
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
Generate storyboard from scenario
Lecture #11 IID_Interaction Design 19
Figure 11.4 Some simple sketches for low-fidelity prototyping
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
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
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
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.
Sketching
Lecture #11 IID_Interaction Design 24
Figure 11.4 Some simple sketches for low-fidelity prototyping
Sketching
• Sketching is important
to low-fidelity
prototyping
• Don’t be inhibited about
drawing ability.
Practice simple
symbols
Lecture #11 IID_Interaction Design 25
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
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
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
Generate card-based prototype from use case
Lecture #11 IID_Interaction Design 29
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.
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
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.
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.
Concrete Design
Lecture #11 IID_Interaction Design 34
Figure 11.10 Trutap: version 2.0 design concepts Source: © Trutap, Reproduced with permission.
Concrete Design
Lecture #11 IID_Interaction Design 35
Figure 11.10 Trutap: version 2.0 screenshots, inbox Source: © Trutap, Reproduced with permission.
Concrete Design
Lecture #11 IID_Interaction Design 36
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
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
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
Generating Prototypes
Lecture #11 IID_Interaction Design 40
Figure 11.14 The storyboard for the travel organizer focusing on environmental issues
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
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
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
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
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.
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
‘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
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
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
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
Physical computing kits
Lecture #11 IID_Interaction Design 51
Figure 11.22 The Arduino board Source: Courtesy of Nicolai Marquardt
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
Physical computing kits
Lecture #11 IID_Interaction Design 53
Figure 11.24 The MaKey MaKey toolkit
Physical computing kits
Lecture #11 IID_Interaction Design 54
Figure 11.25 A group of retired friends playing with a MaKey MaKey toolkit
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
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
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
Recommended