Introductory workshop: Designing for Mobile Devices - GA London, 28 March 2013

2,145 views

Published on

Slides from my introductory workshop at General Assembly in London on the 28th of March about designing for mobile devices.

Published in: Design, Technology, Business

Introductory workshop: Designing for Mobile Devices - GA London, 28 March 2013

  1. 1. www.flickr.com/photos/nrkbeta/3906687294/in/photostreamAnna Dahlströmfounder byflockwww.annadahlstrom.comanna.dahlstrom@gmail.comannadahlstromGA Loves London: Mobile - 28 March 2013Introductory workshopDESIGNING FOR MOBILE DEVICES
  2. 2. I’m AnnaIA & UX DESIGNER | SWEDISH BUT LONDON BASEDFREELANCING + WORKING ON A STARTUPLOVES QUOTES & CHALLENGESThis is Öresundsbron, the bridge between Sweden & Denmarkwww.flickr.com/photos/dahlstroms/4411448782/
  3. 3. www.flickr.com/photos/jdhancock/4354438814AGENDA1. MOBILE USAGE & BEHAVIOUR PATTERNS2. IMPLICATIONS FOR UX & DESIGNTHINKING3. BESPOKE MOBILE SITE vs. RESPONSIVE vs.APP4. RESPONSIVE5. APPS6. PRACTICE7. SUMMARY8. Q & A
  4. 4. www.flickr.com/photos/publicenergy/18463755991. FIRST UP...MOBILE USAGE& PATTERNS
  5. 5. http://desktopwallpaper-s.com/19-Computers/-/Future/DEVICE: a thing defined for a specificpurpose or task & which can connectto the internet
  6. 6. http://desktopwallpaper-s.com/19-Computers/-/Future/THE FOCUS OFTODAYSMARTPHONES | DESKTOP (TABLETS) - iOS & ANDROID
  7. 7. www.flickr.com/photos/raincitystudios/95234968/The number of smartphones in use passedthe 1 billion mark in Q3 of 2012** Source: http://mobithinking.com/blog/one-billion-smartphones-users-in-the-world
  8. 8. www.flickr.com/photos/nasamarshall/6289116940In 2009 1% of global internet traffic camefrom mobiles. In 2010 4%. By the end of2012 it was 13%.** Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile
  9. 9. www.flickr.com/photos/jayfresh/3388253576/41% of emails are now opened onmobile devices ** Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices
  10. 10. www.flickr.com/photos/nadiya95/7217734288/62% of 12-15 year olds in the UK own asmartphone. UK average for adults is 45% ** Source: http://thenextweb.com/insider/2012/10/23/children-texting-and-spending-more-time-online-according-to-ofcom/
  11. 11. www.flickr.com/photos/jorgeq82/4732700819The average person looks at their phone150 times a day.** Source: www.textually.org/textually/archives/2012/02/030229.htm
  12. 12. www.flickr.com/photos/exlibris/255210763540% of people use their phone in thebathroom** Source: http://www.lukew.com/ff/entry.asp?1500
  13. 13. www.flickr.com/photos/yahnyahn/2996454839” The best computer isthe one you have withyou when you wantsomething done. “- JACOB NIELSENMOBILE DEVICES AREUSED ANYWHERE& EVERYWHERE
  14. 14. USAGE PATTERNSACROSS DEVICESwww.flickr.com/photos/brandoncwarren/4236278556“...as devices becomemore mobile, it’s notonly changing wherewe read, but when. ”- POCKET (formerly Read it Later)
  15. 15. www.flickr.com/photos/brandoncwarren/4236278556POCKET’S STATS- DESKTOPSource: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  16. 16. www.flickr.com/photos/brandoncwarren/4236278556POCKET’S STATS- iPHONESource: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  17. 17. www.flickr.com/photos/brandoncwarren/4236278556POCKET’S STATS- iPADSource: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  18. 18. PEAKTIMESSource: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read•When we get up•On our way to/ just arrived at work•Commuting home•Post dinner
  19. 19. www.flickr.com/photos/chicitoloco/8468592748/in/photostream/“MOBILE USERS ARERUSHED & ONTHE GO”THIS IS A MYTH
  20. 20. www.flickr.com/photos/anniemole/2424372024A LARGE PROPORTION OFUSAGE HAPPENS WHEN WEHAVETIMETO KILLCOMMUTING,WAITING BUT ALSO AT HOME
  21. 21. www.flickr.com/photos/edduddiee/4307943164THE SAMETASKS ARECARRIED OUT ONSMARTPHONES ASON DESKTOPSAS DEVICES & EXPERIENCE BECOME MOREOPTIMISED USAGE &TASK EXECUTION ISINCREASING
  22. 22. www.flickr.com/photos/stuckincustoms/440157748Three purchases are made througheBay’s mobile applications every second.*Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods
  23. 23. 2.THIS HAS...IMPLICATIONSFOR UX & DESIGNhttp://www.flickr.com/photos/eyesore9/3206408088/
  24. 24. www.flickr.com/photos/frantaylor/4296536332LIMITED DEVICE CAPABILITIESUSEDTO MEAN LIMITEDTASKSE.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU
  25. 25. http://desktopwallpaper-s.com/19-Computers/-/Future/RESULTED IN MOBILESPECIFIC WEBSITESLESS CONTENT & LINKS BACKTOTHE FULL DESKTOPVERSIONDESKTOPFULL WEBSITEBESPOKECUTDOWNWEBSITEBESPOKECUTDOWNWEBSITE
  26. 26. www.flickr.com/photos/demandaj/7287174776PEOPLE ARE CLICKINGTHE‘FULL DESKTOPVERSION’ LINKTHERE IS A REASON FORTHAT
  27. 27. www.flickr.com/photos/joachim_s_mueller/7110473339AN EQUAL &CONTINUOSEXPERIENCEACROSS DEVICESTHIS EXPECTATION WILLONLY GROW STRONGER
  28. 28. http://www.flickr.com/photos/young_einstein/74097753/3.A CLOSER LOOK AT...BESPOKEMOBILE SITES vs.RESPONSIVE SITESvs.APPS
  29. 29. www.flickr.com/photos/st3f4n/3476036180PRIMARY REASONSFOR A BESPOKEMOBILE SITE• REQUIRED FORTHE AUDIENCE•TECHNICAL LIMITATIONSTO CMS
  30. 30. http://www.flickr.com/photos/edenandjosh/2892956576/BEST AVOIDEDIF WE CANIT CAN CAUSE ALL SORTS OFPROBLEMS
  31. 31. www.flickr.com/photos/lastquest/1472794031BUT WHY?” Todays popular devices arenot tomorrows so buildingsomething which works on anydevice is better than buildingsomething which works ontodays devices “- COMBINED WISE WORDS FROM @ONEXTRAPIXEL &@TRENTWALTON
  32. 32. “ 1,057 different mobile devices accessedThe Guardian beta site yesterday (includingone person on a zune!)” ** Source: The Guardian
  33. 33. www.flickr.com/photos/ericconstantineau/5618576278THE ALTERNATIVEIS MESSY & COSTLYMAINTAINING DIFFERENTVERSIONSUSERS HAVING PROBLEMS FINDINGWHATTHEY ARE AFTER(E.G. IN SEARCH)
  34. 34. www.flickr.com/photos/jmtimages/2883279193CORE CONTENT SHOULDREMAINTHE SAME BUTTHEEXPERIENCE SHOULD BEOPTIMISEDBOTH IN DISPLAY OF CONTENT &REGARDING USING DEVICE CAPABILITIES
  35. 35. www.flickr.com/photos/andwhynot/2946734025MOSTLY DIRECT TRAFFICPOSSIBLE ARGUMENT FOR APPMOSTLYVIA SHARED LINKSMOBILE WEB PRESENCE NEEDED.AN APP ALONE WON’T CUT ITA BIT OF BOTHTHEN CONSIDER....MOBILE PRESENCE vs.APP?USE ANALYTICS FOR GUIDANCE
  36. 36. www.flickr.com/photos/31878512@N06/4704140020WHETHERTO DO AN APPOR NOT COMES DOWNTO...•THE OBJECTIVE (USER & BUSINESS)• IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE• IF OFFLINE READING/USAGE IS REQUIRED• & OF COURSE BUDGET
  37. 37. DIFFERENTTYPES OF APPSTHE MAINTWOTYPESNATIVE APPS (e.g. Instagram)• MOST OPTIMISED USER EXPERIENCE• ACCESSTO DEVICE CAPABILITIES & APIs• BUT REQUIRES PLATFORM SPECIFIC CODE BASEHYBRID (e.g. First Facebook)• USE OF HTML5 & JAVASRIPT•WRAPPERTO PROVIDE NATIVE CAPABILITIES• FEWER “VERSIONS” TO MAINTAIN• BUT CAN BETIME CONSUMINGTO CREATE APP LIKE INTERACTIONS• CANT JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES
  38. 38. www.flickr.com/photos/cristiano_betta/2909483129” Money spent developing a pretty but limitediPhone app only benefits...the few, but moneyspent on the website UI would have benefittedeveryone “- Gary Marshall on ‘The app trap’ in .net Magaizine
  39. 39. www.flickr.com/photos/taytom/52776574294.THERE IS SOMETHINGCALLED...RESPONSIVEDESIGN
  40. 40. www.flickr.com/photos/adactio/5818096043“ Design & development should respond tothe user’s behaviour & environment based onscreen size, platform & orientation.[It’s]...a mix of flexible grids & layouts, images& an intelligent use of media queries. ”- SMASHING MAGAZINE
  41. 41. http://foundation.zurb.com/docs/layout.phpDEFINEYOUR GRID& BREAKPOINTS• USE ASTHE BASIS OFYOUR PAGE LAYOUTS• CHECKPOINT FORMODULE SIZES &VARIANTS• FIXED OR FLUIDCOLUMNS• DEFINES HOWCONTENT WILLBEHAVE ACROSSDEVICES
  42. 42. “ Content needs to be choreographed toensure the intended message is preservedon any device and at any width ”-TRENT WALTONwww.flickr.com/photos/theaftershock/2811382400/
  43. 43. DEFINEYOURCONTENTSTACKINGSTRATEGYACROSS DEVICES &ORIENTATION3Nav7Related products2 Header4Bathsectionintro6Types of baths9 Tools10Footer8 Storelocator1Logo5Ad3Nav7Relatedproducts2Header4Bath section intro6Types of baths9 Tools10Footer8 Storelocator1Logo5AdDesktop &TabletMobile
  44. 44. MOBILEVS. DESKTOP FIRST•START LARGE OR SMALLWHAT EVER WORKS BEST FORYOU•ABOUT CONTENT, PRIORITISING &CONSIDERING HOW IT WILL WORKACROSS DEVICESMOBILEVS. DESKTOP FIRST•START LARGE OR SMALLWHAT EVER WORKS BEST FORYOU•ABOUT CONTENT, PRIORITISING &CONSIDERING HOW IT WILL WORKACROSS DEVICES
  45. 45. www.flickr.com/photos/stephangeyer/CONSIDERTHEMOBILE CONTEXTTHE USE CASE MAY BETHE SAME BUTUSING A MOBILEDEVICE IS DIFFERENT
  46. 46. LIKE PLAYING REAL LIFETETRISPRE-DEFINED POCKETS FORTHE CONTENTTO SLOT INTOwww.flickr.com/photos/fritzon/195008860
  47. 47. www.flickr.com/photos/adactio/615348166680% of traffic in your analytics will oftencome from 20% of devices…seems a shamenot to ensure that the site looks and worksespecially well on these devices.** Source: www.slideshare.net/yiibu/pragmatic-responsive-design
  48. 48. THE WEB ISFULL OFEXAMPLESLOOK FOR INSPIRATION &BEST PRACTICEBUT DON’T BE AFRAIDTOCHALLENGE OR COME UPWITH SOMETHING... BETTER.http://mediaqueri.es/popular/
  49. 49. www.flickr.com/photos/tim_norris/2789759648CONSIDERYOUR NAVIGATIONDIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS
  50. 50. EXCELLENT READ‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  51. 51. www.flickr.com/photos/melodramababs/2766765248/“ Mobile navigation should be like a goodfriend: there when you need them but coolenough to give you your space.” ** Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  52. 52. www.flickr.com/photos/dopey/123646856
  53. 53. http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/5.WHAT ABOUT...DOING AN APP?
  54. 54. www.flickr.com/photos/elwillo/5247084642” Small, downloadable chunksof software, they give peopleaccess to information in aneatly packaged format “- Apps on tap,The Economist Oct 8th 2011APPS AREFOCUSED & PERSONAL
  55. 55. www.flickr.com/photos/gadl/3570118243EVERY PLATFORMIS ITS OWNLITTLEWORLDWITHTHEIR OWN UIGUIDELINESTHATUSERS ARE USEDTO
  56. 56. www.flickr.com/photos/nrkbeta/3906687294/in/photostreamNOT ASEASY AS JUSTANDROIDOR iOSFRAGMENTATION ACROSSDIFFERENTVERSIONS &BACKWARDSCOMPATIBILITY SHOULDBE CONSIDERED
  57. 57. RELATIVE NUMBER OFACTIVE ANDROID DEVICESSource: http://developer.android.com/about/dashboards/index.htmlwww.flickr.com/photos/blakespot/4773693893
  58. 58. EXAMPLE OF ADOPTIONOF NEW iOSVERSIONSource: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1www.flickr.com/photos/blakespot/4773693893
  59. 59. KEY DIFFERENCES BETWEENDESIGNING FOR ANDROID & iOSiOSCONSISTENCYCONSISTENCY BETWEENVERSIONS & HANDSETSQUICK ADOPTION OF NEWVERSIONSBACK BUTTONSETTINGS BUTTON OR MORETOACCESS APP WIDE SETTINGS &INFORMATIONANDROIDFRAGMENTATIONDIFFERENT FOR DIFFERENTVERSIONS &HANDSETSSLOWER IMPLEMENTATION & UPTAKEOF NEWERVERSIONSHANDLED WITH EITHER SYSTEM BACKBUTTON (EARLIERVERSIONS) OR BACK& UP BUTTONS (LATESTVERSION)OPTIONS MENU USEDTO HOUSE APPWIDE SETTINGS & INFORMATIONDesignUI elements &principlesVersion adoptionBack navigationSettings etc.www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  60. 60. iPHONERESOURCESHELP & INSPIRATIONWELL DOCUMENTED
  61. 61. ANDROIDRESOURCESHELP & INSPIRATION A LITTLELESS WELL DOCUMENTED FOREARLIERVERSIONS
  62. 62. Source: http://developer.android.com/design/patterns/new-4-0.htmlBASIC iOSNAVIGATIONCONSISTENT ACROSSVERSIONSNAVIGATION BAREnables navigation through the apphierarchy. Holds the back button,controls for managing screen content &the title of the screen.BACK BUTTONShould always take the user one step backfrom where they came from & be descriptive.TAB BARCan often be customised. Holds the mainsections of the app.‘MORE’ TAB BAR ITEMUsed to hold & provide access to all othersections of the app that don’t fit in the tab bar.Content areaMoreItemItemHome ItemiPhone 12:15 PMAPP NAMEMore CustomiseIMGIMGIMGIMGIMGIMGIMGIMGIMGItemItemItemItemItemItemItemItemMoreItemItemHome Item
  63. 63. Source: http://developer.android.com/design/patterns/new-4-0.htmlANDROIDNAVIGATIONDIFFERENT BETWEENVERSIONS. IN ICE CREAMSANDWICH:NAVIGATION BARFor devices that dont have thehardware keys. Holds Back, Homeand RecentsACTION BARHolds the most important action buttons foryour app (3 + overflow menu)UPVS. BACK BUTTONThe Up button is used to navigate up one levelbased on the hierarchical structure of the site.Back is used to navigate back one step fromwhere you came from & as such works inreverse chronological order.
  64. 64. START BYSKETCHINGYOUR SCREEN FLOWS,NAVIGATION & CONTENTwww.flickr.com/photos/saucef/7184615025
  65. 65. www.flickr.com/photos/jojoneil/6359536591HOWTOTAMETHE BEAST?YOU LEARN BY DOING
  66. 66. 6.TIMETOPRACTICEhttp://www.flickr.com/photos/kalexanderson/6302660289/
  67. 67. www.flickr.com/photos/jojoneil/6359536591BESPOKE MOBILESITE vs RESPONSIVEvs AN APPCONSIDERTHE FOLLOWING:A big retail store has asked you to come upwith a Summer campaign across Londonwhere offers and give aways are hidden atcertain locations.There will only be acertain number of items available each day &they want to be able to notify people whenan item has been found.What do you recommend in terms of theirpresence, particularly mobile & why?5 MINUTESEXERCISE ONE
  68. 68. www.flickr.com/photos/andwhynot/2946734025MOSTLY DIRECT TRAFFICPOSSIBLE ARGUMENT FOR APPMOSTLYVIA SHARED LINKSMOBILE WEB PRESENCE NEEDED.AN APP ALONE WON’T CUT ITA BIT OF BOTHTHEN CONSIDER....MOBILE PRESENCE vs.APP?USE ANALYTICS FOR GUIDANCE
  69. 69. www.flickr.com/photos/31878512@N06/4704140020WHETHERTO DO AN APPOR NOT COMES DOWNTO•THE OBJECTIVE (USER & BUSINESS)• IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE• IF OFFLINE READING/USAGE IS REQUIRED• & OF COURSE BUDGET
  70. 70. www.flickr.com/photos/jojoneil/6359536591EXERCISE ONEBESPOKE MOBILESITE vs RESPONSIVEvs AN APPCONSIDERTHE FOLLOWING:A big retail store has asked you to comeup with a Summer campaign acrossLondon where offers and give aways arehidden at certain locations.There willonly be a certain number of itemsavailable each day & they want to be ableto notify people when an item has beenfound.What do you recommend in terms oftheir presence, particularly mobile & why?5 MINUTESHOW WOULD MOST PEOPLEACCESS IT?•MOSTLY DIRECT TRAFFICPOSSIBLE ARGUMENT FOR APP•MOSTLYVIA SHARED LINKSMOBILE WEB PRESENCE NEEDED.AN APP ALONE WON’T CUT ITALSO CONSIDER...•THE OBJECTIVE (USER & BUSINESS)•IFTHERE ARE SPECIFIC DEVICECAPABILITIESYOU WANTTO UTILISE•IF OFFLINE READING/USAGE ISREQUIRED• & OF COURSE BUDGET
  71. 71. www.flickr.com/photos/jojoneil/6359536591BUILDING ARESPONSIVE SITETHEY WANT TO INCLUDE THE FOLLOWING:•About page• List of offers• Product pages• NotificationsPART 1Pick either mobile or desktop & do a rough sketchof what the home page should contain & how thecontent should be prioritised.PART 2Using content stacking methodology define how thecontent should be prioritised on desktop & mobile.10 MINUTESEXERCISETWO• Share (on FB & Twitter)• Login & registration• Overview of number offound & not found items
  72. 72. DEFINEYOUR CONTENTSTACKING STRATEGYACROSS DEVICES & ORIENTATION3Nav7Related products2 Header4Bathsectionintro6Types of baths9 Tools10Footer8 Storelocator1Logo5Ad3Nav7Relatedproducts2Header4Bath section intro6Types of baths9 Tools10Footer8 Storelocator1Logo5AdDesktop &TabletMobile“ Content needs to bechoreographed toensure the intendedmessage is preservedon any device and atany width ”-TRENT WALTON
  73. 73. www.flickr.com/photos/jojoneil/6359536591EXERCISETWOBUILDING ARESPONSIVE SITETHEY WANT TO INCLUDE THE FOLLOWING:•About page• List of offers• Product pages• NotificationsPART 1Pick either mobile or desktop & do a rough sketchof what the home page should contain & how thecontent should be prioritised.PART 2Using content stacking methodology define how thecontent should be prioritised on desktop & mobile.10 MINUTES3Nav7Related products2 Header4Bathsectionintro6Types of baths9 Tools10Footer8 Storelocator1Logo5Ad3Nav7Relatedproducts2Header4Bath section intro6Types of baths9 Tools10Footer8 Storelocator1Logo5AdDesktop &TabletMobile• Share (on FB & Twitter)• Login & registration• Overview of number offound & not found items
  74. 74. www.flickr.com/photos/jojoneil/6359536591BUILDING AN APPBASED ON THE CONTENT & FUNCTIONALITYREQUIREMENTS, CONSIDER WHAT WOULD BESUITABLE FOR AN APP:•About page• List of offers• Product pages• NotificationsPART 1Define the main sections your app would have.PART 2Looking at the navigation how would you structurethis if you were to do an iOS app & an Android app?Focus on the Tab bar items respectively Action baritems & what would go in the ‘More’ respectively‘Overflow menu’.10 MINUTESEXERCISETHREE• Share (on FB & Twitter)• Login & registration• Overview of number offound & not found item
  75. 75. Source: http://developer.android.com/design/patterns/new-4-0.htmlBASIC iOSNAVIGATIONCONSISTENT ACROSSVERSIONSNAVIGATION BAREnables navigation through the apphierarchy. Holds the back button,controls for managing screen content &the title of the screen.BACK BUTTONShould always take the user one step backfrom where they came from & be descriptive.TAB BARCan often be customised. Holds the mainsections of the app.‘MORE’ TAB BAR ITEMUsed to hold & provide access to all othersections of the app that don’t fit in the tab bar.Content areaMoreItemItemHome ItemiPhone 12:15 PMAPP NAMEMore CustomiseIMGIMGIMGIMGIMGIMGIMGIMGIMGItemItemItemItemItemItemItemItemMoreItemItemHome Item
  76. 76. Source: http://developer.android.com/design/patterns/new-4-0.htmlANDROIDNAVIGATIONDIFFERENT BETWEENVERSIONS. IN ICE CREAMSANDWICH:NAVIGATION BARFor devices that dont have thehardware keys. Holds Back, Homeand RecentsACTION BARHolds the most important action buttons foryour app (3 + overflow menu)UPVS. BACK BUTTONThe Up button is used to navigate up one levelbased on the hierarchical structure of the site.Back is used to navigate back one step fromwhere you came from & as such works inreverse chronological order.
  77. 77. www.flickr.com/photos/jojoneil/6359536591EXERCISETHREEBUILDING AN APPBASED ON THE CONTENT &FUNCTIONALITY REQUIREMENTS,CONSIDER WHAT WOULD BE SUITABLEFOR AN APP:•About page• List of offers• Product pages• NotificationsPART 1Define the main sections your app would have.PART 2Looking at the navigation how would youstructure this if you were to do an iOS app &an Android app? Focus on the Tab bar itemsrespectively Action bar items & what would goin the ‘More’ respectively ‘Overflow menu’.10 MINUTES• Share (on FB & Twitter)• Login & registration• Overview of number offound & not found itemContent areaMoreItemItemHome ItemiPhone 12:15 PMAPP NAMEMore CustomiseIMGIMGIMGIMGIMGIMGIMGIMGIMGItemItemItemItemItemItemItemItemMoreItemItemHome Item
  78. 78. http://www.flickr.com/photos/martinteschner/4569495912/7.TOSUMMARISE
  79. 79. www.flickr.com/photos/thecaucas/2597813380DEVICE USAGE &PATTERNSFUTURE DEVICESThe number of different devices willonly grow & we don’t know what’scoming.USED EVERYWHERE &ANYWHEREAnd we’re not only using them on thego but increasingly when we havesome downtime including the sofa.USE OF MOBILE DEVICESOur use of mobile devices isincreasingly replicating that of desktop.
  80. 80. www.flickr.com/photos/thecaucas/2597813380IMPLICATIONSFOR UX &DESIGNTHINKINGAN EQUAL & CONTINUOUSEXPERIENCE ACROSS DEVICESAs they & the services we usebecome more sophisticated &optimised we expect more from them.KEEP THE CORE BUT OPTIMISEConsider the limitations but also theopportunities with mobile devices.
  81. 81. www.flickr.com/photos/thecaucas/2597813380WHENDO WHATBESPOKE MOBILE WEBSITETry to avoid it but do it if necessaryRESPONSIVE DESIGNThe most device & future “proof”approach right now. Use if possible.But challenge content delivery.APPBase on user & business needs. Strongargument if you require offlinereading/functionality & access todevice capabilities. Base which typeon objectives & stats.
  82. 82. www.flickr.com/photos/thecaucas/2597813380FORRESPONSIVEDEFINEYOUR GRID &BREAKPOINTSThis is the backbone of responsivedesign & content choreography.DON’T FORGET THENAVIGATIONConsider the pros & cons ofdifferent methods.TEST & COLLABORATEThis is new grounds & we’re alllearning so work together & test asyou go.
  83. 83. www.flickr.com/photos/thecaucas/2597813380FOR APPSREMEMBER PLATFORM SPECIFICGUIDELINESAdhering to them will make yourapp easier to use.CONSIDER BACKWARDSCOMPATIBILITYNot everyone will be on the latestversion. Ensure you cater for themajority.CONSULT THE INTERNETThere are a number of greatresources for knowledge &inspiration. Use them.
  84. 84. 8. BEFORE I GO...REMEMBERTHATwww.flickr.com/photos/46355638@N00/4414640784
  85. 85. www.flickr.com/photos/jolives/2889944573/IT’S ABOUTTHINKING AHEADPLAN 5YEARS AHEAD WITH“FUTURE PROOFING” IN MIND
  86. 86. http://www.flickr.com/photos/gi/5537770007/IT DOESN’THAVETO BREAKTHE BANKBESIDES CONSIDER LOSTCUSTOMERS & MAINTAININGMULTIPLEVERSIONS
  87. 87. www.flickr.com/photos/oter/5090592214BE CREATIVE & CHALLENGEWHAT EXISTSTODAYTHAT’S WHAT MOVES US FORWARD
  88. 88. www.flickr.com/photos/stevendepolo/3378152784CLOSER & MOREREWARDINGCOLLABORATIONBETWEEN DISCIPLINES & WITH CLIENTS
  89. 89. - Wilson Minor“ We’re not just making prettyinterfaces.We’re actually in the process ofmaking an environment where we’ll spendmost of our time, for the rest of our lives.We’re the designers.We’re the builders.What do we want that environment to feellike? What do we want to feel like.http://www.flickr.com/photos/funch/4679422945/”BUT ABOVE ALL...
  90. 90. www.flickr.com/photos/st3f4n/43872912479. FORTHE ROADSOMETAKEAWAYS
  91. 91. www.flickr.com/photos/st3f4n/4387291247PLATFORMGUIDELINEShttp://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.htmlhttp://mrgan.tumblr.com/post/10492926111/labeling-the-back-buttonhttp://developer.android.com/design/index.html
  92. 92. www.flickr.com/photos/st3f4n/4387291247PATTERNLIBRARIEShttp://pttrns.com/http://mobile-patterns.com/http://www.patternsofdesign.co.uk/http://www.mobiledesignpatterngallery.com/mobile-patterns.phphttp://www.androidpatterns.com/http://androidpttrns.com/
  93. 93. www.flickr.com/photos/st3f4n/4387291247RESPONSIVEDESIGNhttp://mediaqueri.es/popular/http://www.alistapart.com/articles/responsive-web-design/http://designmodo.com/responsive-design-examples/http://jamus.co.uk/demos/rwd-demonstrations/http://bradfrostweb.com/blog/web/responsive-nav-patterns/http://www.gridsetapp.com/http://grid.mindplay.dkhttp://goldengridsystem.com/http://foundation.zurb.com/docs/layout.php
  94. 94. www.flickr.com/photos/dahlstroms/4411448782/Thank you!QUESTIONS?annadahlstromannadahlstromanna.dahlstrom@gmail.comwww.annadahlstrom.com

×