wireframes and ui-prototypes

Wireframes and UI-Prototypes

Trends and Concepts, Hasso Plattner Institute

Potsdam, February 15th , 2011

Pidoco GmbHSilvan T. Golega

An introduction with practical tips

Topic of today

Wireframes and UI-Prototypes TheoryWhy should I do them

How do I make them

Wireframes and UI-Prototypes PracticeDemo of Pidoco Prototype Creator

About me

About meSilvan T. Golega

Did my bachelor and my master here at HPI

Founded Pidoco GmbH

We develop web projects

We build and sell web-based tools for prototyping and usability testing*

*(We are looking for interns)

How would you go about developing a microblogging service?

Idea

How would you go about developing a microblogging service?

Development

Idea

How would you go about developing a microblogging service?

Development

Product SpecificationIdea

How would you go about developing a microblogging service?

ClientProduct Manager Developer

End User

Interaction DesignerGraphic DesignerConsultant

and many more…

How would you go about developing a microblogging service?

Product design

Strategy

Scope

Structure

Skeleton

Surface Jasse James Garret

http://www.jjg.net/elements/

Product design

Strategy

Scope

Structure

Skeleton

Surface

abstract

concrete

Product design

Strategy

Scope

Structure

Skeleton

Surface

idea, goals

requirements, features

architecture, behavior, work flow, information structure

components, shapes, dialogues, human interaction

visual appearance

abstract

concrete

Product design

Strategy

Scope

Structure

Skeleton

Surface

user needs, use cases site objectives

functional specification

content requirements

interaction design, information architecture

information design,interface design, navigation design

visual design

Idea, goals

requirements, features

architecture, behavior, work flow, information structure

components, shapes, dialogues, human interaction

visual appearance

Product design

Strategy

Scope

Structure

Skeleton

Surface

User Needs, Site Objectives

Functional Specification

Content Requirements

Interaction Design, Information Architecture

Information Design,Interface Design, Navigation Design

Visual Design

Wireframes

Definition

Wireframes are: A visual representation of an interfaceused to communicate the structure, content, information hierarchy, functionality, and behavior of an interface

Definition

Wireframes are: A visual representation of an interfaceused to communicate the structure, content, information hierarchy, functionality, and behavior of an interface

Definition

Wireframes are: A visual representation of an interfaceused to communicate the structure, content, information hierarchy, functionality, and behavior of an interface

Prototypes are:A simulation of some aspects of the final solutionused to develop, demonstrate and evaluate the process, capability, performance or usability of the solution

Definition

Wireframes are: A visual representation of an interfaceused to communicate the structure, content, information hierarchy, functionality, and behavior of an interface

UI-Prototypes are:A simulation of some aspects of the final solutionused to develop, demonstrate and evaluate the process, capability, performance or usability of the solution

Types of UI-Prototypeslow fidelity wireframes vs. high fidelity designs

Types of UI-Prototypeslow fidelity wireframes vs. high fidelity designs

static sketches vs. dynamic prototypes

What is your purpose?

Ideation

Feedback

Specification

Usability Testing

What are your goals?

Define content

Test interaction

Create the big picture

Solve difficult problems

Focus when prototyping

Focus on content

Focus on interaction

Focus on the big picture

Focus on the difficult problems

Focus when prototyping

Focus on contentNo graphics, no visual design, no branding

No fake text ('lorem ipsum'): be realistic

Focus on interaction

Focus on the big picture

Focus on the difficult problems

Focus when prototyping

Focus on contentNo graphics, no visual design, no branding

No fake text ('lorem ipsum'): be realistic

Visual design produces other kind of feedback„What happens when I click here?“ vs.

„I do not like this color.“

Focus when prototyping

Focus on contentNo graphics, no visual design, no branding

No fake text ('lorem ipsum'): be realistic

Sketchy look lowers the feedback barrierVisual signal to the tester:„I may criticize, it is not yet finished.“

Focus when prototyping

Focus on content

Focus on interactionUse storyboards, screen flows, interactive prototypes

Keep the context in mind: how do pages work together

Focus on the big picture

Focus on the difficult problems

Focus when prototyping

Focus on content

Focus on interaction

Focus on the big pictureDetails come later

… or even later

Focus on the difficult problems

Focus when prototyping

Focus on content

Focus on interaction

Focus on the big picture

Focus on the difficult problemsDesign controversial issues

Do not design the obvious

Tools

Lots of tools availablePaper, whiteboard, gui magnets

Technical drawing tools like Visio

Graphics programs like Photoshop

Specialized tools like pidoco°

Programming tools like Html frameworks or Flex

Tools

Choose tools that help you focusPhotoshop make it difficult to focus on content

Paper makes it difficult to focus on interaction

HTML makes it difficult to focus on the big picture

Tools

Choose the right tool for the right taskPaper if you need to be quick

Internet based tools if you want good feedback

Tools with dynamic features if you want to test interaction

Programming tools if you want to test new UI-Elements

Tools with good exports if you need a specification

Exceptions

Exceptions are the ruleWhen doing the first sketches only for yourself or when inserting user generated content „lorem ipsum“ can be just great.

Exceptions

Exceptions are the ruleWhen testing visitor conversion or for eye tracking you might need a perfectly designed high end prototype

Exceptions

Exceptions are the ruleWhen testing a new interaction element you might need Html/Javascript

Exceptions

But: do not forget your focus99% you do need content

99% you do not need visual design

99% you do not need javascript

Mobile

Designing for mobileUser interface concepts differ

no right click, no mouse over, etc.

Search for good device guidelineseach device is different

Test it on the real device as often as you canan emulator just isn't the same

Tool Demo

Here’s our contact information:

Getting in touch:

Silvan.Golega@pidoco.com@pidoco, @tec on Twitter

Pidoco GmbH

Warschauer Straße 58aD-10243 Berlin

www.pidoco.com

Collaborating with Pidoco helps ensure project success:

Save Time

- quick prototyping- easy collaboration=> Be on time

Save Costs

- better specs- less rework=> Be on budget

Minimize Risk

- better communication- early concepts/requirements validation=> Be on target

Increase User Experience

- better usability- higher quality=> Exceed expectations

Images taken from:

Under GPL: http://de.wikipedia.org/w/index.php?title=Datei:Songbird_With_Addons.png

Under (CC BY 2.0) http://www.flickr.com/photos/jackdorsey/182613360/