Design prototyping and construction l.jpg
Advertisement
This presentation is the property of its rightful owner.
1 / 51

Design, prototyping and construction PowerPoint PPT Presentation

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

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

Design, prototyping and construction

By

Anupa Mogili

Arun Muralidharan


Agenda l.jpg

Agenda

  • Prototyping and Construction

  • Conceptual Design

  • Physical Design


Prototyping and construction l.jpg

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

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

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

What to prototype?

  • Technical issues

  • Work flow, task design

  • Screen layouts and information display

  • Difficult, controversial, critical areas


Low fidelity prototyping l.jpg

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

Examples of Low-fidelity prototyping

  • Storyboards

  • Sketching

  • Index cards

  • ‘Wizard of Oz’


Storyboard l.jpg

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

Storyboard example 1


Storyboard example 2 l.jpg

Storyboard example 2


Sketching l.jpg

Sketching

  • Drawing skills are not critical

    • symbols to indicate tasks, activities, objects

    • flowcharts for time-related issues

    • block diagrams for functional components


Sketching example l.jpg

Sketching example


Index cards l.jpg

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

Index card example (screen 1)


Screen 2 next index card l.jpg

Screen 2(next index card)


Wizard of oz prototyping l.jpg

User

>Blurb blurb

>Do this

>Why?

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

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

Low-fidelity prototype

Difference

High-fidelity prototype


Advantages disadvantages l.jpg

Advantages/Disadvantages


Compromises in prototyping l.jpg

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

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


Design objectives l.jpg

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

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

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

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

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

Three perspectives for a conceptual model

  • Interaction mode

  • Metaphor

  • Interaction paradigm


Metaphors l.jpg

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

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

Three perspectives for a conceptual model

  • Interaction mode

  • Metaphor

  • Interaction paradigm


Interaction paradigm l.jpg

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

Three perspectives for a conceptual model

  • Interaction mode

  • Metaphor

  • Interaction paradigm


Expanding the conceptual model l.jpg

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

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

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

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

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

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

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

Physical Design - Emphasis

  • Menu Design

  • Icon Design

  • Screen Design

  • Information Display


Icon design l.jpg

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

Physical Design - Emphasis

  • Menu Design

  • Icon Design

  • Screen Design

  • Information Display


Screen design l.jpg

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

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

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

Physical Design - Emphasis

  • Menu Design

  • Icon Design

  • Screen Design

  • Information Display


Information display l.jpg

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

Physical Design - Emphasis

  • Menu Design

  • Icon Design

  • Screen Design

  • Information Display


Summary l.jpg

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


Slide51 l.jpg

Thank You !


  • Login