A walk through of the 5 options that need to be walked through and considered before selecting a path for mult-screen / multi-device design and development. Responsive is the hot thing these days, but it is not the best option for many things. This walks through the considerations and options to get started on the right path.
6. How We Got Here
South Park Underpants Gnome Conjecture
Content /
Application /
Services
Something
? ? ?
Application
Responsive
? ? ?
7. 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.
8. 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.
9. 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
10. How to Move Forward
Content /
Application /
Services
Thinking:
❖ User
❖ Device
❖ Source
Select
Best Option
13. Model of Attraction Receptors
Intellectual
Intellectual
❖ What are things called
- IA
❖ Match mental model
❖ Writing level
❖ Content strategy
14. Model of Attraction Receptors
Intellectual Perceptual
Perceptual
❖ What do things look
like
❖ Match user mental
model
❖ Quick judgement
❖ Visual & interaction
❖ Feel
15. Model of Attraction Receptors
Intellectual Perceptual
Mechanical
Mechanical
❖ Device and Network
❖ Bandwidth
❖ Processor power
❖ Graphics power
❖ Memory
❖ Storage
❖ Screen quality & size
❖ Interaction modes
20. User Facing Options
Responsive R
Native App N
Hybrid - HTML in
Native Wrapper H
Mobile
Focussed Site M
HTML5 App 5
21. 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
22. 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
23. 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
24. 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
25. 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
26. 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
28. 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
29. Framing with Constraints
Spreadsheet N H 5
Agents N H
Background
Services N H
Genre
specific
content
N H M
31. Start with This Pairing
Physical Mechanical +
Intellectual Perceptual
Use Context
❖ Device
❖ Location
❖ Environment
❖ Interoperation /
Continuity
❖ Task / Intent
32. 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
33. 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