Responsive is a Question and not THE Answer

Responsive Design is a Question
and not THE Answer
Thomas Vander Wal
17 October 2014
User Focus :: Washington, DC, USA

Users Have Devices & Interfaces

How We Got Here
Mobile Use
Exploded
(2010)
CMSs Suck
Apps Not
Perfect Fit
Responsive

How We Got Here
South Park Underpants Gnome Conjecture
Content /
Application /
Services
Something
? ? ?
Application
Responsive
? ? ?

User Focus
User’s have interest in content and services
on their devices.
Period.
No user ever asked for a responsive site.
Responsive is a developer focussed solution to make it easier
for them to work with crappy CMS and get content onto a
myriad of devices where users’ want the content.

Shift Happened
Users
About 2010
mobile use
began to shift
past > 50% for
many orgs.
Devices /
Interfaces
Today we have
many flavors of
mobile and many
screens on a
myriad of devices.
CMS
Yet, today our
Content
Management
Systems (CMS)
still suck.

What are we talking about?
Content
Focus is on
consuming text,
images, video, etc.
Applications
Users interact with
forms, objects, and
assets
Services
Content and apps
that have agents
that work without
needing interaction

How to Move Forward
Content /
Application /
Services
Thinking:
❖ User
❖ Device
❖ Source
Select
Best Option

Design for Screens
TV
Laptop Mobile Wearable Dashboard
PowerBook G4

Model of Attraction Receptors
Intellectual
Intellectual
❖ What are things called
- IA
❖ Match mental model
❖ Writing level
❖ Content strategy

Intellectual Perceptual
Perceptual
❖ What do things look
like
❖ Match user mental
model
❖ Quick judgement
❖ Visual & interaction
❖ Feel

Mechanical
Mechanical
❖ Device and Network
❖ Bandwidth
❖ Processor power
❖ Graphics power
❖ Memory
❖ Storage
❖ Screen quality & size
❖ Interaction modes

Physical Mechanical
Physical
❖ User’s physical
capabilities
❖ Hands / touch
❖ Sight
❖ Hearing
❖ Voice
❖ Vibration / Haptic
❖ Gesture

Physical Mechanical

Physical Mechanical +
Use Context
❖ Device
❖ Location
❖ Environment
❖ Interoperation /
Continuity
❖ Task / Intent

User Facing Options
Responsive R
Native App N
Hybrid - HTML in
Native Wrapper H
Mobile
Focussed Site M
HTML5 App 5

Responsive
Best Use
❖ Text content
focus
❖ Wide variety of
device options
❖ Limited repeated
chrome
❖ Poor CMS used
& not changing
Pros
❖ Relatively easy to
modify for cross
device design
❖ Presentation layer
changes to meet
device constraints
❖ Good for limited
sites
Cons
❖ Gets complicated
fast
❖ Often leads to
heavy downloads
❖ Not best when
bandwidth limited
❖ Non-native
animation &
transition
R

Native App
Best Use
❖ Interaction
focussed app
❖ Services
❖ Large chrome
needed
❖ Bandwidth limited
❖ Known limited
device variety
❖ Games
❖ Native animation
/ transition
Pros
❖ One download for
chrome
❖ Regular use
downloads minimal
❖ Optimal IxD
❖ Best use of device
capabilities
❖ Fast and efficient
animation &
transitions
❖ Security
Cons
❖ Poor cross device
portability
❖ Not great for single
use
❖ Developer heavy
needs for broad
cross device use
❖ Needs app for
each device
❖ Update w/ OS
changes
N

Hybrid - HTML in Native Wrap
Best Use
❖ Light interaction
apps
❖ Heavy chrome
❖ Optimal layout
for device
❖ Heavy content
updates
Pros
❖ 1x download of
heavy chrome
❖ Great control of
layout
❖ Optimize for
devices
❖ Easy to update
content
Cons
❖ Needs download
❖ Needs app for
each device
❖ Update with OS
changes
❖ Not great for
games / heavy
interaction
H

Mobile Focussed Site - “m.”
Best Use
❖ Device genre
optimized
content
❖ Content heavy
❖ Audio / Video
offering
Pros
❖ Optimize for
device genre
❖ Large content
sites
❖ Bandwidth
optimized
❖ Light and fast web
Cons
❖ Media query / device
query not optimal yet
❖ Planning for user
wishes (desktop over
other)
❖ Slightly different
versions
❖ User cognitive
dissonance
❖ Needs good server
set-up
M

Mobile Focussed: Site Options
Generic Web
❖ Desk web content
optimized for
devices
❖ 1st step mobile
optimized site
Responsive
❖ Light and fast
❖ Small optimization
for variance
❖ Portrait /
Landscape shifts
Native App Wrapper
❖ Optimize chrome
❖ Best for low
bandwidth
M

HTML5 Application
Best Use
❖ Content heavy
site
❖ Devices with
modern browser
❖ Cross-OS
content heavy
Pros
❖ Developer build
efficiency gain
❖ Light interactive
with animations
❖ Control structure,
layout, & interaction
❖ User can set as
local app w/
storage / memory
set aside
Cons
❖ Animation,
transitions, and
interactions can be
slower than native
❖ App size can grow
quickly
❖ Keeping dev up-to-date
with OS &
browser updates
5

Constraints: Content Type
Long Text R M
Short Text R M
Interactive N
Multimedia N 5 H
Scalable H
graphics 5
Short
structured
(info cards)
R H N 5
Alerts N H
Chrome
Heavy N H 5
Forms R M
Applications N H 5
Maps N H

Framing with Constraints
Spreadsheet N H 5
Agents N H
Background
Services N H
Genre
specific
content
N H M

Start with This Pairing
Physical Mechanical +
Use Context
❖ Device
❖ Location
❖ Environment
❖ Interoperation /
Continuity
❖ Task / Intent

Then, Work Your Way Out
Content
Focus is on
consuming text,
images, video, etc.
Applications
Users interact with
forms, objects, and
assets
Services
Content and apps
that have assets
that work without
needing interaction

Interaction &
Communication
• Light interaction with others
• Seeing others around an object of interest
• Seeing differences of perception
• Capturing context
• Where
• When
• Tools
• Background
• Interactions with others

URL: www.vanderwal.net
Blog: www.personalinfocloud.com
E-mail: thomas@vanderwal.net
Skype: tjvanderwal
Twitter: @vanderwal or @infocloud

Responsive is a Question and not THE Answer

Recommandé

Recommandé

Contenu connexe

Plus de Thomas Vander Wal

Plus de Thomas Vander Wal (20)

Dernier

Dernier (20)

Responsive is a Question and not THE Answer