The opening talk from CSSConf AU. Video here: http://2016.cssconf.com.au/
We can do so much cool stuff with CSS now! Animations are totally boss. Focus effects are so much fun. We barely even have to worry about browser compatibility any more!
Ok, hold up. What about human compatibility? How does a newbie react to something like an animated input focus effect when trying to fill out an online form? We can probably all fairly easily venture outside our meme bubble and ask a Luddite relative to test our app. But let’s move even further outside the comfort zone. What about people in places with unreliable power and intermittent internet? How does someone who's been introduced to technology through a second-hand cheap Blackberry knock-off powered by a car battery respond to these new and shiny ways of interacting with machines? (Hint: 😱) Do animations hinder or help? Does a flat UI give people enough clues about how to use an interface? How can we make sure that keeping up with the cutting edge won’t alienate people in these fast-growing emerging economies who are just starting to get into the web?
I work for an NGO, designing and building apps for public health projects in West Africa – oftentimes for people that have never used any kind of digital interface before. I’ve done a lot of user research and direct observation of novice tech users and how they navigate apps, input data, and understand screen flows. In this talk, I share what I’ve learnt through this work. I go through specific and practical examples about how newcomers are using all this fancy stuff we’re building, and what that means for the way we design and build interfaces. You’ll leave with a better understanding of how you can optimise for human compatibility while still having fun with css.
Human compatibility error
How novice tech users in West Africa
respond to your fancy CSS
I’m a product designer and front-end developer from
I live in Berlin now
I've worked for some pretty awesome
In some pretty awesome places
On some pretty awesome projects
Now I work with an NGO called eHealth Africa
eHealth Africa works on public health programs and
emergency outbreak response in West Africa.
Field work used to be this...
Now ﬁeld work is more like this...
Some of the projects we
Health facility upgrades
Democratic Republic of Congo
The typical user...
There isn't one ¯\(ϑ)/¯
Many people in West Africa are very comfortable
with digital technology and interfaces.
But many are just starting to come online...
Novice tech users
People who had never used a
desktop or mobile device before
People who had to go from using
pen and paper, to using an app for
A lot of people buy their phones
second-hand. They're often quite
cheap, often knock-offs of well-
Many people don't have power, or
intermittent power. Phone
charging stations are quite
→ Samsung (if you're fancy) !
→ Apple (if you're reeeeeally fancy)
→ scratched up screens
→ glare protection ﬁlms
→ big rugged cases
→ remote and rural areas have
very little cellular coverage
→ broadband internet very
→ data is expensive
Difﬁcult to charge
Finding a working power source is not always easy
If a place has electricity...
... those power points are popular
→ A diesel generator takes around
two hours to charge a
→ Solar power takes 4-5 hours to
charge a smartphone
Touch screens are easier
to use than laptops
Many people have been
introduced to technology via a
Using a laptop/desktop, with input
separated from the screen, is
Where's it at?
If elements are offscreen, they're not
This is a standard way to display
But it's deceptive. How do you
know there's more below the edge
of the device window? Where's the
button to continue, or go back?
And validation errors can get
It's only obvious to us because
we've already learnt it.
A good alternative is to break down long forms into a
"wizard" style interface, with one question per
The select tag is a prime example.
For example, a hierarchical
location select. Using select tags is
an obvious solution, but confusing
to novice users.
This is a clearer alternative
→ make the buttons and actions bigger, clickier,
→ clear labelling
→ combine icons with labels
What does this do?
→ people will click on everything to see what it
→ particularly when elements all look similar,
people will press everything until they ﬁnd
something that reacts.
→ it can be good idea to build in conﬁrmation steps,
or undo options.
Animations are interesting, because they can do so much to
help, and yet so much to hinder.
Animations in form elements = !
→ Animations tend to hinder when it comes to data
input, or task completion.
→ Material UI has some great guidelines on how to
best use motion and animation.
→ However, Material UI has some form ﬁeld
animations that confuse users.
Animations to describe spatial model = ❤
Animations really shine when they are used to
illuminate the spatial model of an app.
Use left/right, up/down animations to remind the
user where they are, and where they are going.
Consistency is key
Consistency in UI and navigation elements help non-
literate and low-literate people learn how to use
apps by rote memorisation.
If you use a forwards / backwards
... don't disturb that pattern here.
Make it interesting
Introduce elements that give users
a sense of progress, or fun, or
Ok ﬁne. Borrow.
These apps are all ubiquitous. If in doubt, emulate
the navigation patterns and UI patterns common to
The next billion
Emerging economies present a huge opportunity in
terms of new audiences.
African tech consumers
are demanding and
They want clear and
reliable mobile solutions
The same things matter
The things that matter to technology consumers
here are the things matters to people in West Africa.
They just have to be way more creative about how
they access it. They want to communicate, connect,
listen to music, take photos.
Resource-constrained environments teach us a lot
as designers and makers.
Strip everything back to
Know your users
Empathy and curiosity
are at the heart of design
!! Thank you !!