DESIGNING FOR MULTIPLE DEVICESLondon August 6th 2012                          Anna Dahlström                              ...
I’m Anna                             IA & UX DESIGNER | SWEDISH BUT LONDON                             BASED | LOVES QUOTE...
I’VE BEEN WORKING     IN UX SINCE 2001    “ We’re not just making pretty    interfaces. We’re actually in the process of  ...
OBJECTIVE TODAY                                             1. UNDERSTANDING USAGE                                        ...
AGENDA  1. DEVICE USAGE & PATTERNS  2. IMPLICATIONS FOR UX & DESIGN THINKING  3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN...
1. FIRST UP...                                               DEVICE USAGE &                                               ...
DEVICE: a thing defined for a specific purpose or task & which can connect to the internethttp://desktopwallpaper-s.com/19-C...
THE FOUCS OF TODAY    SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROIDhttp://desktopwallpaper-s.com/19-Computers/-/Future/
By the end of 2012, the number of mobile-connected devices will exceed the numberof people on earth, and by 2016 there wil...
MOBILE DEVICES ARE                                           USED ANYWHERE                                           & EVE...
The average person looks at their phone150 times a day.* * Source: www.textually.org/textually/archives/2012/02/030229.htm...
40% of people use their phone in thebathroom* * Source: http://www.lukew.com/ff/entry.asp?1500www.flickr.com/photos/exlibri...
USAGE PATTERNS ACROSS DEVICES “...as devices become more mobile, it’s not only changing where we read, but when. ” - POCKE...
A MISCONCEPTION THAT MOBILE USERS ARE RUSHED & ON THE GO A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILLwww....
THE SAME TASKS ARE                                            CARRIED OUT ON                                            SM...
Three purchases are made through eBay’s mobile applications every second.* Source: www.juniperresearch.com/reports/mobile_...
2. THIS HAS...                                                   IMPLICATIONS                                             ...
LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKS E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENUwww.flickr.com/...
RESULTED IN MOBILE  SPECIFIC WEBSITES  LESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION                            DE...
PEOPLE ARE CLICKING THE  ‘FULL DESKTOP VERSION’ LINK  THERE IS A REASON FOR THATwww.flickr.com/photos/dm-set/3721351367
AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES THIS EXPECTATION WILL ONLY GROW STRONGERwww.flickr.com/photos/thriol/2217857...
CORE CONTENT SHOULD    REMAIN THE SAME BUT    THE EXPERIENCE SHOULD    BE OPTIMISED    BOTH IN DISPLAY OF CONTENT &    REG...
3. A CLOSER LOOK AT...                                                       BESPOKE                                      ...
PRIMARY REASONS                                         FOR A BESPOKE                                         MOBILE SITE ...
BUT IF WE CAN WE SHOULD AVOID IThttp://www.flickr.com/photos/edenandjosh/2892956576/
BUT WHY?                                             ” Todays popular devices are                                         ...
THE ALTERNATIVE                                                    IS MESSY & COSTLY                                      ...
MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINK...
WHETHER TO DO AN APP   OR NOT COMES DOWN TO...   • THE OBJECTIVE (USER & BUSINESS)   • IF THERE ARE SPECIFIC DEVICE CAPABI...
DIFFERENTTYPES OF APPSTHE MAIN TWO TYPESNATIVE APPS (e.g. Instagram)• MOST OPTIMISED USER EXPERIENCE• ACCESS TO DEVICE CAP...
” Money spent developing a pretty but limitediPhone app only benefits...the few, but moneyspent on the website UI would hav...
4. THERE IS SOMETHING                                                      CALLED...                                      ...
“ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. ...
MOBILE VS. DESKTOP FIRST • START LARGE OR SMALL    WHAT EVER WORKS BEST FOR YOU • ABOUT CONTENT, PRIORITISING &    CONSIDE...
DEFINE  YOUR GRID  & BREAK  POINTS  • USE AS THE BASIS OF      YOUR PAGE LAYOUTS  • CHECKPOINT FOR      MODULE SIZES &    ...
DEFINE YOUR CONTENTSTACKING STRATEGYACROSS DEVICES & ORIENTATION                                                          ...
THE WEB IS FULL OF EXAMPLES LOOK FOR INSPIRATION & BEST PRACTICE e.g. as shown on the right http://mediaqueri.es/popular/ ...
CONSIDER YOUR NAVIGATION DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONSwww.flickr.com/photos/tim_norris/2789759648
EXCELLENT READ‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patte...
www.flickr.com/photos/dopey/123646856
5. WHAT ABOUT...                                                                   DOING AN APP?http://www.flickr.com/photo...
APPS ARE                                          FOCUSED & PERSONAL                                          ” Small, dow...
EVERY PLATFORMIS ITS OWNLITTLEWORLDEACH PLATFORM HAVETHEIR OWN UIGUIDELINES THATUSERS ARE USED TOwww.flickr.com/photos/gadl...
RELATIVE NUMBER OF ACTIVE ANDROID DEVICES RUNNING A SPECIFIC VERSIONNOT ASEASY AS JUSTANDROIDOR iOS                 Source...
KEY DIFFERENCES BETWEENDESIGNING FOR ANDROID & iOSiOS                                               ANDROIDCONSISTENCY    ...
iPHONERESOURCESHELP & INSPIRATIONWELL DOCUMENTED
ANDROIDRESOURCESHELP & INSPIRATION A LITTLELESS WELL DOCUMENTED FOREARLIER VERSIONS
iPhone          12:15 PM                                  More BASIC iOS                                                  ...
ANDROIDNAVIGATIONDIFFERENT BETWEENVERSIONS. IN ICE CREAMSANDWICH:NAVIGATION BARFor devices that dont have thehardware keys...
HOW TO TAME THE BEAST?                                YOU LEARN BY DOINGwww.flickr.com/photos/jojoneil/6359536591
6. TIME TO                                                        PRACTICEhttp://www.flickr.com/photos/kalexanderson/630266...
BESPOKE MOBILE                                           SITE vs ADAPTIVE                                           vs AN ...
MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINK...
WHETHER TO DO AN APP   OR NOT COMES DOWN TO   • THE OBJECTIVE (USER & BUSINESS)   • IF THERE ARE SPECIFIC DEVICE CAPABILIT...
EXERCISE ONE BESPOKE                                         HOW WOULD MOST PEOPLE ACCESS IT? MOBILE SITE vs              ...
BUILDING A                                           RESPONSIVE SITE                                           TRANSPORT F...
DEFINE YOUR CONTENTSTACKING STRATEGYACROSS DEVICES & ORIENTATION                                                          ...
EXERCISE TWOBUILDING A                                                                                             MobileR...
BUILDING AN APP                                           BASED ON THE CONTENT FOR THE SITE & WHAT YOU                    ...
iPhone          12:15 PM                                  More  BASIC iOS                                                 ...
ANDROIDNAVIGATIONDIFFERENT BETWEENVERSIONS. IN ICE CREAMSANDWICH:NAVIGATION BARFor devices that dont have thehardware keys...
EXERCISE THREEBUILDING AN                                                             iPhone          12:15 PM            ...
7. TO                                                         SUMMARISEhttp://www.flickr.com/photos/martinteschner/45694959...
DEVICE USAGE &                                            PATTERNS                                            FUTURE DEVIC...
IMPLICATIONS                                            FOR UX &                                            DESIGN        ...
WHEN                                            DO WHAT                                            BESPOKE MOBILE WEBSITE ...
FOR                                            RESPONSIVE                                            DEFINE YOUR GRID &   ...
FOR APPS                                            REMEMBER PLATFORM SPECIFIC                                            ...
BEFORE I GO REMEMBER THAT...• DESIGNING FOR DIFFERENT DEVICES IS NOT  JUST ABOUT THE SMALLER SCREENS • IT’S ALSO ABOUT THE...
PLATFORM   GUIDELINES   http://developer.apple.com/library/ios/   #DOCUMENTATION/UserExperience/   Conceptual/MobileHIG/  ...
PATTERN   LIBRARIES   http://pttrns.com/   http://mobile-patterns.com/   http://www.patternsofdesign.co.uk/   http://   ww...
RESPONSIVEDESIGNhttp://mediaqueri.es/popular/http://www.alistapart.com/articles/responsive-web-design/http://designmodo.co...
Thank you!QUESTIONS?   annadahlstrom   annadahlstromwww.annadahlstrom.com
Upcoming SlideShare
Loading in …5
×

Designing for multiple devices, GA London - 6 Aug 2012

2,187 views

Published on

Slides from my class on August 6th 2012 at General Assembly London about designing for multiple devices.

ABSTRACT
The rise in mobiles and tablets have changed the way we consume and interact with content, but also the way we design and what we base our design approach on. This class will teach you about the shift in user expectations, behaviour- and consumption patterns and what that means for designing products that will be used on multiple devices. Coming out of it you'll be equipped with guiding principles and tools to tackle the multiple device jungle.

Published in: Design, Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,187
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
36
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Designing for multiple devices, GA London - 6 Aug 2012

  1. 1. DESIGNING FOR MULTIPLE DEVICESLondon August 6th 2012 Anna Dahlström co-founder byflock www.annadahlstrom.com annadahlstrom
  2. 2. I’m Anna IA & UX DESIGNER | SWEDISH BUT LONDON BASED | LOVES QUOTES & CHALLENGES | WORKS ON A STARTUP + FREELANCING This is me at my favourite place, Knäbäckshusen in Skåne, SwedenPhoto curtesy of my sister
  3. 3. I’VE BEEN WORKING IN UX SINCE 2001 “ We’re not just making pretty interfaces. We’re actually in the process of making an environment where we’ll spend most of our time, for the rest of our lives. We’re the designers.We’re the builders. What do we want that environment to feel like? What do we want to feel like. ” - Wilson Minorhttp://www.flickr.com/photos/funch/4679422945/
  4. 4. OBJECTIVE TODAY 1. UNDERSTANDING USAGE PATTERNS ACROSS DEVICES 2. WHEN TO DO A BESPOKE MOBILE SITE vs. RESPONSIVE SITE vs. AN APP 3. UNDERSTANDING DESIGN & UX PRINCIPLES FOR DIFFERENT PLATFORMSwww.flickr.com/photos/tim_norris/2789759648
  5. 5. AGENDA 1. DEVICE USAGE & PATTERNS 2. IMPLICATIONS FOR UX & DESIGN THINKING 3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP 4. DOING A RESPONSIVE SITE 5. DOING AN APP 6. PRACTICE 7. SUMMARY 8. Q & Awww.flickr.com/photos/horrigans/5649006182
  6. 6. 1. FIRST UP... DEVICE USAGE & PATTERNSwww.flickr.com/photos/publicenergy/1846375599
  7. 7. DEVICE: a thing defined for a specific purpose or task & which can connect to the internethttp://desktopwallpaper-s.com/19-Computers/-/Future/
  8. 8. THE FOUCS OF TODAY SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROIDhttp://desktopwallpaper-s.com/19-Computers/-/Future/
  9. 9. By the end of 2012, the number of mobile-connected devices will exceed the numberof people on earth, and by 2016 there willbe 1.4 mobile devices per capita.* * Source: www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.htmlwww.flickr.com/photos/nasamarshall/6289116940
  10. 10. MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE ” The best computer is the one you have with you when you want something done. “ - JACOB NIELSENwww.flickr.com/photos/yahnyahn/2996454839
  11. 11. The average person looks at their phone150 times a day.* * Source: www.textually.org/textually/archives/2012/02/030229.htmwww.flickr.com/photos/jorgeq82/4732700819
  12. 12. 40% of people use their phone in thebathroom* * Source: http://www.lukew.com/ff/entry.asp?1500www.flickr.com/photos/exlibris/2552107635
  13. 13. USAGE PATTERNS ACROSS DEVICES “...as devices become more mobile, it’s not only changing where we read, but when. ” - POCKET (formerly Read it Later)Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  14. 14. A MISCONCEPTION THAT MOBILE USERS ARE RUSHED & ON THE GO A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILLwww.flickr.com/photos/yahnyahn/2996453841/in/photostream
  15. 15. THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS AS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE & TASK EXECUTION IS INCREASINGwww.flickr.com/photos/edduddiee/4307943164
  16. 16. Three purchases are made through eBay’s mobile applications every second.* Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goodswww.flickr.com/photos/stuckincustoms/440157748
  17. 17. 2. THIS HAS... IMPLICATIONS FOR UX & DESIGNhttp://www.flickr.com/photos/eyesore9/3206408088/
  18. 18. LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKS E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENUwww.flickr.com/photos/frantaylor/4296536332
  19. 19. RESULTED IN MOBILE SPECIFIC WEBSITES LESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITEhttp://desktopwallpaper-s.com/19-Computers/-/Future/
  20. 20. PEOPLE ARE CLICKING THE ‘FULL DESKTOP VERSION’ LINK THERE IS A REASON FOR THATwww.flickr.com/photos/dm-set/3721351367
  21. 21. AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES THIS EXPECTATION WILL ONLY GROW STRONGERwww.flickr.com/photos/thriol/221785705/sizes/z/in/photostream
  22. 22. CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISED BOTH IN DISPLAY OF CONTENT & REGARDING USING DEVICE CAPABILITIESwww.flickr.com/photos/jmtimages/2883279193
  23. 23. 3. A CLOSER LOOK AT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs. APPShttp://www.flickr.com/photos/young_einstein/74097753/
  24. 24. PRIMARY REASONS FOR A BESPOKE MOBILE SITE • REQUIRED FOR THE AUDIENCE • TECHNICAL LIMITATIONS TO CMSwww.flickr.com/photos/st3f4n/3476036180
  25. 25. BUT IF WE CAN WE SHOULD AVOID IThttp://www.flickr.com/photos/edenandjosh/2892956576/
  26. 26. BUT WHY? ” Todays popular devices are not tomorrows so building something which works on any device is better than building something which works on todays devices “ - COMBINED WISE WORDS FROM @ONEXTRAPIXEL & @TRENTWALTONwww.flickr.com/photos/lastquest/1472794031
  27. 27. THE ALTERNATIVE IS MESSY & COSTLY MAINTAINING DIFFERENT VERSIONS USERS HAVING PROBLEMS FINDING WHAT THEY ARE AFTER (E.G. IN SEARCH)www.flickr.com/photos/ericconstantineau/5618576278
  28. 28. MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER....www.flickr.com/photos/andwhynot/2946734025
  29. 29. WHETHER TO DO AN APP OR NOT COMES DOWN TO... • THE OBJECTIVE (USER & BUSINESS) • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGETwww.flickr.com/photos/31878512@N06/4704140020
  30. 30. DIFFERENTTYPES OF APPSTHE MAIN TWO TYPESNATIVE APPS (e.g. Instagram)• MOST OPTIMISED USER EXPERIENCE• ACCESS TO DEVICE CAPABILITIES & APIs• BUT REQUIRES PLATFORM SPECIFIC CODE BASEHYBRID (e.g. Facebook)• USE OF HTML5 & JAVASRIPT• WRAPPER TO PROVIDE NATIVE CAPABILITIES• FEWER “VERSIONS” TO MAINTAIN• BUT CAN BE TIME CONSUMING TO CREATE APP LIKE INTERACTIONS• CANT JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES
  31. 31. ” 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 Magaizinewww.flickr.com/photos/cristiano_betta/2909483129
  32. 32. 4. THERE IS SOMETHING CALLED... RESPONSIVE DESIGNhttp://www.flickr.com/photos/paperpariah/4301471586/
  33. 33. “ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. ” - SMASHING MAGAZINEwww.flickr.com/photos/adactio/5818096043
  34. 34. MOBILE VS. DESKTOP FIRST • START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU • ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICESwww.flickr.com/photos/kasaa/3015846221/in/photostream
  35. 35. DEFINE YOUR GRID & BREAK POINTS • USE AS THE BASIS OF YOUR PAGE LAYOUTS • CHECKPOINT FOR MODULE SIZES & VARIANTS • FIXED OR FLUID COLUMNS • DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICEShttp://foundation.zurb.com/docs/layout.php
  36. 36. DEFINE YOUR CONTENTSTACKING STRATEGYACROSS DEVICES & ORIENTATION Mobile 1 2 Header“ Content needs to be Logo 3 Navchoreographed to Desktop & Tablet 4 Bath section intro 5 Adensure the intended 1 Logo 2 Headermessage is preserved 4 Bath section intro 5 Ad 6on any device and at Types of baths 3 Navany width ” 6 Types of baths 7 Related 7 products Related products- TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
  37. 37. THE WEB IS FULL OF EXAMPLES LOOK FOR INSPIRATION & BEST PRACTICE e.g. as shown on the right http://mediaqueri.es/popular/ BUT DON’T BE AFRAID TO CHALLENGE OR COME UP WITH SOMETHING... BETTER.http://mediaqueri.es/popular/
  38. 38. CONSIDER YOUR NAVIGATION DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONSwww.flickr.com/photos/tim_norris/2789759648
  39. 39. EXCELLENT READ‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  40. 40. www.flickr.com/photos/dopey/123646856
  41. 41. 5. WHAT ABOUT... DOING AN APP?http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
  42. 42. APPS ARE FOCUSED & PERSONAL ” Small, downloadable chunks of software, they give people access to information in a neatly packaged format “ - Apps on tap, The Economist Oct 8th 2011www.flickr.com/photos/elwillo/5247084642
  43. 43. EVERY PLATFORMIS ITS OWNLITTLEWORLDEACH PLATFORM HAVETHEIR OWN UIGUIDELINES THATUSERS ARE USED TOwww.flickr.com/photos/gadl/3570118243
  44. 44. RELATIVE NUMBER OF ACTIVE ANDROID DEVICES RUNNING A SPECIFIC VERSIONNOT ASEASY AS JUSTANDROIDOR iOS Source: http://developer.android.com/resources/dashboard/platform-versions.htmlFRAGMENTATION ACROSS EXAMPLE OF ADOPTION OF NEW iOS VERSIONDIFFERENT VERSIONS &BACKWARDSCOMPATIBILITY SHOULDBE CONSIDERED Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1
  45. 45. KEY DIFFERENCES BETWEENDESIGNING FOR ANDROID & iOSiOS ANDROIDCONSISTENCY Design FRAGMENTATIONCONSISTENCY BETWEEN UI elements & DIFFERENT FOR DIFFERENT VERSIONS &VERSIONS & HANDSETS principles HANDSETSQUICK ADOPTION OF NEW Version adoption SLOWER IMPLEMENTATION & UPTAKEVERSIONS OF NEWER VERSIONSBACK BUTTON Back navigation HANDLED WITH EITHER SYSTEM BACK BUTTON (EARLIER VERSIONS) OR BACK & UP BUTTONS (LATEST VERSION)SETTINGS BUTTON OR MORE TO OPTIONS MENU USED TO HOUSE APPACCESS APP WIDE SETTINGS & Settings etc. WIDE SETTINGS & INFORMATIONINFORMATION
  46. 46. iPHONERESOURCESHELP & INSPIRATIONWELL DOCUMENTED
  47. 47. ANDROIDRESOURCESHELP & INSPIRATION A LITTLELESS WELL DOCUMENTED FOREARLIER VERSIONS
  48. 48. iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.Source: http://developer.android.com/design/patterns/new-4-0.html
  49. 49. ANDROIDNAVIGATIONDIFFERENT 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)UP VS. 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.Source: http://developer.android.com/design/patterns/new-4-0.html
  50. 50. HOW TO TAME THE BEAST? YOU LEARN BY DOINGwww.flickr.com/photos/jojoneil/6359536591
  51. 51. 6. TIME TO PRACTICEhttp://www.flickr.com/photos/kalexanderson/6302660289/
  52. 52. BESPOKE MOBILE SITE vs ADAPTIVE vs AN APP CONSIDER THE FOLLOWING SITUATION OR USE A PROJECT OF YOUR OWN: In preparation for the London 2012 Olympics, Transport for EXERCISE ONE London are considering creating a bespoke section of their site focused on travelling to and from venues. What do you recommend in terms of their presence, particularly mobile & why? 10 MINUTESwww.flickr.com/photos/jojoneil/6359536591
  53. 53. MOBILE PRESENCE vs. APP? USE ANALYTICS FOR GUIDANCE MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER....www.flickr.com/photos/andwhynot/2946734025
  54. 54. WHETHER TO DO AN APP OR NOT COMES DOWN TO • THE OBJECTIVE (USER & BUSINESS) • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGETwww.flickr.com/photos/31878512@N06/4704140020
  55. 55. EXERCISE ONE BESPOKE HOW WOULD MOST PEOPLE ACCESS IT? MOBILE SITE vs •MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP ADAPTIVE •MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT vs AN APP CONSIDER... CONSIDER THE FOLLOWING SITUATION OR USE A PROJECT OF YOUR OWN: • THE OBJECTIVE (USER & BUSINESS) In preparation for the London 2012 Olympics, • IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU Transport for London are considering creating WANT TO UTILISE a bespoke section of their site focused on travelling to and from venues. • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET What do you recommend in terms of their presence, particularly mobile & why? 10 MINUTESwww.flickr.com/photos/jojoneil/6359536591
  56. 56. BUILDING A RESPONSIVE SITE TRANSPORT FOR LONDON WANTS TO INCLUDE THE FOLLOWING ON THEIR SITE: • Latest travel updates • London 2012 focused travel maps • Basic travel search • Need to know venue information • Station updates • Link to partner sites • Tips on quickest routes (London 2012, BBC) EXERCISE TWO PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. Where you see appropriate include a reference to where imagery should be used. PART 2 Using content stacking methodology define how the content should be prioritised on desktop and mobile (portrait). 15 MINUTESwww.flickr.com/photos/jojoneil/6359536591
  57. 57. DEFINE YOUR CONTENTSTACKING STRATEGYACROSS DEVICES & ORIENTATION Mobile 1 2 Header“ Content needs to be Logo 3 Navchoreographed to Desktop & Tablet 4 Bath section intro 5 Adensure the intended 1 Logo 2 Headermessage is preserved 4 Bath section intro 5 Ad 6on any device and at Types of baths 3 Navany width ” 6 Types of baths 7 Related 7 products Related products- TRENT WALTON 8 Store locator 9 Tools 8 Store 9 Tools locator 10 10 Footer Footer
  58. 58. EXERCISE TWOBUILDING A MobileRESPONSIVE 1 2 Header Logo 3 NavSITE Desktop & Tablet 4 Bath section intro 5 AdTRANSPORT FOR LONDON WANTS TO INCLUDE 1 2THE FOLLOWING ON THEIR SITE: Logo Header• Latest travel updates • London 2012 focused travel maps 4 5 6• Basic travel search • Need to know venue information Bath section intro Ad Types of baths• Station updates • Link to partner sites 3• Tips on quickest routes (London 2012, BBC) NavPART 1 7 6 RelatedPick either mobile or desktop & do a rough sketch of 8 Store Types of baths products 7 Related productswhat the home page should contain & how the content locatorshould be prioritised. Where you see appropriate includea reference to where imagery should be used. 9 Tools 8 Store locator 9 ToolsPART 2 10 10 Footer FooterUsing content stacking methodology define how thecontent should be prioritised on desktop and mobile(portrait).15 MINUTESwww.flickr.com/photos/jojoneil/6359536591
  59. 59. BUILDING AN APP BASED ON THE CONTENT FOR THE SITE & WHAT YOU KNOW ABOUT TRAVELLING AROUND LONDON, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP. • Latest travel updates • London 2012 focused travel maps • Basic travel search • Need to know venue information • Station updates • Link to partner sites • Tips on quickest routes (London 2012, BBC) PART 1EXERCISE THREE Define the main sections your app would have. PART 2 Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’. 15 MINUTESwww.flickr.com/photos/jojoneil/6359536591
  60. 60. iPhone 12:15 PM More BASIC iOS Customise APP NAME IMG Item NAVIGATION IMG Item IMG Item IMG Item CONSISTENT ACROSS IMG Item VERSIONS Content area IMG Item IMG Item NAVIGATION BAR IMG Item Enables navigation through the app IMG hierarchy. Holds the back button, Home Item Item Item More controls for managing screen content & the title of the screen. Home Item Item Item More BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.Source: http://developer.android.com/design/patterns/new-4-0.html
  61. 61. ANDROIDNAVIGATIONDIFFERENT 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)UP VS. 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.Source: http://developer.android.com/design/patterns/new-4-0.html
  62. 62. EXERCISE THREEBUILDING AN iPhone 12:15 PM More Customise APP NAME IMG ItemAPP IMG Item IMG Item IMG Item ItemBASED ON THE CONTENT FOR THE SITE & WHAT IMG Content areaYOU KNOW ABOUT TRAVELLING AROUND IMG ItemLONDON, CONSIDER WHAT WOULD BE SUITABLE IMG ItemFOR AN APP. IMG Item• Latest travel updates • London 2012 focused travel maps IMG• Basic travel search • Need to know venue information Home Item Item Item More• Station updates • Link to partner sites• Tips on quickest routes (London 2012, BBC) Home Item Item Item MorePART 1Define the main sections your app would have.PART 2Looking at the navigation how would you structure this ifyou were to do an iOS app & an Android app? Focus onthe Tab bar items respectively Action bar items & whatwould go in the ‘More’ respectively ‘Overflow menu’.15 MINUTESwww.flickr.com/photos/jojoneil/6359536591
  63. 63. 7. TO SUMMARISEhttp://www.flickr.com/photos/martinteschner/4569495912/
  64. 64. DEVICE USAGE & PATTERNS FUTURE DEVICES The number of different devices will only grow & we don’t know what’s coming. USED EVERYWHERE & ANYWHERE And we’re not only using them on the go but increasingly when we have some downtime including the sofa. OUR USE OF MOBILE DEVICES Our use of mobile devices iswww.flickr.com/photos/thecaucas/2597813380 increasingly replicating that of desktop.
  65. 65. IMPLICATIONS FOR UX & DESIGN THINKING AN EQUAL & CONTINUOUS EXPERIENCE ACROSS DEVICES As they & the services we use become more sophisticated & optimised we expect more from them. KEEP THE CORE BUT OPTIMISE Consider the limitations but also the opportunities with mobile devices.www.flickr.com/photos/thecaucas/2597813380
  66. 66. WHEN DO WHAT BESPOKE MOBILE WEBSITE Try to avoid it but do it if necessary RESPONSIVE & ADAPTIVE DESIGN The most device & future adaptive approach right now. Use if possible. But challenge content delivery. APP Use if you require offline reading/ functionality & access to device capabilities. Base which type on objectives & stats.www.flickr.com/photos/thecaucas/2597813380
  67. 67. FOR RESPONSIVE DEFINE YOUR GRID & BREAKPOINTS This is the backbone of responsive design & content choreography. DON’T FORGET THE NAVIGATION Consider the pros & cons of different methods. TEST & COLLABORATE This is new grounds & we’re all learning so work together & test aswww.flickr.com/photos/thecaucas/2597813380 you go.
  68. 68. FOR APPS REMEMBER PLATFORM SPECIFIC GUIDELINES Adhering to them will make your app easier to use. CONSIDER BACKWARDS COMPATIBILITY Not everyone will be on the latest version. Ensure you cater for the majority. CONSULT THE INTERNET There are a number of great resources for knowledge & inspiration. Use them.www.flickr.com/photos/thecaucas/2597813380
  69. 69. BEFORE I GO REMEMBER THAT...• DESIGNING FOR DIFFERENT DEVICES IS NOT JUST ABOUT THE SMALLER SCREENS • IT’S ALSO ABOUT THE LARGER ONES • & IT’S ABOUT THINKING AHEAD • & ABOUT BEING CLEVER IN WHAT WE DOwww.flickr.com/photos/publicenergy/1846375599
  70. 70. PLATFORM GUIDELINES http://developer.apple.com/library/ios/ #DOCUMENTATION/UserExperience/ Conceptual/MobileHIG/ UIElementGuidelines/ UIElementGuidelines.html http://mrgan.tumblr.com/post/ 10492926111/labeling-the-back-button http://developer.android.com/design/ index.htmlwww.flickr.com/photos/st3f4n/4387291247
  71. 71. PATTERN LIBRARIES http://pttrns.com/ http://mobile-patterns.com/ http://www.patternsofdesign.co.uk/ http:// www.mobiledesignpatterngallery.com/ mobile-patterns.php http://www.androidpatterns.com/ http://androidpttrns.com/www.flickr.com/photos/st3f4n/4387291247
  72. 72. RESPONSIVEDESIGNhttp://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 www.flickr.com/photos/st3f4n/4387291247
  73. 73. Thank you!QUESTIONS? annadahlstrom annadahlstromwww.annadahlstrom.com

×