wireframes and ui-prototypes
DESCRIPTION
An introduction to wireframing and UI-prototyping with practical tips, given to IT-students at the Hasso-Plattner-Institute, Universität Potsdam.TRANSCRIPT
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:
[email protected]@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/