workshop: priority guides - the alternative to wireframes

Priority Guides

Heleen van Nues Lennart Overkamp 13 januari 2017

the alternative to wireframes

Heleen van Nues Lennart OverkampInteraction Designer

hvannues@mirabeau.nlInteraction Designer

loverkamp@mirabeau.nl

Creative Consultants

Interaction Designers

Visual Designers

Front-end Developers

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

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.

NotesGENERAL

Crew on flight

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

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

Link naar tooltip

Afbeelding

icoon of thumbnailBeeld

(i)i button voor disclaimer tekst

Disclaimer tip besparing

Wist je dat? Een oude droger vaak de

grootste energieverbruiker is in een Nederlands huishouden?

Hoe hoger de centrifugesnelheid (1600 toeren per minuut), hoe

droger de was en hoe korter de droogtijd.

Tip box01 Hoge centrifugesnelheidTitel: nummer tip + tekst

De ‘strijkdroog’ stand kost minder energie dan

‘kreukherstellend’ of ‘kast droog’.

02 StrijkdroogTitel: nummer tip + tekst

Lang drogen op een lage temperatuur is voordeliger dan

kort drogen op een hoge temperatuur.

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

afbeelding

icoon besparing

icoon C02

C02 besparing 1kg

icoon bekeken

Lees meer

Titel Pagina header

Tip eigenschappen

Content box

Link naar tooltip

Afbeelding

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

afbeelding

icoon besparing

icoon C02

C02 besparing 1kg

icoon bekeken

Lees meer

Titel Pagina header

Tip eigenschappen

Content box

Link naar tooltip

Afbeelding

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?’

afbeelding

icoon besparing

icoon C02

C02 besparing 1kg

icoon bekeken

Lees meer

Titel Pagina header

Tip eigenschappen

Content box

Link naar tooltip

Afbeelding

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!

workshop: priority guides - the alternative to wireframes

Design

flux wireframes

alleen wireframes

abc - wireframes

thig wireframes

seb wireframes

donator wireframes

wireframes (pdf)

kpspin wireframes

flagtrix wireframes

wireframes - usability

wireframes & more

payables: priority payments - commbank · this guides takes...

wine & wireframes

website wireframes

wireframes & mockups

wireframes examples

wireframes graded

user centric design process · 2. mood board/ style guides...

wireframes - uitwerkingen

clase3: wireframes