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

Field-tested interfaces for the next billion – O'Reilly Fluent

Field-tested interfaces for the next billion – O'Reilly Fluent

Learn about designing and building products for a different kind of digital landscape than many of us are used to – for the billions of people around the world that now have access to connected smart phones, but who can afford only a few megabytes of data here and there, have cheap, low-powered devices, unreliable electricity, and are learning to use digital interfaces for the first time.

Ally Long

June 14, 2018
Tweet

More Decks by Ally Long

Other Decks in Technology

Transcript

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

    View Slide

  2. Ally Long
    Field Intelligence
    @allyelle Field Intelligence

    View Slide

  3. There is a huge contrast between the experience of
    digital technology in Silicon Valley, and the
    experience in emerging markets.
    @allyelle Field Intelligence

    View Slide

  4. But these are the markets that we should be paying
    attention to, because they're the people who will be
    using our products in huge numbers in the coming
    years.
    @allyelle Field Intelligence

    View Slide

  5. the next billion
    @allyelle Field Intelligence

    View Slide

  6. the next billion
    @allyelle Field Intelligence

    View Slide

  7. Europe
    80% connected
    @allyelle Field Intelligence

    View Slide

  8. USA
    75% connected
    @allyelle Field Intelligence

    View Slide

  9. Canada
    88% connected
    @allyelle Field Intelligence

    View Slide

  10. Australia
    85% connected
    @allyelle Field Intelligence

    View Slide

  11. The next billion will connect from cities like
    Lagos, São Paulo, New Delhi, & Nairobi.
    @allyelle Field Intelligence

    View Slide

  12. Mexico & Brazil
    50% connected
    @allyelle Field Intelligence

    View Slide

  13. South Asia
    24% connected
    @allyelle Field Intelligence

    View Slide

  14. Sub-Saharan Africa
    22% connected
    @allyelle Field Intelligence

    View Slide

  15. Availability of cheap
    smartphones has increased.
    @allyelle Field Intelligence

    View Slide

  16. @allyelle Field Intelligence

    View Slide

  17. Cost of cellular data has
    decreased.
    @allyelle Field Intelligence

    View Slide

  18. @allyelle Field Intelligence

    View Slide

  19. In Nigeria, 300MB of mobile
    data costs around 500 Naira.
    (USD $1.40)
    @allyelle Field Intelligence

    View Slide

  20. Access to the internet is
    opening up new worlds of
    knowledge, communication,
    and opportunity for many
    people.
    @allyelle Field Intelligence

    View Slide

  21. 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.
    @allyelle Field Intelligence

    View Slide

  22. @allyelle Field Intelligence

    View Slide

  23. What can we do to keep lowering the barriers?
    @allyelle Field Intelligence

    View Slide

  24. @allyelle Field Intelligence

    View Slide

  25. @allyelle Field Intelligence

    View Slide

  26. @allyelle Field Intelligence

    View Slide

  27. @allyelle Field Intelligence

    View Slide

  28. @allyelle Field Intelligence

    View Slide

  29. @allyelle Field Intelligence

    View Slide

  30. @allyelle Field Intelligence

    View Slide

  31. @allyelle Field Intelligence

    View Slide

  32. @allyelle Field Intelligence

    View Slide

  33. @allyelle Field Intelligence

    View Slide

  34. We try to take on big public health problems in
    Nigeria, Kenya and beyond, and to prove that they
    can be solved with the right technology, the right
    design, and the right market-shaping approaches.
    @allyelle Field Intelligence

    View Slide

  35. 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.
    @allyelle Field Intelligence

    View Slide

  36. It’s made challenging by poor
    infrastructure, unreliable
    power and connectivity,
    fragmented processes, and
    constant states of emergency.
    @allyelle Field Intelligence

    View Slide

  37. 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 or American
    context.
    @allyelle Field Intelligence

    View Slide

  38. @allyelle Field Intelligence

    View Slide

  39. The context
    @allyelle Field Intelligence

    View Slide

  40. The context
    ↪ Hardware
    ↪ Power
    ↪ Network
    @allyelle Field Intelligence

    View Slide

  41. Typical hardware
    Mobile & touch devices vastly
    outnumber desktops & laptops.
    @allyelle Field Intelligence

    View Slide

  42. @allyelle Field Intelligence

    View Slide

  43. During one trial, we found that:
    ↪ many people had never used laptops before
    ↪ input methods being separate from the screen was
    a source of confusion
    ↪ they were harder to carry around and charge
    ↪ connectivity was via 3G anyway
    @allyelle Field Intelligence

    View Slide

  44. Mobile devices are king
    @allyelle Field Intelligence

    View Slide

  45. @allyelle Field Intelligence

    View Slide

  46. @allyelle Field Intelligence

    View Slide

  47. @allyelle Field Intelligence

    View Slide

  48. Android, almost always
    ↪ Huawei
    ↪ Lenovo
    ↪ Tecno
    ↪ Motorola
    ↪ LG
    ↪ Samsung (if you're fancy)
    ↪ Apple (if you're reeeeeally fancy)
    @allyelle Field Intelligence

    View Slide

  49. @allyelle Field Intelligence

    View Slide

  50. Device condition
    ↪ scratched up screens
    ↪ cracked screens
    ↪ low resolution screens
    ↪ glare protection films
    ↪ rugged cases
    @allyelle Field Intelligence

    View Slide

  51. @allyelle Field Intelligence

    View Slide

  52. Power
    Finding a working power source
    can be difficult. Even if you
    have electricity, power outages
    are frequent.
    @allyelle Field Intelligence

    View Slide

  53. @allyelle Field Intelligence

    View Slide

  54. @allyelle Field Intelligence

    View Slide

  55. @allyelle Field Intelligence

    View Slide

  56. 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.
    @allyelle Field Intelligence

    View Slide

  57. Phones are often turned off.
    To save battery and data, people often turn off their
    phones.
    @allyelle Field Intelligence

    View Slide

  58. Network
    Connectivity is never
    guaranteed.
    @allyelle Field Intelligence

    View Slide

  59. Network
    ↪ remote and rural areas have very little cellular
    coverage.
    ↪ even in built-up areas and cities, network
    coverage is often poor, and often flaky.
    ↪ broadband internet / wifi is uncommon.
    ↪ buying mobile data is still expensive for many
    people.
    @allyelle Field Intelligence

    View Slide

  60. Slimmed-down browsing
    Opera Mini is the lightest
    browser in terms of data usage
    and system requirements. Make
    sure it's part of your testing
    process.
    @allyelle Field Intelligence

    View Slide

  61. UX framework
    @allyelle Field Intelligence

    View Slide

  62. UX framework
    ↪ Discoverability
    ↪ Affordance
    ↪ Destructive actions
    ↪ Maps
    ↪ Animations
    ↪ Gestures
    ↪ Offline work
    ↪ Consistency
    ↪ Borrowing conventions
    @allyelle Field Intelligence

    View Slide

  63. Where's it at?
    If elements are offscreen, they're not discoverable.
    Where possible, use only the visible area of the
    screen as your canvas, especially if the user needs
    to take action on the screen.
    @allyelle Field Intelligence

    View Slide

  64. Rather than having a long form...
    @allyelle Field Intelligence

    View Slide

  65. Try splitting it over several steps.
    @allyelle Field Intelligence

    View Slide

  66. Avoid concealed elements in
    general.
    @allyelle Field Intelligence

    View Slide

  67. Rather than using select tags...
    @allyelle Field Intelligence

    View Slide

  68. Try out other, more visible, options – like radio
    buttons.
    @allyelle Field Intelligence

    View Slide

  69. @allyelle Field Intelligence

    View Slide

  70. Good affordance is vital
    ↪ make the buttons and actions bigger, clickier,
    more obvious.
    ↪ clearly label things.
    ↪ combine icons with labels.
    @allyelle Field Intelligence

    View Slide

  71. @allyelle Field Intelligence

    View Slide

  72. What does this do?
    @allyelle Field Intelligence

    View Slide

  73. 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.
    @allyelle Field Intelligence

    View Slide

  74. Don't rely on maps being widely understood.
    @allyelle Field Intelligence

    View Slide

  75. Try using written directions instead of or in
    addition to maps.
    @allyelle Field Intelligence

    View Slide

  76. Animations
    Animations can be very illuminating, or they can
    confuse the hell out of users. Be mindful about
    where and how you use them.
    @allyelle Field Intelligence

    View Slide

  77. Animations in form elements =
    @allyelle Field Intelligence

    View Slide

  78. Animations to describe a spatial model =
    @allyelle Field Intelligence

    View Slide

  79. @allyelle Field Intelligence

    View Slide

  80. Gesture-based navigation takes time to learn.
    Gestures like swiping and pulling are very
    unintuitive to a novice tech user. People do learn
    them, once introduced to the concept – but it's
    safer to use gestures as shortcuts to actions that
    are also accessible by other means.
    @allyelle Field Intelligence

    View Slide

  81. It's vital to make your
    product offline-friendly.
    @allyelle Field Intelligence

    View Slide

  82. Offline-friendly
    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.
    @allyelle Field Intelligence

    View Slide

  83. @allyelle Field Intelligence

    View Slide

  84. Latency
    Even when you do have a connection, it can be
    slooooooooooooooow.
    @allyelle Field Intelligence

    View Slide

  85. 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.
    @allyelle Field Intelligence

    View Slide

  86. 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.
    @allyelle Field Intelligence

    View Slide

  87. 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.
    @allyelle Field Intelligence

    View Slide

  88. Gamification elements give people clear feedback when
    they're on the right path.
    @allyelle Field Intelligence

    View Slide

  89. Steal!
    @allyelle Field Intelligence

    View Slide

  90. Or borrow...
    If in doubt, emulate the navigation patterns and UI
    patterns common to widely-used apps.
    ↪ Facebook
    ↪ Whatsapp
    ↪ Gmail
    @allyelle Field Intelligence

    View Slide

  91. @allyelle Field Intelligence

    View Slide

  92. First steps
    @allyelle Field Intelligence

    View Slide

  93. First steps to including emerging markets
    ↪ Test on low-end devices
    ↪ Engage locally
    @allyelle Field Intelligence

    View Slide

  94. Test on low-end devices with limited connections
    @allyelle Field Intelligence

    View Slide

  95. Engage with local tech ecosystems
    @allyelle Field Intelligence

    View Slide

  96. Engage with local tech ecosystems
    If you want to bring your product to a new market,
    engage with local tech ecosystem in collecting
    insights right from base level. Engage in a
    meaningful way, including them in strategies and
    policies.
    @allyelle Field Intelligence

    View Slide

  97. Be curious, have empathy.
    @allyelle Field Intelligence

    View Slide

  98. But do the research.
    @allyelle Field Intelligence

    View Slide

  99. African tech consumers are
    demanding and informed.
    @allyelle Field Intelligence

    View Slide

  100. They want clear and reliable
    mobile solutions.
    @allyelle Field Intelligence

    View Slide

  101. The same things matter
    ↪ Communication
    ↪ Connection
    ↪ Information
    ↪ Opportunity
    @allyelle Field Intelligence

    View Slide

  102. @allyelle Field Intelligence

    View Slide

  103. @allyelle Field Intelligence

    View Slide

  104. @allyelle Field Intelligence

    View Slide

  105. @allyelle Field Intelligence

    View Slide

  106. Strip everything back to the
    essentials.
    @allyelle Field Intelligence

    View Slide

  107. Know your users.
    @allyelle Field Intelligence

    View Slide

  108. Be resourceful.
    @allyelle Field Intelligence

    View Slide

  109. @allyelle Field Intelligence

    View Slide

  110. “The next billion” is the
    future of the internet.
    @allyelle Field Intelligence

    View Slide

  111. Listen to their voices.
    @allyelle Field Intelligence

    View Slide

  112. Thank you.
    !
    @allyelle

    View Slide