Anna Dahlström                                          founder byflock                                www.annadahlstrom.co...
I’m Anna                                  IA & UX DESIGNER | SWEDISH BUT LONDON BASED                                     ...
AGENDA    1. RECAP ON GUIDING PRINCIPLES    2. COMMON CHALLENGES    3. CROSS DEVICE CONTENT STRATEGY & HIERARCHY    4. RES...
1. RECAP ON...                                               GUIDING                                               PRINCIP...
MOBILE DEVICES ARE USED      1 ANYWHERE & EVERYWHEREwww.flickr.com/photos/exlibris/2552107635   www.flickr.com/photos/yahnya...
A LARGE PROPORTION OF      2 USAGE HAPPENS WHEN WE        HAVE TIME TO KILLhttp://www.flickr.com/photos/hanhutton/320464105...
THE SAME TASKS ARE CARRIED      3 OUT ON SMARTPHONES AS ON        DESKTOPSwww.flickr.com/photos/frantaylor/4296536332   www...
USERS INCREASINGLY EXPECT AN      4 EQUAL & CONTINUOS        EXPERIENCE ACROSS DEVICESwww.flickr.com/photos/demandaj/728717...
CORE CONTENT SHOULD REMAIN      5 THE SAME BUT THE EXPERIENCE        SHOULD BE OPTIMISEDwww.flickr.com/photos/ericconstanti...
BUT WHY?                                             ” Todays popular devices are                                         ...
“ 1,057 different mobile devices accessedThe Guardian beta site yesterday (includingone person on a zune!)” ** Source: The...
In 2009 1% of global internet traffic camefrom mobiles. In 2010 the number was 4%.By the end of 2012 it had risen to13%.* *...
41% of emails are now opened onmobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-...
2. THE MOST                                                   COMMON                                                   CHA...
WHERE TO START?                                              DEFINE YOUR MOBILE STRATEGY,                                 ...
HOW MANY                                            VERSIONS SHOULD                                           WE WIREFRAME...
WHAT ABOUT                                           VISUAL DESIGN?                                             LESS STATI...
WHAT SCREEN SIZES &  RESOLUTIONS SHOULD I  DESIGN FOR?  USE ANALYTICS FOR GUIDANCE &  DESIGN FOR THE MOST  COMMON ONESSour...
80% of traffic in your analytics will oftencome from 20% of devices…seems a shamenot to ensure that the site looks and work...
HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS  ...
HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS  ...
HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS  ...
HOW MANY DEVICES  SHOULD I TEST ON?  AS MANY AS POSSIBLE BUT PRIORITISE  BASED ON YOUR AUDIENCEwww.flickr.com/photos/nomadi...
HOW DOI HANDLEIMAGES?IMAGES & ICONSSHOULD BE AS FLEXIBLEAS POSSIBLEwww.flickr.com/photos/jorgeq82/4732700819
3. CROSS DEVICE                                                       CONTENT                                             ...
“ Content needs to be choreographed to               ensure the intended message is preserved                       on any...
KNOW YOUR CONTENT  PRIORITISE WHAT & HOW  MUCH BUT KEEP THE CORE  CONTENT THE SAMEwww.flickr.com/photos/sepblog/3649959481
CONSIDER THE                                     MOBILE CONTEXT                                          THE USE CASE MAY ...
DEFINE  YOUR GRID  & BREAK  POINTS  • USE AS THE BASIS OF      YOUR PAGE LAYOUTS  • CHECKPOINT FOR      MODULE SIZES &    ...
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/WORK THROUGHYOUR CONTENTSTACKING STRATEGYACROSS DEVICES ...
MOBILE VS. DESKTOP FIRST• START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU• ABOUT CONTENT, PRIORITISING & CONSIDERING HOW...
DON’T JUST WORK  WITH COLUMNS  THINK OF THE NARRATIVE  OF THE PAGEwww.flickr.com/photos/garrettc/6260768486/
IDENTIFY YOUR  MAIN MODULE TYPES  DEFINE HOW THEY SHOULD BEHAVE  ACROSS DEVICES & ORIENTATIONSwww.flickr.com/photos/boltofb...
“ With thousands and thousands of pageson the Crayola site, it wasn’t efficient towireframe every single page and state. We...
LIKE PLAYING REAL LIFE TETRISPRE-DEFINED POCKETS FOR THE CONTENT TO SLOT INTOwww.flickr.com/photos/fritzon/195008860
4. A LOOK AT                                         RESPONSIVE                                         NAVIGATIONwww.flick...
EXCELLENT READ‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patte...
“ Mobile navigation should be like a goodfriend: there when you need them but coolenough to give you your space.” * * Sour...
CONSIDER YOUR PROJECT  ASSESSING THE DEPTH NEEDED AS WELL AS & PROS  & CONS OF DIFFERENT NAVIGATION APPROACHESwww.flickr.co...
DEFINE YOUR DIFFERENTTYPES OF NAVIGATIONPRIMARY, SECONDARY, TERTIARY AS WELL ASFOOTER & CROSSLINKING                  http...
BE CONSISTENT  USE THE SAME APPROACH THROUGHOUT  & HAVE CLEAR, SAYING VISUAL CUESScreenshot: http://cognition.happycog.com/
BE CONSISTENT  USE THE SAME APPROACH THROUGHOUT  & HAVE CLEAR, SAYING VISUAL CUESScreenshot: http://cognition.happycog.com/
CONSIDER NAVIGATION  ACROSS PRODUCTS  WHERE APPS & MOBILE OPTIMISED WEBSITES  ARE SIMILAR KEEP IT CONSISTENTScreenshot: ww...
CONSIDER NAVIGATION  ACROSS PRODUCTS  WHERE APPS & MOBILE OPTIMISED WEBSITES  ARE SIMILAR KEEP IT CONSISTENTScreenshot: ww...
CONSIDER NAVIGATION  ACROSS PRODUCTS  WHERE APPS & MOBILE OPTIMISED WEBSITES  ARE SIMILAR KEEP IT CONSISTENTScreenshot: ww...
5. A LOOK AT...                                               APP STRUCTURES                                              ...
EVERY PLATFORMIS ITS OWNLITTLEWORLDWITH THEIR OWN UIGUIDELINES THATUSERS ARE USED TOwww.flickr.com/photos/gadl/3570118243
iPhone          12:15 PM                                  More BASIC iOS                                                  ...
ANDROIDNAVIGATIONDIFFERENT BETWEENVERSIONS. IN ICE CREAMSANDWICH:NAVIGATION BARFor devices that dont have thehardware keys...
IDENTIFY YOUR  MAIN SECTIONS  EACH SHOULD HAVE A  CLEAR FOCUS & PURPOSEwww.flickr.com/photos/inpivic/5205918163/
SKETCHYOUR SCREEN FLOWS,NAVIGATION & CONTENTwww.flickr.com/photos/saucef/7184615025
AVOID USING THE HOMESCREEN AS A STEPPING POINTCONSIDER THE USE CASE & ENSURE YOU DELIVER VALUEFROM THE FIRST VIEWwww.flickr...
RESEARCH COMMONAPPROACHESFOR INSPIRATION &BEST PRACTICE                    www.uxarchive.com/
RESEARCH COMMONAPPROACHESFOR INSPIRATION &BEST PRACTICE                    www.uxarchive.com/tasks/sign_up/
LOOK ATWHATOTHERS DOBE CREATIVE              http://pttrns.com/
6. HOW TO...                                                                   TEST APPS &                                ...
TESTING                                                     APPS                                                     STRUC...
TESTING RESPONSIVE SITES DO THIS AS EARLY AS POSSIBLEwww.flickr.com/photos/adactio/5818096043
IN THE BROWSERBY RESIZING THE BROWSER WINDOW &CHECKING THE DISPLAY OF CONTENT                                   http://the...
IN THE BROWSER BY DESIGNING IN THE BROWSER & CREATING A WORKING HTML PROTOTYPEwww.flickr.com/photos/jorgeq82/4732700819
USING HANDY TOOLSHELP YOU STYLE & TEST YOUR TYPOGRAPHY                    http://responsive.is/typecast.com
USING EMULATORSALLOW YOU TO VIEW YOUR SITEACROSS DEVICES & ORIENTATIONS http://screenqueri.es/                            ...
ON ACTUAL DEVICES  EXPENSIVE BUT THERE ARE WAYS AROUND ITwww.flickr.com/photos/arne/5835855777/in/photostream/
BUYING                                                            BUNDLES                                                 ...
WITH USERS  DEFINE YOUR AUDIENCE, TEST CASES,  OBJECTIVES & CONSIDER  EXPECTATIONS & LIMITATIONSwww.flickr.com/photos/jorge...
7. TIME TO...                                           PRACTICEwww.flickr.com/photos/icedsoul/3041770422
RESPONSIVE                                           NAVIGATION                                           THE TASK:       ...
COMPLEX                                           RESPONSIVE                                           NAVIGATION         ...
APP STRUCTURE &                                           NAVIGATION                                           THE TASK:  ...
8. TO                                                         SUMMARISEhttp://www.flickr.com/photos/martinteschner/45694959...
GUIDING                                            PRINCIPLES                                            MOBILE DEVICES AR...
COMMON                                            PROBLEMS                                            NUMBER OF WIREFRAMES...
CONTENT                                            STRATEGY &                                            HIERARCHY        ...
RESPONSIVE                                            NAVIGATION                                            RESEARCH DIFFE...
APP                                            STRUCTURES &                                            NAVIGATION         ...
TESTING APPS &                                            RESPONSIVE                                            SITES     ...
TESTING APPS &                                            RESPONSIVE                                            SITES     ...
9. FOR THE ROADSOME TAKEAWAYS                  www.flickr.com/photos/st3f4n/4387291247
DEMO, SKETCHING   & WORKFLOW   www.thismanslife.co.uk/projects/lab/   responsivewireframes/   www.thismanslife.co.uk/proje...
NAVIGATIONFOR RESPONSIVEDESIGNhttp://bradfrostweb.com/blog/web/responsive-nav-patterns/http://bradfrostweb.com/blog/web/co...
TESTING   http://bradfrostweb.com/blog/mobile/   test-on-real-mobile-devices-without-   breaking-the-bank/   http://www.we...
TESTING YOUR   RESPONSIVE SITE   http://responsive.is/typecast.com   http://screenqueri.es/   http://www.responsinator.com...
OTHER   USEFUL LINKS   www.slideshare.net/yiibu/pragmatic-   responsive-design   http://stephanierieger.com/on-designing- ...
Thank you!                                              QUESTIONS?                                                    anna...
Upcoming SlideShare
Loading in...5
×

Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013

1,309

Published on

Slides from my part 2 class of Designing for multiple devices run at General Assembly in London on the 18th of March 2013.

ABSTRACT
In Fundamentals for Designing for Multiple Devices, we covered the basics of responsive design and mobile apps (for both Android & iOS). We also looked at how user expectations have shifted behaviour, how consumption patterns have changed and what that has meant for designing products that will be used on multiple devices. This follow-on session will take outset in the guiding principles covered in the previous class and take a closer look at:

- common challenges faced when designing for multiple devices and how to address them
- content strategy and hierarchy across devices
- navigation patterns for responsive design
- app structures and navigation patterns
- how to test both responsive sites and apps

Published in: Design

Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013

  1. 1. Anna Dahlström founder byflock www.annadahlstrom.com anna.dahlstrom@gmail.com annadahlstrom PART 2 DESIGNING FOR MULTIPLE DEVICES London 18th March 2013http://desktopwallpaper-s.com/19-Computers/-/Future/ Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom
  2. 2. I’m Anna IA & UX DESIGNER | SWEDISH BUT LONDON BASED FREELANCING + WORKING ON A STARTUP LOVES QUOTES & CHALLENGES This is Öresundsbron, the bridge between Sweden & Denmarkwww.flickr.com/photos/dahlstroms/4411448782/
  3. 3. AGENDA 1. RECAP ON GUIDING PRINCIPLES 2. COMMON CHALLENGES 3. CROSS DEVICE CONTENT STRATEGY & HIERARCHY 4. RESPONSIVE NAVIGATION 5. APPS STRUCTURE & NAVIGATION 6. TESTING APPS & RESPONSIVE SITES 7. EXERCISES 8. SUMMARY 9. Q & Awww.flickr.com/photos/27147/3648039063
  4. 4. 1. RECAP ON... GUIDING PRINCIPLESwww.flickr.com/photos/publicenergy/1846375599
  5. 5. MOBILE DEVICES ARE USED 1 ANYWHERE & EVERYWHEREwww.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839
  6. 6. A LARGE PROPORTION OF 2 USAGE HAPPENS WHEN WE HAVE TIME TO KILLhttp://www.flickr.com/photos/hanhutton/320464105/ www.flickr.com/photos/edduddiee/4307943164
  7. 7. THE SAME TASKS ARE CARRIED 3 OUT ON SMARTPHONES AS ON DESKTOPSwww.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748
  8. 8. USERS INCREASINGLY EXPECT AN 4 EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICESwww.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339
  9. 9. CORE CONTENT SHOULD REMAIN 5 THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISEDwww.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193
  10. 10. 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
  11. 11. “ 1,057 different mobile devices accessedThe Guardian beta site yesterday (includingone person on a zune!)” ** Source: The Guardian
  12. 12. In 2009 1% of global internet traffic camefrom mobiles. In 2010 the number was 4%.By the end of 2012 it had risen to13%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobilewww.flickr.com/photos/nasamarshall/6289116940
  13. 13. 41% of emails are now opened onmobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-deviceswww.flickr.com/photos/jayfresh/3388253576/
  14. 14. 2. THE MOST COMMON CHALLENGES WITH RESPONSIVE DESIGNhttp://www.flickr.com/photos/eyesore9/3206408088/
  15. 15. WHERE TO START? DEFINE YOUR MOBILE STRATEGY, START SKETCHING &www.flickr.com/photos/pinkpurse/5355919491/ WORKING ACROSS DISCIPLINES
  16. 16. HOW MANY VERSIONS SHOULD WE WIREFRAME FOR? DEPENDS ON YOUR PROJECT, BUDGET & TEAM AS WELL AS WHO IS BUILDING ITwww.flickr.com/photos/jorgeq82/4732700819
  17. 17. WHAT ABOUT VISUAL DESIGN? LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPINGwww.flickr.com/photos/donsolo/2136923757/
  18. 18. WHAT SCREEN SIZES & RESOLUTIONS SHOULD I DESIGN FOR? USE ANALYTICS FOR GUIDANCE & DESIGN FOR THE MOST COMMON ONESSource: www.flickr.com/photos/dpstyles/3448453466
  19. 19. 80% 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-designwww.flickr.com/photos/adactio/6153481666
  20. 20. HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  21. 21. HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  22. 22. HOW DO I DEFINEMY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES &ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  23. 23. HOW MANY DEVICES SHOULD I TEST ON? AS MANY AS POSSIBLE BUT PRIORITISE BASED ON YOUR AUDIENCEwww.flickr.com/photos/nomadic_lass/5598218199
  24. 24. HOW DOI HANDLEIMAGES?IMAGES & ICONSSHOULD BE AS FLEXIBLEAS POSSIBLEwww.flickr.com/photos/jorgeq82/4732700819
  25. 25. 3. CROSS DEVICE CONTENT STRATEGY & HIERARCHYhttp://www.flickr.com/photos/young_einstein/74097753/
  26. 26. “ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ”www.flickr.com/photos/theaftershock/2811382400/ - TRENT WALTON
  27. 27. KNOW YOUR CONTENT PRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENT THE SAMEwww.flickr.com/photos/sepblog/3649959481
  28. 28. CONSIDER THE MOBILE CONTEXT THE USE CASE MAY BE THE SAME BUT USING A MOBILE DEVICE IS DIFFERENTwww.flickr.com/photos/stephangeyer/
  29. 29. 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
  30. 30. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/WORK THROUGHYOUR CONTENTSTACKING STRATEGYACROSS DEVICES & ORIENTATION
  31. 31. MOBILE VS. DESKTOP FIRST• START LARGE OR SMALL WHAT EVER WORKS BEST FOR YOU• ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
  32. 32. DON’T JUST WORK WITH COLUMNS THINK OF THE NARRATIVE OF THE PAGEwww.flickr.com/photos/garrettc/6260768486/
  33. 33. IDENTIFY YOUR MAIN MODULE TYPES DEFINE HOW THEY SHOULD BEHAVE ACROSS DEVICES & ORIENTATIONSwww.flickr.com/photos/boltofblue/4418442567
  34. 34. “ With thousands and thousands of pageson the Crayola site, it wasn’t efficient towireframe every single page and state. Wecreated a system of components that couldbe assembled in different configurations toaccommodate the unique content neededfor each type of page.” * * Source: http://danielmall.com/work/crayola/Screenshot: www.crayola.co.uk/
  35. 35. LIKE PLAYING REAL LIFE TETRISPRE-DEFINED POCKETS FOR THE CONTENT TO SLOT INTOwww.flickr.com/photos/fritzon/195008860
  36. 36. 4. A LOOK AT RESPONSIVE NAVIGATIONwww.flickr.com/photos/taytom/5277657429
  37. 37. EXCELLENT READ‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  38. 38. “ 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-patternswww.flickr.com/photos/tim_norris/2789759648
  39. 39. CONSIDER YOUR PROJECT ASSESSING THE DEPTH NEEDED AS WELL AS & PROS & CONS OF DIFFERENT NAVIGATION APPROACHESwww.flickr.com/photos/inpivic/5205918163/
  40. 40. DEFINE YOUR DIFFERENTTYPES OF NAVIGATIONPRIMARY, SECONDARY, TERTIARY AS WELL ASFOOTER & CROSSLINKING http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  41. 41. BE CONSISTENT USE THE SAME APPROACH THROUGHOUT & HAVE CLEAR, SAYING VISUAL CUESScreenshot: http://cognition.happycog.com/
  42. 42. BE CONSISTENT USE THE SAME APPROACH THROUGHOUT & HAVE CLEAR, SAYING VISUAL CUESScreenshot: http://cognition.happycog.com/
  43. 43. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENTScreenshot: www.bbc.co.uk/sport
  44. 44. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENTScreenshot: www.bbc.co.uk/sport
  45. 45. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENTScreenshot: www.bbc.co.uk/sport
  46. 46. 5. A LOOK AT... APP STRUCTURES & NAVIGATIONwww.flickr.com/photos/46355638@N00/4414640784
  47. 47. EVERY PLATFORMIS ITS OWNLITTLEWORLDWITH THEIR OWN UIGUIDELINES THATUSERS ARE USED TOwww.flickr.com/photos/gadl/3570118243
  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. IDENTIFY YOUR MAIN SECTIONS EACH SHOULD HAVE A CLEAR FOCUS & PURPOSEwww.flickr.com/photos/inpivic/5205918163/
  51. 51. SKETCHYOUR SCREEN FLOWS,NAVIGATION & CONTENTwww.flickr.com/photos/saucef/7184615025
  52. 52. AVOID USING THE HOMESCREEN AS A STEPPING POINTCONSIDER THE USE CASE & ENSURE YOU DELIVER VALUEFROM THE FIRST VIEWwww.flickr.com/photos/kruger_otto/5581886586
  53. 53. RESEARCH COMMONAPPROACHESFOR INSPIRATION &BEST PRACTICE www.uxarchive.com/
  54. 54. RESEARCH COMMONAPPROACHESFOR INSPIRATION &BEST PRACTICE www.uxarchive.com/tasks/sign_up/
  55. 55. LOOK ATWHATOTHERS DOBE CREATIVE http://pttrns.com/
  56. 56. 6. HOW TO... TEST APPS & RESPONSIVE SITEShttp://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
  57. 57. TESTING APPS STRUCTURE, NAVIGATION, INTERACTIONS & TRANSITIONSwww.flickr.com/photos/cristiano_betta/2909483129
  58. 58. TESTING RESPONSIVE SITES DO THIS AS EARLY AS POSSIBLEwww.flickr.com/photos/adactio/5818096043
  59. 59. IN THE BROWSERBY RESIZING THE BROWSER WINDOW &CHECKING THE DISPLAY OF CONTENT http://thenextweb.com/
  60. 60. IN THE BROWSER BY DESIGNING IN THE BROWSER & CREATING A WORKING HTML PROTOTYPEwww.flickr.com/photos/jorgeq82/4732700819
  61. 61. USING HANDY TOOLSHELP YOU STYLE & TEST YOUR TYPOGRAPHY http://responsive.is/typecast.com
  62. 62. USING EMULATORSALLOW YOU TO VIEW YOUR SITEACROSS DEVICES & ORIENTATIONS http://screenqueri.es/ http://quirktools.com/screenfly/ www.responsinator.com/ http://mattkersley.com/responsive/
  63. 63. ON ACTUAL DEVICES EXPENSIVE BUT THERE ARE WAYS AROUND ITwww.flickr.com/photos/arne/5835855777/in/photostream/
  64. 64. BUYING BUNDLES & SHARING HELPING EACH OTHERwww.flickr.com/photos/adactio/6800969243/in/photostream/
  65. 65. WITH USERS DEFINE YOUR AUDIENCE, TEST CASES, OBJECTIVES & CONSIDER EXPECTATIONS & LIMITATIONSwww.flickr.com/photos/jorgeq82/4732700819
  66. 66. 7. TIME TO... PRACTICEwww.flickr.com/photos/icedsoul/3041770422
  67. 67. RESPONSIVE NAVIGATION THE TASK: Youve been asked to develop a responsive site for a small furniture store for summer. They sell indoor tables (dinner, kitchen, sofa tables) as well as outdoor tables. They are an EXERCISE ONE independent store and want to inform users about their store. Define how the navigation will work for desktop and mobile. 10 MINUTESwww.flickr.com/photos/icedsoul/3041770422
  68. 68. COMPLEX RESPONSIVE NAVIGATION THE TASK: After the successful table store project youve been asked to develop a responsiveEXERCISE TWO site for a large furniture store in time for summer. They sell indoor as well as outdoor furniture and frequently have offers and products they want to push. They group products by room (e.g. kitchen but also by category (e.g. storage) and sub-category (e.g. food storage). Define how the navigation & including sub- navigation will work for desktop and mobile.www.flickr.com/photos/icedsoul/3041770422 15 MINUTES
  69. 69. APP STRUCTURE & NAVIGATION THE TASK: The same furniture store wants you to develop an app. Based on the navigation youve defined for the responsive site, work through theEXERCISE THREE screenflow for your app and how the user would navigate to and back from different sections. 15 MINUTESwww.flickr.com/photos/icedsoul/3041770422
  70. 70. 8. TO SUMMARISEhttp://www.flickr.com/photos/martinteschner/4569495912/
  71. 71. GUIDING PRINCIPLES MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISEDwww.flickr.com/photos/thecaucas/2597813380
  72. 72. COMMON PROBLEMS NUMBER OF WIREFRAMES DEPENDS ON YOUR PROJECT, BUDGET & TEAM AS WELL AS WHO IS BUILDING IT VISUAL DESIGN LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING SCREENSIZES & BREAKPOINTS USE ANALYTICS FOR GUIDANCE & DESIGN FOR THE MOST COMMON ONES WHAT TO TEST ON AS MANY AS POSSIBLE BUT PRIORITISE BASED ON YOUR AUDIENCE IMAGES & ICONSwww.flickr.com/photos/thecaucas/2597813380 AS FLEXIBLE AS POSSIBLE
  73. 73. CONTENT STRATEGY & HIERARCHY KNOW YOUR CONTENT PRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENT THE SAME CONSIDER THE MOBILE CONTEXT THE USE CASE MAY BE THE SAME BUT USING A MOBILE DEVICE IS DIFFERENT DEFINE CONTENT STACKING THE GRID & BREAKPOINTS IS YOUR GUIDE BUT DONT JUST WORK WITH THE COLUMNS. CONSIDER EACH MODULE &www.flickr.com/photos/thecaucas/2597813380 THE STORY OF THE PAGE
  74. 74. RESPONSIVE NAVIGATION RESEARCH DIFFERENT APPROACHES KNOW YOUR OPTIONS & THE PROS & CONS FOR EACH BASE IT ON YOUR PROJECT ASSESS HOW MANY LEVELS THAT ARE NEEDED & REVIEW APPROACH ACROSS DEVICES BUT ALSO WHAT GOES IN WORK WITH DIFFERENT TYPES ITS NOT JUST ABOUT THE MAIN NAVIGATION BUT ALSO SUB-NAVIGATION, SEARCH, IN PAGE LINKS & THE FOOTER BE CONSISTENT USE SAYING VISUAL CUES & CONSIDERwww.flickr.com/photos/thecaucas/2597813380 NAVIGATION ACROSS ALL PRODUCTS
  75. 75. APP STRUCTURES & NAVIGATION BASE ON PROJECT & PLATFORM IDENTIFY YOUR MAIN SECTIONS & KEEP DIFFERENCES IN STRUCTURE & UI GUIDELINES BETWEEN PLATFORMS IN MIND SKETCH BEFORE WIREFRAMING WORK THROUGH YOUR SCREENFLOW, NAVIGATION & CONTENT ACROSS SCREENS VALUE FROM FIRST VIEW AVOID USING THE HOME SCREEN AS A STEPPING POINT BEST PRACTICE & INSPIRATIONwww.flickr.com/photos/thecaucas/2597813380 FOR TYPICAL TASK FLOWS & SCREENS
  76. 76. TESTING APPS & RESPONSIVE SITES TESTING APPS BOTH STRUCTURE, NAVIGATION, INTERACTIONS & TRANSITIONS TESTING RESPONSIVE SITES DO THIS AS EARLY AS POSSIBLE TO ENSURE IT ACTUALLY WORKS IN THE BROWSER TESTING IN THE BROWSER BY RESIZING THE BROWSER WINDOW OR DESIGNING & CREATING PROTOTYPES USING EMULATORS ALLOWS YOU TO VIEW HOW YOUR SITE ISwww.flickr.com/photos/thecaucas/2597813380 DISPLAYED ACROSS DEVICES & ORIENTATIONS
  77. 77. TESTING APPS & RESPONSIVE SITES ON ACTUAL DEVICES TEST ON AS MANY AS POSSIBLE. THE BEST REPRESENTATION BUT CAN BE EXPENSIVE. INVEST IN KEY DEVICES & POOL TOGETHER TO SHARE DEVICES TESTING WITH USERS TEST EARLY & FREQUENTLY. DEFINE YOUR AUDIENCE, TEST CASES, OBJECTIVES & IDENTIFY SPECIFIC CROSS DEVICE SPECIFIC EXPECTATIONS & LIMITATIONSwww.flickr.com/photos/thecaucas/2597813380
  78. 78. 9. FOR THE ROADSOME TAKEAWAYS www.flickr.com/photos/st3f4n/4387291247
  79. 79. DEMO, SKETCHING & WORKFLOW www.thismanslife.co.uk/projects/lab/ responsivewireframes/ www.thismanslife.co.uk/projects/lab/ responsiveillustration/ http://nocturnalmonkey.com/archive/ responsive-sketching http://jeremypalford.com/arch-journal/ responsive-web-design-sketch-sheets http://danielmall.com/work/crayola/www.flickr.com/photos/st3f4n/4387291247
  80. 80. NAVIGATIONFOR RESPONSIVEDESIGNhttp://bradfrostweb.com/blog/web/responsive-nav-patterns/http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design www.flickr.com/photos/st3f4n/4387291247
  81. 81. TESTING http://bradfrostweb.com/blog/mobile/ test-on-real-mobile-devices-without- breaking-the-bank/ http://www.welcomebrand.co.uk/ thoughts/website-testing-phone-bundles/ https://bagcheck.com/blog/22-mobile- device-testing-the-gearwww.flickr.com/photos/st3f4n/4387291247
  82. 82. TESTING YOUR RESPONSIVE SITE http://responsive.is/typecast.com http://screenqueri.es/ http://www.responsinator.com/ http://quirktools.com/screenfly/ http://mattkersley.com/responsive/ http://responsivepx.com/ http://protofluid.com/ http://responsiveviewport.com/www.flickr.com/photos/st3f4n/4387291247
  83. 83. OTHER USEFUL LINKS www.slideshare.net/yiibu/pragmatic- responsive-design http://stephanierieger.com/on-designing- content-out-a-response-to-zeldman-and- others/ http://bradfrostweb.com/blog/mobile/ support-vs-optimization/ http://en.wikipedia.org/wiki/ List_of_displays_by_pixel_density http://stuffandnonsense.co.uk/blog/about/ we_need_a_standard_show_navigation_i con_for_responsive_web_design http://danielmall.com/work/crayola/www.flickr.com/photos/st3f4n/4387291247
  84. 84. Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.comwww.flickr.com/photos/dahlstroms/4411448782/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×