1. Design, prototyping and constructionBy
Anupa Mogili
Arun Muralidharan

2. Agenda
Prototyping and Construction
Conceptual Design
Physical Design

3. 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

4. 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

5. 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

6. What to prototype? Technical issues Work flow, task design
Screen layouts and information display
Difficult, controversial, critical areas

7. 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.

8. Examples of Low-fidelity prototyping
Storyboards
Sketching
Index cards
‘Wizard of Oz’

9. 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

10. Storyboard example 1

11. Storyboard example 2

12. Sketching Drawing skills are not critical
symbols to indicate tasks, activities, objects
flowcharts for time-related issues
block diagrams for functional components

13. Sketching example

14. 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

15. Index card example (screen 1)

16. Screen 2(next index card)

17. ‘Wizard-of-Oz’ prototyping
Simulated interaction
The user thinks they are interacting with a computer, but a developer is providing output rather than the system.
>Blurb blurb
>Do this
>Why?
User

18. 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

19. Low-fidelity prototype
Difference
Low-fidelity prototype
High-fidelity prototype

20. Advantages/Disadvantages
Prototype
Advantages
Disadvantages
Low-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

21. 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

22. 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.
Quality
Although prototypes have undergone extensive user evaluation the
final product still has to be subjected to rigorous quality testing
for the following:
reliability, robustness, maintainability, integrity, portability, efficiency

23. 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)

24. 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.”

25. 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

26. 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

27. Interaction Mode How the user invokes actions Activity-based
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)

28. Three perspectives for a conceptual model
Interaction mode
Metaphor
Interaction paradigm

29. 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

30. 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

31. Three perspectives for a conceptual model
Interaction mode
Metaphor
Interaction paradigm

32. 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

33. Three perspectives for a conceptual model
Interaction mode
Metaphor
Interaction paradigm

34. 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

35. 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

36. 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

37. 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’

38. Physical design for Computer Interaction
Different kinds of ‘widgets’
dialog boxes, toolbars, icons, menus, etc
Emphasis
Menu design
Icon design
Screen design
Information display

39. Menu Design Arrangement Grouping Structure Terminology Constraints
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

40. Activity Menu Design Compare the menu systems used on Criteria
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

41. Physical Design - Emphasis
Menu Design
Icon Design
Screen Design
Information Display

42. Icon design Good icon design is difficult Meaning of icons
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

43. Physical Design - Emphasis
Menu Design
Icon Design
Screen Design
Information Display

44. 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

45. 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

46. 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

47. Physical Design - Emphasis
Menu Design
Icon Design
Screen Design
Information Display

48. Information display Context Types of information Consistency
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

49. Physical Design - Emphasis
Menu Design
Icon Design
Screen Design
Information Display

50. 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

51. Thank You !