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.

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
11. eHealth Africa works on public health programs and emergency outbreak response in West Africa.
12. Field work used to be this...
14. Now field work is more like this...
19. Human- centered
20. Some of the projects we work on
21. Ebola response
22. Liberia
23. Sierra Leone
27. Polio vaccination
28. Nigeria
32. Health facility upgrades
33. Guinea
39. Sleeping sickness surveillance
40. Democratic Republic of Congo
45. The typical user...
46. There isn't one ¯\(ϑ)/¯
47. Many people in West Africa are very comfortable with digital technology and interfaces.
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
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
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.
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
78. Proper affordance → make the buttons and actions bigger, clickier, more obvious → clear labelling → combine icons with labels
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.
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.
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 !!