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 !