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.

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