Workshop: Priority Guides - The Alternative to Wireframes

  • Published on
    15-Feb-2017

  • View
    279

  • Download
    2

Embed Size (px)

Transcript

  • 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

    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 websites 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 efficint 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 efficint 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 efficint 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 efficint 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

  • Times 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!