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
Tweet

More Decks by Andrew Malek

Other Decks in Design

Transcript

  1. Responsive Design
    and Development
    “Gotchas”
    @malekontheweb

    View Slide

  2. X
    X
    X
    X

    View Slide

  3. Do Frameworks Solve Everything?

    View Slide

  4. Andrew Malek
    UI/UX Developer
    NCR Corporation, Retail Solutions
    Division
    @malekontheweb
    http://www.malektips.com/

    View Slide

  5. Android Device Fragmentation

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. What is Important to Them?

    View Slide

  11. ? Content ?

    View Slide

  12. •WHO is using my site?
    •WHAT are their main goals?
    •WHEN to use timely information?
    •WHERE are users going?
    •WHY?

    View Slide

  13. View Slide

  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

    View Slide

  15. View Slide

  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

    View Slide

  17. Hamburger Menu “Onboarding”

    View Slide

  18. Draw an Actual Button

    View Slide

  19. Use a Word in the Menu

    View Slide

  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

    View Slide

  21. Other
    Options?

    View Slide

  22. Provide Actual Links

    View Slide

  23. Tab Bar

    View Slide

  24. Forms Sample Uses
    •Signup / Login
    •Shopping Cart Checkout
    •Survey
    •Advanced Search / Filtering
    •Post / Reply to Messages

    View Slide

  25. Some Frameworks

    View Slide

  26. Typing, Swiping, Reading…

    View Slide

  27. View Slide

  28. Keep Forms Short

    View Slide

  29. Don’t Force a Login When Possible

    View Slide

  30. Simplify the Signup Process

    View Slide

  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

    View Slide

  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/

    View Slide

  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/

    View Slide

  34. Password Prompt Masking:

    View Slide

  35. Option to Show Password?

    View Slide

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

    View Slide

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

    View Slide

  38. Are Password Strength Meters Best?
    Google “Correct Horse
    Battery Staple” for an
    alternate opinion…

    View Slide

  39. Keep Surveys Short!

    View Slide

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

    View Slide

  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/

    View Slide

  42. No Huge Menus - Or Help Navigate

    View Slide

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

    View Slide

  44. Some Debate on Birthday UI
    • Numeric text only?
    • Pulldowns?
    • Calendar Popup
    • http://ux.stackexchange.com/questions/5119/
    • http://ux.stackexchange.com/questions/41059/

    View Slide

  45. Google Accounts: Desktop & Mobile

    View Slide

  46. Automate!

    View Slide

  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

    View Slide

  48. Autodetect Credit Card Type
    http://stackoverflow.com/questions/5911236/

    View Slide

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

    View Slide

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

    View Slide

  51. View Slide

  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… "

    View Slide

  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

    View Slide

  54. 1 in 4 Apps Virtually Ignored
    http://info.localytics.com/blog/app-user-retention-improves-in-the-us

    View Slide

  55. Your UI vs. Projected Age Distribution, US
    Source: U.S. Census Bureau, 2014 National Projections.

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  60. Onboarding
    http://www.smashingmagazine.com/2014/08/mobile-onboarding-beginners-guide/

    View Slide

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

    View Slide

  62. Show Part of a Second Slide

    View Slide

  63. Show Dots for Pages

    View Slide

  64. Use Actual Arrows, Multiple Entry Points

    View Slide

  65. View Slide

  66. Require Little - or No - Training

    View Slide

  67. Make Navigation Easier

    View Slide

  68. Make Forms Easier to Use

    View Slide

  69. Swipe / Gesture Alternatives and/or Affordances

    View Slide

  70. Make People Happy

    View Slide

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

    View Slide

  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.

    View Slide