Design, prototyping and construction

1
Design, prototyping and construction

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

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
High-fidelity prototype
20
Advantages/Disadvantages
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
• activities by the user and the systems 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
• Nielsens heuristics
• Shneidermans 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
• 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
• 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
• 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
• 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 !