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

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.

06e80383d2d986736e8a7267b33c2d4d?s=128

Ally Long

June 14, 2018
Tweet

Transcript

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

  2. Ally Long Field Intelligence @allyelle Field Intelligence

  3. There is a huge contrast between the experience of digital

    technology in Silicon Valley, and the experience in emerging markets. @allyelle Field Intelligence
  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
  5. the next billion @allyelle Field Intelligence

  6. the next billion @allyelle Field Intelligence

  7. Europe 80% connected @allyelle Field Intelligence

  8. USA 75% connected @allyelle Field Intelligence

  9. Canada 88% connected @allyelle Field Intelligence

  10. Australia 85% connected @allyelle Field Intelligence

  11. The next billion will connect from cities like Lagos, São

    Paulo, New Delhi, & Nairobi. @allyelle Field Intelligence
  12. Mexico & Brazil 50% connected @allyelle Field Intelligence

  13. South Asia 24% connected @allyelle Field Intelligence

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

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

  16. @allyelle Field Intelligence

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

  18. @allyelle Field Intelligence

  19. In Nigeria, 300MB of mobile data costs around 500 Naira.

    (USD $1.40) @allyelle Field Intelligence
  20. Access to the internet is opening up new worlds of

    knowledge, communication, and opportunity for many people. @allyelle Field Intelligence
  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
  22. @allyelle Field Intelligence

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

    Field Intelligence
  24. @allyelle Field Intelligence

  25. @allyelle Field Intelligence

  26. @allyelle Field Intelligence

  27. @allyelle Field Intelligence

  28. @allyelle Field Intelligence

  29. @allyelle Field Intelligence

  30. @allyelle Field Intelligence

  31. @allyelle Field Intelligence

  32. @allyelle Field Intelligence

  33. @allyelle Field Intelligence

  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
  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
  36. It’s made challenging by poor infrastructure, unreliable power and connectivity,

    fragmented processes, and constant states of emergency. @allyelle Field Intelligence
  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
  38. @allyelle Field Intelligence

  39. The context @allyelle Field Intelligence

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

    Intelligence
  41. Typical hardware Mobile & touch devices vastly outnumber desktops &

    laptops. @allyelle Field Intelligence
  42. @allyelle Field Intelligence

  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
  44. Mobile devices are king @allyelle Field Intelligence

  45. @allyelle Field Intelligence

  46. @allyelle Field Intelligence

  47. @allyelle Field Intelligence

  48. Android, almost always ↪ Huawei ↪ Lenovo ↪ Tecno ↪

    Motorola ↪ LG ↪ Samsung (if you're fancy) ↪ Apple (if you're reeeeeally fancy) @allyelle Field Intelligence
  49. @allyelle Field Intelligence

  50. Device condition ↪ scratched up screens ↪ cracked screens ↪

    low resolution screens ↪ glare protection films ↪ rugged cases @allyelle Field Intelligence
  51. @allyelle Field Intelligence

  52. Power Finding a working power source can be difficult. Even

    if you have electricity, power outages are frequent. @allyelle Field Intelligence
  53. @allyelle Field Intelligence

  54. @allyelle Field Intelligence

  55. @allyelle Field Intelligence

  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
  57. Phones are often turned off. To save battery and data,

    people often turn off their phones. @allyelle Field Intelligence
  58. Network Connectivity is never guaranteed. @allyelle Field Intelligence

  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
  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
  61. UX framework @allyelle Field Intelligence

  62. UX framework ↪ Discoverability ↪ Affordance ↪ Destructive actions ↪

    Maps ↪ Animations ↪ Gestures ↪ Offline work ↪ Consistency ↪ Borrowing conventions @allyelle Field Intelligence
  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
  64. Rather than having a long form... @allyelle Field Intelligence

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

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

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

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

    @allyelle Field Intelligence
  69. @allyelle Field Intelligence

  70. Good affordance is vital ↪ make the buttons and actions

    bigger, clickier, more obvious. ↪ clearly label things. ↪ combine icons with labels. @allyelle Field Intelligence
  71. @allyelle Field Intelligence

  72. What does this do? @allyelle Field Intelligence

  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
  74. Don't rely on maps being widely understood. @allyelle Field Intelligence

  75. Try using written directions instead of or in addition to

    maps. @allyelle Field Intelligence
  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
  77. Animations in form elements = @allyelle Field Intelligence

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

  79. @allyelle Field Intelligence

  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
  81. It's vital to make your product offline-friendly. @allyelle Field Intelligence

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

  84. Latency Even when you do have a connection, it can

    be slooooooooooooooow. @allyelle Field Intelligence
  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
  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
  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
  88. Gamification elements give people clear feedback when they're on the

    right path. @allyelle Field Intelligence
  89. Steal! @allyelle Field Intelligence

  90. Or borrow... If in doubt, emulate the navigation patterns and

    UI patterns common to widely-used apps. ↪ Facebook ↪ Whatsapp ↪ Gmail @allyelle Field Intelligence
  91. @allyelle Field Intelligence

  92. First steps @allyelle Field Intelligence

  93. First steps to including emerging markets ↪ Test on low-end

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

  95. Engage with local tech ecosystems @allyelle Field Intelligence

  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
  97. Be curious, have empathy. @allyelle Field Intelligence

  98. But do the research. @allyelle Field Intelligence

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

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

  101. The same things matter ↪ Communication ↪ Connection ↪ Information

    ↪ Opportunity @allyelle Field Intelligence
  102. @allyelle Field Intelligence

  103. @allyelle Field Intelligence

  104. @allyelle Field Intelligence

  105. @allyelle Field Intelligence

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

  107. Know your users. @allyelle Field Intelligence

  108. Be resourceful. @allyelle Field Intelligence

  109. @allyelle Field Intelligence

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

    Field Intelligence
  111. Listen to their voices. @allyelle Field Intelligence

  112. Thank you. ! @allyelle