Design, Prototyping, and Construction, Reece, Rogers, Sharp (2002). Beyond Human-Computer Intraction. Ch 8.Vladimir, Sajay, Nikhil, Andy

Discussion Outline

Overview Book Content

8.1 Introduction 8.2 Prototyping and construction

+ Prototyping Tools 8.3 Conceptual Design

+ Patterns + 8.5 Tool Support

8.4 Physical Design

Overview •Prototyping and construction

•Conceptual design

•Physical design

•Tool support

Prototyping and construction

•What is a prototype? •Why prototype?•Different kinds of prototyping

low fidelityhigh fidelity

•Compromises in prototypingvertical horizontal

•Construction

What is a prototype?

A prototype is a limited representation of a design that allows users to interact with it and explore its suitability.

Prototyping Ford GT40

A Prototype in Interaction Design•screen sketches•Storyboard•simulating the use of a system•wood/ foam/ clay model•cardboard mock-up•software with limited functionality (VB)

Why prototype?

•Evaluation and feedback •Stakeholders can see, hold, interact with a prototype more easily•Team members can communicate effectively•Can be used to test out ideas •It encourages reflection on the design •Prototypes help answer questions, and in choosing between alternatives

What to prototype?

•Technical issues

•Work flow, task design

•Screen layouts and information display

•Difficult, controversial, critical areas

Low-fidelity Prototyping

•Uses a medium which is unlike the final medium, e.g. paper, cardboard

•Is quick, cheap and easily changed

•Examples:sketches of screens, task sequences,

etc‘Post-it’ notesstoryboards‘Wizard-of-Oz’

Storyboards

•A story board is a series of sketches/ photographs used early in the design showing how users would perform a task using the device.•Story boards are used with scenarios to allow the design group or audience to visualize the use of the product.

Sketching

•Sketching is an important low-fidelity prototyping method•A very basic representation of the interface roughly drawn on a piece of paper etc..

Typical UI sketch

•Index cards each card representing one screen•Used in website design

Using index cards

‘Wizard-of-Oz’ prototyping

•The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. •Usually done early in design to understand users’ expectations

>Blurb blurb>Do this>Why?

User

High-fidelity prototyping

•Uses materials that you would expect to be in

the final product.

•Prototype looks more like the final system than a

low-fidelity version.

•High-fidelity software prototype environments

include Macromedia Director, Visual Basic, and

Smalltalk.

•Danger is that users think they have a full

system

Compromises in prototyping•For software-based prototyping there maybe a slow response, sketchy icons, limited functionality etc. •Two common types of compromise are

• ‘horizontal’: provide a wide range of functions, but with little detail• ‘vertical’: provide a lot of detail for only a few functions

•Compromises in prototypes mustn’t be ignored. Developers should consider all alternatives.

Construction

•Taking the prototypes (or learning from them) and creating a whole

•Quality must be attended to: usability, reliability, robustness, maintainability, integrity, portability, efficiency, etc

•Dilemma-

Evolutionary prototyping

‘Throw-away’ prototyping

DENIM

DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

http://guir.berkeley.edu/projects/denim/

Demo of DENIM http://guir.berkeley.edu/projects/denim/media/denim_300.ram

Prototyping Tools

Visual development tools Most popular prototyping tools:

Overall: Visio (overall) Windows software: VisualBasic Web: Visual web editors (e.g. FrontPage,

DreamWeaver, GoLive) http://guuui.com/issues/01_03_02.asp

Hardware: AutoCAD, ProEngineer

Prototyping with Visio

Advantages: Prototype can be

converted to html Prototype can be shared

online Anything can be

prototyped Disadvantages:

No input Little user-prototype

interaction

Stencils Window UI collection “Visual Vocabulary” (workflow) PoorButHappy Web Elements

Automating Diagrams with Visio (scripting)

Prototyping with VisualBasic Quickly design interactive UI prototype:

1. Create new project

2. Design UI– Create windows (forms)– Add controls (button, label, text box, …)– Set properties (color, caption, size, …)

3. Add interactivity– Write code

4. Run prototype

Prototyping with VisualBasic1. Create new project

Prototyping with VisualBasic2. Design UI

Prototyping with VisualBasic3. Add functionality

Prototyping with VisualBasic4. Run prototype

Prototyping with VisualBasic

Advantages: Object-oriented Very fast Predefined objects

(forms, controls, dialog boxes)

VB gives hints on code use

codes

Great MSDN library collection

Runtime code execution Execute parts of code

only (specific lines) Line-by-line debugging Useful, specific error

Misc Tools: Cross Platform

Mozilla (live, IDE), WxPython, WxWindows RealBasic Java Solutions

Jazz, Zoomable UI Http://www.cs.umd.edu/hcil/jazz/

SILK, handwriting UI Standard Toolkits: Swing, AWT

Smalltalk Deriviant Squeak Graphical, cross platform Innovative and well-bred

Conceptual Design

“a set of integrated ideas… about what it should do, behave, and look like”

Metaphors Structure Relevance (coverage) Understandability Extensibility

Questions: function/use, relations, data

Mental Model Work Phaser Task, Byrne &

Bovair (1995). Learning better with mental model.

Computational Mental Models ACT-R SOAR

Interaction Paradigms

Paradigms Ubiquitous Computing Pervasive Computing Wearable Computing

Latent Needs: Nobody knew they needed a Palm Pilot until it existed. New stuff is possible!

Directions Eye tracking. Gaze

tracking. Gestures. VR. Augmented Cognition. Vision Overlays. Alternate Input Methods. Speech Recognition. Multi-user interfaces. Focus/Context. Tangible/Graspable.

Scenarios in Conceptual Design Task-based For cooperation/communication (shared

vocabulary) Plus and Minus scenarios

Cast the most positive and negative consequences

8.3.5 Myers 1995 – Tool Functions Specification ->

interface Assist implementation

Insure usability Enable non-

programmers Evaluate and iterate Enable customization Portability (Platform,

Device, Footprint)

Why? Early prototyping enables

usability testing when it can matter.

Facilitates communication.

Software takes too long.

Patterns In General

Why? Common user

expectations for functionality

“Standardization?” Abstract Planning

The directory Welie.com Pictured

Teaser Menu

Using Patterns to Improve Web Navigation http://www8.org/w8-papers/5b-hypertext-media/improving/improvi

ng.html  Pattern Intent

Set-Based Navigation: Organize the information in Sets of related information items. Provide intra-set navigation capabilities 

News: Allow easy access to new information. Landmark: Provide direct access to critical sub-systems. Shopping Basket: Keep track of user selections during

navigation, making these selections persistent to process them when the user decides to.

Active Reference: Define indexes as active orientation tools in sub-areas of the whole hyperspace. Make these indexes co-exist with target objects. 

Node in Context: Customize representation of objects according to the sets within which they are being accessed

Personas

With a heterogenous user population, conceptual models may vary across users. Goals, background, skill

CNet Example Bob the Browser, Sally the Shopper, etc.

STCSig

Interface elements (Physical) design

Hmm…no lets recap first!! What is a prototype?

From a paper-based story board to a complex piece of software Why use a prototype?

Useful in discussing ideas (with stakeholders) Put user requirements in some shape Do user testing

Types of Prototypes Low Fidelity e.g., Storyboarding, Sketching, Index cards etc. High Fidelity e.g., software system developed in VB

Compromises made Designed with key issues in mind Low fidelity is a compromise in itself Functionality vs. depth

OK, We heard about Prototyping then Conceptual models.

Where do we go from here!!!

WE DESIGN!!!

Design

Design = Balance Balance between

User and designer Functionality and usability requirements

Give me an example please!! Defibrillator (Box 8.2)- You need to experience it to know how

the experience is! Jeff Hawkins carried a piece of wood about the size of a

Palm Pilot he imagined would be. PDA (Personal Digital Assistant)

Screen real estate is small Number of function keys available is small

Guidelines for interface design Consistency

File menu at the top left Confirmation for closing a file without

saving Style guides to communicate branding

and corporate image Simplicity

Reduce memory overloads by providing options. Feedback

“Printing completed” Informative feedback and not terse technical error messages

Robustness Prevent errors

Error handling Forgiving innocent user actions/errors Allowing for reversal of erroneous actions

Flexibility Provide shortcuts

Menu Design

Length of the menu Order of the items to be

presented Menu structure e.g., sub-

menus vs dialog boxes Categories and their

unambiguous names used to group menu items

Group differentiation e.g. different colors, dividing lines?

Physical constraints or user limitations to be accommodated

Menu Example

www.oppenheimerfunds.com

Icon Design

Good icon design is difficult Meaning of icons is cultural and context sensitive Some tips:

always draw on existing traditions or standards concrete objects or things are easier to represent than actions

For example: http://www.labware.com/products-lims.html

Screen design How to split across screens

moving around within and between screens how much interaction per screen? serial or workbench style?

Individual screen design white space: balance between enough

information/interaction and clarity grouping items together: separation with boxes?

lines? colors? Task analysis as a starting point Each screen contains a single simple step Frustration if too many simple screens Keep information available: multiple screens open at once

Designing for the web

Where am I? What’s here? How did I get here? Where can I go from here?

Examples: www.cnn.com, http://www.aftonbladet.se/, www.golf.com

Branding!!!

CONTENT

- Most critical

- precise and short

- use headlines

- allow for scanning

NAVIGATION

- Order of the items to be presented - Menu structure e.g., sub-menus vs dialog boxes- Categories and their unambiguous names used to group menu items- Group differentiation e.g. different colors, dividing lines?- Physical constraints or user limitations to be accommodated

Information Display

Is it relevant? Is it absolutely needed? Where else can it come? How are other mediums displaying it?

More Tool Support (Myer et al, 2000) Window managers Toolkits Event languages Interface builders Component systems Scripting languages Hypertext Object oriented programming