Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design and Development "Gotchas"

Andrew Malek
October 29, 2015

Responsive Design and Development "Gotchas"

This session explores why choosing a good responsive framework, while assisting in development and ensuring a consistent look-and-feel, is just one piece of the much larger process of creating a truly engaging website or web application. Topics include why using the latest swiping motion du jour may not immediately make sense to all users, how a site's layout and content must truly be thought of as an architecture project to get the most "bang for the buck", and what problems that interactivity in the form of form entry can result in driving potential users and customers away, never to be seen again.

Andrew Malek

October 29, 2015

More Decks by Andrew Malek

Other Decks in Design


  1. Responsive Design and Development “Gotchas” @malekontheweb

  2. X X X X

  3. Do Frameworks Solve Everything?

  4. Andrew Malek UI/UX Developer NCR Corporation, Retail Solutions Division @malekontheweb

  5. Android Device Fragmentation

  6. Android Screen Size Fragmentation http://opensignal.com/reports/2015/08/android-fragmentation/

  7. And iOS Devices… (Air, Pro, Plus, …) http://iosres.com/

  8. “Common Sense is Not So Common” - Voltaire

  9. You Won’t Believe This About Cell Phones!

  10. What is Important to Them?

  11. ? Content ?

  12. •WHO is using my site? •WHAT are their main goals?

    •WHEN to use timely information? •WHERE are users going? •WHY?
  13. None
  14. For More on Content Strategy • http://www.usability.gov/what-and-why/content- strategy.html • http://alistapart.com/article/audiences-outcomes-

    and-determining-user-needs • https://uxmag.com/articles/content-strategy-and- ux-a-modern-love-story
  15. None
  16. "The hamburger icon, used most egregiously, allows you to put

    500 options into a mobile app without doing the hard work of actually figuring out what belongs there“ - Luke Wroblewski - http://www.bbc.com/news/magazine-31602745
  17. Hamburger Menu “Onboarding”

  18. Draw an Actual Button

  19. Use a Word in the Menu

  20. Menu Word Studies: • http://www.catalystnyc.com/2015/02/navigating- mobile-hamburger-menu-anyone-get/ • http://moovweb.com/blog/hamburger-menu-handy- tool-or-useless-icon/ •

    http://conversionxl.com/testing-hamburger-icon- revenue/ • http://www.peakusability.com.au/articles/mobile-ux- part-1-menu-burgers-and-navicons
  21. Other Options?

  22. Provide Actual Links

  23. Tab Bar

  24. Forms Sample Uses •Signup / Login •Shopping Cart Checkout •Survey

    •Advanced Search / Filtering •Post / Reply to Messages
  25. Some Frameworks

  26. Typing, Swiping, Reading…

  27. None
  28. Keep Forms Short

  29. Don’t Force a Login When Possible

  30. Simplify the Signup Process

  31. Phone Number Signup One option: Digits SDK (from Twitter) -

    SMS and Confirmation Code •https://fabric.io/kits/ios/digits •https://fabric.io/kits/android/digits
  32. Must You Ask Other Questions? • Need the real name?

    • Need age? • Need to ask the gender? • If so, consider to reduce chance of being offensive: http://ux.stackexchange.com/questions/19923/
  33. Social Network Signup / Login • Reduce Typing • Google:

    https://developers.google.com/identity/ • Facebook: https://developers.facebook.com/docs/facebook-login • Yahoo!: https://developer.yahoo.com/openid/ • OpenID: http://openid.net/
  34. Password Prompt Masking:

  35. Option to Show Password?

  36. JavaScript to Show Password: • Bootstrap: https://github.com/wenzhixin/bootstrap-show- password • jQuery:

  37. Password Strength Meter: jQuery and Bootstrap: https://github.com/ablanco/jquery.pwstrength.bootstrap

  38. Are Password Strength Meters Best? Google “Correct Horse Battery Staple”

    for an alternate opinion…
  39. Keep Surveys Short!

  40. https://twitter.com/jmspool/status/584001051415683072

  41. For More on Surveys: • https://www.uie.com/brainsparks/2015/09/24/stop -doing-survey-research/ • https://www.uie.com/brainsparks/2010/12/26/19- lessons-from-united-airlines-on-how-to-build-a-

    crappy-survey/ • http://www.nngroup.com/articles/keep-online- surveys-short/
  42. No Huge Menus - Or Help Navigate

  43. Birthdays – A Better Way? https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/

  44. Some Debate on Birthday UI • Numeric text only? •

    Pulldowns? • Calendar Popup • http://ux.stackexchange.com/questions/5119/ • http://ux.stackexchange.com/questions/41059/
  45. Google Accounts: Desktop & Mobile

  46. Automate!

  47. Autodetect Location: IP or Geolocation • http://ip2location.com • http://dev.maxmind.com/geoip/geoip2/geolite2/ •

    http://dev.w3.org/geo/api/spec-source.html • https://developers.google.com/maps/documentati on/javascript/examples/geocoding-reverse
  48. Autodetect Credit Card Type http://stackoverflow.com/questions/5911236/

  49. Fix Mistyped Email Addresses https://github.com/mailcheck/mailcheck

  50. Swipes and Gestures •Pull to Refresh •Zoom •Rotate •OS/specific (five-finger

    pinch on iOS)
  51. None
  52. "What used to be a simple app turned into a

    MESS with the last update. I used to be able to pull up the app and view all the info I wanted to see QUICKLY and effortlessly on default page... NOW I have to flip between 3- 4 screens or scroll around to find this info. I don't have time to play these hide and seek games… "
  53. Donald A. Norman and Jakob Nielsen: "In Apple Mail, to

    delete an unread item, swipe right across the unopened mail and a dialog appears, allowing you to delete the item. Open the email and the same operation has no result. In the Apple calendar, the operation does not work. How is anyone to know, first, that this magical gesture exists, and second, whether it operates in any particular setting?" http://www.jnd.org/dn.mss/gestural_interfaces_a_step_backwards_in_usability_6.html
  54. 1 in 4 Apps Virtually Ignored http://info.localytics.com/blog/app-user-retention-improves-in-the-us

  55. Your UI vs. Projected Age Distribution, US Source: U.S. Census

    Bureau, 2014 National Projections.
  56. A Study of Novice Older Adults and Gestural Interaction on

    Smartphones • "[T]wenty older adults, without prior touchscreen experience“ • "Although a few novel gestures were performed … throughout the ten tasks, none of them was carried - out by more than 10% of participants…“ CHI 2013 Mobile Accessibility Workshop, April 28, 2013, Paris, France http://mobile-accessibility.di.fc.ul.pt/papers/mobacc2013_submission_6.pdf
  57. Users’ Perspective of Smartphone Platforms Usability: An Empirical Study •

    "On the basis of evaluation it is concluded that there is a need to provide a new design framework in which these commercial smartphone platforms interface overcome the gap of adaptability quotient of older adults." 2014 Fifth International Conference on Intelligent Systems, Modelling and Simulation http://ijssst.info/Vol-15/No-3/data/3857a379.pdf
  58. PointClear - Optimizing mHealth Apps for Older Adults: 8 Strategies

    • "Most older adults don’t use advanced gestures such as double-tap, flick, tap and hold, pinch or spread. Strive to limit your gestures to tap and swipe. If your app needs to include these advanced gestures, make sure the actions that are activated are also available through menus or UI buttons that can be accessed by tapping or swiping.“ http://blog.pointclearsolutions.com/2014/06/optimizing-mhealth-apps-older-adults-8-strategies/
  59. Perceived Affordance • "Does the user perceive that clicking on

    that location is a meaningful, useful action to perform?" http://www.jnd.org/dn.mss/affordances_and.html
  60. Onboarding http://www.smashingmagazine.com/2014/08/mobile-onboarding-beginners-guide/

  61. How *Not* to Onboard Richard Kim - http://bit.ly/1waIMlT

  62. Show Part of a Second Slide

  63. Show Dots for Pages

  64. Use Actual Arrows, Multiple Entry Points

  65. None
  66. Require Little - or No - Training

  67. Make Navigation Easier

  68. Make Forms Easier to Use

  69. Swipe / Gesture Alternatives and/or Affordances

  70. Make People Happy

  71. Thanks for coming! @malekontheweb http://www.malektips.com/

  72. • Company webpage screenshots are used for illustrative purposes only

    and do not represent endorsement of any kind. • JavaScript framework logos are used for illustrative purposes only and do not represent endorsement of any kind. • Some photos are from stock library sites such as https://pixabay.com as well as public domain photos on https://commons.wikimedia.org where attribution is not requested. • © 2015-2016 Andrew Malek.