Communicating Design In a Multiscreen World

Communicating Design In a Multiscreen World

Presented at Webvisions Portland 2014

Much of the conventional design process and documentation we rely on is ineffective when it comes to communicating how we want our designs to translate across a wide range of devices and screen sizes. This talk is all about producing effective, efficient deliverables for an increasingly mobile-accessed Web, and practical design methods you can put into use right away.

links referenced:
http://foodbank.bradfrostweb.com/timeline/
http://rif.superfriend.ly/
https://github.com/elliance/metaframe

Aff5641764408271f7bc398f2097edd0?s=128

Dennis Kardys

May 09, 2014
Tweet

Transcript

  1. Communicating Design in a MULTISCREEN World Dennis Kardys, Design Director,

    WSOL | @dkardys #wvpdx
  2. “We want a responsive design!”

  3. “We want a responsive design!” ...So that our site will

    work on my [boss’s] iPhone...
  4. NO! NOT JUST ONE SCREEN—

  5. ALLS THE SCREENS!

  6. It’s a good time to be a designer...

  7. But WILL the People know to click it?

  8. None
  9. ...a good time to be in the deliverables business?

  10. Makers wanna make... not document

  11. How much of the design process is expendable?

  12. “The purpose of a design artifact, whether a wireframe, prototype

    or sketch, is to illustrate our thinking.” —Robert Hoekman
  13. designing for lots of screens... IT’S COMPLICATED, YO!

  14. A single user task, represented by a series of actions

    across time
  15. A single user task, represented by a series of actions

    across time
  16. 65% 60% 4% source: Think With Google, “The New Multi

    Screen World” - http://bit.ly/Qivs98 multiscreen behavior ~ search ~
  17. A single user task, represented by a series of actions

    across screens and time
  18. A single user task, represented by a series of actions

    across screens and time
  19. new challenges demand a Flexible Workflow & Adaptive Process

  20. Facilitation Setting expectations

  21. CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1 Alleviate concerns...

  22. CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1 Foster healthy mindsets.

  23. Designing in the open... http://foodbank.bradfrostweb.com/timeline/

  24. Provides a line of sight

  25. Provides a line of sight

  26. Setting Guidelines • Design Studio Methods • Design Mini Brief

    • Structured Rules for Critique
  27. None
  28. None
  29. Totally arbitrary re-prioritization of objectives incoming!

  30. The purpose of a design artifact can also be to

    transform our thinking
  31. Participatory Sketching Getting stubborn ideas out of people’s heads and

    onto paper.
  32. None
  33. None
  34. None
  35. Don’t Pause for Perfection (iterate for improvement)

  36. Experiential Prototyping

  37. Comics & Storyboards Great for getting to people focus on

    goals and scenarios instead of features and screens.
  38. Experience Maps Outlining the various points where users interact with

    a product or service, across channels. Can weave together personas, scenarios, and tasks.
  39. Role Playing / Bodystorming Performing the experience http://www.flickr.com/photos/xian/3763797756/in/photostream/ http://www.flickr.com/photos/nlireland/5963130143/

  40. http://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows A Shorthand for UI Flows Build a sense of

    place across screens by building consistency in what the user can see and do.
  41. Stories help you find gaps in the experience. http://www.flickr.com/photos/osucommons/3385601567/

  42. 1. Consistent 2. Convenient 3. Connected 4. Contextual

  43. Tactical Prototyping

  44. Systems can be deconstructed. Systems have rules.

  45. Design Systems Breed • Structured Content • Modular Markup &

    CSS • More consistent UI
  46. Friction in the process between design and dev teams are

    often the result of poorly defined design systems.
  47. Style Exploration (UI lead) Content / Layout/IxD Exploration (interaction/IA lead/front

    end) High Fidelity (all hands on deck) Explore in tandem Discuss In Isolation Discuss In Isolation Evaluate in Context
  48. Visual Inventory Component Audit Element Collage Style Guide Explore in

    tandem Content Inventory Page Tables Content Reference Low-fi Prototypes Component Library High Fidelity Prototype Refine in context
  49. KJ Method An efficient way to exhaust content ideas or

    goals and arrive at consensus when dealing with large or divided groups. http://www.netmagazine.com/features/how-run-effective-meeting
  50. Paper Prototypes Quickly validate and adjust ideas while considering considering

    context and ergonomics
  51. Page Tables / Content Outlines Worksheets for evaluating, prioritizing and

    structuring content. Can map to how content will be structured within a content management system.
  52. Component Audit What components are existing? What components are needed?

    What components are redundant?
  53. None
  54. Content Reference Wireframes Plotting template structure and content zones.

  55. Content Reference Wireframes Plotting template structure and content zones. BETTER

    IN THE BROW SER!
  56. Low Fidelity HTML Prototypes

  57. Annotations for HTML Wireframes Elliance Metaframe: https://github.com/elliance/metaframe

  58. None
  59. evaluating decisions in their actual medium

  60. Visual Inventory - concept Inspirational screenshots to help gauge art

    direction
  61. Visual Inventory - concept Inspirational screenshots to help gauge art

    direction
  62. Visual Inventory - color

  63. Visual Inventory - color

  64. Visual Inventory - type

  65. Visual Inventory - type

  66. Element Collage Vignettes that explore style in context of key

    components
  67. Element Collage Vignettes that explore style in context of key

    components
  68. Style Prototype / Guide Basic elements with applied visual style

  69. Component Guide Components + design system rules

  70. Component Guide Components + design system rules

  71. None
  72. None
  73. High Fidelity Prototype

  74. High Fidelity Prototype

  75. Learn only what you need to learn to move on...

  76. Facilitation Pacing & Preparation

  77. None
  78. Crossing the Chasm

  79. Pace The Conversation Focus on one thing at a time

    http://www.flickr.com/photos/nlireland/5963130143/
  80. Build Momentum distinguish between learning & reviewing.

  81. Project paralysis...

  82. Prime Time continually priming and reinforcing expectations _____________ the right

    conversation the right time
  83. PREPARING for what’s to come

  84. How much documentation?

  85. Lifespan (disposable or living) Proximity (immediate, long term) Purpose (learning

    or specify)
  86. Create Props NOT Paperwork

  87. UX is a result... not a document.

  88. YOU GOT THIS, DUDE!

  89. THANKS! Dennis Kardys design director | book: mobile-web-triage.com @dkardys