UX design for every screen

4,063 views

Published on

In this session, we will explore the how the recent explosion of devices has disrupted the process of designing a website that we've crafted over the past decade.

When designers only have one instance of website (i.e., desktop) to design, the layout is uniform. The header, content area, sidebar, and footer all remain static. Furthermore, the elements are relatively uniform as well. Buttons, navigation, typography, and images are all basically the same across across the various pages. But if you are designing a responsive website – one whose look and feel adapts depending whether you're using a phone, laptop, or tablet – then these elements and especially the layout begin to diverge.

After this session, you should leave with the confidence to argue the importance of responsive design to your client or boss – and that the with the proper strategy, the extra effort and costs can be justified (and hopefully minimized).

Published in: Design, Technology

UX design for every screen

  1. 1. UX design for every screenAaron StanushDrupalCon Denver | March 21, 2012
  2. 2. Aaron StanushCo-founder, designerFour Kitchensaaron@fourkitchens.com@aaronstanush
  3. 3. A new process
  4. 4. To design responsive websites effectively and responsibly, I had to completely redefine the way I view the web. Trent Waltontrentwalton.com/2012/02/02/redefined
  5. 5. How we’ve been doing it forthe last decade• Requirements and planning• Site maps, user workflows, wireframes• Comps• Build and style the website
  6. 6. The new way• Requirements and planning• Content strategy (mobile first!)• Design systems > comps• Prototyping is key• Build. Design. Iterate. Design. Build. Iterate.
  7. 7. What’s changed?• There is no more “page”• Comps are no longer golden• Elements are no longer static• Prototyping happens much earlier• Designers and developers working closer• Higher level of client communication
  8. 8. What’s the plan?Future Friendly + Mobile first
  9. 9. Designing the mobile app first forced us to strip down to essentials. Bill DeRouchey, Banksimplefastcodesign.com/1663315/banksimple-wants-to-shake-up-banking-with-cutting-edge-ui-design
  10. 10. User > Content > Mobile
  11. 11. Content strategy
  12. 12. “The mobile web”
  13. 13. flickr.com/photos/svenreed/5919406108
  14. 14. • There is no mobile web • the-haystack.com/2011/01/07/there-is-no-mobile-web• The myths of mobile context • globalmoxie.com/jhc/prez/mobile-context-myth-fowd.pdf
  15. 15. Start designing from the content out, rather than the canvas in. Mark Boultonmarkboulton.co.uk/journal/comments/a-richer-canvas
  16. 16. Future friendly content • What are the types of content and why? • Make it modular • What’s really important? • How will the tool organize this stuff?alistapart.com/articles/future-ready-content
  17. 17. Now your content is ready to travel
  18. 18. Having the content first would be great, but...
  19. 19. Page tableshttp://24ways.org/2011/extracting-the-content
  20. 20. The page is dead.Long live the content.
  21. 21. Design strategy
  22. 22. Responsive UX design• Workflows aim for the best user experience.• Wireframes can help organize layout and convey content flow.• Design systems save time and create patterns.• Prototypes help the team fail faster. They can also provide client value.
  23. 23. Workflows and wireframes• Responsive is all about providing the best experience.• These can differ between devices.• Wireframes are (probably) still necessary• Making sense of this “no more page” nonsense.
  24. 24. Design systems• styletil.es (@SamanthaToy)• Build a style guide/pattern library• A comp is (probably) still necessary, but not for every page at every viewport.• Goal: Get the design into the browser quickly.
  25. 25. Prototyping• The browser is where the responsive magic happens.• A “living” design allows for richer discussions between developers and designers.• Clients will “get it” sooner.• Fail fast. Succeed fast.
  26. 26. Mobile UX best practices
  27. 27. Best practices =Best experience
  28. 28. Mobile UX priorities • Understand how people use their devices and why. • Content > navigation • Best experience doesn’t necessarily mean limiting choices. • Maintain clarity and focus.Mobile First, Luke W.
  29. 29. What makes for a goodexperience?• Make it readable.• Make it relevant.• Keep forms to a minimum.• Avoid modal overlays.• Make it snappy.mobilewebbestpractices.com
  30. 30. Layout• Design for screens not devices = Breakpoints• Be fluid, liquid, flexible.• Think in proportions not pixels.• Consider device orientation.
  31. 31. Responsive layout patternslukew.com/ff/entry.asp?1514 mediaqueri.es
  32. 32. Mostly fluidtrentwalton.com
  33. 33. Layout shifterfoodsense.is
  34. 34. ?
  35. 35. stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
  36. 36. Navigation• Content > Navigation• Don’t try to make your dropdowns a work of art.• Put fixed toolbars at the top.• Consider OS and hardware buttons.
  37. 37. Responsive images• How do your images scale for various widths and orientations?• Reduce the number of images if you can.• Be careful of using huge images.
  38. 38. Mobile text• Make it readable.• Consider the flow of text.• Be aware of typeface characteristics.• Use font hosting services wisely.
  39. 39. Gestures • Buttons are a hack. • Make gestures obvious. • Current conventions: Tap and swipe (pull down?) • Don’t: Make your users read a manual. • Do: Use visual cues like coachmarks.globalmoxie.com/blog/buttons-inspired-ui-hack.shtml
  40. 40. Gestures• There is a need for universal conventions.• Consider competing OS and browser gestures.• Provide alternatives to gestures.
  41. 41. Designing for touch• Design for humans, embrace the physicality of touch.• Size and space elements appropriately (40px rule)• Not every device is touch capable.
  42. 42. Tools
  43. 43. flickr.com/photos/11855464@N00/6829899789
  44. 44. Responsive design is... • Fluid grids • Responsive media • Media queriesabookapart.com/products/responsive-web-design
  45. 45. Fluid grids• goldengridsystem.com• github.com/davatron5000/Foldy960• csswizardry.com/fluid-grids• gridsetapp.com (Coming soon!)
  46. 46. Wireframing/prototyping• Whiteboard!• Balsamiq• InDesign• Axure•?
  47. 47. Responsive media• Images• Slideshows• Videos • fitvidsjs.com• Text • fittextjs.com
  48. 48. Responsive images• w3.org/community/respimg• filamentgroup.com/lab/ responsive_images_experimenting_with_context_ aware_image_sizing• adactio.com/journal/4997• markboulton.co.uk/journal/comments/responsive- advertising
  49. 49. Viewports = Media queries@mediascreenand(max*device*width:2480px){ .column{ float:none; }}‣ Media type: screen (desktop, phone, tablet)‣ Query for media feature: width, height, orientation, pixel density
  50. 50. Prototype frameworks• foundation.zurb.com• twitter.github.com/bootstrap• goldilocksapproach.com• html5boilerplate.com/mobile• stuffandnonsense.co.uk/projects/320andup
  51. 51. Touch frameworks jquerymobile.com sencha.com
  52. 52. Testing for every screen
  53. 53. Test on real devicesbradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank
  54. 54. Adobe Shadowlabs.adobe.com/technologies/shadow
  55. 55. BrowsterStack.com
  56. 56. opera.com/developer/tools
  57. 57. blaze.io/mobile
  58. 58. MattKersley.com/responsive
  59. 59. Responsive UX process• Users > content > mobile• Focus creates clarity and usability• Use design systems• Get to prototypes quickly• Cohesive designer/developer unit• Iterate with the client early and often
  60. 60. If you start to hearcustomers asking foryour desktop webexperience to be morelike the simple, easy-to-use mobile one—you’redoing it right. Luke Wroblewski, Mobile First
  61. 61. Selling responsive
  62. 62. Do your clients need a responsive website? No.cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile
  63. 63. Your clients’ usersdon’t care whether a site is responsive or not.
  64. 64. They do need to get stuff done. Fast.bradfrostweb.com/blog/web/responsive-web-design-missing-the-point
  65. 65. Consider this • The desktop-only era is over. • The power of the URL. • Why not provide the best experience to your users?Credits
  66. 66. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.

×