mobile design. strategic solutions
Post on 08-Sep-2014
64 Views
Preview:
DESCRIPTION
TRANSCRIPT
Mobile DesignStrategic Solutions Theresa Neil
6AM 9AM 12PM 6PM 9PM 12AM
I work as a consultant, helping companies with their UX Strategy.
Theresa Neil
UX strategy is about designing for....
DISTRIBUTED EXPERIENCES
MULTISCREEN ECOSYSTEMS
CONTINUITY
PEOPLE’S NEEDS
CONTEXT
CONVERGENCE
My recent travel experience to Europe
Lufthansaʼs User Experience
Classic Web Site
Native Tablet App
Mobile Optimized Site
Kiosk
In Flight Entertainment
Native Mobile Apps
Netflix in my house
kitchenliving room
game room office
Netflix in my house
kitchenliving room
game room office
and outside
TV (Boxee) Game Console (XBox) Game Device (Playstation)
Classic Web Site Hybrid Tablet Apps Hybrid Mobile Apps
Netflixʼs User Experience
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
http://www.shmula.com/customer-journey-map-continuous-improvement/10494/
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/
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/
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 pointPain pointPain point
Pain point
Pain point
Pain point
Starbuckʼs found that technology can address some of these pain points,
Ordering/Waiting PayingLocating
And recently added even more improvements...
Reload card
What does your customerʼs journey look like?
What does your customerʼs journey look like?
Pain point
Pain pointPain pointPain point
Pain point
Pain point
Pain point
Where are their pain points?
Responsive Site Native App
Optimized Sites Hybrid App
Web InstalledAnd /Or
What mobile solutions are available to help
with these pain points?
Responsive Site Native App
Optimized Sites Hybrid App
Web InstalledAnd /Or
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.
Responsive Web Site
Responsive Web Site
UIWindow 768 x 1024
Cisco London 2012
Responsive Web Site
Ideal For Informational Web SitesPortfoliosContent Consumption Sites
• Newspapers• Magazines• Blogs
Boston Globe
Weʼre going to deep dive into responsive design a bit later...
Optimized Web Sites
Defined Multiple web sites, each optimized for a different form factor, and different usage needs.
0 25 50 75 100
At Home
On The Go
While Shopping
At Work
On Public Transport
Optimized Web Sites
Defined Multiple web sites, each optimized for a different form factor, and different usage needs.
0
20
40
60
80
At Home AM To/From School/Work At School/Work Out and About At Home PM
SmartphoneTabletLaptop
Optimized Web Sites
Defined Multiple web sites, each optimized for a different form factor, and different usage needs.
Optimized Web Sites
Classic Web Site Tablet Web Site
Mobile Web Site
Some companies have three distinct sites...
Optimized Web Sites
Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
More often there are only two distinct sites.
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
Optimized Web Sites
http://monetate.com/2011/12/the-10-best-tablet-friendly-website-experiences-of-2011/
Optimized Web Sites
jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
The mobile version is streamlined for core activities.
Ideal For RetailSearchSaaS productsOther web apps
Optimized Web Sites
Basecamp
After we look as responsive design, weʼll dig into mobile optimized site design
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 AppleJava for Android and BlackBerryC# or Visual Basic for Windows 7.5
But there are also other options:Ruby MotionMonoTouch and MonoDroidAdobe AIR
Adobe Flex 4.5 Showcase Apps
Native Apps
Xamarian MWC 2012 App C#, MonoTouch, MonoDroid
Native Apps
Angry Birds
Native Apps
Skype
Ideal For RetailFinancialSoftware (productivity tools)GamesMany Enterprise Apps
Benefits over HybridBetter Performance
Native Apps
Keynote (like PPT for Apple)
After lunch weʼll look at design patterns and anti-patterns for native applications
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.
Hybrid Apps
Development Frameworks Most support HTML5 and CSS3 so you can create custom UIs for different platforms.
But BewareSome frameworks offer a ʻdrag and dropʼ IDE that force all of your apps to look like identical, regardless of the target OS/device.
Hybrid Apps
Netflix
http://functionsource.com/post/netflix-feature
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.
Hybrid Apps
Differences Across Devices
Gestures
Interaction Paradigms
Navigation
Functionality
http://www.lukew.com/ff/entry.asp?1073http://www.lukew.com/ff/entry.asp?1370
Hybrid Apps
LinkedIn does a great job of designing and developing for multiple mobile platforms
Ideal For Software (productivity tools)Enterprise Apps Video PlayersRetail
DrawbacksPerformance
Benefits over NativePossibly lower costs
Hybrid Apps
http://www.readwriteweb.com/mobile/2012/01/hybrid-html5-apps-are-more-les.php
Before weʼre done, weʼll weigh in on the native vs hybrid debate
Responsive Site Native App
Optimized Sites Hybrid App
Web InstalledAnd /Or
Letʼs deep dive into each of these options
Responsive Site Native App
Optimized Sites Hybrid App
Web InstalledAnd /Or
Responsive Deep Dive
What is Responsive?
Layout Patterns
Mobile First Segue
Navigation Patterns
Sketching/ Wireframing/Prototyping
Visual Design
Why Responsive?
Future ProofWill work on devices that aren’t even created yet
Cost SavingsBy reducing duplication and simplifying maintenance
It is not a fad, it is the new best practice for web sites
Why Responsive?
Future ProofWill work on devices that aren’t even created yet
Cost SavingsBy 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”
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/
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 column10 column
But you can also find:24 column18 column8 column, etc..
Or make your own. http://www.alistapart.com/articles/fluidgrids/
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.
With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.
Media Queries
Responsive Design: Layout Patterns
Mostly Fluid Column Drop Layout Shifter
Tiny Tweaks Off Canvas
http://www.abookapart.com/products/mobile-first/
Layout Patterns: Mostly Fluid
https://sifterapp.com/
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
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
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
Layout Patterns: Tiny Tweaks
-- Luke W
Simple sites with a single column layout, multi-device adaptation can just be a few tiny tweaks to font sizes and image layout
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
Responsive Design: More Layouts
Mondrain Basic Gallery
Responsive Design: More Layouts
Mondrain Basic Gallery
Responsive Design: More Layouts
Featured Items Column Flip
Responsive Design: More Layouts
Featured Items Column Flip
Responsive Design: More Layouts
Feature Shuffle
http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
Last five patterns courtesy of Joshua Johnson
Responsive Design: More Layouts
Feature Shuffle
http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
Last five patterns courtesy of Joshua Johnson
Whatʼs the pattern?
Whatʼs the pattern?
Break
Mobile First is...
A different way of thinking
Mobile First is...
A different way of thinking
Agreement on what matters most
Mobile First is...
Knowing your users
Mobile First is...
Knowing your users
What they do and why they do it
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.
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/
Mobile First results in...
A user experience focused on key tasks
Mobile First results in...
A user experience focused on key tasks
For the BBC thatʼs top stories and most read
Mobile First thinking works for...
Responsive Site Native Apps
Optimized Sites Hybrid Apps
Mobile First thinking works for...
Responsive Site Native Apps
Optimized Sites Hybrid Apps
Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-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
DrawbacksWhere’s the content? Stacked tabs make the whole page about navigation.
Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-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
Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-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
DrawbacksSelect menus are for choosing your state or security question, not navigating a site.
http://www.stuffandnonsense.co.uk/blog/about/the_select_menu_navigation_pattern
In my mind there’s only one form element that should ever be used for navigation and that’s search. -- Andy Clarke
Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-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://filamentgroup.com/lab/responsive_design_approach_for_navigation/
How to implement
Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-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://jasonweaver.name/lab/offcanvas/technical/
DrawbacksSophisticated, lots of moving parts. Allow plenty of time for testing across many devices.
Possible SolutionsFoundations framework offers 4 options for off canvas navigation
http://foundation.zurb.com/
Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-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
Responsive Navigation Anti- Patterns
http://bradfrostweb.com/blog/web/responsive-nav-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.
Responsive Navigation Pattern
http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/
Pull Down
Responsive Frameworks
Responsive means:fluid gridflexible mediamedia queries
A responsive framework will therefore provide:fluid gridflexible mediamedia queries at common breakpoints
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Frameworks
Responsive Toolkits
These toolkits provide basic styles to use as your foundation (hence the term boilerplate)
Now can we start designing? http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/
Responsive Design: Sketching
Sketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Responsive Design: Wireframes
Stencil/ Template: Less Stencil for OmniGrafflehttp://graffletopia.com/stencils/745
Responsive Design: Wireframes
Photoshop PSDhttp://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/
Res
pons
ive
Des
ign
Exer
cise
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
Less
More
Responsive Design: Prototyping
Responsive Wireframes- just an example http://www.thismanslife.co.uk/projects/lab/responsivewireframes
Responsive Design: Prototyping
Fluid Gridshttp://fluidgrids.com/
Responsive Design: Prototyping
Gridpak Grid Generatorhttp://gridpak.com/
Validate the prototypes on the target devices with actual usershttp://bradfrostweb.com/blog/mobile/support-vs-optimization/http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
Responsive Visual Design
Look and FeelGo simple with your mobile site. You don’t need a lot of images, or CSS3 effects, they take time to load
FontUse standard mobile font sizes for easy reading
Advanced CSS StylesLet the site gracefully degrade in older browsers
Responsive Images Next page...
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/
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.
My devices, July 2012
Mobile Optimized Deep Dive
Responsive vs Mobile Optimized Sites
Dos and Dontʼs for Mobile Sites
Optimized Sites for Retail, Search, SaaS, and Entertainment
Responsive vs Optimized Sites
InformationalContent Heavy
• Newspapers• Magazines• Blogs• Portfolios
Web Sites Web Apps
SearchSaaSProductivity Tools Retail
Responsive Optimized Site
Responsive vs Optimized Sites
Harvest Time Tracking & Invoicing SaaS
Responsive vs Optimized Sites
Harvest Time Tracking & Invoicing SaaS
Is responsive design a good solution?
Responsive vs Optimized Sites
No, but a mobile optimized site could be.
http://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
BETA
Responsive vs Optimized Sites
And, it turns out it is a great solution!
Optimized Sites for SaaS
Basecamp File Sharing & Proj Mgmt
We could apply a responsive layout pattern to Basecamp
Column Drop
Optimized Sites for SaaS
But Mobile First says to know your users
Basecamp userʼs needs fall into these two categories:1.Checkin/status2.Edit/create
A mobile optimized site provides a solution for these needs.
Optimized Sites for Productivity
Googleʼs suite of productivity tools are optimized for the mobile web
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
Optimized Sites for Retail
Gap
Optimized Sites for Entertainment
Walmartʼs Vudu Optimized for tablets
Mobile Web Doʼs and Dontʼs
Doʼs
Use Image SpritesBundle & minify CSS and Javascipt filesLimit or remove dependencies on heavy JS librariesUse CSS3 for styling, rounded corners, text shadows...
Make content most importantFocus on performance
http://www.w3schools.com/css/css_image_sprites.asp
Mobile Web Doʼs and Dontʼs
Dontʼs
Add back buttons
Use large images and size down
Go crazy special effects/transitions
Port a web app 1-for-1
Mob
ile O
ptim
ized
Site
Red
esig
n
Mob
ile O
ptim
ized
Site
Red
esig
n
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
Mob
ile O
ptim
ized
Site
Red
esig
n
Share your mobile first design*
* based on assumptions since we donʼt have real user data
http://saforian.com/blog/2011/04/sketching/
Responsive Site Native App
Optimized Sites Hybrid App
Web InstalledAnd /Or
Native App Deep Dive
Native App vs Mobile Site
Native App vs Hybrid
Application Design Patterns
Design Anti-Patterns
Native App vs Mobile Site
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.
Mobile SitesSearchSaaSProductivity Tools Retail
Native AppsGamesTools requiring:• Complex Calculations• Reporting/Charting• Native Functionality• Offline Access
http://www.useit.com/alertbox/mobile-sites-apps.html
Evernoteʼs Strategy
Native Apps
Evernoteʼs Strategy
Because they provide the best UX
Evernoteʼs Strategy
Because they provide the best UX
Evernoteʼs Strategy
Because they provide the best UX
Evernoteʼs Strategy
Because they provide the best UX
Evernoteʼs Strategy
Because they provide the best UX
Evernoteʼs Strategy
Because they provide the best UX
When to go Native
Non Tech Considerations: MarketingA presence in the mobile markets might make sense from a marketing, competitive, or sales channel perspective.
When to go Native
Non Tech Considerations: FinancialFinancial Times, Playboy and Walmart are using sites instead of apps to avoid sharing revenues with app store owners.
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
Hybrid Hopes
Companies want the best of both worlds via hybrid apps, but so far the ideal technology remains elusive.
Another recent NYT article explains
--Mike Summers, head of Viggle
“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.”
http://www.xconomy.com/new-york/2012/07/06/hybrid-vs-native-viggle-new-york-times-talk-mobile-app-strategy/2/
Hybrids: Code Once & Reuse
Doesnʼt mean design once & reuse
iPhone Android
The New York Times should know better!
Boston Globeʼs Multiscreen Experience
Responsive Site Native Apps
And
ePaper apps
Optimized Sites
eBayʼs Cross Multiscreen Experience
Native Apps
And
Recent ProjectLeukemia & Lymphoma Society
The user journey got us thinking about many possible options
Responsive Site Native App
Optimized Sites Hybrid App
Web InstalledAnd /Or
Responsive Fundraising Site
Team in Training Fundraising Page
Responsive Web Site
Responsive Donation Form
Hybrid Apps
eCheckin App Participant Tools
Mobile App Design Patterns
NavigationFormsTablesSearch, Sort & FilterToolsChartsInvitationsFeedback & Affordance Help
App Patterns: Navigation
Springboard List Menu Tab Menu Gallery
Dashboard Metaphor Mega Menu
App Patterns: Navigation
Springboard List Menu Tab Menu Gallery
Dashboard Metaphor Mega Menu
http://www.slideshare.net/theresaneil/navigation-patterns-for-mobile-apps
App Patterns: Forms
App Patterns: Tables
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Search
App Patterns: Sort
App Patterns: Sort
App Patterns: Sort
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
App Patterns: Filter
Redesign Craigslist Search
App Patterns: Tools
App Patterns: Charts
App Patterns: Invitations
App Patterns: Feedback
App Patterns: Affordance
App Patterns: Help
Design Anti-Patterns: Novel Notions
Design Anti-Patterns: Novel Notions
Design Anti-Patterns: Novel Notions
Design Anti-Patterns: Metaphor Mismatch
Design Anti-Patterns: Metaphor Mismatch
Navigation disguised as filters
Design Anti-Patterns: Metaphor Mismatch
Filter controls done right
Design Anti-Patterns: Metaphor Mismatch
Design Anti-Patterns: Idiot Boxes
Design Anti-Patterns: Chart Junk
Design Anti-Patterns: Chart Junk
Design Anti-Patterns: Chart Junk
Design Anti-Patterns: Chart Junk
Design Anti-Patterns: Oceans of Buttons
Design Anti-Patterns: Oceans of Buttons
Design Anti-Patterns: Oceans of Buttons
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 Prototype
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
Two Types of Prototyping
ExperientialBroader mobile project Target mobile hardware is unknownDesign space is relatively uncharted
TacticalFocused mobile project Target mobile hardware is decidedDesign space is relatively known
PROVIDES CONTEXT
VALIDATION
http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
Prototyping Expert : Rachel Hinman
http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
Prototyping Expert : Rachel Hinman
http://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
Prototyping exercise
Check out my site & bookMobile Design Pattern Gallery, OʼReilly 2012
Thank you Follow me on Twitter @theresaneil
top related