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

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
Tweet

More Decks by Ally Long

Other Decks in Technology

Transcript

  1. View Slide

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

    View Slide

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

    View Slide

  4. THE NEXT BILLION

    View Slide

  5. THE NEXT BILLION

    View Slide

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

    View Slide

  7. Europe
    80% connected

    View Slide

  8. USA
    75% connected

    View Slide

  9. Australia
    85% connected

    View Slide

  10. Canada
    88% connected

    View Slide

  11. The Next Billion will connect from cities in emerging
    economies – Lagos, São Paulo, New Delhi, Nairobi.

    View Slide

  12. These markets have much
    lower rates of connectivity.

    View Slide

  13. Mexico & Brazil
    50% connected

    View Slide

  14. South Asia
    24% connected

    View Slide

  15. Sub-Saharan Africa
    22% connected

    View Slide

  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.

    View Slide

  17. Cheap smartphones are widely
    available from street vendors.

    View Slide

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

    View Slide

  19. This is opening up new worlds of knowledge,
    communication, and opportunity for many people.

    View Slide

  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.

    View Slide

  21. What can we do to keep lowering the barriers?

    View Slide

  22. So... what insight does an Australian-born, German-
    resident person have to offer on this topic?

    View Slide

  23. I'm Ally Long
    @allyelle

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  27. I've worked on programs for vaccine delivery, polio
    eradication, Ebola response, and African Sleeping
    Sickness.

    View Slide

  28. The issues are grave and often urgent, and the technical
    challenges were significant, but fascinating.

    View Slide

  29. Mapping un-surveyed areas...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. View Slide

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

    View Slide

  35. View Slide

  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.

    View Slide

  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.

    View Slide

  38. We're working on tools to get life-saving vaccines...

    View Slide

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

    View Slide

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

    View Slide

  41. It’s made challenging by poor
    infrastructure, unreliable power
    and connectivity, fragmented
    processes, and constant states
    of emergency.

    View Slide

  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.

    View Slide

  43. The typical tech user in Africa...

    View Slide

  44. Of course there isn't one.

    View Slide

  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.

    View Slide

  46. Typical devices

    View Slide

  47. Smartphones often look something like this...

    View Slide

  48. ... or this...

    View Slide

  49. ... or this.

    View Slide

  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)

    View Slide

  51. Device condition
    — scratched up screens
    — cracked screens
    — low resolution screens
    — glare protection films
    — rugged cases

    View Slide

  52. Charging !
    Finding a working power source is not always easy –
    sometimes actually very hard. Even if you have
    electricity, power outages are frequent.

    View Slide

  53. If a building in a community has electricity...

    View Slide

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

    View Slide

  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

    View Slide

  56. Connectivity !

    View Slide

  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

    View Slide

  58. It's vital to make your product
    offline-friendly.

    View Slide

  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.

    View Slide

  60. View Slide

  61. Latency
    Even when you do have a connection, it can be
    slooooooow.

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  65. Touch screens are easier to use than laptops

    View Slide

  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

    View Slide

  67. Maps are not widely used

    View Slide

  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.

    View Slide

  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.

    View Slide

  70. Rather than having a long form...

    View Slide

  71. Try splitting it over several steps.

    View Slide

  72. Avoid concealed elements in general
    A good example here is the select tag. People
    everywhere find those hard to use.

    View Slide

  73. Rather than using select tags...

    View Slide

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

    View Slide

  75. View Slide

  76. Good affordance is vital
    — make the buttons and actions bigger, clickier, more
    obvious
    — clearly label things
    — combine icons with labels

    View Slide

  77. View Slide

  78. What does this do?

    View Slide

  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.

    View Slide

  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.

    View Slide

  81. Animations in form elements = !

    View Slide

  82. Animations to describe a spatial model = !

    View Slide

  83. View Slide

  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.

    View Slide

  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.

    View Slide

  86. Gamification elements give people clear feedback when
    they're on the right path.

    View Slide

  87. Steal!

    View Slide

  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

    View Slide

  89. View Slide

  90. Test on low-end devices

    View Slide

  91. Engage with local tech ecosystems

    View Slide

  92. Be curious, have empathy.

    View Slide

  93. But do the research.

    View Slide

  94. African tech consumers are
    demanding and informed.

    View Slide

  95. They want clear and reliable
    mobile solutions.

    View Slide

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

    View Slide

  97. View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. Strip everything back to the
    essentials.

    View Slide

  102. Know your users.

    View Slide

  103. Be resourceful.

    View Slide

  104. View Slide

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

    View Slide

  106. Thank you.
    ! @allyelle

    View Slide