Design, prototyping and construction -...
Transcript of Design, prototyping and construction -...
‹#› 2014.03.31
Design, prototyping and construction
Lecture 12 Kristina Lapin
Projektas Informatikos ir programų sistemų studijų programų kokybės gerinimas ( VP1-2.2-ŠMM-07-K-02-039)
‹#› 2014.03.31
Overview
• Prototyping and construction
• Conceptual design
• Physical design
• Generating prototypes
• Support for design
‹#› 2014.03.31
Prototyping and construction
• What is a prototype?
• Why prototype?
• Different kinds of prototyping low fidelity high fidelity
• Compromises in prototyping vertical horizontal
• Construction
‹#› 2014.03.31
What is a prototype?
In other design fields a prototype is a small-scale model:
• a miniature car
• a miniature building or town
• the example here comes from a 3D printer
‹#› 2014.03.31
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
‹#› 2014.03.31
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
‹#› 2014.03.31
What to prototype?
• Technical issues
• Work flow, task design
• Screen layouts and information display
• Difficult, controversial, critical areas
‹#› 2014.03.31
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’
‹#› 2014.03.31
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
‹#› 2014.03.31
Sketching
• Sketching is important to low-fidelity
prototyping
• Don’t be inhibited about drawing ability. Practice simple symbols
Hartfield, Winograd, 1996
‹#› 2014.03.31
Card-based prototypes
• Index cards (3 X 5 inches)
• Each card represents one screen or part of screen
• Often used in website development
‹#› 2014.03.31
‘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?
>Blurb blurb
>Do this
>Why?
User
Wizard of Oz prototyping
13
PinTrace robot surgery system with a
touch-screen interface. To the left of
the screen there is a robot arm which
oves to an exact position to guide the
surgeon in the insertion of hip fixation
devices.
Wizard view of one proposed PinTrace
screen layout
used for positioning different reference
objects on an X-ray
Molin, 2004
Low-fidelity prototiping
Advantages
• Lower development cost
• Evaluate multiple-design concepts
• Useful-communication device
• Address screen layout issues
• Proof-of-concept
Disadvantages
• Limited error checking
• Poor detailed specification to code to
• Facilitator driven
14 2014.03.31
‹#› 2014.03.31
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.
• For a high-fidelity software prototype common
environments include Macromedia Director, Visual
Basic, and Smalltalk.
• Danger that users think they have a full
system…….see compromises
High-fidelity prototyping
Advantages
Complex functionality.
Fully interactive.
User-driven.
Clearly defines navigational scheme
Use for exploration and test
Look and fell of final product
Serves as living specification
Marrketing and sales tool
Disadvantages
More expensive to develop
Time-consuming to create
Inefficient for proof-of-concept designs
Not effective for requirements gathering
16 2014.03.31
‹#› 2014.03.31
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
‹#› 2014.03.31
Filtering dimensions of prototyping
Filtering out different aspects of design
19 Lim et al. 2008
‹#› 2014.03.31
Manifestation dimensions of prototyping
Example: Samsung VI660 prototipes
21
The paper prototyping setup and its use situation.
Lim et al. 2008
Example: telefono Samsung VI660 prototypes
22
The computer-based prototype and its test setup
Lim et al. 2008
The fully functional prototype (Samsung VI660)
23 2014.03.31
Lim et al. 2008
24 Lim et al. 2008
‹#› 2014.03.31
Construction
• Taking the prototypes (or learning from
them) and creating a whole
• Quality must be attended to: usability (of
course), reliability, robustness,
maintainability, integrity, portability,
efficiency, etc
• Product must be engineered
Evolutionary prototyping
‘Throw-away’ prototyping
How to understand users’ experience?
• Experience prototyping – Simulating user’s experience
• Designing a chest-implanted automatic defibrillator for victims of cardiac arrest
– The patient kit: pager, camera, notebook
– The random pager message simulated the occurrence of a defibrillating shock.
– Team member reccors what they thought and felt knowing that this represent a shock
• Anxiety around everyday happenings such as holding a child or operating power tools
Buchenau, Suri (2000)
How to understand users’ experience?
• Experiences of third age people
Third Age Suit ICE, Loughborough University
http://www.lboro.ac.uk/research/theview/archive/ss10/articles/restricted-
mobility/page2.html
‹#› 2014.03.31
Conceptual design: from requirements to design
• Transform user requirements/needs into a conceptual model
• “a description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”
• Don’t move to a solution too quickly. Iterate, iterate, iterate
• Consider alternatives: prototyping helps
Conceptual design: from requirements to design
• Developing the aesthetics in design
– Mood boards
• a collage of the ideas and inspiration
29
Designing universally accessible games
Visual cues for players with mild memory and cognitive impairments, UA-Chess Grammenos et el (2009)
30 2014.03.31 11:20
‹#› 2014.03.31
Overview
• Prototyping and construction
• Conceptual design
• Physical design
• Generating prototypes
• Support for design
‹#› 2014.03.31
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?
Will the audience understand it?
How extensible is it?
‹#› 2014.03.31
Considering interaction types
• Instructing
• issuing commands and selecting options
• Conversing
• interacting with a system as if having a conversation
• Manipulating
• interacting with objects in a virtual or physical space by manipulating them
• Exploring
• moving through a virtual environment or a physical space
Considering inteface types
34
‹#› 2014.03.31
Expanding the 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 telephone memory storage
• What information needs to be available?
What data is required to perform the task?
How is this data to be transformed by the system?
‹#› 2014.03.31
Overview
• Prototyping and construction
• Conceptual design
• Using scenarios in design
• Generating prototypes
• Support for design
‹#› 2014.03.31
Using scenarios in conceptual design
• Express proposed or imagined situations
• Used throughout design in various ways
• 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
Example plus scenario
38 S. Bødker (1999)
Example plus scenario
39 S. Bødker (1999)
‹#› 2014.03.31
Generate storyboard from scenario
‹#› 2014.03.31
Generate card-based prototype from use case
‹#› 2014.03.31
Overview
• Prototyping and construction
• Conceptual design
• Physical design
• Generating prototypes
• Support for design
Physical design: getting concrete
• Producing prototype means making detailed decisions
• Design platform and application domain standarts have to be met
– ISO 9241, ISO 13407, ISO 14915
• Interaction patterns, design rules
• Special attention to accessibility and national culture diferences should be paid
43
Welie interface patterns
44
Web site patterns Duyne, Landay, Hong.
The design of sites
45
Interface patterns
• Jennifer Tidwell
– UI patterns and techniques
46
Designing universally accessible games
Visual hints for players of UA-Chess with mild memory or cognitive impairments (Grammenos ir kt., 2009)
47 2014.03.31 11:20
Implementation of power distance
48
High power distance: Malaysian
Unversity website. Low power distance: Dutch
Educational website.
Individualism vs. Collectivism
High individualist value: US National
Park website, an emphasis on the
visitor, his/her goals, and possible
actions in coming to the park.
Low individualist value: Costa Rican
National Park website. an emphasis on
nature, downplays the individual ourist,
and uses a slogan to emphasize a
national agenda.
Masculinity vs. Femininity (MAS)
50
High masculinity website: Excite.com
for women in Japan Low masculinity website: Swedish
Excite.com.
Masculinity vs. Femininity (MAS)
51
Medium masculinity website: ChickClick.com in the USA.
Uncertainty Avoidance
52
High uncertainty avoidance: Sabema
Airlines website from Belgium.
Figure
Low uncertainty avoidance: British
Airways website from United Kingdom.
Long- vs. Short-Term Time Orientation
Low Long-term orientation:
website form Siemens
Germany
High Long-Term Orientation:
website from Siemens in
China.
‹#› 2014.03.31
Overview
• Prototyping and construction
• Conceptual design
• Scenarios in design
• Physical design
• Support for design
‹#› 2014.03.31
Support for design
• Patterns for interaction design
• individual patterns
• pattern languages
• pattern libraries
• Open source systems and components
• Tools and environments
56
Mockup tools
• Mockups
57 http://www.balsamiq.com/products/mockups
Mockup tools
58
Mockup tools
• http://www.mockflow.com/
• http://www.lumzy.com/
• http://iplotz.com/
• Not up to date but still usefull list
–http://c2.com/cgi/wiki?GuiPrototypingTools
59
‹#› 2014.03.31
Summary
• Different kinds of prototyping are used for different purposes and at different stages
• Prototypes answer questions, so prototype appropriately
• Construction: the final product must be engineered appropriately
• Conceptual design (the first step of design)
• Consider interaction types and interface types to
prompt creativity
• Storyboards can be generated from scenarios
• Card-based prototypes can be generated from use cases
References • Rogers, Sharp, Preece (2011). Interaction design: Beyond Human
Computer Interaction. Wiley.
• Bergmann, Haitani (2000). Designing the PalmPilot: A Conversation with Rob Haitani. Chapter 4 in Information Appliances and Beyond, Eric Bergman
• Bødker, S. Scenarios in user-centered design – setting the stage for reflection and action. Interacting with Computers, 2000,13 (1), 61–76.
• Hartfield, B. Winograd, T. (1996) Profile: IDEO. In T. Winograd (ed.) Bringing Design to Software, ACM Press, NY.
• Molin, L. Wizard-of-Oz prototyping for cooperative interaction design of graphical user interfaces. In Proceedings of NordiCHI 2004, October 23-27, Tampere, Finland, pp. 425-428
• S. Bødker (1999) Scenarios in User-Centred Design - setting the stage for reflection and action. Proceedings of the 32nd Hawaii International Conference on System Sciences, 1999.
61
References
• Y.K. Lim, E. Stolterman. The Anatomy of Prototypes: Prototypes as Filters, Prototypes as Manifestations of Design Ideas. ACM Transactions on Computer-Human Interaction 15(2).
• Buchenau, M., Suri, J.F. (2000) Experience prototyping. In Proceedings of DIS 2000, Design Interactive systems: Processes, Methods, Techniques, pp. 17-19
• D. Grammenos, A. Savidis, C. Stephanidis. Designing universally accessible games, Magazine Computers in Entertainment (CIE) – SPECIAL SSUE: Media Arts and Games archive Vol. 7 Is. 1, Feb 2009, ACM Press.
• A. Marcus, E.W. GOULD (2000) Crosscurrents: Cultural Dimensions and Global Web User-Interface Design. Interactions, 7(4).
62