Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Ally Long

November 30, 2016

More Decks by Ally Long

Other Decks in Technology


  1. Hi!

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

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

    quite cheap, often knock-offs of well- known brands.
  4. Android → Huawei → Lenovo → LG → Samsung (if

    you're fancy) ! → Apple (if you're reeeeeally fancy)
  5. Lack of connectivity → remote and rural areas have very

    little cellular coverage → broadband internet very uncommon → data is expensive
  6. → A diesel generator takes around two hours to charge

    a smartphone → Solar power takes 4-5 hours to charge a smartphone
  7. Many people have been introduced to technology via a smartphone.

    Using a laptop/desktop, with input separated from the screen, is much slower.
  8. 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.
  9. A good alternative is to break down long forms into

    a "wizard" style interface, with one question per screen.
  10. For example, a hierarchical location select. Using select tags is

    an obvious solution, but confusing to novice users.
  11. Proper affordance → make the buttons and actions bigger, clickier,

    more obvious → clear labelling → combine icons with labels
  12. → 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.
  13. → 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.
  14. Consistency in UI and navigation elements help non- literate and

    low-literate people learn how to use apps by rote memorisation.
  15. 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.
  16. 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.