Three part series: Designing for multiple devices - GA, London, 26 Nov 2013

3,128 views

Published on

Slides from my three-part series Designing for Multiple Devices class run in one evening on the 26th of November with General Assembly in London.
https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series

The rise in mobiles and tablets have not only changed the way we consume and interact with content, but also the way we design and what we base our design approach on.

This series of classes will cover how user expectations as well as behaviour and consumption patterns have shifted—and what that means for designing products that will be used on multiple devices. Coming out of these classes, you'll be equipped with the essential principles and tools to tackle the multiple device jungle.

Published in: Design, Sports, Technology

Three part series: Designing for multiple devices - GA, London, 26 Nov 2013

  1. 1. 3 classes in 1 AN EVENING OF D!"#$%#%$ for multiple devices Anna Dahlström www.annadahlstrom.com annadahlstrom
  2. 2. I’& A%%' IA & UX designer | freelance since 2011 Swedish | in London since 2006 www.flickr.com/photos/dahlstroms/4411448782
  3. 3. (#" !v!%#%$ 6.00 pm P'r) 1: Understanding the multiple device landscape Practice 7.00 pm Break 7.15 pm P'r) 2: Practicalities of multiple device projects Practice 8.15 pm Break 8.30 pm P'r) 3: Adapting to input, orientation & the future Practice Q&A
  4. 4. P'r) 1: Understanding the multiple devices landscape Introduction & defining your mobile strategy
  5. 5. (! w*r+, we design for has become more complex www.flickr.com/photos/pagedooley/2121472112
  6. 6. W! -"!, )* only have to deal with different browsers, and the fold www.flickr.com/photos/jorgeq82/4732700819
  7. 7. T*,'. #)’" br*w"!r" AND endless numbers of devices & screen sizes www.flickr.com/photos/adactio/6153481666
  8. 8. I% 2009 1% of global internet traffic came from mobiles. By the end of 2012 it had risen to 13% and by 2015 #)’" /p!0)!, )* b! 'b*v! 50%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile www.flickr.com/photos/nasamarshall/6289116940
  9. 9. A" *f Q3 2012 we passed 1 billion smartphones in use www.flickr.com/photos/raincitystudios/95234968
  10. 10. I 1'v! ' 2*b )1') #" -%3%*w% )* &'%. F*r !v!r. 1-&'% that enters the world, five mobile I’devices are created.*UX designer m a freelance IA & * Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx www.flickr.com/photos/hlkljgk/5764422581 www.flickr.com/photos/helga/3952984450/
  11. 11. 41% *f !&'#+" are now opened on mobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices www.flickr.com/photos/jayfresh/3388253576
  12. 12. B. )1! !%, *f 2013, mobile phones will overtake PCs as the most common web access device worldwide* Source: www.gartner.com/newsroom/id/2429815 Image courtesy of Shutterstock
  13. 13. The average person looks at their phone 150 )#&!" ' ,'..* * Source: www.textually.org/textually/archives/2012/02/030229.htm www.flickr.com/photos/jorgeq82/4732700819
  14. 14. 40% *f p!*p+! use their phone in the bathroom. * * Source: http://www.lukew.com/ff/entry.asp?1500 www.flickr.com/photos/exlibris/2552107635
  15. 15. W! $* *%+#%! everywhere and anywhere Image courtesy of Shutterstock
  16. 16. (! *+, &.)1 that mobile users are rushed & on the go doesn’t hold true Image courtesy of Shutterstock
  17. 17. A +'r$! pr*p*r)#*% of our usage happens when we have time to kill www.flickr.com/photos/edduddiee/4307943164
  18. 18. (#" 1'" #&p+#0')#*%" for UX & design thinking. www.flickr.com/photos/eyesore9/3206408088
  19. 19. B!f*r! )1! 4r") #P1*%! the mobile use case was limited www.flickr.com/photos/frantaylor/4296536332
  20. 20. W! b-#+) separate sites for mobile & desktop DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  21. 21. I% f'0), we still do but we’re noticing something www.flickr.com/photos/demandaj/7287174776
  22. 22. U"!r" /p!0) an equal & continuous experience across devices www.flickr.com/photos/joachim_s_mueller/7110473339
  23. 23. “ 7 *-) *f 10 smartphone and tablet users expect the same quality of experience on all devices. ” * * Source: www.vibrantmedia.co.uk/press/press.asp?section=press_releases&id=256 www.flickr.com/photos/pandiyan/4550066009
  24. 24. (!r! 'r! a number of reasons for this www.flickr.com/photos/martinteschner/4569495912
  25. 25. P!*p+! 0'rr. *-) the same tasks on mobiles as they do on desktops www.flickr.com/photos/philippe/2462550872
  26. 26. D!v#0!" & "!rv#0!" are getting more advanced & optimised for complex tasks www.flickr.com/photos/joeybones/6791201819
  27. 27. W! %* +*%$!r *w% just one device but multiple & use them interchangeably www.flickr.com/photos/soyproject/6066959891
  28. 28. W! w'%) )* find what we’re looking for irrespectively of the device we use www.flickr.com/photos/visualpunch/7351572896
  29. 29. M*b#+! 0*%)/) ≠ &*b#+! -"! 0'"! The latter is about the task, the former about the total sum of the user’s mobile experience www.flickr.com/photos/icedsoul/2486885051
  30. 30. H'v#%$ "!p'r')! sites does, for the most part, not make sense DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  31. 31. S*, w1') should we do? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  32. 32. O-r &'#% *p)#*%" are bespoke mobile sites, responsive sites and apps www.flickr.com/photos/martinteschner/4569495912
  33. 33. B!"p*3! &*b#+! "#)!" have a separate url & means maintaining different sites DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  34. 34. R!"p*%"#v! "#)!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  35. 35. App", well we all know they come from app stores www.flickr.com/photos/paul-r/217948368
  36. 36. H*w do we know when to do what? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  37. 37. B!"p*3! &*b#+! "#)!" should be avoided, if we can www.flickr.com/photos/edenandjosh/2892956576
  38. 38. “T*,'.’" p*p-+'r ,!v#0!" 'r! %*) )*&*rr*w'" so building something which works on any device is better than building something which works on today's devices“ - C*&b#%!, w#"! w*r," fr*& @*%!/)r'p5!+ & @)r!%)w'+)*% www.flickr.com/photos/lastquest/1472794031
  39. 39. Tw* &'#% /0!p)#*%": technical limitations to the CMS, or if required for the audience www.flickr.com/photos/st3f4n/3476036180
  40. 40. (! '+)!r%')#v! #" messy & costly: means maintaining multiple technical solutions & content www.flickr.com/photos/ericconstantineau/5618576278
  41. 41. I) &!'%" maintaining multiple technical solutions... www.flickr.com/photos/nikio/3899114449
  42. 42. ...'%, '+"* maintaining multiple versions of your content www.flickr.com/photos/sharynmorrow/127184319
  43. 43. R!'+#")#0'++. that means making cuts & frustrating users www.flickr.com/photos/bulldogsrule/187693681
  44. 44. F*r )1! 4r") )#&! smartphones and tablets made up more than one-third of total clicks on Google in Q3* * Source: http://econsultancy.com/uk/blog/63605-us-mobile-paid-search-spend-up-66-year-on-year-stats www.flickr.com/photos/antoniolas/4367543346
  45. 45. P**r &*b#+! experiences result in the same thing - drop offs www.flickr.com/photos/sixmilliondollardan/2493495506
  46. 46. K!!p )1! 0*r! content the same & optimise the experience, display & interactions to the device Image courtesy of Shutterstock
  47. 47. M!!) responsive design www.flickr.com/photos/taytom/5277657429
  48. 48. B-)... what about apps? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  49. 49. W1!)1!r )* do an app or not comes down to... www.flickr.com/photos/martinteschner/4569495912
  50. 50. U"!r & b-"#%!"" objectives... Image courtesy of Shutterstock
  51. 51. If .*- %!!, to utilise device specific capabilities... www.flickr.com/photos/cindyli/3784225848
  52. 52. If *ffl#%! r!',#%$ is required... www.flickr.com/photos/arjencito/6531640463
  53. 53. A%, *f 0*-r"! budget Image courtesy of Shutterstock
  54. 54. A%'+.)#0" of entry points can also provide some guidance www.flickr.com/photos/andwhynot/2946734025
  55. 55. M'#%+. ,#r!0) )r'ffi0: could be an argument for an app www.flickr.com/photos/haagsuitburo/5349040355
  56. 56. M'#%+. "1'r!, +#%3": ensure your site is optimised for mobile www.flickr.com/photos/soundslogical/4255801733
  57. 57. “ D*%’) b-#+, '% 'pp f*r )1! "'3! *f #). Focus on the goal of your mobile initiatives, prioritize your company’s needs, and choose a solution that can best address these needs now and into the future.* ” * Source: http://success.adobe.com/en/na/programs/products/digitalmarketing/offers/apr/1304-32060-2013-optimization-survey-results.html www.flickr.com/photos/dougbelshaw/4360008898
  58. 58. App design
  59. 59. App" are focused & personal www.flickr.com/photos/jdhancock/4354438814
  60. 60. N*) '" !'". '" just doing an app for e.g. iOS or Android www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  61. 61. N!!, )* 0*%"#,!r fragmentation across different versions & backwards compatibility www.flickr.com/photos/aforgrave/6168689222
  62. 62. R!+')#v! %-&b!r of active Android devices across different versions Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
  63. 63. C*&p'r#"*% *f adoption rate of iOS7, iOS6 and iOS5 Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker www.flickr.com/photos/blakespot/4773693893
  64. 64. Ev!r. p+')f*r& has their own ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
  65. 65. #P1*%! r!"*-r0!" help & inspiration well documented
  66. 66. A%,r*#, r!"*-r0!" help & inspiration a little less well documented for earlier versions
  67. 67. B'"#0 iOS app structure CONSISTENT ACROSS VERSIONS NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. 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.
  68. 68. B'"#0 Android app structure DIFFERENT BETWEEN VERSIONS: NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
  69. 69. S)'r) b. sketching screenflows, navigation & content www.flickr.com/photos/saucef/7184615025
  70. 70. Av*#, using the home screen as a stepping point. Instead deliver value from first view www.flickr.com/photos/lindzgraham/5605911999
  71. 71. ” M*%!. "p!%) developing a pretty but limited iPhone app only benefits [...] the few, but money spent on the website UI would have benefitted everyone. ” - G'r. M'r"1'++ *% ‘(! 'pp )r'p’ #% .%!) M'$8#%! www.flickr.com/photos/dougbelshaw/4360008898
  72. 72. (!r! 'r! different types of apps NATIVE APPS (e.g. Instagram) • MOST OPTIMISED USER EXPERIENCE • ACCESS TO DEVICE CAPABILITIES & APIs • BUT REQUIRES PLATFORM SPECIFIC CODE BASE HYBRID (e.g. First Facebook, Basecamp) • USE OF HTML5 & JAVASRIPT • WRAPPER TO PROVIDE NATIVE CAPABILITIES • FEWER “VERSIONS” TO MAINTAIN • BUT CAN BE TIME CONSUMING TO CREATE APP LIKE INTERACTIONS • CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES
  73. 73. R!"p*%"#v! design
  74. 74. R!"p*%"#v! "#)!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  75. 75. “ D!"#$% & ,!v!+*p&!%) "1*-+, r!"p*%, 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. “ - S&'"1#%$ M'$8#%! www.flickr.com/photos/adactio/5818096043
  76. 76. (! b'03b*%! #" your grid & breakpoints http://foundation.zurb.com/docs/layout.php
  77. 77. C*+-&%" & $-))!r" can be fluid or fixed, or a combination. http://foundation.zurb.com/docs/layout.php
  78. 78. (! $r#, 1!+p" w#)1 defining modules for pages & views www.flickr.com/photos/donsolo/2136923757
  79. 79. “ C*%)!%) %!!," )* b! 01*r!*$r'p1!, to ensure the intended message is preserved on any device and at any width “ www.flickr.com/photos/theaftershock/2811382400 - Tr!%) W'+)*%
  80. 80. D!4%! .*-r content stacking strategy across devices & orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  81. 81. I,!%)#f. '%, pr#*r#)#"! the content across devices & orientations Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  82. 82. D*%’) 2-") work with columns but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
  83. 83. S* )1') #)’" 0'r!9++. considered, like this http://thenextweb.com/
  84. 84. M*b#+! *r ,!"3)*p 4r"), the key is considering the content & how it will work across devices
  85. 85. :&! )* practice
  86. 86. (! BRIEF A major dating site has asked you to create a campaign for Valentines day 2014 focused on "unexpected moments". The purpose is to facilitate encounters & dates between people in the London looking to find that special someone. The site/app should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The following should also be included: • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  87. 87. 01 BESPOKE MOBILE SITE VS. RESPONSIVE VS. AN APP The client has come to you with the ‘unexpected moments’ idea and are asking for your advice on what they should be doing. W1') w*-+, .*- r!0*&&!%, #% )!r&" *f &*b#+! pr!"!%0! & w1.? A bespoke mobile site, responsive site, an app or a combination? Consider: HOW WOULD MOST PEOPLE ACCESS IT? • Direct traffic vs. shared links? WHAT DO YOU NEED IT TO DO? • Device specific capabilities needed? • Is offline reading/ usage required? www.flickr.com/photos/pinkpurse/5355919491 WHAT ARE THE OBJECTIVES & PRACTICALITIES? • The budget • The current technical platform • Could an app be re-used later • The marketing value of an app
  88. 88. 02 CONTENT STACKING STRATEGY Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work. F*r )1! 1*&! p'$! *%+., w*r3 )1r*-$1 1*w )1! 0*%)!%) "1*-+, b! +'#, *-) '%, pr#*r#)#"!, (0*%)!%) ")'03#%$) f*r ,!"3)*p '%, "&'r)p1*%!". The site should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The client’s requirements were: • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  89. 89. D!4%! your content stacking strategy across devices & orientations Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  90. 90. D*%’) 2-") work with columns but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
  91. 91. 02 CONTENT STACKING STRATEGY Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work. F*r )1! 1*&! p'$! *%+., w*r3 )1r*-$1 1*w )1! 0*%)!%) "1*-+, b! +'#, *-) '%, pr#*r#)#"!, (0*%)!%) ")'03#%$) f*r ,!"3)*p '%, "&'r)p1*%!". The site should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The client’s requirements were: • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  92. 92. P'r) 2: Practicalities of multiple device projects Common challenges, content strategy, structures, navigation patterns, testing
  93. 93. S*&! *f )1! most common challenges with responsive design are... www.flickr.com/photos/helga/3952984450
  94. 94. 1. K%*w#%$ where to start... • Define your mobile strategy • Start sketching • And work across disciplines www.flickr.com/photos/pinkpurse/5355919491
  95. 95. 2. H*w &'%. versions to wireframe... • Depends on your project, budget & team as well as who’s building it • Focus on identifying key templates & then the modules tat make up the views www.flickr.com/photos/jorgeq82/4732700819
  96. 96. 3. H*w )* 'ppr*'01 visual design • Less static designs • Focus on modules & modularity • Continuously prototype to test how the content behaves www.flickr.com/photos/donsolo/2136923757
  97. 97. 4. W1') "0r!!% ";!" & which resolutions? • Use analytics as a guidance • Design for the most common ones www.flickr.com/photos/dpstyles/3448453466
  98. 98. 5. H*w )* define breakpoints • As much possible let the content be the guide • Use breakpoints & tweakpoints & EMS instead of px • Consult analytics for devices to identify most important screen sizes & ensure content displays properly for those • If all things fail, use screensizes for mayor layout changes www.slideshare.net/yiibu/pragmatic-responsive-design
  99. 99. 6. H*w &'%. devices to test on • As many as possible • Prioritise based on your audience • Use research & analytics for guidance www.flickr.com/photos/nomadic_lass/5598218199
  100. 100. “ 80% *f .*-r )r'ffi0 in your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.* Source: * Source: www.slideshare.net/yiibu/pragmatic-responsive-design www.flickr.com/photos/adactio/6153481666
  101. 101. 7. H*w )* handle images • Images & icons should be as flexible as possible • Consult the internet (see resources in the back) xxx
  102. 102. R!"p*%"#v! navigation patterns
  103. 103. “ M*b#+! %'v#$')#*% should be like a good friend: there when you need them but cool enough to give you your space. “ * Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns www.flickr.com/photos/melodramababs/2766765248
  104. 104. Br', Fr<) has written 2 excellent posts on Responsive navigation patterns xxx http://bradfrostweb.com/blog/web/responsive-nav-patterns http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
  105. 105. L!)’" take a closer look... www.flickr.com/photos/suttonhoo22/2070700035
  106. 106. S#&p+! navigation patterns 1) Top nav or “do nothing” 2) The toggle 3) The left nav flyout http://bradfrostweb.com/blog/web/responsive-nav-patterns
  107. 107. Via B ra d Fro st (th T*p %'v *r “D* %*)1#%$” keeps the navigation at the top ank y ou!) PROS Simple to implement Less design & development implications CONS Not scalable Potential height issues http://skinnyties.com
  108. 108. Via B ra d Fro st (th (! )*$$+! hides navigation items in a menu PROS Optimises screen use Recognised from apps Scalable CONS Possible animation performance problems Javascript dependent www.smashingmagazine.com ank y ou!)
  109. 109. Via B ra d Fro st (th (! +!= %'v >.*-) menu items are accessed from a tray sliding in ank y ou!) PROS Space generous Recognised nav pattern from apps CONS More advanced and doesn’t work on all devices Images from Barack Obama via Brad Frost
  110. 110. C*&p+/ navigation patterns 1) The multi toggle 2) Right to left 3) Skip the sub-nav 4) Priority+ 5) The carousel+ http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
  111. 111. (! &-+)# )*$$+! nested navigation grouped under a menu Via B ra d Fro st (th PROS Scannable Scalable CONS Animation performance Javascript dependent http://thenextweb.com Barack Obama - image via Stephanie Rieger ank y ou!)
  112. 112. Via B ra d Fro st (th R#$1) )* +!= the next level navigation slides in right to left ank y ou!) PROS Nice looking Follows mobile conventions Scalable CONS More complex to implement Animation performance www.sony.com
  113. 113. Via B ra d Fro st (th S3#p )1! "-b-%'v next level navigation is displayed on that level PROS Simple Removes complexities around sub-navigation CONS Re-quires page refresh & visit for access http://worldwildlife.org ank y ou!)
  114. 114. Via B ra d Fro st (th Pr#*r#).+ shows most important & hides the rest in a menu ank y ou!) PROS Simple Supports (supposedly) most used) Scalable CONS Hides potentially important items www.bbc.co.uk/sport
  115. 115. Via B ra d Fro st (th (! 0'r*-"!++ carousel for main sections, sub-nav when in focus ank y ou!) PROS Easy to navigate Suitable for touch CONS Doesn’t display all parent categories at once Less good for non-touch devices Not suitable for multi-level sub-navs Image from Intel via Brad Frost
  116. 116. (!r!"' N!#+’" Mobile Design Pattern Gallery www.mobiledesignpatterngallery.com
  117. 117. U"! &*b#+! as a reason to re-consider your navigation & prioritise search www.flickr.com/photos/martinteschner/4569495912
  118. 118. C*%"#,!r .*-r pr*2!0): assess the depth needed as well as pros & cons of approaches www.flickr.com/photos/inpivic/5205918163/
  119. 119. D!4%! & w*r3 w#)1 )?!" of navigation: primary, secondary, tertiary, footer & contextual http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  120. 120. L'") b-) %*) +!'"), consider navigation across products & keep it similar to aid familiarity BBC Sport - mobile site BBC Sport - desktop BBC Sport - app
  121. 121. App structures
  122. 122. Ev!r. p+')f*r& has their own ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
  123. 123. B'"#0 iOS app structure CONSISTENT ACROSS VERSIONS NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. 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.
  124. 124. B'"#0 Android app structure DIFFERENT BETWEEN VERSIONS: NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
  125. 125. R!"!'r01 common approaches www.uxarchive.com
  126. 126. T!")#%$ apps & responsive designs
  127. 127. T!") as early as possible & then continuously
  128. 128. I% )1! br*w"!r by resizing the browser window & checking the display of content http://thenextweb.com
  129. 129. I% )1! br*w"!r by designing in the browser & creating a working HTML prototype www.flickr.com/photos/jorgeq82/4732700819
  130. 130. U"#%$ )**+" that help you style & test your typography before implementing it http://responsive.is/typecast.com
  131. 131. http://screenqueri.es/ http://quirktools.com/screenfly/ U"#%$ !&-+')*r" that allow you to view your site across devices & orientations www.responsinator.com/ http://mattkersley.com/responsive/
  132. 132. O% '0)-'+ ,!v#0!", though expensive there are ways around it www.flickr.com/photos/arne/5835855777/in/photostream
  133. 133. B-.#%$ b-%,+!" and sharing, hereby helping each other www.flickr.com/photos/adactio/6800969243/in/photostream
  134. 134. W#)1 -"!r" define your objectives, audience, test cases, consider expectations & limitations www.flickr.com/photos/jorgeq82/4732700819
  135. 135. T!")#%$ 'pp" flow, navigation, interactions, transitions
  136. 136. Fr*& testing sketches as paper prototypes or as clickable prototypes... www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
  137. 137. ...)* iterations of wireframes & designs www.flickr.com/photos/fluent_methods/6961802861
  138. 138. :&! )* practice
  139. 139. 03 APP STRUCTURE With a better idea of the content for the ‘unexpected moments’ campaign, work also begins on the app. Based on the content & functionality requirements as well as what you know, consider what would be suitable to include in the app. F*0-"#%$ *%+. *% )1! 'pp %'v#$')#*% 1*w w*-+, .*- ")r-0)-r! )1#" #f .*- w!r! )* ,* '% #OS 'pp & '% A%,r*#, 'pp? Look at the Tab bar items respectively Action bar items & what would go in them as well as the ‘More’ respectively ‘Overflow menu’. • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  140. 140. B'"#0 iOS app structure CONSISTENT ACROSS VERSIONS NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. 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.
  141. 141. B'"#0 Android app structure DIFFERENT BETWEEN VERSIONS: NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
  142. 142. 03 APP STRUCTURE As you start to have a better idea of the content, work also begins on the app. Based on the content & functionality requirements as well as what you know about apps, consider what would be suitable to include in the app. F*0-"#%$ *%+. *% )1! 'pp %'v#$')#*% 1*w w*-+, .*- ")r-0)-r! )1#" #f .*- w!r! )* ,* '% #OS 'pp & '% A%,r*#, 'pp? Look at the Tab bar items respectively Action bar items & what would go in them as well as the ‘More’ respectively ‘Overflow menu’. • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  143. 143. 04 SIMPLE RESPONSIVE NAVIGATION Now that you have a good understanding of the content and the main sections, it’s time to tackle the navigation for the responsive site for the ‘unexpected moments’ campaign. B'"!, *% w1') .*-’v! #,!%)#4!, "* f'r, ,!4%! 1*w )1! %'v#$')#*% w#++ w*r3 f*r ,!"3)*p '%, "&'r)p1*%! '%, /p+'#% 1*w .*- 0'&! )* #) Consider what you need, future aspects, cross device patterns and the client’s requirements: • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  144. 144. Via B ra d Fro st (th T*p %'v *r “D* %*)1#%$” keeps the navigation at the top ank y ou!) PROS Simple to implement Less design & development implications CONS Not scalable Potential height issues http://skinnyties.com
  145. 145. Via B ra d Fro st (th (! )*$$+! hides navigation items in a menu PROS Optimises screen use Recognised from apps Scalable CONS Possible animation performance problems Javascript dependent www.smashingmagazine.com ank y ou!)
  146. 146. Via B ra d Fro st (th (! +!= %'v >.*-) menu items are accessed from a tray sliding in ank y ou!) PROS Space generous Recognised nav pattern from apps CONS More advanced and doesn’t work on all devices Images from Barack Obama via Brad Frost
  147. 147. 04 SIMPLE RESPONSIVE NAVIGATION Now that you have a good understanding of the content and the main sections, it’s time to tackle the navigation for the responsive site for the ‘unexpected moments’ campaign. B'"!, *% w1') .*-’v! #,!%)#4!, "* f'r, ,!4%! 1*w )1! %'v#$')#*% w#++ w*r3 f*r ,!"3)*p '%, "&'r)p1*%! '%, /p+'#% 1*w .*- 0'&! )* #) Consider what you need, future aspects, cross device patterns and the client’s requirements: • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  148. 148. 05 COMPLEX RESPONSIVE NAVIGATION The client loves the work that you’ve done so far and other stakeholders within the business wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing people and activity suggestions by borough as well as activity type (e.g. night out, dinner for two) H*w w*-+, )1#" 01'%$! .*-r %'v#$')#*% r!0*&&!%,')#*% '%, w1.? Define the navigation for desktop and smartphone. • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  149. 149. (! &-+)# )*$$+! nested navigation grouped under a menu Via B ra d Fro st (th PROS Scannable Scalable CONS Animation performance Javascript dependent http://thenextweb.com Barack Obama - image via Stephanie Rieger ank y ou!)
  150. 150. Via B ra d Fro st (th R#$1) )* +!= the next level navigation slides in right to left ank y ou!) PROS Nice looking Follows mobile conventions Scalable CONS More complex to implement Animation performance www.sony.com
  151. 151. Via B ra d Fro st (th S3#p )1! "-b-%'v next level navigation is displayed on that level PROS Simple Removes complexities around sub-navigation CONS Re-quires page refresh & visit for access http://worldwildlife.org ank y ou!)
  152. 152. Via B ra d Fro st (th Pr#*r#).+ shows most important & hides the rest in a menu ank y ou!) PROS Simple Supports (supposedly) most used) Scalable CONS Hides potentially important items www.bbc.co.uk/sport
  153. 153. Via B ra d Fro st (th (! 0'r*-"!++ carousel for main sections, sub-nav when in focus ank y ou!) PROS Easy to navigate Suitable for touch CONS Doesn’t display all parent categories at once Less good for non-touch devices Not suitable for multi-level sub-navs Image from Intel via Brad Frost
  154. 154. 05 COMPLEX RESPONSIVE NAVIGATION The client loves the work that you’ve done so far and other stakeholders within the business wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing people and activity suggestions by borough as well as activity type (e.g. night out, dinner for two) H*w w*-+, )1#" 01'%$! .*-r %'v#$')#*% r!0*&&!%,')#*% '%, w1.? Define the navigation for desktop and smartphone. • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  155. 155. P'r) 3: Adapting to input, orientations & the future Touch across devices, device orientation, mobile context, device agnostic design
  156. 156. “T*,'.’" p*p-+'r ,!v#0!" 'r! %*) )*&*rr*w'" so building something which works on any device is better than building something which works on today's devices“ - C*&b#%!, w#"! w*r," fr*& @*%!/)r'p5!+ & @)r!%)w'+)*% www.flickr.com/photos/lastquest/1472794031
  157. 157. W!’r! already facing two particular challenges... www.flickr.com/photos/david_a_lea/3247217194
  158. 158. 1. Br!'3p*#%)" based on popular devices puts us into a corner www.flickr.com/photos/michale/210536054
  159. 159. 2. T*-01 is no longer limited to smartphones & tablets www.flickr.com/photos/lokan/8843464852
  160. 160. I%p-) & touch across devices
  161. 161. “ T*-01 has landed on the desktop. “ - J<1 C+'r3 www.flickr.com/photos/patdavid/9391602153
  162. 162. ‘N!w r-+!: every desktop design has to go finger-friendly’* * Source: http://globalmoxie.com/blog/desktop-touch-design.shtml www.flickr.com/photos/66327170@N07/7296381856
  163. 163. A" '+w'."... ...it depends
  164. 164. “ T*-01 "0r!!% +'p)*p "'+!" have jumped 52% in the last quarter. 5 years from now you will you not be able to buy a Windows computer without a touch screen. ”* * Source: http://www.lukew.com/ff/entry.asp?1750 Screenshot from www.currys.co.uk
  165. 165. W! "1*-+, consider touch across all devices & screen sizes. Not just smartphones & tablets www.flickr.com/photos/adactio/6153481666
  166. 166. www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/janitors/9968676044 (! w'. we use touch screens differ based on device, but also across the same device www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
  167. 167. 49% *f -"!r" hold their phone in one hand, but how they hold it differs www.flickr.com/photos/jorgeq82/4732700819
  168. 168. ONE HAND (R: 66% L: 33%) O)1!r v'r#')#*%" based on 1,333 observations during 2 months 72% 28% CRADLING (L: 79% R: 21%) 90% 10% TWO HANDS Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  169. 169. H*+,#%$ our devices is not a static stage. It changes Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  170. 170. “ D!"#$%#%$ f*r )*-01 means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. ” - J<1 C+'r3 Image courtesy of Shutterstock
  171. 171. I&p'0)" controls, placement & interactions
  172. 172. W! %!!, )* consider precise (e.g. mouse) v.s imprecise (e.g. fingers) input means www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jmtimages/2883279193
  173. 173. O-r 0-rr!%) 'ppr*'01 to navigation is based on the mouse as input Source: Luke W - www.lukew.com/ff/entry.asp?1649
  174. 174. F*r 1.br#," we tend to rest arms & grab bottom corners www.flickr.com/photos/intelfreepress/6837427202
  175. 175. C*%"#,!r reach & obscuring content & adjust navigation accordingly From... ...towards Source: Luke W - www.lukew.com/ff/entry.asp?1649
  176. 176. “ L**3#%$ ') the Polar interface on a laptop can be a bit disconcerting because we’ve essentially left the middle of the page “blank”. ” - L-3! W Screenshot from http://polarb.com/polls/tags/mobiledesign
  177. 177. B'"!, *% the context & use case, posture, grip & orientation varies www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164
  178. 178. C!r)'#% *r#!%)')#*%" are better for certain tasks Reading Watching Typing
  179. 179. (!r! 'r! three main approaches for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
  180. 180. S#)-')#*%'+ 0*%)/) impacts firm vs. loose grip www.flickr.com/photos/kalexanderson/6716348037
  181. 181. M*b#+! context
  182. 182. M*b#+! 0*%)/) ≠ &*b#+! -"! 0'"! The latter is about the task, the former about the total sum of the user’s mobile experience www.flickr.com/photos/icedsoul/2486885051
  183. 183. (! 0*%)/) differs based on situation, attitudes & preferences www.flickr.com/photos/hoyvinmayvin/5873697252
  184. 184. (! "'&! 0*%)/) doesn’t equal the same situation www.flickr.com/photos/hoyvinmayvin/5873139941
  185. 185. O)1!r '"p!0)" to consider for the mobile context are... www.flickr.com/photos/icedsoul/2486885051
  186. 186. A))!%)#*% "p'% data snacking vs. focused usage www.flickr.com/photos/nadiya95/7217734288/
  187. 187. S#$%'+ 0*v!r'$! speed & reliability of the connection www.flickr.com/photos/arjencito/6531640463/
  188. 188. L*0')#*% moving about vs. in one location www.flickr.com/photos/garry61/3191250682
  189. 189. (! "0r!!% small, medium, large & of course touch or not www.flickr.com/photos/adactio/6153481666
  190. 190. P<)-r! & $r#p how we sit/ stand as well as interact with the device www.flickr.com/photos/helga/3545310740
  191. 191. A,'p)#%$ )* orientation AND different devices can become a bit of a mindfield www.flickr.com/photos/cayusa/534070358
  192. 192. M*v! 'w'. from devices www.flickr.com/photos/martinteschner/4569495912
  193. 193. D!v#0! agnostic design
  194. 194. R!&!&b!r 1*w we can’t successfully tell what devices users are using www.flickr.com/photos/adactio/6153481666
  195. 195. (! w!b is after all about content. Not what device we are using Image courtesy of Shutterstock
  196. 196. “ G!) .*-r 0*%)!%) to go anywhere, because it’s going to go everywhere. ” - Br', Fr<) www.flickr.com/photos/mirafoto/494444094
  197. 197. A#& )* make it more future proof by moving away from specific devices www.flickr.com/photos/byte/8282578241
  198. 198. U"! %')-r'+ breakpoints based on content layout rather than focusing on devices www.flickr.com/photos/sharynmorrow/127184319
  199. 199. L**3 ') what’s suitable for your content & best practice for layout principles www.flickr.com/photos/visualpunch/7351572896
  200. 200. I)’" %*) without challenges, but challenges are meant to be overcome Image courtesy of Shutterstock
  201. 201. “ B. ,!f'-+) the web has no optimal width, optimal height, optimal font-size or optimal anything really. ” - E,w'r, O’R#*r,'% www.flickr.com/photos/nikio/3899114449
  202. 202. “ (! w!b has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. ” - E++#*) J S)*03" www.flickr.com/photos/soundslogical/4255801733
  203. 203. B'"#%$ br!'3p*#%)" on screen sizes is a temporary work around www.flickr.com/photos/gozalewis/3249104929
  204. 204. W*r3 w#)1 breakpoints & tweakpoints, focus on content layout & EMS instead of px www.slideshare.net/yiibu/pragmatic-responsive-design
  205. 205. (! "'&! with columns, opt for fluid as much possible http://foundation.zurb.com/docs/layout.php
  206. 206. (#" brings us back to the importance of modularity www.flickr.com/photos/donsolo/2136923757/
  207. 207. L!"" 'b*-) p'$!" & more focus on the building blocks that makes up those views www.flickr.com/photos/boltofblue/4418442567
  208. 208. N* &*r! is it about beautiful page designs... www.flickr.com/photos/miuenski/3127285991
  209. 209. ...b-) 'b*-) v#!w" that will look different across browsers, screen sizes & devices www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
  210. 210. (! &*r! you reuse, the less modules there will be to design, define and develop www.flickr.com/photos/boltofblue/4418442567
  211. 211. E""!%)#'+ f*r pr!v!%)#%$, ending up with too many pieces www.flickr.com/photos/akrabat/9085299639
  212. 212. (#" 1!+p" meeting requirements across screen sizes and page views www.flickr.com/photos/webatelier/5929299679
  213. 213. A%,, minimise design & development efforts www.flickr.com/photos/webatelier/5929855686
  214. 214. G**, f*r the future & the budget Image courtesy of Shutterstock
  215. 215. R!"p*%"#v! ,!"#$% is based on modular views rather than static pages www.flickr.com/photos/techsavvyed/5926978939
  216. 216. N!!, )* 3%*w what you design for in order to identify & define what modules to use where www.flickr.com/photos/songzhen/4893025042
  217. 217. A" w!++ '" w1') content variations & sizes you need for different pages & devices www.flickr.com/photos/songzhen/4893025042
  218. 218. S)'r) b. identifying the main module types & common elements between pages
  219. 219. D!4%! your content stacking strategy across devices & orientations Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  220. 220. D!4%! display variations as well as the elements they are made up of Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  221. 221. I"*+')! !+!&!%)" that need to be able to break out to meet your content stacking strategy Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  222. 222. A,'p) )* the device & screen in question; both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
  223. 223. Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 1 Logo 2 Header L#))+! b. +#))+! you build up a module library of defined components for your views, across devices & orientations 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  224. 224. “ W#)1 )1*-"'%," and thousands of pages on the Crayola site, it wasn’t efficient to wireframe every single page and state. We created a system of components that could be assembled in different configurations to accommodate the unique content needed for each type of page. ” - D'%#!+ M'++ Screenshot: www.crayola.co.uk/
  225. 225. H*w w! 'ppr*'01 #) depends on your project, budget and time frame & if it’s being built externally www.flickr.com/photos/75905404@N00/7126146307
  226. 226. W1') w! 0'%%*) ,* is take a waterfall approach with responsive design where we hand over from to the other www.flickr.com/photos/bingisser/154452815
  227. 227. W! 1'v! )* work together across disciplines
  228. 228. (#" #%0+-,!" 0+#!%)" both in terms of what they can expect & what will be expected of them www.flickr.com/photos/martinteschner/4569495912
  229. 229. R!"p*%"#v! ,!"#$% means giving up some control to ensure it works for as many devices as possible www.flickr.com/photos/byte/8282578241
  230. 230. E%"-r#%$ that we do what’s best for our clients, our users & us as a company www.flickr.com/photos/stickkim/7491816206
  231. 231. :&! )* practice
  232. 232. 06 DEVICE AGNOSTIC DESIGN The ‘unexpected moments’ client have asked you to look at doing their new responsive site with breakpoints based on content rather than devices. For that we need to really understand the content and how it’s going to flow F*r )1! "#)!, #,!%)#f. )1! &'#% 0*%)!%) )?!" '%, 1*w )1!. 'r! $*#%$ )* b! ,#"p+'.!, '%, ','p)!, '0r<" "0r!!% ";!". Think about natural breakpoints and good practice for display of content as well as how to reuse as much as possible. • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  233. 233. S)'r) b. identifying the main module types & common elements between pages
  234. 234. D!4%! your content stacking strategy across devices & orientations Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  235. 235. D!4%! display variations as well as the elements they are made up of Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  236. 236. I"*+')! !+!&!%)" that need to be able to break out to meet your content stacking strategy Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  237. 237. A,'p) )* the device & screen in question; both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
  238. 238. Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 1 Logo 2 Header L#))+! b. +#))+! you build up a module library of defined components for your views, across devices & orientations 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
  239. 239. 06 DEVICE AGNOSTIC DESIGN The ‘unexpected moments’ client have asked you to look at doing their new responsive site with breakpoints based on content rather than devices. For that we need to really understand the content and how it’s going to flow F*r )1! "#)!, #,!%)#f. )1! &'#% 0*%)!%) )?!" '%, 1*w )1!. 'r! $*#%$ )* b! ,#"p+'.!, '%, ','p)!, '0r<" "0r!!% ";!". Think about natural breakpoints and good practice for display of content as well as how to reuse as much as possible. • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  240. 240. 07 ADAPTING TO DEVICE ORIENTATION The client has asked you to consider how the content is going to adapt based on device orientation. P#03 *%! *f .*-r p'$!" '%, ,!4%! 1*w )1! 0*%)!%) 0*-+, ','p) b'"!, *% ,!v#0! *r#!%)')#*%. Consider desktop, tablet and smartphone • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  241. 241. www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/janitors/9968676044 (! w'. we use touch screens differ based on device, but also across the same device www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
  242. 242. C!r)'#% *r#!%)')#*%" are better for certain tasks Reading Watching Typing
  243. 243. (!r! 'r! three main approaches for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
  244. 244. 07 ADAPTING TO DEVICE ORIENTATION The client has asked you to consider how the content is going to adapt based on device orientation. P#03 *%! *f .*-r p'$!" '%, ,!4%! 1*w )1! 0*%)!%) 0*-+, ','p) b'"!, *% ,!v#0! *r#!%)')#*%. Consider desktop, tablet and smartphone • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  245. 245. A f!w final words...
  246. 246. A%. "0r!!% should be your starting point www.flickr.com/photos/byte/8282578241
  247. 247. “ Ev!r. r!"p*%"#v! ,!"#$% pr*2!0) is also a content strategy project. ” - K'r!% M0Gr'%! Image courtesy of Shutterstock
  248. 248. (!r! #" %* right way & the following is just one way of approaching it www.flickr.com/photos/jtravism/2417205289
  249. 249. S)!p" f*r responsive & modular design 1. Define target audiences, goals & needs (user & business) 2. Identify key user journeys 3. Identify key pages 4. Identify the content & functional requirements for each key page 5. Across all pages identify common content module types, e.g. featured product 6. Re-visit, list & prioritise the content for each page 7. From this Identify the variations that are needed for each content module type 8. Lay out the content modules across key pages (mobile or desktop first) 9. Work through layout and content stacking strategy across devices 10. Define templates for the content module types (variations & across devices) 11. Iteratively work through your pages, test & adjust modules & variations as needed www.flickr.com/photos/poetatum/3335900523
  250. 250. I)’" %*) 2-") about the smaller screens but also the big ones www.flickr.com/photos/jolives/2889944573/
  251. 251. I)"’" 'b*-) #" %* thinking & planning ahead www.flickr.com/photos/jolives/2889944573
  252. 252. I) ,*!"%’) have to break the bank. Maintaining different versions will www.flickr.com/photos/gi/5537770007
  253. 253. B! 0r!')#v! & challenge what exists today www.flickr.com/photos/oter/5090592214
  254. 254. R!&!&b!r )* test & iterate, sketch as much as possible & work collaboratively www.flickr.com/photos/jdhancock/4354438814
  255. 255. “ Every time you redesign God kills a kitten “ - L*-#" R<!%f!+, www.flickr.com/photos/matterphotography/2739799786
  256. 256. U"!9+ resources
  257. 257. R!"p*%"#v! design 1 http://mediaqueri.es/popular/ http://www.alistapart.com/articles/responsive-webdesign/ http://designmodo.com/responsive-design-examples/ http://jamus.co.uk/demos/rwd-demonstrations/ http://bradfrostweb.com/blog/web/responsive-navpatterns/ http://www.gridsetapp.com/ http://grid.mindplay.dk http://goldengridsystem.com/ http://foundation.zurb.com/docs/layout.php www.flickr.com/photos/st3f4n/4387291247
  258. 258. R!"p*%"#v! design 2 http://www.netmagazine.com/opinions/designingbrowser http://www.businessinsider.com/html5-vs-apps-whythe-debate-matters-and-who-will-win-2012-11 http://ia.net/blog/responsivetypography-the-basics/ http://daverupert.com/2013/04/ responsive-deliverables http://alistapart.com/article/ future-ready-content www.flickr.com/photos/st3f4n/4387291247
  259. 259. R!"p*%"#v! design 3 www.slideshare.net/yiibu/pragmatic-responsivedesign http://stephanierieger.com/on-designing-content-outa-response-to-zeldman-and-others/ http://bradfrostweb.com/blog/mobile/support-vsoptimization/ http://stuffandnonsense.co.uk/blog/about/ we_need_a_standard_show_navigation_icon_for_resp onsive_web_design http://bradfrostweb.com/blog/mobile/anatomy-of-amobile-first-responsive-web-design/ www.flickr.com/photos/st3f4n/4387291247
  260. 260. N'v#$')#*% for responsive design http://bradfrostweb.com/blog/web/responsive-navpatterns/ http://bradfrostweb.com/blog/web/complexnavigation-patterns-for-responsive-design/ http://palantir.net/blog/scalable-navigation-patternsresponsive-web-design www.flickr.com/photos/st3f4n/4387291247
  261. 261. D!v#0!" & sizes http://www.google.com/analytics/features/mobilesite-traffic.html http://en.wikipedia.org/wiki/ List_of_displays_by_pixel_density http://opensignal.com/reports/fragmentation-2013/ https://deviceatlas.com/device-data/devices Slide 37: http://www.slideshare.net/yiibu/pragmaticresponsive-design www.flickr.com/photos/st3f4n/4387291247
  262. 262. D!v#0! interaction www.uxmatters.com/mt/archives/2013/02/how-dousers-really-hold-mobile-devices.php http://globalmoxie.com/blog/desktop-touchdesign.shtml www.uxbooth.com/articles/designing-for-mobilepart-2-interaction-design/?goback= %2Egde_79272_member_226720034 www.flickr.com/photos/st3f4n/4387291247
  263. 263. M-+)#p+! devices & touch input www.lukew.com/ff/entry.asp?1649 http://www.lukew.com/ff/entry.asp?1721 http://www.uxmatters.com/mt/archives/2013/03/ common-misconceptions-about-touch.php Examples: http://polarb.com/polls/tags/mobiledesign www.flickr.com/photos/st3f4n/4387291247
  264. 264. Br!'3p*#%)" 1 http://www.lukew.com/ff/entry.asp?1714 http://elliotjaystocks.com/blog/ responsive-web-design-the-war-has-not-yet-beenwon http://stephanierieger.com/ondesigning-content-out-a-response-to-zeldman-andothers http://www.markboulton.co.uk/ journal/theinbetween http://adactio.com/journal/6044/ http://seesparkbox.com/foundry/ there_is_no_breakpoint www.flickr.com/photos/st3f4n/4387291247
  265. 265. Br!'3p*#%)" 2 http://www.smashingmagazine.com/ 2013/03/01/logical-breakpointsresponsive-design/ www.slideshare.net/yiibu/pragmaticresponsive-design http://alistapart.com/article/designing-forbreakpoints http://dmolsen.com/2013/03/05/media-query-lessdesign-content-based-breakpoints-tweakpoints/ www.flickr.com/photos/st3f4n/4387291247
  266. 266. D!&*, sketching & workflow www.thismanslife.co.uk/projects/lab/ responsivewireframes/ www.thismanslife.co.uk/projects/lab/ responsiveillustration/ http://nocturnalmonkey.com/archive/responsivesketching http://jeremypalford.com/arch-journal/responsiveweb-design-sketch-sheets http://danielmall.com/work/crayola/ www.flickr.com/photos/st3f4n/4387291247
  267. 267. P+')f*r& guidelines https://developer.apple.com/library/ios/ documentation/UserExperience/Conceptual/ MobileHIG/index.html#//apple_ref/doc/uid/ TP40006556 http://mrgan.tumblr.com/post/10492926111/ labeling-the-back-button http://developer.android.com/design/index.html www.flickr.com/photos/st3f4n/4387291247
  268. 268. P'))!r% libraries http://pttrns.com/ http://mobile-patterns.com/ http://www.patternsofdesign.co.uk/ http://www.mobiledesignpatterngallery.com/mobilepatterns.php http://www.androidpatterns.com/ http://androidpttrns.com/ http://android.inspired-ui.com/ www.flickr.com/photos/st3f4n/4387291247
  269. 269. T!")#%$ http://bradfrostweb.com/blog/mobile/test-on-realmobile-devices-without-breaking-the-bank/ http://www.welcomebrand.co.uk/thoughts/websitetesting-phone-bundles/ https://bagcheck.com/blog/22-mobile-device-testingthe-gear www.flickr.com/photos/st3f4n/4387291247
  270. 270. T!")#%$ your responsive design 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/ http://www.browserstack.com/ www.flickr.com/photos/st3f4n/4387291247
  271. 271. T!")#%$ apps & mockups http://popapp.in/ http://fieldtestapp.com/ https://www.fluidui.com/ http://www.plunkapp.com/ http://bjango.com/mac/skalapreview/ http://proto.io/ www.flickr.com/photos/st3f4n/4387291247
  272. 272. ('%3 .*-. Questions? @annadahlstrom | anna.dahlstrom@gmail.com www.annadahlstrom.com

×