Prototyping (part 2 )

Last week

Low-fidelity Prototypes

Rapid Prototyping

Analysis

Design

Validation

Implementation

Rapid PrototypingIncreasing fidelity of prototypes

High-Fidelity Prototypes

High-Fidelity Prototypes• Looks & feels like the final product to the user

• Colors, screen layout, fonts, …

• Text used

• Response time and interactive behavior

• The functionality, however, is restricted

• Only certain functions work

• Functionality is targeted towards the tasks (e.g. a search query is predetermined)

• Non-visible issues (e.g. security) are not regarded

• Can be used to predict task efficiency of the product

High-Fidelity Prototypes

Cheap High-Fidelity Prototypes

Full System

Different features

http://www.nngroup.com/articles/guerrilla-hci/

Func

tiona

lity

Horizontal and Vertical Prototyping

Full System

Different features

http://www.nngroup.com/articles/guerrilla-hci/

Func

tiona

lity

Horizontal and Vertical Prototyping

Horizontal PT

Horizontal Prototypes• Demonstrate the feature spectrum of a product

• Allows the user to navigate the system

• The actual functions are not implemented

• Helps to evaluate / test

• Navigation (e.g. finding a specific function or feature)

• Overall user interface concept

• Feature inclusions and placement

• Accessibility

• User preferences

• Often used in early stages

Full System

Different features

http://www.nngroup.com/articles/guerrilla-hci/

Func

tiona

lity

Horizontal and Vertical Prototyping

Vert

ical

PT

Vertical Prototypes• Demonstrate a selected feature of a product

• Allows the user only to use this specific function

• The details of the function/feature are shown/implemented

• Helps to evaluate / test

• The optimal design for a particular function

• Compare different designs of a function

• Optimize the usability of this function

• User performance for this particular function

• Mainly used in high-fidelity prototyping but can be applicable to low-fidelity

The Prototyping “T”

Full System

Different features

Func

tiona

lity

http://www.nngroup.com/articles/guerrilla-hci/

Cheap PT: Scenarios

Full System

Different features

Func

tiona

lity

Scenario

http://www.nngroup.com/articles/guerrilla-hci/

“Icicle” Prototypes

Full System

Different features

Func

tiona

lity

Prototyping: In a nutshell

• Rapid and iterative

• Low-fidelity and high-fidelity

• Horizontal and vertical

• In the beginning: “Keep it ugly”

• Parallel Prototypinghttps://www.cs.cmu.edu/~spdow/files/PrototypingParallel-TOCHI10.pdf

Dow, Steven P., et al. "Parallel prototyping leads to better design results, more divergence, and increased self-efficacy." ACM Transactions on Computer-Human Interaction (TOCHI) 17.4 (2010): 18.

Web Design

Visual Design• Visual Arts versus Visual Design

• Goal of the artist: to create an observable artifact that provokes an aesthetic response (kind of self-expression)

• Goal of the designer: to find the representation that is best suited to the communication of some specific information (oriented towards the goals of other people)

Visual Design• Visual Arts versus Visual Design

• Graphic Design and Visual Interface Design

• Aesthetic concerns placed within the constraints of a functional framework

• Designers working on interfaces needs to understand

• color, typography, form, composition, ...

• and interaction, behavior, human capabilities, ...

Visual Design• Visual Arts versus Visual Design

• Graphic Design and Visual Interface Design

• Industrial Design and Interface Design

• New relationship coming up as more physical artifacts become software-enabled

• have to work increasingly hand-in-hand

Visual Design• Visual Arts versus Visual Design

• Graphic Design and Visual Interface Design

• Industrial Design and Interface Design

Huge area!

Only some examples today

• Some general principles

• visual design

• interaction design

• Pointers to specific guidelines

Less is More

• avoid visual noise and clutter

• no superfluous elements that distract the user

Layering

• to organize elements

Layering

• to emphasize (e.g., deep background)

http://designinginterfaces.com/firstedition/index.php?page=Deep_Background

Layering

• choose which to pay attention to

Colin Ware: Visual Thinking for Design

Few Hues, Many Values• Choose one, two, or at most three major color hues to use

in the interface. Create a color palette by selecting assorted values (brightnesses) from within those few hues.

• http://www.colourlovers.com/

• http://colorbrewer2.org/

http://designinginterfaces.com/firstedition/index.php?page=Few_Hues_Many_Values

Popout effects (recap perception lecture)

Colin Ware: Visual Thinking for Design

• find the three green squares

Popout effects - restrictions

Colin Ware: Visual Thinking for Design

Visual Flow

Visual Flow: Good and Bad

Popout / Visual Flow

•specifically important for web design

•people scan they don’t read

Symmetry and Balance

• gives interface a solid, stable look

Affordances

• objects tell us by their shape what we can do with them

• don’t just blindly copy the real world

Affordances (Metaphors)

http://barbarism.net/2010/03/marco-on-overdoing-the-interface-metaphor/

Tradeoff between metaphor and usability

• in web design: people use things based on how they think they work without questioning the idea behind it

Affordances

Direct Manipulation (DM)• Replacement of complex command-

language syntax with direct, visual manipulation of the object of interest.

• Visibility of Object and Actions

• Rapid, reversible, incremental actions

Advantages of DM• Novices can learn the basic functionality quickly

• Experienced users can work extremely rapidly to carry out a wide range of tasks, even defining new functions

• Intermittent users can retain operational concepts over time

• Error messages are rarely needed

• Users can immediately see if their actions are furthering their goals and if not do something else

• Users experience less anxiety

• Users gain confidence and mastery and feel in control

Disadvantages of DM• Some people take the metaphor of direct manipulation

too literally

• Example: ejecting a volume in MacOS

• Not all tasks can be described by objects and not all actions can be done directly

• Some tasks are better achieved through delegating

• e.g. spell checking

• Can waste extensive screen space

• Moving a mouse around the screen can be slower than pressing function keys to do the same actions

Specific design guidelines

• e.g. Apple Human Interface Guidelineshttps://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html

Specific design guidelines• Web design guidelines

• Links

• Colors

• Search

• Breadcrumbs (Navigation)

• ...

• Homework

• Slides from last year (german)

• online

• http://www.webstyleguide.com/wsg3/index.html

Conceptual Design• Conceptual design

• Transforming user requirements and needs into a conceptual model

• Key guidelines for conceptual design:

• Separate real requirements from solution ideas

• Keep an open mind but never forget the users and their context

• Discuss ideas with other shareholders as much as possible

• Use low-fidelity prototyping to get rapid feedback

• Iterate, iterate, and iterate

Web Design: Summary

• Many general design principles

• visual design: less is more, layering, colors, popout, visual flow, symmetry

• interaction design: affordances, direct manipulation

• Many specific design guidelines

• Get close to the Conceptual Model

QUESTIONS?