I recently visited my favorite designer’s portfolio and was aghast that he too was making an avoidable error in designing for mobile. A normal user will find nothing wrong with design below:
As a designer or common user can you spot what usability problem the designer has created?
Think hard ? Still not getting it ?
Now lets see the context of using this app .
This persona say Rita, 24 ( 155cm tall ) is trying to book a bus ticket on the GO. Most likely she is in a crowded space. She is holding the mobile in her right hand.and a shake in another.
What really happens ?
She struggles to tap the top area of mobile .
Why am I so harsh in defining the usage scenario ?
If the strength of a chain is the strength of its weakest link, then usability of an app is only as good as how it works in its most demanding situation.
So in a tough scenario, this is how women like to use their phone.
Why does single hand usage matter ?
Have a look at the regions of cellphone Rita’s thumb can reach below.
Its tough for Rita to reach the top zones to tap with her thumb.
Also, the red zone keeps getting bigger as she moves to bigger phones like iPhone 6s ( On far right)
Why do our designers and developers make this mistake ?
Most of us non Arabic folks start to read our books from top left and move to right and then down.
This habit persisted in the way we designed our web. We kept the most significant content near top left.
So, most forms have first field (And most important trigger on Top left). This worked satisfactorily as mouse cursor was not anchored or tethered to bottom right just like a right hand. A flick, often got the pointer on top left.
This however is next to impossible for Rita to tap on top right with her thumb in one hand grip.
How does she handle it ?
She loosens her grip on the phone, tries to push the top of phone down ( Or moves her grip up ). During this instant, the phone is very loosely held. A small shake, push or lapse of control and the phone crashes on ground, breaking the USD 70 screen.
What is the way out ?
- Be conscious of the areas Rita can tap(green zones). Put all important tappable actions in that green area.
- Let only some tappable actions spill over to difficult zone ( Orange)
- Utilize the inaccessible areas for displaying information which aids user to decide the tappable action. Use red zone as display areas.
- Create a set of design templates which act a a visual guide to designers for placing various visual elements
What is the conclusion ?
When designing for touch devices, break free from the book or web screen mental makeup and be very conscious of placing tappable actions in the green zones .
What is the moral of story ?
Look at mobile and touch based apps from a different angle of human ergonomics than what you do for web.