Image credit: Anastassia Elias’s Toilet Tube Dioramas
If you're the parent of a young child, you can probably list a hundred different uses for the cardboard tube from inside a toilet paper roll.
Here’s another one—although I promise this activity doesn't require the inconvenience of progeny.
The next time you find yourself at the end of your roll of toilet paper, do me a favour: take that leftover cardboard tube and place it up against your eye, to use as a telescope. Spend some time walking around the house, looking only through the tube—go on, no one will laugh. Honest.
In fact, if you have a tube readily available, give it a go right now. It’s okay, I’ll wait …
Notice what you did? After you washed your hands, I mean. To navigate your way around the house, you moved your head up and down and left to right to take in the entire context of your situation. That’s because the toilet roll tube only lets you see one small part of your world at a time. You compensated for this lack of context by panning around the visual field to build a picture in your mind of your overall surroundings.
Designing for mobile devices is like living life looking through a toilet roll tube.
Because a mobile device screen is so small (they’re getting bigger, but they’re still small), app designers need to strip out the orientation cues that users might find on a conventional website, to leave enough room for the content. What this means is that the following are often missing: nav bars, local navs, breadcrumbs, footers—even logos that would otherwise help users identify where they are and where they can go.
Now, this stripping out of navigation and orientation information delivers an interesting benefit. It means that once a user has found what they are looking for in your app, they are able to focus on the desired content or functionality without distraction. The downside, however is that it's much easier for users to get lost.
There are, however, a few tricks that we can use to mitigate these problems for our users:
- Minimise features.
One way to help people avoid getting lost in your features is to just have less features. Some of the best mobile apps are very clear about what they do, and what they do not do. They are not afraid to strip out unnecessary features. - Create shallow navigation.
When designing for mobile I tend to design wider, shallower information architectures. This means that users cannot wander too far from Home, and that they'll find it easier to reorient themselves if they do get lost. - Utilise appropriate animations and transitions.
One way to help users build a mental map of your app (or mobile site) is to use animations and transitions to represent the journey they are taking through your app (this is what you did when you moved your head around when you were looking through the toilet roll.)
A “traditional” transition of replacing one page with another leaves the user guessing—they're forced to try and form their own mental map of the relationship between pages. This experience can be even worse if there is a wait in the middle while a new page downloads.
However, a transition that takes place progressively over a short amount of time (for example, a slide-in menu from off-screen) can help communicate the structure of the app, and do so by taking up a little time, rather than taking up pixels. Such a transition may be a swipe, a pan, a page turn or turnstile—even a fade. The secret is to find the transitions that are the best fit for your app, and use them consistently.
So the next time you’re designing for small screens, think: fewer features, shallower navigation, and more movement.
And in the meantime, keep that toilet roll tube handy for your next mobile app design project … or school craft project.