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:

mobile-app

As a designer or common user can you spot what usability problem the designer has created?

NO ?

Think hard ? Still not getting it ?

Now lets see the context of using this app .

rita

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.

Chain.png

So in a tough scenario, this is how women like to use their phone.

singlehand.png

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.

ergonomics of hand.png

Also, the red zone keeps getting bigger as she moves to bigger phones like iPhone 6s ( On far right)multidevices

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 ?

  1. Be conscious of the areas Rita can tap(green zones). Put all important tappable actions in that green area.
  1. Let only some tappable actions spill over to difficult zone ( Orange)
  1. Utilize the inaccessible areas for displaying information which aids user to decide the tappable action. Use red zone as display areas.
  2. 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.

3 thoughts on “How habits drive designers to create bad design for touch devices

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s