Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Multi-Device Prototypes

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 65 Anuncio

Multi-Device Prototypes

Descargar para leer sin conexión

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.

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.

Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (20)

Similares a Multi-Device Prototypes (20)

Anuncio

Más reciente (20)

Anuncio

Multi-Device Prototypes

  1. @DougGapinski #psuweb
  2. mStoner.com It’s totally not what it sounds like.
  3. THE NEED TO CHANGE HOW WE PROTOTYPE 8 WAYS TO CHANGE HOW WE PROTOTYPE QUESTIONS
  4. Remember that the primary goal of all website prototypes is better websites.
  5. How?
  6. Prototypes can help us expose design flaws before we ship.
  7. 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
  8. Prototypes can help us plan content needs.
  9. Prototypes can help us with client e̶d̶u̶c̶a̶t̶i̶o̶n̶ collaboration.
  10. Prototypes can help us with iterative development. UX advice from TLC: Don’t go chasing waterfall (process)!
  11. THE NEED TO CHANGE HOW WE PROTOTYPE
  12. Using multiple devices to access the internet is how we complete tasks now. Source
  13. 40% of adults start an activity on one device and finish it on another. Source
  14. Multi-device use increases for every device owned. Source
  15. If two devices are owned: 53% switch devices to complete tasks. If 3 devices are owned: 77% switch devices to complete tasks. Source
  16. People tend to finish tasks on larger screens. Source
  17. When using two or more devices: 58% finish on a laptop 22% finish on a tablet Source
  18. Source: Uversity / Zinch 97% of students have visited a college website on a smartphone or tablet. Source: Uversity / Zinch
  19. Source: Uversity / Zinch Nearly 66% said the experience was “just ok” or “challenging.” Source: Uversity / Zinch
  20. The website prototypes we build should help us better address the realities of different screen sizes and input types.
  21. Traditional wireframes have not aged well as a prototype.
  22. “Traditional wireframes are dead.”–@smiley
  23. 8 WAYS TO CHANGE HOW WE PROTOTYPE FOR THE MULTI-DEVICE WEB
  24. #1 Make real content a priority in your prototypes.
  25. All frame + no content = unforeseen problems at launch
  26. A mobile-first content prototype Source: Sparkbox
  27. A mobile-first content prototype Source: Sparkbox
  28. 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
  29. Provide a minimum viable content plan with the prototype.
  30. 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)
  31. 250.brown.edu
  32. 250.brown.edu
  33. #2 Build prototypes that are less specific about layout and more specific about style.
  34. Style tiles by @samathatoy
  35. Visual inventory by @danielmall Content ideas Color Tone
  36. #3 Prototype for multiple screen sizes.
  37. NOT ALL DESIGNERS ARE UNICORNS!
  38. uxpin.com
  39. uxpin.com sitemap elements library preview breakpoints editing tools settings / previews
  40. skinny medium wide
  41. Zurb Foundation: responsive HTML templates, in-browser prototypes Foundation Templates by Zurb
  42. Pattern Lab by @brad_frost and @dmolsen
  43. 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
  44. #4 Plan for progressive disclosure in prototypes.
  45. Progressive disclosure–in the context of responsive design–is the idea of displaying fewer items or shorter content entries on smaller screens.
  46. Prototyping progressive disclosure: showing fewer items on smaller displays
  47. 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.
  48. DID SOMEONE SAY CONTENT PARTY
  49. PREVENT THE 13 FEET LONG WEBSITE Image source: @lukew
  50. PREVENT THE 7.5 MILE LONG WEBSITE Image source: @benbrown
  51. #5 Prototype interactions.
  52. Tools for prototyping interactions: Adobe Fireworks (desktop app) Flinto (web-based app)
  53. A tool for prototyping interactions if you’re good with code: Famo.us (JavaScript framework)
  54. #6 Test your prototypes.
  55. “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
  56. #7 Always explain to the client what the purpose of the prototype is.
  57. 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.
  58. “It’s part of our job to decide the most appropriate way to share our work with a client.” —@laurakalbag Source: A List Apart
  59. #8 When it comes to prototyping, there is no magic bullet.
  60. Use the methods that best suit each individual client and your team.
  61. Questions?
  62. Thanks! @DougGapinski mstoner.com

×