Human Compatibility Error: How novice tech users in West Africa respond to your fancy CSS

06e80383d2d986736e8a7267b33c2d4d?s=47 Ally Long
November 30, 2016

Human Compatibility Error: How novice tech users in West Africa respond to your fancy CSS

The opening talk from CSSConf AU. Video here: http://2016.cssconf.com.au/

We can do so much cool stuff with CSS now! Animations are totally boss. Focus effects are so much fun. We barely even have to worry about browser compatibility any more!

Ok, hold up. What about human compatibility? How does a newbie react to something like an animated input focus effect when trying to fill out an online form? We can probably all fairly easily venture outside our meme bubble and ask a Luddite relative to test our app. But let’s move even further outside the comfort zone. What about people in places with unreliable power and intermittent internet? How does someone who's been introduced to technology through a second-hand cheap Blackberry knock-off powered by a car battery respond to these new and shiny ways of interacting with machines? (Hint: 😱) Do animations hinder or help? Does a flat UI give people enough clues about how to use an interface? How can we make sure that keeping up with the cutting edge won’t alienate people in these fast-growing emerging economies who are just starting to get into the web?

I work for an NGO, designing and building apps for public health projects in West Africa – oftentimes for people that have never used any kind of digital interface before. I’ve done a lot of user research and direct observation of novice tech users and how they navigate apps, input data, and understand screen flows. In this talk, I share what I’ve learnt through this work. I go through specific and practical examples about how newcomers are using all this fancy stuff we’re building, and what that means for the way we design and build interfaces. You’ll leave with a better understanding of how you can optimise for human compatibility while still having fun with css.

06e80383d2d986736e8a7267b33c2d4d?s=128

Ally Long

November 30, 2016
Tweet

Transcript

  1. Human compatibility error How novice tech users in West Africa

    respond to your fancy CSS
  2. Hi!

  3. I'm Ally @allyelle

  4. I’m a product designer and front-end developer from Melbourne

  5. I live in Berlin now

  6. I've worked for some pretty awesome people

  7. In some pretty awesome places

  8. On some pretty awesome projects

  9. Now I work with an NGO called eHealth Africa

  10. None
  11. eHealth Africa works on public health programs and emergency outbreak

    response in West Africa.
  12. Field work used to be this...

  13. None
  14. Now field work is more like this...

  15. None
  16. None
  17. None
  18. None
  19. Human- centered

  20. Some of the projects we work on

  21. Ebola response

  22. Liberia

  23. Sierra Leone

  24. None
  25. None
  26. None
  27. Polio vaccination

  28. Nigeria

  29. None
  30. None
  31. None
  32. Health facility upgrades

  33. Guinea

  34. None
  35. None
  36. None
  37. None
  38. None
  39. Sleeping sickness surveillance

  40. Democratic Republic of Congo

  41. None
  42. None
  43. None
  44. None
  45. The typical user...

  46. There isn't one ¯\(ϑ)/¯

  47. Many people in West Africa are very comfortable with digital

    technology and interfaces.
  48. None
  49. None
  50. But many are just starting to come online...

  51. Novice tech users

  52. People who had never used a desktop or mobile device

    before
  53. People who had to go from using pen and paper,

    to using an app for their work
  54. A lot of people buy their phones second-hand. They're often

    quite cheap, often knock-offs of well- known brands.
  55. Many people don't have power, or intermittent power. Phone charging

    stations are quite common.
  56. Devices

  57. None
  58. None
  59. Android → Huawei → Lenovo → LG → Samsung (if

    you're fancy) ! → Apple (if you're reeeeeally fancy)
  60. Condition → scratched up screens → glare protection films →

    big rugged cases
  61. None
  62. Lack of connectivity → remote and rural areas have very

    little cellular coverage → broadband internet very uncommon → data is expensive
  63. Difficult to charge Finding a working power source is not

    always easy
  64. If a place has electricity...

  65. ... those power points are popular

  66. → A diesel generator takes around two hours to charge

    a smartphone → Solar power takes 4-5 hours to charge a smartphone
  67. Touch screens are easier to use than laptops

  68. Many people have been introduced to technology via a smartphone.

    Using a laptop/desktop, with input separated from the screen, is much slower.
  69. Where's it at? If elements are offscreen, they're not discoverable.

  70. This is a standard way to display form fields. But

    it's deceptive. How do you know there's more below the edge of the device window? Where's the button to continue, or go back? And validation errors can get complicated. It's only obvious to us because we've already learnt it.
  71. A good alternative is to break down long forms into

    a "wizard" style interface, with one question per screen.
  72. None
  73. Avoid concealed elements

  74. The select tag is a prime example.

  75. For example, a hierarchical location select. Using select tags is

    an obvious solution, but confusing to novice users.
  76. This is a clearer alternative

  77. None
  78. Proper affordance → make the buttons and actions bigger, clickier,

    more obvious → clear labelling → combine icons with labels
  79. None
  80. What does this do?

  81. → people will click on everything to see what it

    does. → particularly when elements all look similar, people will press everything until they find something that reacts. → it can be good idea to build in confirmation steps, or undo options.
  82. None
  83. Animations Animations are interesting, because they can do so much

    to help, and yet so much to hinder.
  84. Animations in form elements = !

  85. → Animations tend to hinder when it comes to data

    input, or task completion. → Material UI has some great guidelines on how to best use motion and animation. → However, Material UI has some form field animations that confuse users.
  86. Animations to describe spatial model = ❤

  87. Animations really shine when they are used to illuminate the

    spatial model of an app.
  88. Use left/right, up/down animations to remind the user where they

    are, and where they are going.
  89. Consistency is key

  90. Consistency in UI and navigation elements help non- literate and

    low-literate people learn how to use apps by rote memorisation.
  91. If you use a forwards / backwards pattern here...

  92. ... don't disturb that pattern here.

  93. Make it interesting

  94. Introduce elements that give users a sense of progress, or

    fun, or achievement.
  95. Steal!

  96. Ok fine. Borrow. → Facebook → WhatsApp → Gmail These

    apps are all ubiquitous. If in doubt, emulate the navigation patterns and UI patterns common to these apps.
  97. The next billion

  98. Emerging economies present a huge opportunity in terms of new

    audiences.
  99. African tech consumers are demanding and informed

  100. They want clear and reliable mobile solutions

  101. The same things matter

  102. The things that matter to technology consumers here are the

    things matters to people in West Africa. They just have to be way more creative about how they access it. They want to communicate, connect, listen to music, take photos.
  103. None
  104. None
  105. None
  106. None
  107. None
  108. Resource-constrained environments teach us a lot as designers and makers.

  109. Strip everything back to the essentials

  110. Know your users

  111. Empathy and curiosity are at the heart of design

  112. !! Thank you !!