Multi-Device Prototypes

15,295 views
14,678 views

Published on

Prototypes can help make or break the usability of a website. In the age of the multi-device web, how can we use prototypes to craft better experiences for our end users – and collaborate more effectively with internal teams and clients along the way?

This session, originally presented at the Penn State Web Conference 2014, covers eight flexible ideas (and a number of tools) for building better prototypes for a variety of screen sizes and input types.

Published in: Internet, Design, Technology
2 Comments
104 Likes
Statistics
Notes
No Downloads
Views
Total views
15,295
On SlideShare
0
From Embeds
0
Number of Embeds
3,089
Actions
Shares
0
Downloads
197
Comments
2
Likes
104
Embeds 0
No embeds

No notes for slide

Multi-Device Prototypes

  1. mStoner MULTI-DEVICE PROTOTYPES 8 ways to improve how we prototype websites Thursday, June 12, 14
  2. @DougGapinski #psuweb Thursday, June 12, 14
  3. mStoner.com It’s totally not what it sounds like. Thursday, June 12, 14
  4. THE NEED TO CHANGE HOW WE PROTOTYPE 8 WAYS TO CHANGE HOW WE PROTOTYPE QUESTIONS Thursday, June 12, 14
  5. Remember that the primary goal of all website prototypes is better websites. Thursday, June 12, 14
  6. How? Thursday, June 12, 14
  7. Prototypes can help us expose design flaws before we ship. Thursday, June 12, 14
  8. Prototypes can help us plan websites for the extreme design constraints imposed by multiple devices. 29 inches wide LG monitor 2.3 inches wide iPhone Thursday, June 12, 14
  9. Prototypes can help us plan content needs. Thursday, June 12, 14
  10. Prototypes can help us with client e̶d̶u̶c̶a̶t̶i̶o̶n̶ collaboration. Thursday, June 12, 14
  11. Prototypes can help us with iterative development. UX advice from TLC: Don’t go chasing waterfall (process)! Thursday, June 12, 14
  12. THE NEED TO CHANGE HOW WE PROTOTYPE Thursday, June 12, 14
  13. Using multiple devices to access the internet is how we complete tasks now. Source Thursday, June 12, 14
  14. 40% of adults start an activity on one device and finish it on another. Source Thursday, June 12, 14
  15. Multi-device use increases for every device owned. Source Thursday, June 12, 14
  16. If two devices are owned: 53% switch devices to complete tasks. If 3 devices are owned: 77% switch devices to complete tasks. Source Thursday, June 12, 14
  17. People tend to finish tasks on larger screens. Source Thursday, June 12, 14
  18. When using two or more devices: 58% finish on a laptop 22% finish on a tablet Source Thursday, June 12, 14
  19. Source: Uversity / Zinch 97% of students have visited a college website on a smartphone or tablet. Source: Uversity / Zinch Thursday, June 12, 14
  20. Source: Uversity / Zinch Nearly 66% said the experience was “just ok” or “challenging.” Source: Uversity / Zinch Thursday, June 12, 14
  21. The website prototypes we build should help us better address the realities of different screen sizes and input types. Thursday, June 12, 14
  22. Traditional wireframes have not aged well as a prototype. Thursday, June 12, 14
  23. “Traditional wireframes are dead.”–@smiley Thursday, June 12, 14
  24. 8 WAYS TO CHANGE HOW WE PROTOTYPE FOR THE MULTI-DEVICE WEB Thursday, June 12, 14
  25. #1 Make real content a priority in your prototypes. Thursday, June 12, 14
  26. All frame + no content = unforeseen problems at launch Thursday, June 12, 14
  27. A mobile-first content prototype Source: Sparkbox Thursday, June 12, 14
  28. A mobile-first content prototype Source: Sparkbox Thursday, June 12, 14
  29. This content prototype has little to no style, but it demonstrates: • mobile-first methodology – a single column of stacked content • real content (not lorem ipsum!) • content models (subhead, headline, blurb, line length) • the order of content on the page Thursday, June 12, 14
  30. Provide a minimum viable content plan with the prototype. Thursday, June 12, 14
  31. In Brown’s case, a minimum viable content plan included a plan for: • social media needed to support the site • longer form stories with embedded media • interactive timeline content • content models for the above (fields, word count, image needs) Thursday, June 12, 14
  32. 250.brown.edu Thursday, June 12, 14
  33. 250.brown.edu Thursday, June 12, 14
  34. #2 Build prototypes that are less specific about layout and more specific about style. Thursday, June 12, 14
  35. Style tiles by @samathatoy Thursday, June 12, 14
  36. Visual inventory by @danielmall Content ideas Color Tone Thursday, June 12, 14
  37. #3 Prototype for multiple screen sizes. Thursday, June 12, 14
  38. NOT ALL DESIGNERS ARE UNICORNS! Thursday, June 12, 14
  39. uxpin.com Thursday, June 12, 14
  40. uxpin.com sitemap elements library preview breakpoints editing tools settings / previews Thursday, June 12, 14
  41. skinny medium wide Thursday, June 12, 14
  42. Zurb Foundation: responsive HTML templates, in-browser prototypes Foundation Templates by Zurb Thursday, June 12, 14
  43. Pattern Lab by @brad_frost and @dmolsen Thursday, June 12, 14
  44. Pattern Lab is: • an iterative design and development tool that can be used for prototyping • a static site generator, similar to Jekyll or Octopress • a viewport resizer • annotation tool Thursday, June 12, 14
  45. #4 Plan for progressive disclosure in prototypes. Thursday, June 12, 14
  46. Progressive disclosure–in the context of responsive design–is the idea of displaying fewer items or shorter content entries on smaller screens. Thursday, June 12, 14
  47. Prototyping progressive disclosure: showing fewer items on smaller displays Thursday, June 12, 14
  48. Ideally a user can still get to all the same content regardless of device. They just might see shorter initial versions or fewer initial entries at one time on smaller screens. Thursday, June 12, 14
  49. DID SOMEONE SAY CONTENT PARTY Thursday, June 12, 14
  50. PREVENT THE 13 FEET LONG WEBSITE Image source: @lukew Thursday, June 12, 14
  51. PREVENT THE 7.5 MILE LONG WEBSITE Image source: @benbrown Thursday, June 12, 14
  52. #5 Prototype interactions. Thursday, June 12, 14
  53. Tools for prototyping interactions: Adobe Fireworks (desktop app) Flinto (web-based app) Thursday, June 12, 14
  54. A tool for prototyping interactions if you’re good with code: Famo.us (JavaScript framework) Thursday, June 12, 14
  55. #6 Test your prototypes. Thursday, June 12, 14
  56. “The best results come from testing no more than 5 users and running as many small tests as you can afford.” Source: Nielsen Norman Group Thursday, June 12, 14
  57. Thursday, June 12, 14
  58. Thursday, June 12, 14
  59. #7 Always explain to the client what the purpose of the prototype is. Thursday, June 12, 14
  60. It’s 2014. Most clients have seen a wireframe before. It’s 2014. Most clients have not seen a style tile before. It’s your job to explain what the prototype is and what kind of feedback you need. Thursday, June 12, 14
  61. “It’s part of our job to decide the most appropriate way to share our work with a client.” —@laurakalbag Source: A List Apart Thursday, June 12, 14
  62. #8 When it comes to prototyping, there is no magic bullet. Thursday, June 12, 14
  63. Use the methods that best suit each individual client and your team. Thursday, June 12, 14
  64. ?Questions? Thursday, June 12, 14
  65. Thanks! @DougGapinski mstoner.com Thursday, June 12, 14

×