workshop: priority guides - the alternative to wireframes

63
Priority Guides Heleen van Nues Lennart Overkamp 13 januari 2017 the alternative to wireframes

Upload: lennart-overkamp

Post on 15-Feb-2017

295 views

Category:

Design


2 download

TRANSCRIPT

Page 1: Workshop: Priority Guides - The Alternative to Wireframes

Priority Guides

Heleen van Nues Lennart Overkamp 13 januari 2017

the alternative to wireframes

Page 2: Workshop: Priority Guides - The Alternative to Wireframes

Heleen van Nues Lennart OverkampInteraction Designer

[email protected] Designer

[email protected]

Page 3: Workshop: Priority Guides - The Alternative to Wireframes
Page 4: Workshop: Priority Guides - The Alternative to Wireframes
Page 5: Workshop: Priority Guides - The Alternative to Wireframes

Creative Consultants

Interaction Designers

Visual Designers

Front-end Developers

UX

Page 6: Workshop: Priority Guides - The Alternative to Wireframes
Page 7: Workshop: Priority Guides - The Alternative to Wireframes

Building a platform from the ground up

Fully responsive platform Mobile, iPad & desktop

Booking flow redesign Overview and options for customers

Page 8: Workshop: Priority Guides - The Alternative to Wireframes

Fully responsive platform Mobile, iPad & desktop

Page 9: Workshop: Priority Guides - The Alternative to Wireframes

Booking flow redesign Overview and options for customers

Page 10: Workshop: Priority Guides - The Alternative to Wireframes

Redesign Nuon.nl

Relevance & customisation Personal product selector

High-quality service Quick, accessible & contextual

Inspirational Telling a story through design

Page 11: Workshop: Priority Guides - The Alternative to Wireframes

Relevance & customisation Personal product selector

Page 12: Workshop: Priority Guides - The Alternative to Wireframes

High-quality service Quick, accessible & contextual

Page 13: Workshop: Priority Guides - The Alternative to Wireframes

Inspirational Telling a story through design

Page 14: Workshop: Priority Guides - The Alternative to Wireframes

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

Page 15: Workshop: Priority Guides - The Alternative to Wireframes

Human2Human strategy Content adapts to customer behaviour

Page 16: Workshop: Priority Guides - The Alternative to Wireframes

Omni-channel approach Seamlessly from magazine to online

Page 17: Workshop: Priority Guides - The Alternative to Wireframes

Online look&feel Connection to product portfolio

Page 18: Workshop: Priority Guides - The Alternative to Wireframes

Wireframes

Page 19: Workshop: Priority Guides - The Alternative to 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

Page 20: Workshop: Priority Guides - The Alternative to Wireframes

Low-fidelity wireframe

Page 21: Workshop: Priority Guides - The Alternative to Wireframes

High-fidelity wireframe

Page 22: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #1:

Great for sketching & exploration

Page 23: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #2:

Good way to communicate

ideas

Page 24: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #3:

Easy to test early in the

design process

Page 25: Workshop: Priority Guides - The Alternative to Wireframes

Disadvantage #1:

They provide an illusion of final design

Page 26: Workshop: Priority Guides - The Alternative to Wireframes

Disadvantage #2:

They can kill creativity

Page 27: Workshop: Priority Guides - The Alternative to Wireframes

Disadvantage#3:

Inconvenient for Testers

& Developers

Page 28: Workshop: Priority Guides - The Alternative to Wireframes

Priority Guides

Page 29: Workshop: Priority Guides - The Alternative to Wireframes

The priority guide contains content and elements for a mobile screen,

sorted by hierarchy from top to bottom, and without layout specifications.

Page 30: Workshop: Priority Guides - The Alternative to Wireframes

“ ”

Continuously ask yourself ‘Why?’ while making a priority guide.

Page 31: Workshop: Priority Guides - The Alternative to Wireframes
Page 32: Workshop: Priority Guides - The Alternative to Wireframes

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

Page 33: Workshop: Priority Guides - The Alternative to Wireframes

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

Page 34: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #1:

Design for responsiveness

Page 35: Workshop: Priority Guides - The Alternative to Wireframes

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

Page 36: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #2:

Focus on solving problems &

serving needs

Page 37: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #3:

No time wasted on aesthetics

& layout

Page 38: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #4:

Visual designers own their

playground

Page 39: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #5:

FED get “HTML” early in

the process

Page 40: Workshop: Priority Guides - The Alternative to Wireframes

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

Page 41: Workshop: Priority Guides - The Alternative to Wireframes

Advantage #6:

Checklist for testers

Page 42: Workshop: Priority Guides - The Alternative to Wireframes

How to?

Page 43: Workshop: Priority Guides - The Alternative to Wireframes

Baselines:

real content mobile size

no layout elements not a deliverable

Page 44: Workshop: Priority Guides - The Alternative to Wireframes

Step #1:

Determine the goal of the screen(s)

Determine the goals of users, clients and stakeholders.

Page 45: Workshop: Priority Guides - The Alternative to Wireframes

Step #2:

Research your user

Interviews Observations Desk research Personas Customer Journeys Statistics

Page 46: Workshop: Priority Guides - The Alternative to Wireframes

Step #3:

Determine the content topics

Based on goals and research

Involve clients & stakeholders

Page 47: Workshop: Priority Guides - The Alternative to Wireframes

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

Page 48: Workshop: Priority Guides - The Alternative to Wireframes

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

Page 49: Workshop: Priority Guides - The Alternative to Wireframes

Step #6:

Validate & iterate!

Test with users, client and stakeholders

Reprioritise

Page 50: Workshop: Priority Guides - The Alternative to Wireframes

“ ”

Experiment and find out what works for you!

Page 51: Workshop: Priority Guides - The Alternative to Wireframes
Page 52: Workshop: Priority Guides - The Alternative to Wireframes

Workshop

Page 53: Workshop: Priority Guides - The Alternative to Wireframes

Assignment: Create a priority guide for

an online travel guide to Paris

Page 54: Workshop: Priority Guides - The Alternative to Wireframes

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.

Page 55: Workshop: Priority Guides - The Alternative to Wireframes

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.

Page 56: Workshop: Priority Guides - The Alternative to Wireframes

Content suggestions:

Introductory text Media (pictures/video)

Accommodations Ratings Filters

Page 57: Workshop: Priority Guides - The Alternative to Wireframes

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

Page 58: Workshop: Priority Guides - The Alternative to Wireframes

Time’s up!

Page 59: Workshop: Priority Guides - The Alternative to Wireframes

In 1 minute:

describe your process explain your choices

Page 60: Workshop: Priority Guides - The Alternative to Wireframes

Conclusie

Page 61: Workshop: Priority Guides - The Alternative to Wireframes
Page 62: Workshop: Priority Guides - The Alternative to Wireframes

“ ”

Priority guides and wireframes complement each other. It is important to

know when to use which tool!

Page 63: Workshop: Priority Guides - The Alternative to Wireframes