Mobile Design. Strategic Solutions.
Upcoming SlideShare
Loading in...5
×
 

Mobile Design. Strategic Solutions.

on

  • 56,026 views

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.

Statistics

Views

Total Views
56,026
Views on SlideShare
25,659
Embed Views
30,367

Actions

Likes
174
Downloads
1,579
Comments
1

65 Embeds 30,367

http://mobiledesignpatterngallery.com 18563
http://theresaneil.wordpress.com 7450
http://developertodesigner.wordpress.com 2176
http://greatmobileux.com 770
http://stormnetentertainment.blogspot.com 519
http://www.extrasmall.it 199
http://dkv-unpas.blogspot.com 173
http://feeds.feedburner.com 121
http://flexeando.com 52
http://www.cs.ubbcluj.ro 50
https://twitter.com 28
https://theresaneil.wordpress.com 26
http://stormnetentertainment.blogspot.ru 24
http://www.linkedin.com 20
http://pinterest.com 16
http://servidor1.i2e.es 15
http://translate.googleusercontent.com 12
http://theresaneil.wordpress.com. 12
http://app.comodu.com 11
https://reader.aol.com 10
https://developertodesigner.wordpress.com 9
https://si0.twimg.com 8
http://abhinav12.bo.lt 6
http://stormnetentertainment.blogspot.co.uk 6
http://stormnetentertainment.blogspot.com.au 5
http://cloud.feedly.com 5
http://digg.com 5
https://www.linkedin.com 5
http://www.twylah.com 5
http://www.blogger.com 4
https://www.google.com 4
http://stormnetentertainment.blogspot.ca 4
http://newsblur.com 4
http://bo.lt 4
http://stormnetentertainment.blogspot.co.il 4
http://spotlightideas.co.uk 3
http://feedly.com 3
http://stormnetentertainment.blogspot.dk 2
http://abtasty.com 2
http://wb-prototype.local 2
http://reader.aol.com 2
http://stormnetentertainment.blogspot.fr 2
http://www.pinterest.com 2
http://stormnetentertainment.blogspot.co.nz 2
http://www.iphone-entreprise.com 2
http://ranksit.com 1
http://www.365dailyjournal.com 1
http://www.etceter.com 1
http://stormnetentertainment.blogspot.se 1
http://tribeca.websitewelcome.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Enterprise mobility is what Internet was a couple of decades back for enterprises. It's about making sure that all the investments that an enterprise has made in IT over the years are accessible to employees wherever they are. And they are away from their desk most of the time in the modern work environment. Enterprise mobility needs to be looked as a base foundation of the enterprise's digital agenda. Both inwards looking, targeted at employees and external, targeted at enterprise's digital consumers. http://www.inkattech.com/portfolio/enterprise-mobility/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile Design. Strategic Solutions. 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 Apps Xamarian MWC 2012 App C#, MonoTouch, MonoDroid
  • Native Apps Angry Birds
  • Native Apps Skype
  • 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 AppsNetflixhttp://functionsource.com/post/netflix-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 FacebookBenefits 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 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/
  • 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 Frameworks
  • Responsive Frameworks
  • Responsive Frameworks
  • Responsive Frameworks
  • Responsive Frameworks
  • Responsive Frameworks
  • 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 OmniGrafflehttp://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 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
  • Prototyping Expert : Rachel Hinmanhttp://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