Responsive Design and Development "Gotchas"

Slide 1

Slide 1 text

Responsive Design and Development “Gotchas” @malekontheweb

Slide 2

Slide 2 text

X X X X

Slide 3

Slide 3 text

Do Frameworks Solve Everything?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Android Device Fragmentation

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

“Common Sense is Not So Common” - Voltaire

Slide 9

Slide 9 text

You Won’t Believe This About Cell Phones!

Slide 10

Slide 10 text

What is Important to Them?

Slide 11

Slide 11 text

? Content ?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

"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

Slide 17

Slide 17 text

Hamburger Menu “Onboarding”

Slide 18

Slide 18 text

Draw an Actual Button

Slide 19

Slide 19 text

Use a Word in the Menu

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Other Options?

Slide 22

Slide 22 text

Provide Actual Links

Slide 23

Slide 23 text

Tab Bar

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Some Frameworks

Slide 26

Slide 26 text

Typing, Swiping, Reading…

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Keep Forms Short

Slide 29

Slide 29 text

Don’t Force a Login When Possible

Slide 30

Slide 30 text

Simplify the Signup Process

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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/

Slide 33

Slide 33 text

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/

Slide 34

Slide 34 text

Password Prompt Masking:

Slide 35

Slide 35 text

Option to Show Password?

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Keep Surveys Short!

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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/

Slide 42

Slide 42 text

No Huge Menus - Or Help Navigate

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Google Accounts: Desktop & Mobile

Slide 46

Slide 46 text

Automate!

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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/

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Show Part of a Second Slide

Slide 63

Slide 63 text

Show Dots for Pages

Slide 64

Slide 64 text

Use Actual Arrows, Multiple Entry Points

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Require Little - or No - Training

Slide 67

Slide 67 text

Make Navigation Easier

Slide 68

Slide 68 text

Make Forms Easier to Use

Slide 69

Slide 69 text

Swipe / Gesture Alternatives and/or Affordances

Slide 70

Slide 70 text

Make People Happy

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

• 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.