$30 off During Our Annual Pro Sale. View Details »

Field-tested interfaces for the next billion – Generate Conf

Ally Long
September 21, 2017

Field-tested interfaces for the next billion – Generate Conf

This talk was given at Generate London, 21 September 2017.

In the tech industry, we’re constantly chasing innovation – the new and the shiny, the slickest UI, the latest framework, an immersive user experience. We’re understandably excited about the possibilities inherent in a world of powerful hand-held devices, super-fast connections, and a user base with the means and the know-how to buy into whatever next big thing we put out there.

But there exists another kind of digital landscape – places where conditions are imperfect, where networks are flawed, where technical literacy is low, where kilobytes are precious; a world where our carefully-crafted digital experiences stutter and crawl and obfuscate and perplex, and ultimately fail. There are billions of people around the world that now have access to connected smart phones, but many can afford only a few megabytes of data here and there, have low-cost, low-specced smartphones, unreliable electricity sources to charge them, and are learning to use digital interfaces for the first time in their lives.

So how can we make sure that keeping up with the cutting edge won’t exclude people in these fast-growing emerging economies? In this talk we’ll go through examples from working with novice tech users in West Africa and discover how they navigate and comprehend interfaces, input data, and understand screen flows. You’ll gain some insight into the context and the constraints, learn how certain UI patterns and conventions hinder or help, and leave with an understanding of how to include these millions of new users in your product thinking.

Ally Long

September 21, 2017

More Decks by Ally Long

Other Decks in Technology


  1. None
  2. Field-tested interfaces for the next billion. ! @allyelle

  3. Who is going to be using our products in the

    coming years?


  6. Most people in the developed world are already connected consumers.

  7. Europe 80% connected

  8. USA 75% connected

  9. Australia 85% connected

  10. Canada 88% connected

  11. The Next Billion will connect from cities in emerging economies

    – Lagos, São Paulo, New Delhi, Nairobi.
  12. These markets have much lower rates of connectivity.

  13. Mexico & Brazil 50% connected

  14. South Asia 24% connected

  15. Sub-Saharan Africa 22% connected

  16. The connectivity rate in these resource-poor countries has lagged, but

    is changing rapidly. The cost of mobile data is decreasing, and the availability of cheap handsets is increasing.
  17. Cheap smartphones are widely available from street vendors.

  18. In Nigeria, 300MB of mobile data can be bought for

    around 500 Naira.
  19. This is opening up new worlds of knowledge, communication, and

    opportunity for many people.
  20. But the barrier to entry still exists. Many people can

    afford only a few megabytes of data here and there, have low-cost, low-specced smartphones, unreliable electricity sources to charge them, and some are learning to use digital interfaces for the first time in their lives.
  21. What can we do to keep lowering the barriers?

  22. So... what insight does an Australian-born, German- resident person have

    to offer on this topic?
  23. I'm Ally Long @allyelle

  24. I’m a product designer and front-end developer.

  25. I've worked on shiny brand experiences at creative agencies.

  26. But I've also worked with NGOs and non-profits on software

    for public health and markets in West Africa, with partners like UNICEF, WHO, the Gates Foundation, the Institute of Tropical Medicine, and various West African governments.
  27. I've worked on programs for vaccine delivery, polio eradication, Ebola

    response, and African Sleeping Sickness.
  28. The issues are grave and often urgent, and the technical

    challenges were significant, but fascinating.
  29. Mapping un-surveyed areas...

  30. Designing mobile data collection tools for novice tech users...

  31. The logistical challenges of remote, unconnected locations...

  32. And doing a lot of this at scale across various

  33. None
  34. Now I'm working with a company called Field Intelligence.

  35. None
  36. We try to take on big public health problems in

    Nigeria, Central African Republic and beyond, and to prove that they can be solved with the right technology, the right design, and the right market-shaping approaches.
  37. Our approach is on solving problems on the ground, collecting

    insights in the field, being in touch with real users and real problems in hard places.
  38. We're working on tools to get life-saving vaccines...

  39. through a cold chain system at various levels of government...

  40. ... to the children in remote settlements that need them

    the most.
  41. It’s made challenging by poor infrastructure, unreliable power and connectivity,

    fragmented processes, and constant states of emergency.
  42. How do we begin to approach these problems in our

    products? Poor connectivity, a resource-constrained environment, and a user base with a large portion of novice users – the scale of these challenges are hard to grasp when working in a European context.
  43. The typical tech user in Africa...

  44. Of course there isn't one.

  45. Tech users in Africa fall across a broad spectrum of

    experience, resources, education, and tech savviness. Many people in West Africa are skillful users of technology. There are thriving tech scenes in many cities. But design for a baseline experience.
  46. Typical devices

  47. Smartphones often look something like this...

  48. ... or this...

  49. ... or this.

  50. Common smartphone brands ! Mostly Android, mostly cheap hardware. —

    Huawei — Lenovo — Tecno — Motorola — LG — Samsung (if you're fancy) ! — Apple (if you're reeeeeally fancy)
  51. Device condition — scratched up screens — cracked screens —

    low resolution screens — glare protection films — rugged cases
  52. Charging ! Finding a working power source is not always

    easy – sometimes actually very hard. Even if you have electricity, power outages are frequent.
  53. If a building in a community has electricity...

  54. ... its power points will be very popular.

  55. Charging can be slow — A diesel generator takes around

    two hours to charge a smartphone — Solar power takes 4-5 hours to charge a smartphone
  56. Connectivity !

  57. Connectivity ! — remote and rural areas have very little

    cellular coverage — even in built-up areas and cities, network coverage is often poor — broadband internet / wifi very uncommon — buying mobile data is still expensive for many people
  58. It's vital to make your product offline-friendly.

  59. Offline-first Your app should be reliable and work as much

    as possible independently from an internet connection. Build in graceful degradations for users without a stable network connection.
  60. None
  61. Latency Even when you do have a connection, it can

    be slooooooow.
  62. Optimise for responsive UIs — Don't tie UI elements to

    long-running operations such as network requests — Don’t block navigation — Loading indicators (spinners, progress bars) should be inline
  63. Slimmed-down browsing – Opera Mini is popular It is the

    lightest in terms of data usage and system requirements. Make sure it's part of your testing process.
  64. Phones are o!en turned off To save battery and data,

    people often turn off their phones. This means background processes are tricky. You need to be smart about the way you use service workers.
  65. Touch screens are easier to use than laptops

  66. When trialling a project on laptop and tablet devices, we

    found that people found the tablet version easier to use because: — a lot of people had never used laptops before — inputs were separate from the screen — it was harder to carry around and charge
  67. Maps are not widely used

  68. Gesture-based navigation... ! Gestures like swiping, pull down, pull up

    are very unintuitive to a novice tech user. Buttons are easier to understand. People learnt these fairly quickly, once introduced to the concept – but it's safer to use gestures as shortcuts to actions that are also accessible by other means.
  69. Where's it at? ! If elements are offscreen, they're not

    discoverable. Where possible, it can be good to use only the visible area of the screen as your canvas, especially if the user needs to take action on the screen.
  70. Rather than having a long form...

  71. Try splitting it over several steps.

  72. Avoid concealed elements in general A good example here is

    the select tag. People everywhere find those hard to use.
  73. Rather than using select tags...

  74. Try out other, more visible, options – like radio buttons.

  75. None
  76. Good affordance is vital — make the buttons and actions

    bigger, clickier, more obvious — clearly label things — combine icons with labels
  77. None
  78. What does this do?

  79. People often tap on everything, just to see what it

    does. It's usually a good idea to build in confirmation dialogues for destructive actions.
  80. Animations Animations can be very illuminating, or they can confuse

    the hell out of users. Be mindful about where and how you use them.
  81. Animations in form elements = !

  82. Animations to describe a spatial model = !

  83. None
  84. Consistency is key A consistent UI helps people learn and

    memorise, and has particular advantages for low-literate or non-literate people learning via rote memorisation.
  85. Make it fun There's no need to be boring. Inserting

    personality into your app makes it fun to use and encouraging to learn. Introducing elements of gamification incentivises people to return to your app.
  86. Gamification elements give people clear feedback when they're on the

    right path.
  87. Steal!

  88. Ok fine. Borrow. There are certain apps that almost everyone

    in Africa uses. If in doubt, look at the navigation patterns and UI patterns common to those apps and emulate them. — Facebook — Whatsapp — Gmail
  89. None
  90. Test on low-end devices

  91. Engage with local tech ecosystems

  92. Be curious, have empathy.

  93. But do the research.

  94. African tech consumers are demanding and informed.

  95. They want clear and reliable mobile solutions.

  96. The same things ma!er — Communication — Connection — Information

    — Opportunity
  97. None
  98. None
  99. None
  100. None
  101. Strip everything back to the essentials.

  102. Know your users.

  103. Be resourceful.

  104. None
  105. “The Next Billion” is the future of the internet.

  106. Thank you. ! @allyelle