User experience expert Theresa Neil will guide you through the current mobile strategies: Responsive web, Optimized sites, Native apps, and Hybrids.
...
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.
Mobile Design. Strategic Solutions.Presentation Transcript
Mobile DesignStrategic Solutions Theresa Neil6AM 9AM 12PM 6PM 9PM 12AM
I work as a consultant, helping companies with their UX Strategy.Theresa Neil
UX strategy is about designing for.... CONVERGENCE CONTEXT PEOPLE’S NEEDS MULTISCREEN ECOSYSTEMS CONTINUITY DISTRIBUTED EXPERIENCES
My recent travel experience to Europe
Lufthansaʼs User ExperienceClassic Web Site Mobile Optimized Site In Flight EntertainmentNative Tablet App Kiosk Native Mobile Apps
Netflix in my house game room office living room kitchen
Netflix in my house and outside game room office living room kitchen
Netflixʼs User ExperienceClassic Web Site Hybrid Tablet Apps Hybrid Mobile AppsTV (Boxee) Game Console (XBox) Game Device (Playstation)
UX strategy is about aligning the purpose of aproduct with the userʼs requirements at any giventime or in any given situation.http://uxmag.com/articles/designing-for-context-the-multiscreen-ecosystemhttp://www.slideshare.net/Rachel_Hinman/the-mobile-frontier-11393284
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 pointPain point Pain point Pain point Pain point Pain point Pain point http://www.shmula.com/customer-journey-map-continuous-improvement/10494/
Starbuckʼs found that technology canaddress some of these pain points, Locating Ordering/Waiting Paying
And recently added even moreimprovements... Reload card
What does your customerʼs journey look like?
Pain point Pain point Pain point Pain point Pain point point Pain Pain pointWhere are your customerʼsWhat does their pain points?journey look like?
Responsive Site Native App What mobile solutions are available to help with these pain points? Web And /Or InstalledOptimized Sites Hybrid App
Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
Responsive Web SiteDefined Web site responds to the environment using css mediaqueries. Typically achieved by using fluid grid layouts, like ResponsiveGrid System, Bootstrap, from Twitter, or Foundation by Zurb.
Responsive Web Site UIWindow 768 x 1024 Cisco London 2012
Responsive Web SiteIdeal ForInformational Web SitesPortfoliosContent Consumption Sites • Newspapers • Magazines • Blogs Boston Globe
Weʼre going to deep dive into responsivedesign a bit later...
Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, and different usage needs. At Home On The Go While Shopping At Work On Public Transport 0 25 50 75 100
Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, 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
Optimized Web SitesDefined Multiple web sites, each optimized for a different formfactor, and different usage needs.
Optimized Web SitesSome companies have three distinct sites... Mobile Web Site Tablet Web SiteClassic Web Site
Optimized Web SitesMore often there are only two distinct sites.Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
Optimized Web SitesBut this may change in moving forward:In January, Adobe reported that tablet users spendmore than 50 percent more for each transaction atan online retailer site compared to smartphone usersand 20 percent more than traditional computer users.http://success.adobe.com/assets/en/downloads/whitepaper/13926_digital_marketing_insights.pdf
Optimized Web Siteshttp://monetate.com/2011/12/the-10-best-tablet-friendly-website-experiences-of-2011/
Optimized Web SitesThe mobile version is streamlined for core activities. jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
Optimized Web SitesIdeal ForRetailSearchSaaS productsOther web apps Basecamp
After we look as responsive design, weʼll diginto mobile optimized site design
Native AppsDefined An application that has been developed for use on aparticular platform or device.Typically native apps are coded with:Objective C for AppleJava for Android and BlackBerryC# or Visual Basic for Windows 7.5But there are also other options:Ruby MotionMonoTouch and MonoDroidAdobe AIR Adobe Flex 4.5 Showcase Apps
Native AppsIdeal ForRetailFinancialSoftware (productivity tools)GamesMany Enterprise AppsBenefits over HybridBetter Performance Keynote (like PPT for Apple)
After lunch weʼll look at design patterns andanti-patterns for native applications
Hybrid AppsDefined A ʻnative wrappedʼ web application. Products like Titanium andPhoneGap create a native wrapper that lets the Javascript (or Ruby orPython) access OS dependent operations.
Hybrid AppsDevelopment FrameworksMost support HTML5 and CSS3 so you can create custom UIs fordifferent platforms.But BewareSome frameworks offer a ʻdrag and dropʼ IDE that force all of your appsto look like identical, regardless of the target OS/device.
Hybrid Apps NBC-Built with TitaniumIPad & iPhone apps are nice, but notshoehorned onto an Android phone.*This is not a limitation of Titanium, just a poor designdecision by NBC.
Hybrid AppsDifferences Across DevicesGesturesInteraction ParadigmsNavigationFunctionalityhttp://www.lukew.com/ff/entry.asp?1370http://www.lukew.com/ff/entry.asp?1073
Hybrid AppsLinkedIn does a great job of designing and developing for multiplemobile platforms
Before weʼre done, weʼll weigh in on the nativevs hybrid debate
Responsive Site Native App Letʼs deep dive into each of these options Web And /Or InstalledOptimized Sites Hybrid App
Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
Responsive Deep DiveWhat is Responsive?Layout PatternsMobile First SegueNavigation PatternsSketching/ Wireframing/PrototypingVisual Design
Why Responsive?Future ProofWill work on devices that aren’t even created yetCost SavingsBy reducing duplication and simplifying maintenanceIt is not a fad, it is the new bestpractice for web sites
Why Responsive?Future ProofWill work on devices that aren’t even created yetCost SavingsBy reducing duplication and simplifying maintenanceIt is not a fad, it is the new bestpractice for web sites Notice I didʼt say “best practice for web apps”
People are frequently consuming web content froma device other than a laptop/desktop. A responsivedesign will work across devices, providing peoplewith the content they seek.http://www.abookapart.com/products/mobile-first/
Responsive Grid SystemsThe design adapts itself to the to the user’s behavior based onscreen 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/
Media QueriesWith responsive web design, you can set a baseline(mobile) experience first, then progressively enhanceor adapt your layout as device capabilities change.This is accomplished by setting resolution “break points”and applying a different set of layout rules and mediaassets to each. A break point can be thought of as aconditional statement that determines if a device meetsspecific criteria like a minimum width of 600 pixels. If thatcondition is true, then the browser applies a different setof layout rules.
Responsive Design: Layout Patterns Mostly Fluid Column Drop Layout ShifterTiny Tweaks Off Canvashttp://www.abookapart.com/products/mobile-first/
Layout Patterns: Mostly Fluid I dubbed this pattern "mostly fluid" because the core structure of the layout really doesnt change until the smallest screen width. Instead, the design mostly relies on fluid grids to adapt to a variety of screen sizes. -- Luke Whttps://sifterapp.com/
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
http://mediaqueri.es/awa/
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
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 Last five patterns courtesy of Joshua Johnson http://designshack.net/articles/css/5- really-useful-responsive-web-design- patterns/ Feature Shuffle
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
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) behaviorsLookup/Find (urgent info, local): I need an answer tosomething now—frequently related to my current location inthe world.Explore/Play (bored, local): I have some time to kill andjust want a few idle time distractions.Check In/Status (repeat/micro-tasking): Somethingimportant to me keeps changing or updating and I want tostay on top of it.Edit/Create (urgent change/micro-tasking): I need to getsome- thing done now that can’t wait.
Mobile First is... About reductionWhen I say “simple”, what I mean is: A product reduced toits purest form of purpose or value. --Francisco Inchaustehttp://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 PatternsTop Nav or “Do Nothing” ApproachOne of the easiest-to-implement solutions for navigation is to simplykeep it at the top. Because of its ease of implementation, it’s found onmany (maybe even most) responsive sites right now. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
DrawbacksWhere’s the content? Stacked tabs make the whole page about navigation.
Responsive Navigation PatternsThe footer anchorThis clever solution keeps the nav list at the footer of the site, while the header contains asimple anchor link pointing to the footer nav. This approach clears up a lot of room for thecore content while still providing quick access to the navigation. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
Responsive Navigation PatternsThe 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 Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
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 Clarkehttp://www.stuffandnonsense.co.uk/blog/about/the_select_menu_navigation_pattern
Responsive Navigation PatternsThe toggle The menu slides open right in the header. It’s a good-looking approach and is relatively easy to implement. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
How to implementhttp://filamentgroup.com/lab/responsive_design_approach_for_navigation/
Responsive Navigation PatternsThe left nav flyoutThe nav is accessed by a menu icon, which reveals a tray that slides in from theleft and moves the main content over to the right. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
DrawbacksSophisticated, lots of moving parts. Allow plenty of time for testingacross many devices.Possible SolutionsFoundations framework offers 4 options for off canvas navigationhttp://foundation.zurb.com/http://jasonweaver.name/lab/offcanvas/technical/
Responsive Navigation PatternsFooter onlyThe footer-only navigation is similar to the footer anchor approach, onlywithout the anchor in the header. It follows the content-first, nav-secondmodel, however it requires mobile users to scroll all the way to the bottom inorder to navigate the site. -- Brad Frosthttp://bradfrostweb.com/blog/web/responsive-nav-patterns/
Responsive Navigation Anti- PatternsHide ʻn CryRemoves a bunch of options. A big no,no. Don’t penalize people for visitingyour site on a mobile device.http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Less MoreStatic wireframes. This is something I feel we need to get awayfrom. There’s nothing from stopping talented UX designers fromdesigning these flexible systems in the browser itself.Establishing the grid system on paper to get the concept andflow down is great, but I’m a strong proponent of moving into thereal environment as soon as humanly possible. ---Brad Frost
Responsive Design: PrototypingResponsive Wireframes- just an examplehttp://www.thismanslife.co.uk/projects/lab/responsivewireframes
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 DesignLook and FeelGo simple with your mobile site. You don’t need a lotof images, or CSS3 effects, they take time to loadFontUse standard mobile font sizes for easy readingAdvanced CSS StylesLet the site gracefully degrade in older browsersResponsive Images Next page...
Responsive ImagesGoalHave a clear image on any device, but notdownload multiple images.There are dozens of approaches for this,Javascript, Server Side, combined approaches,Image resizing services. None are perfect yet, butthey are evolving rapidly.http://blog.cloudfour.com/responsive-imgs-part-2/
QA Testing Responsive SitesAllocate more time and budget for QA and testingresponsive sites.Emulators are helpful, but youʼll need to test on realdevices.Md v e, J ly2 1y eic s u 0 2
Mobile Optimized Deep DiveResponsive vs Mobile Optimized SitesOptimized Sites for Retail, Search, SaaS,and EntertainmentDos and Dontʼs for Mobile Sites
Responsive vs Optimized SitesWeb Sites Web AppsInformational SearchContent Heavy SaaS • Newspapers Productivity Tools • Magazines Retail • Blogs • PortfoliosResponsive Optimized Site
Responsive vs Optimized SitesHarvest Time Tracking & Invoicing SaaS
Responsive vs Optimized SitesHarvest Time Tracking & Invoicing SaaS Is responsive design a good solution?
Responsive vs Optimized SitesNo, but a mobile optimized site could be. BETAhttp://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
Responsive vs Optimized SitesAnd, it turns out it is a great solution!
Optimized Sites for SaaSBasecamp File Sharing & Proj Mgmt We could apply a responsive layout pattern to Basecamp Column Drop
Optimized Sites for SaaSBut 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.
Optimized Sites for ProductivityGoogleʼs suite of productivity tools areoptimized for the mobile web
Optimized Sites for SearchBing offers a mobile web experience that isdistinct from their classic web site. The mobile site offers results relative to my location
Optimized Sites for RetailGap
Optimized Sites for EntertainmentWalmartʼs Vudu Optimized for tablets
Mobile Web Doʼs and DontʼsDoʼsMake content most importantFocus 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...
Mobile Web Doʼs and DontʼsDontʼsPort a web app 1-for-1Add back buttonsUse large images andsize downGo crazy special effects/transitions
Mobile Optimized Site Redesign
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
Mobile Optimized Site Redesign
http://saforian.com/blog/2011/04/sketching/ Share your mobile first design** based on assumptions since we donʼt have real user data
Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
Native App Deep DiveNative App vs Mobile SiteNative App vs HybridApplication Design PatternsDesign Anti-Patterns
Native App vs Mobile Site Native Apps Mobile Sites Games Search Tools requiring: SaaS • Complex Calculations Productivity Tools • Reporting/Charting Retail • Native Functionality • Offline AccessAt this point in time, native apps can target the specificlimitations and abilities of each individual device muchbetter than a website can while running inside a browser.http://www.useit.com/alertbox/mobile-sites-apps.html
Evernoteʼs StrategyNative Apps
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
Evernoteʼs StrategyBecause they provide the best UX
When to go NativeNon Tech Considerations: MarketingA presence in the mobile markets might make sense from amarketing, competitive, or sales channel perspective.
When to go NativeNon Tech Considerations: FinancialFinancial Times, Playboy and Walmart are using sites instead ofapps to avoid sharing revenues with app store owners.
Native App vs HybridThis isn’t black & whiteWith big players like LinkedIn and Facebook successfullylaunching hybrids, it looked like a shift might be imminent.But Facebook has recentlyrebuilt the iOS app withObjective C, primarily toimprove the performance.http://bits.blogs.nytimes.com/2012/06/27/facebook-plans-to-speedup-its-iphone-app/?smid=tw-share
Hybrid HopesAnother recent NYT article explainsCompanies want the best of both worlds via hybrid apps, but so far the idealtechnology 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 Vigglehttp://www.xconomy.com/new-york/2012/07/06/hybrid-vs-native-viggle-new-york-times-talk-mobile-app-strategy/2/
Hybrids: Code Once & ReuseDoesnʼt mean design once & reuse The New York Times should know better!iPhone Android
Boston Globeʼs Multiscreen ExperienceResponsive Site Native Apps And ePaper apps
eBayʼs Cross Multiscreen ExperienceOptimized Sites Native Apps And
Recent ProjectLeukemia & Lymphoma SocietyThe user journey got us thinking about many possible options
Responsive Site Native App Web And /Or InstalledOptimized Sites Hybrid App
Responsive Fundraising SiteTeam in TrainingFundraising Page
Responsive Web Site
Responsive Donation Form
Hybrid Apps eCheckin App Participant Tools
Mobile App Design PatternsNavigationFormsTablesSearch, Sort & FilterToolsChartsInvitationsFeedback & AffordanceHelp
App Patterns: NavigationSpringboard List Menu Tab Menu GalleryDashboard Metaphor Mega Menu
App Patterns: NavigationSpringboard List Menu Tab Menu Gallery http://www.slideshare.net/theresaneil/ navigation-patterns-for-mobile-appsDashboard Metaphor Mega Menu
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 MismatchNavigation disguised as filters
Design Anti-Patterns: Metaphor MismatchFilter 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 Prototyp
Why Prototype?Improve your design decision makingCommunicate an ideaGather user feedbackExplore the “unknowns”Fine-tune an ideahttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
Two Types of PrototypingExperientialBroader mobile project PROVIDES CONTEXTTarget mobile hardware is unknownDesign space is relatively unchartedTacticalFocused mobile project VALIDATIONTarget mobile hardware is decidedDesign space is relatively knownhttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364
Piotr Michalski