Slides from my Designing for multiple devices class at General Assembly in New York on the 7th of October 2013.
The rise in smartphones and tablets has not only changed the way we consume and interact with content, but also the way we design and approach it. This class will explore the shifting of user expectations, changes in behavior and consumption patterns, and what these advancements mean for designing products across different platforms.
Takeaways:
- An understanding of how user expectations have shifted over the last few years with regards to the use of multiple devices and how this has affected behavior and consumption patterns among consumers
- The impact this has on how to approach and design products and services that will be used on multiple devices
- An overview and understanding of the difference between mobile websites vs. responsive design vs. apps and the basics of each
- Guiding principles, resources and tools to help tackle the multiple device jungle
7. www.flickr.com/photos/hlkljgk/5764422581
For every human that enters the world,
five mobile devices are created*
* Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx
8. www.flickr.com/photos/nasamarshall/6289116940
In 2009 1% of global internet traffic came
from mobiles. By the end of 2012 it had risen
to13% and by 2015 it’s expected to be
above 50%.*
* Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile
30. www.flickr.com/photos/mkhmarketing/8468995025
Roughly 1 in 10 people that access Facebook
each month do so from a feature phone*
* Source: www.thenextweb.com/facebook/2013/07/22/facebooks-every-phone-app-for-feature-phones-passes-100-million-monthly-active-users
32. www.flickr.com/photos/lastquest/1472794031
BUT WHY?
” Today's popular devices are
not tomorrow's so building
something which works on any
device is better than building
something which works on
today's devices “
- COMBINED WISE WORDS FROM @ONEXTRAPIXEL &
@TRENTWALTON
36. www.flickr.com/photos/31878512@N06/4704140020
WHETHERTO DO AN APP
OR NOT COMES DOWNTO...
•THE OBJECTIVE (USER & BUSINESS)
• IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET
37. DIFFERENT
TYPES OF APPS
THE MAINTWOTYPES
NATIVE APPS (e.g. Instagram)
• MOST OPTIMISED USER EXPERIENCE
• ACCESSTO DEVICE CAPABILITIES & APIs
• BUT REQUIRES PLATFORM SPECIFIC CODE BASE
HYBRID (e.g. old Facebook)
• USE OF HTML5 & JAVASRIPT
•WRAPPERTO PROVIDE NATIVE CAPABILITIES
• FEWER “VERSIONS” TO MAINTAIN
• BUT CAN BETIME CONSUMINGTO CREATE APP LIKE INTERACTIONS
• CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES
38. www.flickr.com/photos/cristiano_betta/2909483129
” Money spent developing a pretty but limited
iPhone app only benefits...the few, but money
spent on the website UI would have benefitted
everyone “
- Gary Marshall on ‘The app trap’ in .net Magaizine
40. www.flickr.com/photos/adactio/5818096043
“ Design & development should respond to
the user’s behaviour & environment based on
screen size, platform & orientation.
[It’s]...a mix of flexible grids & layouts, images
& an intelligent use of media queries. ”
- SMASHING MAGAZINE
42. “ Content needs to be choreographed to
ensure the intended message is preserved
on any device and at any width ”
-TRENT WALTON
www.flickr.com/photos/theaftershock/2811382400/
44. MOBILEVS. DESKTOP FIRST
•START LARGE OR SMALL
WHAT EVER WORKS BEST FORYOU
•ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES
46. LIKE PLAYING REAL LIFETETRIS
PRE-DEFINED POCKETS FORTHE CONTENTTO SLOT INTO
www.flickr.com/photos/fritzon/195008860
47. www.flickr.com/photos/adactio/6153481666
80% of traffic in your analytics will often
come from 20% of devices…seems a shame
not to ensure that the site looks and works
especially well on these devices.*
* Source: www.slideshare.net/yiibu/pragmatic-responsive-design
48. THE WEB IS
FULL OF
EXAMPLES
LOOK FOR INSPIRATION &
BEST PRACTICE
BUT DON’T BE AFRAIDTO
CHALLENGE OR COME UP
WITH SOMETHING... BETTER.
http://mediaqueri.es/popular/
57. RELATIVE NUMBER OF
ACTIVE ANDROID DEVICES
Source: http://developer.android.com/about/dashboards/index.html
www.flickr.com/photos/blakespot/4773693893
58. EXAMPLE OF ADOPTION
OF NEW iOSVERSION
Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker
www.flickr.com/photos/blakespot/4773693893
59. KEY DIFFERENCES BETWEEN
DESIGNING FOR ANDROID & iOS
iOS
CONSISTENCY
CONSISTENCY BETWEEN
VERSIONS & HANDSETS
QUICK ADOPTION OF NEW
VERSIONS
BACK BUTTON
SETTINGS BUTTON OR 'MORE'TO
ACCESS APP WIDE SETTINGS &
INFORMATION
ANDROID
FRAGMENTATION
DIFFERENT FOR DIFFERENTVERSIONS &
HANDSETS
SLOWER IMPLEMENTATION & UPTAKE
OF NEWERVERSIONS
HANDLED WITH EITHER SYSTEM BACK
BUTTON (EARLIERVERSIONS) OR BACK
& UP BUTTONS (LATESTVERSION)
OPTIONS MENU USEDTO HOUSE APP
WIDE SETTINGS & INFORMATION
Design
UI elements &
principles
Version adoption
Back navigation
Settings etc.
www.flickr.com/photos/nrkbeta/3906687294/in/photostream
62. BASIC iOS
NAVIGATION
CONSISTENT ACROSS
VERSIONS
NAVIGATION BAR
Enables navigation through the app
hierarchy. Holds the back button,
controls for managing screen content &
the title of the screen.
BACK BUTTON
Should always take the user one step back
from where they came from & be descriptive.
TAB BAR
Can often be customised. Holds the main
sections of the app.
‘MORE’ TAB BAR ITEM
Used to hold & provide access to all other
sections of the app that don’t fit in the tab bar.
Source: http://developer.android.com/design/patterns/new-4-0.html
63. Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS:
NAVIGATION BAR
For devices that don't have the
hardware keys. Holds 'Back', 'Home'
and 'Recents'
ACTION BAR
Holds the most important action buttons for
your app (3 + overflow menu)
UPVS. BACK BUTTON
The Up button is used to navigate up one level
based on the hierarchical structure of the site.
Back is used to navigate back one step from
where you came from & as such works in
reverse chronological order.
67. www.flickr.com/photos/jojoneil/6359536591
BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDERTHE FOLLOWING:
The city of NewYork has asked you to come
up with a site that collates everything about
Christmas in NYC. The aim is to raise
awareness of events that are taking place and
to drive sales on the high street through
promoting offers from participating stores
the month leading up to Christmas.
What do you recommend in terms of their
mobile strategy and why? I.e. an app,
responsive or bespoke mobile site, or a
combination?
10 MINUTES
EXERCISE ONE
70. www.flickr.com/photos/jojoneil/6359536591
EXERCISE ONE
BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDERTHE FOLLOWING:
The city of NewYork has asked you to come
up with a site that collates everything about
Christmas in NYC. The aim is to raise
awareness of events that are taking place and
to drive sales on the high street through
promoting offers from participating stores
the month leading up to Christmas.
What do you recommend in terms of their
mobile strategy and why? I.e. an app,
responsive or bespoke mobile site, or a
combination?
10 MINUTES
HOW WOULD MOST PEOPLE
ACCESS IT?
•MOSTLY DIRECT TRAFFIC
POSSIBLE ARGUMENT FOR APP
•MOSTLYVIA SHARED LINKS
MOBILE WEB PRESENCE NEEDED.
AN APP ALONE WON’T CUT IT
ALSO CONSIDER...
•THE OBJECTIVE (USER & BUSINESS)
•IFTHERE ARE SPECIFIC DEVICE
CAPABILITIESYOU WANTTO UTILISE
•IF OFFLINE READING/USAGE IS
REQUIRED
• & OF COURSE BUDGET
71. www.flickr.com/photos/jojoneil/6359536591
BUILDING A
RESPONSIVE SITE
FOR THE CHRISTMAS SITE THE CLIENT WANTS
TO INCLUDE THE FOLLOWING:
•About page
• Event calendar
• Christmas focused map
• List of highstreet offers
PART 1
Pick either mobile or desktop & do a rough sketch
of what the home page should contain & how the
content should be prioritised.
PART 2
Using content stacking methodology define how the
content should be prioritised on desktop & mobile.
15 MINUTES
EXERCISETWO
• Search
• Most popular
• Login & registration
• Share functionality
72. DEFINEYOUR CONTENT
STACKING STRATEGY
ACROSS DEVICES & ORIENTATION
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
Desktop &Tablet
Mobile
“ Content needs to be
choreographed to
ensure the intended
message is preserved
on any device and at
any width ”
-TRENT WALTON
73. www.flickr.com/photos/jojoneil/6359536591
EXERCISETWO
BUILDING A
RESPONSIVE SITE
FOR THE CHRISTMAS SITE THE CLIENT WANTS
TO INCLUDE THE FOLLOWING:
•About page
• Event calendar
• Christmas focused map
• List of highstreet offers
PART 1
Pick either mobile or desktop & do a rough sketch
of what the home page should contain & how the
content should be prioritised.
PART 2
Using content stacking methodology define how the
content should be prioritised on desktop & mobile.
15 MINUTES
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
Desktop &Tablet
Mobile
• Search
• Most popular
• Login & registration
• Share functionality
74. www.flickr.com/photos/jojoneil/6359536591
BUILDING AN APP
BASED ON THE CONTENT & FUNCTIONALITY
REQUIREMENTS, CONSIDER WHAT WOULD BE
SUITABLE FOR AN APP:
•About page
• Event calendar
• Christmas focused map
• List of highstreet offers
PART 1
Define the main sections your app would have.
PART 2
Looking at the navigation how would you structure
this if you were to do an iOS app & an Android app?
Focus on the Tab bar items respectively Action bar
items & what would go in the ‘More’ respectively
‘Overflow menu’.
10 MINUTES
EXERCISETHREE
• Search
• Most popular
• Login & registration
• Share functionality
75. BASIC iOS
NAVIGATION
CONSISTENT ACROSS
VERSIONS
NAVIGATION BAR
Enables navigation through the app
hierarchy. Holds the back button,
controls for managing screen content &
the title of the screen.
BACK BUTTON
Should always take the user one step back
from where they came from & be descriptive.
TAB BAR
Can often be customised. Holds the main
sections of the app.
‘MORE’ TAB BAR ITEM
Used to hold & provide access to all other
sections of the app that don’t fit in the tab bar.
Source: http://developer.android.com/design/patterns/new-4-0.html
76. Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CREAM
SANDWICH:
NAVIGATION BAR
For devices that don't have the
hardware keys. Holds 'Back', 'Home'
and 'Recents'
ACTION BAR
Holds the most important action buttons for
your app (3 + overflow menu)
UPVS. BACK BUTTON
The Up button is used to navigate up one level
based on the hierarchical structure of the site.
Back is used to navigate back one step from
where you came from & as such works in
reverse chronological order.
77. www.flickr.com/photos/jojoneil/6359536591
EXERCISETHREE
BUILDING AN APP
BASED ON THE CONTENT &
FUNCTIONALITY REQUIREMENTS,
CONSIDER WHAT WOULD BE SUITABLE
FOR AN APP:
•About page
• Event calendar
• Christmas focused map
• List of highstreet offers
PART 1
Define the main sections your app would have.
PART 2
Looking at the navigation how would you
structure this if you were to do an iOS app &
an Android app? Focus on the Tab bar items
respectively Action bar items & what would go
in the ‘More’ respectively ‘Overflow menu’.
10 MINUTES
• Search
• Most popular
• Login & registration
• Share functionality
79. www.flickr.com/photos/thecaucas/2597813380
DEVICE USAGE &
PATTERNS
FUTURE DEVICES
The number of different devices will
only grow & we don’t know what’s
coming.
USED EVERYWHERE &
ANYWHERE
And we’re not only using them on the
go but increasingly when we have
some downtime including the sofa.
USE OF MOBILE DEVICES
Our use of mobile devices is
increasingly replicating that of desktop.
80. IMPLICATIONS
FOR UX &
DESIGN
THINKING
AN EQUAL & CONTINUOUS
EXPERIENCE ACROSS DEVICES
As they & the services we use
become more sophisticated &
optimised we expect more from them.
KEEP THE CORE BUT OPTIMISE
Consider the limitations but also the
opportunities with mobile devices.
www.flickr.com/photos/thecaucas/2597813380
81. WHEN
DO WHAT
BESPOKE MOBILE WEBSITE
Try to avoid it but do it if necessary
RESPONSIVE DESIGN
The most device & future “proof”
approach right now. Use if possible.
But challenge content delivery.
APP
Base on user & business needs. Strong
argument if you require offline
reading/functionality & access to
device capabilities. Base which type
on objectives & stats.www.flickr.com/photos/thecaucas/2597813380
82. FOR
RESPONSIVE
DEFINEYOUR GRID &
BREAKPOINTS
This is the backbone of responsive
design & content choreography.
DON’T FORGET THE
NAVIGATION
Consider the pros & cons of
different methods.
TEST & COLLABORATE
This is new grounds & we’re all
learning so work together & test as
you go.www.flickr.com/photos/thecaucas/2597813380
83. FOR APPS
REMEMBER PLATFORM SPECIFIC
GUIDELINES
Adhering to them will make your
app easier to use.
CONSIDER BACKWARDS
COMPATIBILITY
Not everyone will be on the latest
version. Ensure you cater for the
majority.
CONSULT THE INTERNET
There are a number of great
resources for knowledge &
inspiration. Use them.
www.flickr.com/photos/thecaucas/2597813380
84. 8. BEFORE I GO...
REMEMBERTHAT
www.flickr.com/photos/46355638@N00/4414640784
90. - Wilson Minor
“ We’re not just making pretty
interfaces.We’re actually in the process of
making an environment where we’ll spend
most of our time, for the rest of our lives.
We’re the designers.We’re the builders.
What do we want that environment to feel
like? What do we want to feel like.
http://www.flickr.com/photos/funch/4679422945/
”
BUT ABOVE ALL...