Mobile Design. Strategic Solutions.

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

Netﬂix in my house game room ofﬁce living room kitchen

Netﬂix in my house and outside game room ofﬁce living room kitchen

Netﬂixʼ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. 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 SiteDeﬁned Web site responds to the environment using css mediaqueries. Typically achieved by using ﬂuid 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 SitesDeﬁned 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 SitesDeﬁned 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 SitesDeﬁned 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 AppsDeﬁned 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 Apps Xamarian MWC 2012 App C#, MonoTouch, MonoDroid

Native Apps Angry Birds

Native Apps Skype

Native AppsIdeal ForRetailFinancialSoftware (productivity tools)GamesMany Enterprise AppsBeneﬁts over HybridBetter Performance Keynote (like PPT for Apple)

After lunch weʼll look at design patterns andanti-patterns for native applications

Hybrid AppsDeﬁned 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 AppsNetﬂixhttp://functionsource.com/post/netﬂix-feature

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

Hybrid AppsIdeal ForSoftware (productivity tools)Enterprise AppsVideo PlayersRetailDrawbacksPerformance FacebookBeneﬁts over NativePossibly lower costshttp://www.readwriteweb.com/mobile/2012/01/hybrid-html5-apps-are-more-les.php

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 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 Featured Items Column Flip

Responsive Design: More Layouts Last ﬁve patterns courtesy of Joshua Johnson http://designshack.net/articles/css/5- really-useful-responsive-web-design- patterns/ Feature Shufﬂe

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

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 ﬂyoutThe 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/

Responsive Navigation PatternPull Downhttp://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

Responsive FrameworksResponsive means:fluid gridflexible mediamedia queriesA responsive framework will therefore provide:fluid gridflexible mediamedia queries at common breakpoints

Responsive Frameworks

Responsive ToolkitsThese toolkits provide basic styles to use as yourfoundation (hence the term boilerplate)

Now can we start designing?http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/

Responsive Design: SketchingSketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

Responsive Design: WireframesStencil/ Template: Less Stencil for OmniGrafﬂehttp://graffletopia.com/stencils/745

Responsive Design: Wireframes Photoshop PSD http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

Responsive Design Exercise

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

Responsive Design: PrototypingFluid Gridshttp://fluidgrids.com/

Responsive Design: PrototypingGridpak 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 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 ﬁles 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 ﬁrst design** based on assumptions since we donʼt have real user data

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 • Ofﬂine 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

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 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: Sort

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: Metaphor Mismatch

Design Anti-Patterns: Metaphor MismatchNavigation disguised as ﬁlters

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: Oceans of Buttons

Prototyping Mobile Apps Mobile Prototyping is essential The ﬁeld 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

Prototyping Expert : Rachel Hinmanhttp://www.slideshare.net/Rachel_Hinman/mobile-prototyping-essentials-8957364

Prototyping exercise

Thank you Follow me on Twitter @theresaneilCheck out my site & bookMobile Design Pattern Gallery, OʼReilly 2012