workshop: priority guides - the alternative to wireframes
TRANSCRIPT
Priority Guides
Heleen van Nues Lennart Overkamp 13 januari 2017
the alternative to wireframes
Creative Consultants
Interaction Designers
Visual Designers
Front-end Developers
UX
Building a platform from the ground up
Fully responsive platform Mobile, iPad & desktop
Booking flow redesign Overview and options for customers
Fully responsive platform Mobile, iPad & desktop
Booking flow redesign Overview and options for customers
Redesign Nuon.nl
Relevance & customisation Personal product selector
High-quality service Quick, accessible & contextual
Inspirational Telling a story through design
Relevance & customisation Personal product selector
High-quality service Quick, accessible & contextual
Inspirational Telling a story through design
Redesign Vrouw.nl
Human2Human strategy Content adapts to customer behaviour
Omni-channel approach Seamlessly from magazine to online
Online look&feel Connection to product portfolio
Human2Human strategy Content adapts to customer behaviour
Omni-channel approach Seamlessly from magazine to online
Online look&feel Connection to product portfolio
Wireframes
“
”
The wireframe is a visual guide that represents the skeletal framework of a website or app.
It depicts the page layout or arrangement of the website’s content, including
interface elements and navigational systems.
Source: adapted from Wikipedia
Low-fidelity wireframe
High-fidelity wireframe
Advantage #1:
Great for sketching & exploration
Advantage #2:
Good way to communicate
ideas
Advantage #3:
Easy to test early in the
design process
Disadvantage #1:
They provide an illusion of final design
Disadvantage #2:
They can kill creativity
Disadvantage#3:
Inconvenient for Testers
& Developers
Priority Guides
The priority guide contains content and elements for a mobile screen,
sorted by hierarchy from top to bottom, and without layout specifications.
“ ”
Continuously ask yourself ‘Why?’ while making a priority guide.
Crew on flight details #1
On touch of an icon/link/button on the flight preparation screen, a complete overview of all crew on flight will be shown. Extra information can be shown on demand by the user.
The overview of crew on flight can be influenced by filters/toggles. For all crew the previous or next flight can be shown. Or only the crew can be shown who hop on the current flight or who hop off the current flight afterwards. Also reporting times and FDP/rest can be shown for all crew.
When no filter/toggle is active, all the crew are shown with ther official name, rank and employee number (PSN)
Reporting time toggle active: for all crew will be shown what time on what date they have to report.
FDP and rest toggle active: when toggled the actual FDP and rest of crew is shown. Also their Max FDP and norm rest will be communicated with this.
Show who hops on filter active: only the crew will be shown who hop on the filght. The previous flight + arrival date will be shown.
Show who hops off filter active: only the crew will be shown who hop off the filght. The next flight + departure date will be shown.
Contextual message about FDP exceeding or not enough rest.
When clicking about the message about exceeding FPD or not enough rest: the current + max FDP will be shown including the rest. In the priority guide it is an example of FDP, but it can also be concerning rest.
1
i
2
3
4
5
6
7
8
9
NotesGENERAL
Notes
Crew on flight
Close
Full list - Flight Preperation screen
Name: Tony Martinez
Rank: Senior purser
PSN: 1234567
Crew details no filter active
o Show reporting time
o Show who hops on
o Show who hops off
o Show FDP and rest time
Only one filter at a time can be active
Filters/toggles
Crew details + “show reporting time” filterName: Tony Martinez
PSN: 1234567
Rank: Senior purser
Reporting time: 08:30 LT
Reporting date: 10-12-2016 LT
Crew details + “show FDP and rest time” filterName: Casper Boekhout
PSN: 1234567
Rank: Purser
Current FDP: 4 (Max = 10)
Current Rest: 1 (Norm = 3)
Crew details + “who hops on” filterName: Ivar van den Broek
PSN: 1234567
Rank: CA 1
Previous flight: KL1234
Arrival date: 10-12-2016
Crew details + “who hops off” filterName: Ivar van den Broek
PSN: 1234567
Rank: CA 1
Next flight: KL1266
Departure date: 14-12-2016
Optional
Information communicating crew member is about to exceed FDP
Crew details + contextual message
Name: Jack Johnson
! Crew member is about to exceed FDP !
Rank: CA 2
PSN: 1234567
Information communicating crew member is about to exceed FDP
FDP extra highlighted
Or rest can be highlighted if crew has not rested enough.
Or rest can be communicated if crew has not rested enough.
! Current FDP: 9 (Max = 10) !
Current Rest: 1 (Norm = 3)
Crew details + contextual message
Rank: CA 2
! Crew member is about to exceed FDP !
PSN: 1234567
Name: Jack Johnson
In progress
1
2
3
4
5
7
8
6
4 Tips voor efficiënt de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op jaarbasis en gebaseerd op een
gemiddeld Nederlands huishouden.
Een wasdroger slurpt enorm veel energie. Schijnt het zonnetje? Hang dan de was liever buiten
op aan de lijn of bij…..
Titel Pagina header
Tip eigenschappen
Content box
Content box
Link naar tooltip
Afbeelding
Icoon
Tekst
Icoon
Tekst
Icoon
Tekst
icoon of thumbnailBeeld
(i)i button voor disclaimer tekst
Disclaimer tip besparing
Link
Tekst
Wist je dat? Een oude droger vaak de
grootste energieverbruiker is in een Nederlands huishouden?
Tekst
Hoe hoger de centrifugesnelheid (1600 toeren per minuut), hoe
droger de was en hoe korter de droogtijd.
Tekst
Tip box01 Hoge centrifugesnelheidTitel: nummer tip + tekst
De ‘strijkdroog’ stand kost minder energie dan
‘kreukherstellend’ of ‘kast droog’.
Tekst
02 StrijkdroogTitel: nummer tip + tekst
Lang drogen op een lage temperatuur is voordeliger dan
kort drogen op een hoge temperatuur.
Tekst
03 Lang drogen op lage tempTitel: nummer tip + tekst
04 Volle droger met lage tempTitel: nummer tip + tekst
Link naar tooltip
Advantage #1:
Design for responsiveness
4 Tips voor efficiënt de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op jaarbasis en gebaseerd op een
gemiddeld Nederlands huishouden.
Een wasdroger slurpt enorm veel energie. Schijnt het zonnetje? Hang dan de was liever buiten
op aan de lijn of bij…..
Titel Pagina header
Tip eigenschappen
Content box
Content box
Link naar tooltip
Afbeelding
Icoon
Tekst
Icoon
Tekst
Icoon
Tekst
icoon of thumbnailBeeld
(i)i button voor disclaimer tekst
Disclaimer tip besparing
Link
Tekst
Wist je dat? Een oude droger vaak de
grootste energieverbruiker is in een Nederlands huishouden?
Tekst
Hoe hoger de centrifugesnelheid (1600 toeren per minuut), hoe
droger de was en hoe korter de droogtijd.
Tekst
Tip box01 Hoge centrifugesnelheidTitel: nummer tip + tekst
De ‘strijkdroog’ stand kost minder energie dan
‘kreukherstellend’ of ‘kast droog’.
Tekst
02 StrijkdroogTitel: nummer tip + tekst
Lang drogen op een lage temperatuur is voordeliger dan
kort drogen op een hoge temperatuur.
Tekst
03 Lang drogen op lage tempTitel: nummer tip + tekst
04 Volle droger met lage tempTitel: nummer tip + tekst
Link naar tooltip
Advantage #2:
Focus on solving problems &
serving needs
Advantage #3:
No time wasted on aesthetics
& layout
Advantage #4:
Visual designers own their
playground
Advantage #5:
FED get “HTML” early in
the process
4 Tips voor efficiënt de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op jaarbasis en gebaseerd op een
gemiddeld Nederlands huishouden.
Een wasdroger slurpt enorm veel energie. Schijnt het zonnetje? Hang dan de was liever buiten
op aan de lijn of bij…..
Titel Pagina header
Tip eigenschappen
Content box
Content box
Link naar tooltip
Afbeelding
Icoon
Tekst
Icoon
Tekst
Icoon
Tekst
icoon of thumbnailBeeld
(i)i button voor disclaimer tekst
Disclaimer tip besparing
Link
Tekst
Wist je dat? Een oude droger vaak de
grootste energieverbruiker is in een Nederlands huishouden?
Tekst
Hoe hoger de centrifugesnelheid (1600 toeren per minuut), hoe
droger de was en hoe korter de droogtijd.
Tekst
Tip box01 Hoge centrifugesnelheidTitel: nummer tip + tekst
De ‘strijkdroog’ stand kost minder energie dan
‘kreukherstellend’ of ‘kast droog’.
Tekst
02 StrijkdroogTitel: nummer tip + tekst
Lang drogen op een lage temperatuur is voordeliger dan
kort drogen op een hoge temperatuur.
Tekst
03 Lang drogen op lage tempTitel: nummer tip + tekst
04 Volle droger met lage tempTitel: nummer tip + tekst
Link naar tooltip
Advantage #6:
Checklist for testers
How to?
Baselines:
real content mobile size
no layout elements not a deliverable
Step #1:
Determine the goal of the screen(s)
Determine the goals of users, clients and stakeholders.
Step #2:
Research your user
Interviews Observations Desk research Personas Customer Journeys Statistics
Step #3:
Determine the content topics
Based on goals and research
Involve clients & stakeholders
Titel tip
afbeelding
Besparing in geld
Besparing in C02
Aantal keer bekeken
Tekst met uitleg over de besparingen.
Introductie over de desbetreffende tip
afbeelding of icoon
Feitje over het tip onderwerp
Uitleg van tip
01 Mini tip
Uitleg van tip
02 Mini tip
Uitleg van tip
03 Mini tip
Uitleg van tip
04 Mini tip
Uitleg van tip
05 Mini tip
Step #4:
Create a high-level priority guide
Start on paper for flexibility
Prioritise the content topics
Keep goals and users in mind
Continuously ask yourself ‘Why?’
4 Tips voor efficiënt de was drogen
afbeelding
icoon besparing
Besparing per jaar € 25*
icoon C02
C02 besparing 1kg
icoon bekeken
Aantal keer bekeken 189
Lees meer
* Deze besparingen zijn op jaarbasis en gebaseerd op een
gemiddeld Nederlands huishouden.
Een wasdroger slurpt enorm veel energie. Schijnt het zonnetje? Hang dan de was liever buiten
op aan de lijn of bij…..
Titel Pagina header
Tip eigenschappen
Content box
Content box
Link naar tooltip
Afbeelding
Icoon
Tekst
Icoon
Tekst
Icoon
Tekst
icoon of thumbnailBeeld
(i)i button voor disclaimer tekst
Disclaimer tip besparing
Link
Tekst
Wist je dat? Een oude droger vaak de
grootste energieverbruiker is in een Nederlands huishouden?
Tekst
Hoe hoger de centrifugesnelheid (1600 toeren per minuut), hoe
droger de was en hoe korter de droogtijd.
Tekst
Tip box01 Hoge centrifugesnelheidTitel: nummer tip + tekst
De ‘strijkdroog’ stand kost minder energie dan
‘kreukherstellend’ of ‘kast droog’.
Tekst
02 StrijkdroogTitel: nummer tip + tekst
Lang drogen op een lage temperatuur is voordeliger dan
kort drogen op een hoge temperatuur.
Tekst
03 Lang drogen op lage tempTitel: nummer tip + tekst
04 Volle droger met lage tempTitel: nummer tip + tekst
Link naar tooltip
Step #5:
Create a detailed priority guide
Start on paper for flexibility
Use detailed/real content to fill in the priority guide
Add functionality
Step #6:
Validate & iterate!
Test with users, client and stakeholders
Reprioritise
“ ”
Experiment and find out what works for you!
Workshop
Assignment: Create a priority guide for
an online travel guide to Paris
Assignment #1:
As a user, I want to book a hotel in the center of Paris
Needs • I want to easily find hotels in the center. • I want general information about Paris. • I want a safe, convenient & affordable accommodation. • I want hotel recommendations.
Assignment #2:
As a user, I want to know which locations I can visit in Paris
Needs • I want to easily find locations. • I want general information about Paris. • I want information about public transport. • I want information about tourist attractions.
Content suggestions:
Introductory text Media (pictures/video)
Accommodations Ratings Filters
1. Determine the goal ✓
2. Research your user ✓
3. Determine the content
4. Create high-level priority guide
5. Create detailed priority guide
6. Pitch your priority guide in 1 minute
Time’s up!
In 1 minute:
describe your process explain your choices
Conclusie
“ ”
Priority guides and wireframes complement each other. It is important to
know when to use which tool!