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.

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
http://www.malektips.com/

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?

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

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…

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:
https://github.com/cloudfour/hideShowPassword

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)

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

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.