User experience expert Theresa Neil will guide you through the current mobile strategies: Responsive web, Optimized sites, Native apps, and Hybrids.
Study the most successful mobile implementations in the market today (and some of the worst). Learn the merits and pitfalls of each strategy.
Get to your mobile solution faster by learning the best patterns for Navigation, Forms, Tables, Search, Sort & Filter, Charts, Tools, Invitations, Feedback, and Help.
6. Netflix in my house
game room office
living room kitchen
7. Netflix in my house
and outside
game room office
living room kitchen
8. Netflixʼs User Experience
Classic Web Site Hybrid Tablet Apps Hybrid Mobile Apps
TV (Boxee) Game Console (XBox) Game Device (Playstation)
9. UX strategy is about aligning the purpose of a
product with the userʼs requirements at any given
time or in any given situation.
http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystem
http://www.slideshare.net/Rachel_Hinman/the-mobile-frontier-11393284
10. How do we do that?
1.Gain empathy and clarity on exactly what our customers
go through when they interact with our service.
2.Identify key areas where we can improve their experience.
http://www.shmula.com/customer-journey-map-continuous-improvement/10494/
11. How do we do that?
1.Gain empathy and clarity on exactly what our customers
go through when they interact with our service.
2.Identify key areas where we can improve their experience.
http://www.shmula.com/customer-journey-map-continuous-improvement/10494/
12. How do we do that?
1.Gain empathy and clarity on exactly what our customers
go through when they interact with our service.
2.Identify key areas where we can improve their experience.
Pain point
Pain point
Pain point Pain point
Pain point
Pain point
Pain point
http://www.shmula.com/customer-journey-map-continuous-improvement/10494/
13. Starbuckʼs found that technology can
address some of these pain points,
Locating Ordering/Waiting Paying
16. Pain point
Pain point
Pain point Pain point
Pain point point
Pain
Pain point
Where are your customerʼs
What does their pain points?journey look like?
17. Responsive Site Native App
What mobile solutions
are available to help
with these pain points?
Web And /Or Installed
Optimized Sites Hybrid App
18. Responsive Site Native App
Web And /Or Installed
Optimized Sites Hybrid App
19. Responsive Web Site
Defined Web site responds to the environment using css media
queries. Typically achieved by using fluid grid layouts, like Responsive
Grid System, Bootstrap, from Twitter, or Foundation by Zurb.
21. Responsive Web Site
Ideal For
Informational Web Sites
Portfolios
Content Consumption Sites
• Newspapers
• Magazines
• Blogs
Boston Globe
22. Weʼre going to deep dive into responsive
design a bit later...
23. Optimized Web Sites
Defined Multiple web sites, each optimized for a different form
factor, and different usage needs.
At Home
On The Go
While Shopping
At Work
On Public Transport
0 25 50 75 100
24. Optimized Web Sites
Defined Multiple web sites, each optimized for a different form
factor, and different usage needs.
Smartphone 80
Tablet
Laptop
60
40
20
0
At Home AM To/From School/Work At School/Work Out and About At Home PM
25. Optimized Web Sites
Defined Multiple web sites, each optimized for a different form
factor, and different usage needs.
26. Optimized Web Sites
Some companies have three distinct sites...
Mobile Web Site
Tablet Web Site
Classic Web Site
27. Optimized Web Sites
More often there are only two distinct sites.
Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
28. Optimized Web Sites
But this may change in moving forward:
In January, Adobe reported that tablet users spend
more than 50 percent more for each transaction at
an online retailer site compared to smartphone users
and 20 percent more than traditional computer users.
http://success.adobe.com/assets/en/downloads/whitepaper/13926_digital_marketing_insights.pdf
32. After we look as responsive design, weʼll dig
into mobile optimized site design
33. Native Apps
Defined An application that has been developed for use on a
particular platform or device.
Typically native apps are coded with:
Objective C for Apple
Java for Android and BlackBerry
C# or Visual Basic for Windows 7.5
But there are also other options:
Ruby Motion
MonoTouch and MonoDroid
Adobe AIR
Adobe Flex 4.5 Showcase Apps
38. After lunch weʼll look at design patterns and
anti-patterns for native applications
39. Hybrid Apps
Defined A ʻnative wrappedʼ web application. Products like Titanium and
PhoneGap create a native wrapper that lets the Javascript (or Ruby or
Python) access OS dependent operations.
40. Hybrid Apps
Development Frameworks
Most support HTML5 and CSS3 so you can create custom UIs for
different platforms.
But Beware
Some frameworks offer a ʻdrag and dropʼ IDE that force all of your apps
to look like identical, regardless of the target OS/device.
42. Hybrid Apps
NBC-Built with Titanium
IPad & iPhone apps are nice, but not
shoehorned onto an Android phone.*
This is not a limitation of Titanium, just a poor design
decision by NBC.
47. Responsive Site Native App
Letʼs deep dive into
each of these options
Web And /Or Installed
Optimized Sites Hybrid App
48. Responsive Site Native App
Web And /Or Installed
Optimized Sites Hybrid App
49. Responsive Deep Dive
What is Responsive?
Layout Patterns
Mobile First Segue
Navigation Patterns
Sketching/ Wireframing/Prototyping
Visual Design
50. Why Responsive?
Future Proof
Will work on devices that aren’t even created yet
Cost Savings
By reducing duplication and simplifying maintenance
It is not a fad, it is the new best
practice for web sites
51. Why Responsive?
Future Proof
Will work on devices that aren’t even created yet
Cost Savings
By reducing duplication and simplifying maintenance
It is not a fad, it is the new best
practice for web sites
Notice I didʼt say “best practice for web apps”
52. People are frequently consuming web content from
a device other than a laptop/desktop. A responsive
design will work across devices, providing people
with the content they seek.
http://www.abookapart.com/products/mobile-first/
53. Responsive Grid Systems
The design adapts itself to the to the user’s behavior based on
screen size, platform and orientation, by using a series of grids.
The most common are
grids are:
12 column
10 column
But you can also find:
24 column
18 column
8 column, etc..
Or make your own.
http://www.alistapart.com/articles/fluidgrids/
54. Media Queries
With responsive web design, you can set a baseline
(mobile) experience first, then progressively enhance
or adapt your layout as device capabilities change.
This is accomplished by setting resolution “break points”
and applying a different set of layout rules and media
assets to each. A break point can be thought of as a
conditional statement that determines if a device meets
specific criteria like a minimum width of 600 pixels. If that
condition is true, then the browser applies a different set
of layout rules.
55. Responsive Design: Layout Patterns
Mostly Fluid Column Drop Layout Shifter
Tiny Tweaks Off Canvas
http://www.abookapart.com/products/mobile-first/
56. Layout Patterns: Mostly Fluid
I dubbed this pattern "mostly fluid" because the
core structure of the layout really doesn't
change until the smallest screen width. Instead,
the design mostly relies on fluid grids to adapt
to a variety of screen sizes.
-- Luke W
https://sifterapp.com/
57. Layout Patterns: Column Drop
This pattern starts with a multi-column layout and
ends up with a single column layout, dropping
columns along the way as screen sizes get
narrower. The overall size of elements in this
layout tend to stay consistent. -- Luke W
58.
59. Layout Patterns: Layout Shifter
This pattern does the most to adapt across
different screen sizes. That is, different layouts
are used on large, medium, and small screens.
Because this inherently requires more work, it
seems to be less popular. -- Luke W
61. Layout Patterns: Tiny Tweaks
Simple sites with a single column layout, multi-device adaptation
can just be a few tiny tweaks to font sizes and image layout
-- Luke W
62.
63. Layout Patterns: Off Canvas
This pattern advantage of space off the screen to keep
content or navigation hidden until either a larger screen
size allows it to be visible or a user takes action to expose
it. This pattern is showing up in a sites and apps.
-- Luke W
68. Responsive Design: More Layouts
Last five patterns courtesy of
Joshua Johnson
http://designshack.net/articles/css/5-
really-useful-responsive-web-design-
patterns/
Feature Shuffle
69. Responsive Design: More Layouts
Last five patterns courtesy of
Joshua Johnson
http://designshack.net/articles/css/5-
really-useful-responsive-web-design-
patterns/
Feature Shuffle
78. Four critical (mobile) behaviors
Lookup/Find (urgent info, local): I need an answer to
something now—frequently related to my current location in
the world.
Explore/Play (bored, local): I have some time to kill and
just want a few idle time distractions.
Check In/Status (repeat/micro-tasking): Something
important to me keeps changing or updating and I want to
stay on top of it.
Edit/Create (urgent change/micro-tasking): I need to get
some- thing done now that can’t wait.
79. Mobile First is...
About reduction
When I say “simple”, what I mean is: A product reduced to
its purest form of purpose or value. --Francisco Inchauste
http://www.simpleandusable.com/
81. Mobile First results in...
A user experience focused on key tasks
For the BBC thatʼs top
stories and most read
82. Mobile First thinking works for...
Responsive Site Native Apps
Optimized Sites Hybrid Apps
83. Mobile First thinking works for...
Responsive Site Native Apps
Optimized Sites Hybrid Apps
84. Responsive Navigation Patterns
Top Nav or “Do Nothing” Approach
One of the easiest-to-implement solutions for navigation is to simply
keep it at the top. Because of its ease of implementation, it’s found on
many (maybe even most) responsive sites right now.
-- Brad Frost
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
86. Responsive Navigation Patterns
The footer anchor
This clever solution keeps the nav list at the footer of the site, while the header contains a
simple anchor link pointing to the footer nav. This approach clears up a lot of room for the
core content while still providing quick access to the navigation.
-- Brad Frost
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
87. Responsive Navigation Patterns
The select menu
One way of taming nav links gone wild is to transform a list of links into a select
menu for small screens. This avoids the problems the top nav approach presents
and is a clever way to save real estate.
-- Brad Frost
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
88. Drawbacks
Select menus are for choosing your state or security question, not navigating a site.
In my mind there’s only one form element that should ever be used for navigation and
that’s search. -- Andy Clarke
http://www.stuffandnonsense.co.uk/blog/about/the_select_menu_navigation_pattern
89. Responsive Navigation Patterns
The toggle
The menu slides open right in the header. It’s a good-looking approach
and is relatively easy to implement. -- Brad Frost
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
91. Responsive Navigation Patterns
The left nav flyout
The nav is accessed by a menu icon, which reveals a tray that slides in from the
left and moves the main content over to the right. -- Brad Frost
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
92. Drawbacks
Sophisticated, lots of moving parts. Allow plenty of time for testing
across many devices.
Possible Solutions
Foundations framework offers 4 options for off canvas navigation
http://foundation.zurb.com/
http://jasonweaver.name/lab/offcanvas/technical/
93. Responsive Navigation Patterns
Footer only
The footer-only navigation is similar to the footer anchor approach, only
without the anchor in the header. It follows the content-first, nav-second
model, however it requires mobile users to scroll all the way to the bottom in
order to navigate the site. -- Brad Frost
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
94. Responsive Navigation Anti- Patterns
Hide ʻn Cry
Removes a bunch of options. A big no,no. Don’t penalize people for visiting
your site on a mobile device.
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
96. Responsive Frameworks
Responsive means:
fluid grid
flexible media
media queries
A responsive framework will therefore provide:
fluid grid
flexible media
media queries at common breakpoints
111. Less
More
Static wireframes. This is something I feel we need to get away
from. There’s nothing from stopping talented UX designers from
designing these flexible systems in the browser itself.
Establishing the grid system on paper to get the concept and
flow down is great, but I’m a strong proponent of moving into the
real environment as soon as humanly possible.
---Brad Frost
115. Validate the prototypes on the target devices with actual users
http://bradfrostweb.com/blog/mobile/support-vs-optimization/
http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
116. Responsive Visual Design
Look and Feel
Go simple with your mobile site. You don’t need a lot
of images, or CSS3 effects, they take time to load
Font
Use standard mobile font sizes for easy reading
Advanced CSS Styles
Let the site gracefully degrade in older browsers
Responsive Images Next page...
117. Responsive Images
Goal
Have a clear image on any device, but not
download multiple images.
There are dozens of approaches for this,
Javascript, Server Side, combined approaches,
Image resizing services. None are perfect yet, but
they are evolving rapidly.
http://blog.cloudfour.com/responsive-imgs-part-2/
118. QA Testing Responsive Sites
Allocate more time and budget for QA and testing
responsive sites.
Emulators are helpful, but youʼll need to test on real
devices.
Md v e, J ly2 1
y eic s u 0 2
119. Mobile Optimized Deep Dive
Responsive vs Mobile Optimized Sites
Optimized Sites for Retail, Search, SaaS,
and Entertainment
Dos and Dontʼs for Mobile Sites
120. Responsive vs Optimized Sites
Web Sites Web Apps
Informational Search
Content Heavy SaaS
• Newspapers Productivity Tools
• Magazines Retail
• Blogs
• Portfolios
Responsive Optimized Site
122. Responsive vs Optimized Sites
Harvest Time Tracking & Invoicing SaaS
Is responsive design a good solution?
123. Responsive vs Optimized Sites
No, but a mobile optimized site could be.
BETA
http://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
125. Optimized Sites for SaaS
Basecamp File Sharing & Proj Mgmt
We could apply a responsive
layout pattern to Basecamp
Column Drop
126. Optimized Sites for SaaS
But Mobile First says to know your users
Basecamp userʼs needs fall into
these two categories:
1.Checkin/status
2.Edit/create
A milepmditeprovides a solution for
o oti iz s
b e
these needs.
127. Optimized Sites for Productivity
Googleʼs suite of productivity tools are
optimized for the mobile web
128. Optimized Sites for Search
Bing offers a mobile web experience that is
distinct from their classic web site.
The mobile site offers
results relative to my
location
131. Mobile Web Doʼs and Dontʼs
Doʼs
Make content most important
Focus on performance
Use Image Sprites http://www.w3schools.com/css/css_image_sprites.asp
Bundle & minify CSS and Javascipt files
Limit or remove dependencies on heavy JS
libraries
Use CSS3 for styling, rounded corners, text
shadows...
132. Mobile Web Doʼs and Dontʼs
Dontʼs
Port a web app 1-for-1
Add back buttons
Use large images and
size down
Go crazy special effects/
transitions
134. Mobile Optimized Site Redesign
More than 30 billion page views per month
Craigslist users post more than 50 million
new classified ads each month
More than 200 million user postings in
100 topical forums
137. Responsive Site Native App
Web And /Or Installed
Optimized Sites Hybrid App
138. Native App Deep Dive
Native App vs Mobile Site
Native App vs Hybrid
Application Design Patterns
Design Anti-Patterns
139. Native App vs Mobile Site
Native Apps Mobile Sites
Games Search
Tools requiring: SaaS
• Complex Calculations Productivity Tools
• Reporting/Charting Retail
• Native Functionality
• Offline Access
At this point in time, native apps can target the specific
limitations and abilities of each individual device much
better than a website can while running inside a browser.
http://www.useit.com/alertbox/mobile-sites-apps.html
147. When to go Native
Non Tech Considerations: Marketing
A presence in the mobile markets might make sense from a
marketing, competitive, or sales channel perspective.
148. When to go Native
Non Tech Considerations: Financial
Financial Times, Playboy and Walmart are using sites instead of
apps to avoid sharing revenues with app store owners.
149. Native App vs Hybrid
This isn’t black & white
With big players like LinkedIn and Facebook successfully
launching hybrids, it looked like a shift might be imminent.
But Facebook has recently
rebuilt the iOS app with
Objective C, primarily to
improve the performance.
http://bits.blogs.nytimes.com/2012/06/27/
facebook-plans-to-speedup-its-iphone-
app/?smid=tw-share
150. Hybrid Hopes
Another recent NYT article explains
Companies want the best of both worlds via hybrid apps, but so far the ideal
technology remains elusive.
“You are aiming for this mythical
single platform on which your
developers can write code in one
language and—as much as
possible— is usable across
multiple platforms.”
--Mike Summers, head of Viggle
http://www.xconomy.com/new-york/2012/07/06/hybrid-vs-native-viggle-new-york-times-talk-mobile-app-strategy/2/
151. Hybrids: Code Once & Reuse
Doesnʼt mean design once & reuse
The New York Times
should know better!
iPhone Android
162. App Patterns: Navigation
Springboard List Menu Tab Menu Gallery
http://www.slideshare.net/theresaneil/
navigation-patterns-for-mobile-apps
Dashboard Metaphor Mega Menu
210. Prototyping Mobile Apps
Mobile Prototyping is essential
The field is new, even experienced designers
donʼt have the background and heuristics to
lean on while making decisions.
Prototype Prototype Prototype Prototyp
211. Why Prototype?
Improve your design decision making
Communicate an idea
Gather user feedback
Explore the “unknowns”
Fine-tune an idea
http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
212. Two Types of Prototyping
Experiential
Broader mobile project PROVIDES CONTEXT
Target mobile hardware is unknown
Design space is relatively uncharted
Tactical
Focused mobile project VALIDATION
Target mobile hardware is decided
Design space is relatively known
http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364