workshop: breaking the fairy tale of wireframes
TRANSCRIPT
Breaking the Fairy Tale of WireframesLennart Overkamp (IxD at Mirabeau) Heleen van Nues (IxD at Mirabeau)September 24, 2016
So… wireframes.
We are not the Big Bad Wolf
Can you name the advantages
of wireframes?
What about the disadvantages?
In groups, identify the most important
advantage & disadvantage
Our vision on the pros
Great for Sketching & Exploring
Good way to communicate ideas
Quick & easy to test early
Our vision on the cons
Interaction designers should focus on solving problems, not layout
Provides illusion of final design
They can kill creativity
Inconvenient for Developers / Testers
So… what’s the alternative?
Priority Guides
Definition Content and elements for a mobile screen sorted by hierarchy from top to bottom, without layout specifications.
Keep asking yourself “What is it all about?”
The pros
Responsiveness of your design
Focus on solving problems and serving user needs
No time wasted on aesthetics and layout!
Visual Designers own their playground
You give a Front-End Designer “HTML” early in the proces
A Tester has a checklist for testing
Content & mobile first
So…summarised
So… how to make these bad boys?
Baselines
1. Real copy 2. Mobile size 3. Header / footer can be left out 4. No layout elements
The proces
It is very simple….
Just follow a design proces and when you feel like wire framing: STOP!
Keep asking yourself “What is it all about?”
And start prioritising!
Content Functionality Components
In the end it is about experimenting and finding what works for you….
A small recap
Priority Guides
Definition Content and elements for a mobile screen sorted by hierarchy from top to bottom, without layout specifications.
Keep asking yourself “What is it all about?”
And start prioritising!
Time to get our hands dirty (:
Priority Guide for an online travel guide page about Paris
Goal #1: As a tourist, I want to book a hotel in the center of Paris.
Needs: • General information about
Paris. • Safe, convenient and
affordable accommodation. • Hotel recommendations.
Goal #2: As a tourist, I want to choose locations to visit in Paris.
Needs: • General information about
Paris. • Information about public
transport. • Information about tourist
attractions.
Some suggestions: Introductory text
Media (pictures/video) Accommodations
Touristic highlights Restaurants
Public transport Similar destinations
Button ‘Book a flight to Paris’ Button ‘Book a hotel in Paris’
Option to save/share View in multiple languages
Time’s up. Show us your Magic!
No big bad wolf. But…
Content & mobile first
The core of the priority guide
Priority guides and wireframes could be
complementary to each other in your proces as an
Interaction Designer
Wireframes still have their advantages!
But… we believe a priority guide is what you should use
as a deliverable to your colleagues
“…and they lived happily ever after.”
Questions?
