Design, prototyping and construction By Anupa Mogili Arun Muralidharan.
-
Upload
silas-colborn -
Category
Documents
-
view
225 -
download
0
Transcript of Design, prototyping and construction By Anupa Mogili Arun Muralidharan.
Design, prototyping and construction
ByAnupa MogiliArun Muralidharan
Agenda
Prototyping and Construction Conceptual Design Physical Design
Prototyping and Construction What is a prototype? Why prototype? Different kinds of prototyping
low fidelity high fidelity
Compromises in prototyping vertical (“deep”) horizontal (“shallow”)
Construction
What is a prototype?For users to effectively evaluate the design of an interactive product, designers must produce an interactive version of their ideas, this activity is called prototyping. In other design fields a prototype is a small-scale model:
a miniature car a model of a building
In interaction design it can be a series of screen sketches a PowerPoint slide show a video simulating the use of a system a lump of wood, e.g. hand-held computer a cardboard mock-up a piece of software with limited functionality
Why prototype? Evaluation and feedback:
allows stakeholders to interact with an envisioned product, to gain some experience of using it in realistic settings and to explore imagined uses
Communication among team members: clarifies vague requirements
Validation of design ideas:test out the technical feasibility of an idea
Choosing between alternatives:provides multiple designs for the
application
What to prototype?
Technical issues Work flow, task design Screen layouts and information
display Difficult, controversial, critical areas
Low-fidelity Prototyping
Does not look very much like the final product Uses materials that are very different from the
intended final version, such as paper and cardboard rather than electronic screens and metal, e.g. palm pilot
Used during early stages of development Cheap and easy to modify so they support the
exploration of alternative designs and ideas It is never intended to be integrated into the final
system. They are for exploration only.
Examples of Low-fidelity prototyping
Storyboards Sketching Index cards ‘Wizard of Oz’
Storyboard
Originally from film, used to get the idea of a scene
Snapshots of the interface at particular points in the interaction
Series of sketches shows how a user can perform a task using the
device Often used with scenarios
brings more detail to the written scenario offers stakeholders a chance to role play with
the prototype, by stepping through the scenario
Storyboard example 1
Storyboard example 2
Sketching
Drawing skills are not critical symbols to indicate tasks, activities,
objects flowcharts for time-related issues block diagrams for functional
components
Sketching example
Index cards Small cards (3 X 5 inches) Each card represents one screen
multiple screens can be shown easily on a table or the wall
Thread or lines can indicate relationships between screens like sequence hyperlinks
Often used in website development
Index card example (screen 1)
Screen 2(next index card)
‘Wizard-of-Oz’ prototyping
Simulated interactionThe user thinks they are interacting with a
computer, but a developer is providing output rather than the system.
>Blurb blurb>Do this>Why?
User
High-fidelity prototyping
Choice of materials and methods similar or identical to the ones in the final
product Looks more like the final system
appearance, not functionality Common development environments
Macromedia Director, Visual Basic, Smalltalk, Web development tools
Misled user expectations users may think they have a full system
Low-fidelity prototype
DifferenceHigh-fidelity prototype
Advantages/Disadvantages
Prototype Advantages DisadvantagesLow-fidelity prototype
- low developmental cost- evaluate multiple design concepts
- limited error checking - navigational and flow limitations
High-fidelity prototype
- fully interactive- look and feel of final product- clearly defines navigational scheme
- more expensive to develop- time consuming to build- developers are reluctant to change something they have crafted for hours
Compromises in prototyping All prototypes involve compromises Compromises in low-fidelity prototypes:
device doesn't actually work Compromises in high-fidelity prototypes:
slow response sketchy icons limited functionality available
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
Construction
Creation, manufacturing of the final system based on experiences and feedback gathered from the
prototypes Development philosophy
evolutionary prototyping: involves evolving a prototype into the final product.
throw-away prototyping: used as a stepping stone towards final design. Prototype is thrown away and the final system is built from scratch.
QualityAlthough prototypes have undergone extensive user evaluation thefinal product still has to be subjected to rigorous quality testingfor the following: reliability, robustness, maintainability, integrity, portability,
efficiency
Design Objectives
Identify critical interaction aspects of the product (Conceptual Design)
Select the appropriate tools and methods to provide interactivity (Physical Design)
Realize that design of products usually involves several intermediate stages
Consider the importance of early feedback for interaction design (Prototypes and Scenarios)
Definition: ‘Conceptual Design’
“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.”
Conceptual Design Transformation of user
requirements/needs into a conceptual model
Stepwise refinement iterate, iterate and then iterate some
more Consideration of alternatives
prototyping & scenarios
Three perspectives for a conceptual model
Interaction mode Metaphor Interaction paradigm
Running Example: Shared Calendar – Used in a corporate
environment for employees to maintain their schedule and organize meetings based on that
Interaction Mode How the user invokes actions
activities by the user and the system’s responses Activity-based
instructing, conversing, manipulating and navigating, exploring and browsing
Object-based structured around real-world objects
Process-oriented support work processes (e.g. financial software)
Product-oriented develop products that users create, modify and
maintain (e.g. Microsoft Excel, Word)
Three perspectives for a conceptual model
Interaction mode Metaphor Interaction paradigm
Metaphors
Interface Metaphors partial mapping of the software to a real object combine familiar knowledge with new knowledge help the user understand the product
Three-step process for choosing a good metaphor understand system functionality, identify potential problem or complicated/critical
areas, generate metaphors
Evaluation of a metaphor
How much structure does it provide? requires a sound and familiar structure
How relevant is it to the problem? reduce confusion and false expectations
Is it easy to represent? visual and audio elements combined with words
Will the audience understand it? How extensible is it?
extra aspects that can be useful later on
Three perspectives for a conceptual model
Interaction mode Metaphor Interaction paradigm
Interaction Paradigm
Coherent collection of interaction methods Addresses environmental requirements Desktop paradigm
WIMP interface (windows, icons, menus and pointers)
Ubiquitous computing Pervasive computing Wearable computing Mobile devices
Three perspectives for a conceptual model
Interaction mode Metaphor Interaction paradigm
Expanding the conceptual model Functionality
task allocation What will the product do and what will the
human do? Relationship of subtasks
categorizations all actions related to one particular aspect
temporal associations (sequential or parallel) e.g. CASE tools
Information data required to perform the task transformation of data by the system
Scenarios in Conceptual Design Express proposed or imagined situations Used throughout the design process in
various ways scripts for user evaluation of prototypes concrete examples of tasks as a means of co-operation across professional
boundaries (shared understanding of the system)
sell ideas to users and potential customers ‘Plus’ and ‘Minus’ scenarios
exploration of extreme cases
Prototypes in Conceptual Design Evaluation of emerging ideas
user feedback, feasibility choice of methods and materials
Continuous prototyping low-fidelity prototypes early on high-fidelity prototypes later
Evolutionary prototyping early prototypes are gradually enhanced and
augmented appearance functionality
Physical Design Concrete, detailed issues of designing the
interface although inaccurate, the term is also used for
software-based systems Pervasive physical/conceptual design Guidelines for physical design
Nielsen’s heuristics Shneiderman’s eight golden rules Style guides: commercial/corporate purposes
collection of design rules and principles decide ‘look and feel’
Physical design for Computer Interaction
Different kinds of ‘widgets’ dialog boxes, toolbars, icons, menus, etc
Emphasis Menu design Icon design Screen design Information display
Menu Design
Arrangement number of menus length order of items
Grouping categorization visual division (colours, dividing lines)
Structure sub-menus, dialog boxes
Terminology Constraints
screen size, input method Context
applicability of entries
Activity Menu Design Compare the menu systems used on
a digital camera a cell phone a digital music player (e.g. iPod)
Criteria Functionality
number of functions, categories Usability
frequency of use, importance, consequences Constraints
space, input methods
Physical Design - Emphasis
Menu Design Icon Design Screen Design Information Display
Icon design Good icon design is difficult
has to be widely acceptable meaning must be readily perceivable distinguishable from each other
Meaning of icons cultural and context sensitive
Practical tips always draw on existing traditions or standards concrete objects or things are easier to
represent than actions
Physical Design - Emphasis
Menu Design Icon Design Screen Design Information Display
Screen design
Splitting functions across screens moving around within and between screens how much interaction per screen serial or workbench style
Individual screen design white space
balance between information/interaction and clarity
grouping of items separation with boxes, lines, colors
Splitting Functions across Screens
Task analysis as a starting point each screen should contain a single
simple step user frustration
too many simple screens
Context all pertinent information must be made
available at relevant times multiple screens open at once
Individual Screen Design
User attention directed to salient point e.g. via colour, motion, etc animation is very powerful but can be distracting
Organization Grouping
physical proximity, colour, shape, Structure
connections between related items Trade-off
sparse population vs. overcrowding
Physical Design - Emphasis
Menu Design Icon Design Screen Design Information Display
Information display
Context relevant information is available at all times in the
most efficient format for the specific task
Types of information imply different kinds of display alpha-numerical, chart, graphs
Consistency paper display and screen data entry different screens with similar information
(customisable) information content vs. presentation
Physical Design - Emphasis
Menu Design Icon Design Screen Design Information Display
Summary Different kinds of prototyping is used for
different purposes and at different stages Construction: Make sure the final product is
engineered appropriately Conceptual design (the first step of design) Physical design: e.g. menus, icons, screen
design, information display Prototypes and scenarios are used
throughout design as well
Thank You !