Slide 1
Slide 1 text
Communicating
Design
in a MULTISCREEN World
Dennis Kardys, Design Director, WSOL | @dkardys #wvpdx
Slide 2
Slide 2 text
“We want a
responsive design!”
Slide 3
Slide 3 text
“We want a
responsive design!”
...So that our site will work
on my [boss’s] iPhone...
Slide 4
Slide 4 text
NO! NOT JUST ONE SCREEN—
Slide 5
Slide 5 text
ALLS THE SCREENS!
Slide 6
Slide 6 text
It’s a good time to
be a designer...
Slide 7
Slide 7 text
But WILL the
People know
to click it?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
...a good time to be in
the deliverables
business?
Slide 10
Slide 10 text
Makers wanna
make...
not document
Slide 11
Slide 11 text
How much
of the design process
is expendable?
Slide 12
Slide 12 text
“The purpose of a design
artifact, whether a
wireframe, prototype or
sketch, is to illustrate our
thinking.”
—Robert Hoekman
Slide 13
Slide 13 text
designing for lots of screens...
IT’S COMPLICATED, YO!
Slide 14
Slide 14 text
A single user task,
represented by a series
of actions across time
Slide 15
Slide 15 text
A single user task,
represented by a series
of actions across time
Slide 16
Slide 16 text
65% 60% 4%
source: Think With Google, “The New Multi Screen World” - http://bit.ly/Qivs98
multiscreen behavior
~ search ~
Slide 17
Slide 17 text
A single user task,
represented by a series
of actions across
screens and time
Slide 18
Slide 18 text
A single user task,
represented by a series
of actions across
screens and time
Slide 19
Slide 19 text
new challenges demand
a Flexible Workflow
& Adaptive Process
Slide 20
Slide 20 text
Facilitation
Setting expectations
Slide 21
Slide 21 text
CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1
Alleviate concerns...
Slide 22
Slide 22 text
CC licence: flickr Mitchell Joyce https://flic.kr/p/6TYNf1
Foster healthy mindsets.
Slide 23
Slide 23 text
Designing in
the open...
http://foodbank.bradfrostweb.com/timeline/
Slide 24
Slide 24 text
Provides a
line of sight
Slide 25
Slide 25 text
Provides a
line of sight
Slide 26
Slide 26 text
Setting Guidelines
• Design Studio Methods
• Design Mini Brief
• Structured Rules for Critique
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Totally arbitrary
re-prioritization of
objectives incoming!
Slide 30
Slide 30 text
The purpose of a design
artifact can also be to
transform our thinking
Slide 31
Slide 31 text
Participatory Sketching
Getting stubborn ideas out of people’s
heads and onto paper.
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Don’t Pause for Perfection
(iterate for improvement)
Slide 36
Slide 36 text
Experiential
Prototyping
Slide 37
Slide 37 text
Comics & Storyboards
Great for getting to people focus on goals and
scenarios instead of features and screens.
Slide 38
Slide 38 text
Experience Maps
Outlining the various points where users interact with a
product or service, across channels. Can weave together
personas, scenarios, and tasks.
Slide 39
Slide 39 text
Role Playing / Bodystorming
Performing the experience
http://www.flickr.com/photos/xian/3763797756/in/photostream/
http://www.flickr.com/photos/nlireland/5963130143/
Slide 40
Slide 40 text
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.
Slide 41
Slide 41 text
Stories help you find
gaps in the experience.
http://www.flickr.com/photos/osucommons/3385601567/
Slide 42
Slide 42 text
1. Consistent
2. Convenient
3. Connected
4. Contextual
Slide 43
Slide 43 text
Tactical
Prototyping
Slide 44
Slide 44 text
Systems can be
deconstructed.
Systems have rules.
Slide 45
Slide 45 text
Design Systems Breed
• Structured Content
• Modular Markup & CSS
• More consistent UI
Slide 46
Slide 46 text
Friction in the process between
design and dev teams are often
the result of poorly defined
design systems.
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
Paper Prototypes
Quickly validate and adjust ideas while considering
considering context and ergonomics
Slide 51
Slide 51 text
Page Tables / Content Outlines
Worksheets for evaluating, prioritizing and structuring
content. Can map to how content will be structured
within a content management system.
Slide 52
Slide 52 text
Component Audit
What components are existing? What components are
needed? What components are redundant?
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Content Reference Wireframes
Plotting template structure and content zones.
Slide 55
Slide 55 text
Content Reference Wireframes
Plotting template structure and content zones.
BETTER
IN
THE BROW
SER!
Slide 56
Slide 56 text
Low Fidelity HTML Prototypes
Slide 57
Slide 57 text
Annotations for HTML
Wireframes
Elliance Metaframe: https://github.com/elliance/metaframe
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
evaluating decisions in their
actual medium
Slide 60
Slide 60 text
Visual Inventory - concept
Inspirational screenshots to help gauge art direction
Slide 61
Slide 61 text
Visual Inventory - concept
Inspirational screenshots to help gauge art direction
Slide 62
Slide 62 text
Visual Inventory - color
Slide 63
Slide 63 text
Visual Inventory - color
Slide 64
Slide 64 text
Visual Inventory - type
Slide 65
Slide 65 text
Visual Inventory - type
Slide 66
Slide 66 text
Element Collage
Vignettes that explore style in context of key components
Slide 67
Slide 67 text
Element Collage
Vignettes that explore style in context of key components
Slide 68
Slide 68 text
Style Prototype / Guide
Basic elements with applied visual style
Slide 69
Slide 69 text
Component Guide
Components + design system rules
Slide 70
Slide 70 text
Component Guide
Components + design system rules
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
High Fidelity Prototype
Slide 74
Slide 74 text
High Fidelity Prototype
Slide 75
Slide 75 text
Learn only what you need
to learn to move on...
Slide 76
Slide 76 text
Facilitation
Pacing & Preparation
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Crossing the
Chasm
Slide 79
Slide 79 text
Pace The
Conversation
Focus on one thing at a time
http://www.flickr.com/photos/nlireland/5963130143/
Slide 80
Slide 80 text
Build Momentum
distinguish between
learning & reviewing.
Slide 81
Slide 81 text
Project paralysis...
Slide 82
Slide 82 text
Prime Time
continually priming and
reinforcing expectations
_____________
the right conversation the right
time
Slide 83
Slide 83 text
PREPARING
for what’s to come
Slide 84
Slide 84 text
How much
documentation?
Slide 85
Slide 85 text
Lifespan (disposable or living)
Proximity (immediate, long term)
Purpose (learning or specify)
Slide 86
Slide 86 text
Create Props
NOT
Paperwork
Slide 87
Slide 87 text
UX is a result...
not a document.
Slide 88
Slide 88 text
YOU GOT THIS, DUDE!
Slide 89
Slide 89 text
THANKS!
Dennis Kardys
design director |
book: mobile-web-triage.com
@dkardys