Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Workshop: Priority Guides - The Alternative to Wireframes

2,385 views

Published on

A major pitfall of wireframing in the early design process is to focus too much on the visual layout of the design. The priority guide is a content-first alternative approach that avoids this pitfall.

In this workshop, Heleen van Nues and I discussed the limitations of wireframes, and how priority guides can overcome these limitations. Under our guidance, attendees created their first priority guide, and afterwards pitched their process and results.

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/PlDF7 ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Visit Here to Download eBook === http://readjpaojdpa.ygto.com/2749308429-les-guides-en-bd-tome-49-le-vin.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Workshop: Priority Guides - The Alternative to Wireframes

  1. 1. Priority Guides Heleen van Nues Lennart Overkamp the alternative to wireframes
  2. 2. Heleen van Nues Lennart Overkamp Interaction Designer hvannues@mirabeau.nl Interaction Designer loverkamp@mirabeau.nl
  3. 3. Creative Consultants Interaction Designers Visual Designers Front-end Developers UX
  4. 4. Wireframes
  5. 5. “ ” 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
  6. 6. Low-fidelity wireframe
  7. 7. High-fidelity wireframe
  8. 8. Advantage #1: Great for sketching & exploration
  9. 9. Advantage #2: Good way to communicate ideas
  10. 10. Advantage #3: Easy to test early in the design process
  11. 11. Disadvantage #1: They provide an illusion of final design
  12. 12. Disadvantage #2: They can kill creativity
  13. 13. Disadvantage#3: Inconvenient for Testers & Developers
  14. 14. Priority Guides
  15. 15. The priority guide contains content and elements for a mobile screen, sorted by hierarchy from top to bottom, and without layout specifications.
  16. 16. “ ” Continuously ask yourself ‘Why?’ while making a priority guide.
  17. 17. 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 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 1 2 3 5 6
  18. 18. 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
  19. 19. Advantage #1: Design for responsiveness
  20. 20. 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 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 01 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
  21. 21. Advantage #2: Focus on solving problems & serving needs
  22. 22. Advantage #3: No time wasted on aesthetics & layout
  23. 23. Advantage #4: Visual designers own their playground
  24. 24. Advantage #5: FED get “HTML” early in the process
  25. 25. 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
  26. 26. Advantage #6: Checklist for testers
  27. 27. How to?
  28. 28. Baselines: real content mobile size no layout elements not a deliverable
  29. 29. Step #1: Determine the goal of the screen(s) Determine the goals of users, clients and stakeholders.
  30. 30. Step #2: Research your user Interviews Observations Desk research Personas Customer Journeys Statistics
  31. 31. Step #3: Determine the content topics Based on goals and research Involve clients & stakeholders
  32. 32. 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?’
  33. 33. 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
  34. 34. Step #6: Validate & iterate! Test with users, client and stakeholders Reprioritise
  35. 35. “ ” Experiment and find out what works for you!
  36. 36. 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….. icoon of thumbnail (i) 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. 01 Hoge centrifugesnelheid De ‘strijkdroog’ stand kost minder energie dan ‘kreukherstellend’ of ‘kast droog’. 02 Strijkdroog Lang drogen op een lage temperatuur is voordeliger dan kort drogen op een hoge temperatuur. 03 Lang drogen op lage temp 04 Volle droger met lage temp
  37. 37. Workshop
  38. 38. Assignment: Create a priority guide for an online travel guide to Paris
  39. 39. 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.
  40. 40. 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.
  41. 41. Content suggestions: Introductory text Media (pictures/video) Accommodations Ratings Filters
  42. 42. 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
  43. 43. Time’s up!
  44. 44. In 1 minute: describe your process explain your choices
  45. 45. Conclusion
  46. 46. “ ” Priority guides and wireframes complement each other. It is important to know when to use which tool!
  47. 47. That’s it! Any questions? :)

×