design prototyping and construction l.
Skip this Video
Loading SlideShow in 5 Seconds..
Design, prototyping and construction PowerPoint Presentation
Download Presentation
Design, prototyping and construction

Loading in 2 Seconds...

play fullscreen
1 / 51

Design, prototyping and construction - PowerPoint PPT Presentation

  • Updated on

Design, prototyping and construction By Anupa Mogili Arun 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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Design, prototyping and construction

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
design prototyping and construction

Design, prototyping and construction


Anupa Mogili

Arun Muralidharan

  • Prototyping and Construction
  • Conceptual Design
  • Physical Design
prototyping and construction
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
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
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
What to prototype?
  • Technical issues
  • Work flow, task design
  • Screen layouts and information display
  • Difficult, controversial, critical areas
low fidelity prototyping
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
Examples of Low-fidelity prototyping
  • Storyboards
  • Sketching
  • Index cards
  • ‘Wizard of Oz’
  • 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
  • Drawing skills are not critical
    • symbols to indicate tasks, activities, objects
    • flowcharts for time-related issues
    • block diagrams for functional components
index cards
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
wizard of oz prototyping


>Blurb blurb

>Do this


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

high fidelity prototyping
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
Low-fidelity prototype


High-fidelity prototype

compromises in prototyping
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
  • 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
design objectives
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
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
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
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
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 model28
Three perspectives for a conceptual model
  • Interaction mode
  • Metaphor
  • Interaction paradigm
  • 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
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 model31
Three perspectives for a conceptual model
  • Interaction mode
  • Metaphor
  • Interaction paradigm
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 model33
Three perspectives for a conceptual model
  • Interaction mode
  • Metaphor
  • Interaction paradigm
expanding the conceptual model
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
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
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
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
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
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
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
Physical Design - Emphasis
  • Menu Design
  • Icon Design
  • Screen Design
  • Information Display
icon design
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 emphasis43
Physical Design - Emphasis
  • Menu Design
  • Icon Design
  • Screen Design
  • Information Display
screen design
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
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
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 emphasis47
Physical Design - Emphasis
  • Menu Design
  • Icon Design
  • Screen Design
  • Information Display
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 emphasis49
Physical Design - Emphasis
  • Menu Design
  • Icon Design
  • Screen Design
  • Information Display
  • 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