Mobile menu buttons and the ‘Baby Feeding Usability Test from Hell’
I’ve just walked into a room full of parents with their newborns. It’s feeding time. Some are crying and struggling. It’s a little…
I’ve just walked into a room full of parents with their newborns. It’s feeding time.
Some are crying and struggling. It’s a little cacophonous. The parents are trying to make conversation with one another. A father, who is sitting directly to my right, has been struggling to wind his baby. A little cherub has suddenly exploded all over her mother. It’s turning into an unhappy scene. I better get started.
The parents eye my notepad. They are expectant. I stand in the middle of the room, and I thank them for turning up. I tell them that I know there is never a perfect time for this type of test.
So I begin.
I ask them to reach for their mobiles. Technically, I have chosen these people because they have smartphones with a screen size bigger than four inches and a newborn. It seems strangely specific, but there is a method to this mayhem.
Even though they’ve been prepared for this, most look exasperated at this early stage. Yes, there is never a good time.
I have chosen these people because they have smartphones with a screen size bigger than 4 inches and a newborn.
What I’m about to ask them to do is something that they likely to do every day — use their phone with one hand while trying to handle a squirming baby in the other. I now tell them to go to an online store I have chosen and go through the buying process. This will involve hitting the landing page, searching for the relevant item (24 box of nappies), add to basket and then purchase, which will also involve filling in card details.
Dumping the baby overboard
After five minutes, almost half of the group have given up without successfully completing the task. Some have stormed out. The same issue is cropping up that I have been spotting over the course of my tests. The users are reaching to the top left-hand corner with their whole body, contorted, almost dumping the baby overboard. It looks hard and it is. They are simply trying to get to the menu.
Obviously, with the added challenge of inputting credit card details, the process gets bogged down in trial and error, validation issues and just frayed nerves.
It’s a case of frantically inputting digits before junior starts to choke.
Some try to put their baby down, but they immediately start to howl.
I see the symptoms: perspiration, nervous facial tick, squinting of eyes, tensions of jaws and shoulders, milk leaking down parent’s neck.
One lady stands up and strikes me and tells me how awful I am.
My ideal situation
I’ll come clean. This is only a thought experiment.
And it would be my ideal scenario for testing mobile experiences.
It’s what I call ‘The Baby Feeding Usability Test from Hell’. If you can make an online task simple enough, while feeding a squirming five-month-old, then you have succeeded in making the web a ‘better’ place.
I would also like to do this test on people feeding goats, washing windows and grooming cats.
If you can make an online task simple enough, while feeding a squirming five month old, then you have succeeded in making the web a ‘better’ place.
It brings into relief that condition I call “iPhone Overstretch”. This happens when the menu item or action button is placed in the top left and worse still, right-hand corner. The menu item usually reveals a side menu that slides out. This is an established pattern and a very good one, except for the placement of the menu icon.
Now before this fictional test began, I would have calculated the average thumb size of this group, along with other variables such as thumb strength, dexterity etc.
Phones with large screens are just too large to have menu items positioned at the top. Do we actually need to buy a Thumb Extension now? And I’m not sure Apple’s Reachability mode is going to really solve the issue.
Just out of reach
What I am highlighting is the fact that this still happens to me every day. It’s frustrating, and doubly frustrating when I build UI interfaces on a daily basis.
On average, the location of the menu button is always at the top left or right.
Companies like Apple seem to be designing for coffee drinking, single, under 30 types. Yes, they’re ‘types’. But I’m sure if you looked at the demographics you’d find that a fair share might be made up of parents, 40-year-olds etc. We’re not outliers. Maybe even goat feeding types. We might not be so rare as you think.
So to keep all this in the forefront of my mind when I’m designing or thinking about products and their eventual use cases, I created a persona of a pained and tired father. Poor soul.
Scott Hurff in his post How to design for thumbs in the Era of Huge Screens shows us a heat map (which I’ve customised slightly) to elucidate the issue of different placements of the menu icon.
You can see the pain points. The menu in the bottom left looks like the best position while the default position top left is the most awkward to get to.
What’s stopping us doing this? I encounter this issue in my work.
Maybe it’s a simple issue to fix. When building responsive or native apps, we need to start putting the nav and actionable controls at the bottom, ideally in the bottom left-hand corner as Scott’s data suggests.
I understand that many frameworks are built with the icon being top, like Foundation and Bootstrap, but with a small bit of customisation, we can get the menus down to where they belong.