Eye Travel vs. Touchability on Mobile

Question

If we want a user to perform a certain action, we make it easiest for them to select that option compared to any other available option.

For example, think of a pop-up ad, "Do you want to download/install/sign up?"

^{download bmml source – Wireframes created with Balsamiq Mockups}

You want the OK button to be more prominent to encourage users to click it. Some designers would make it larger than the other button. Others rely on eye travel, putting it above or to a certain side of the other.

Please note, I am in the US, where eye travel is left to right. Therefore, if you put the button to the left, it will be the first one that a user sees when scanning the available options, making them more likely to agree without noticing the Cancel button. If you were to put the Cancel button first, then users are more likely to realize that it is an available option and opt out.

(I understand there are many reasons to put the OK/Cancel buttons on the left or right, many of which are discussed in OK/Cancel on left/right?. For the purpose of this question, I am referring to reading left-to-right, so I like the point that Cancel/OK is like asking "No or Yes". However, since I am asking about eye movement, Why 'Ok' Buttons in Dialog Boxes Work Best on the Right makes an excellent point that users might read both options before deciding.)

Now, my question is with mobile devices. An overwhelming majority of people are right-handed (I found figures of 70-90%). Assuming that they would use touch screens with their right hand more often, it would be easiest to click the button closest to your right hand so you don't have to reach your finger or move your arm as far.

But this directly contradicts my point about eye travel. Is there a best order to put OK/Cancel buttons when designing for mobile? What about in countries that read right-to-left?

Answer 1

Assuming that they would use touch screens with their right hand more often, it would be easiest to click the button closest to your right hand so you don't have to reach your finger or move your arm as far.

I think this is a wrong assumption, I'd suggest the article of Steven Hoober How Do Users Really Hold Mobile Devices?

Seeing there are many different ways of holding devices, personally I would primarily focus on one handed usage if you design for mobile as this gives you the most constraints. If it works for one handed usage it will probably also work for the rest.

Answer 2

One can assume that 85% of the people are right-handed and holding there smartphone in their right hand navigating with the thumb. But do we know how many uses only one hand to navigate? Or do they use two hands - holding the smartphone in the left hand navigating with the right pointing finger - sometimes, and in other cases only use the left hand because the user is used to holding phones that way? Problem is - with mobile devices - we don't know.

We have to adress all sorts of navigation techniques. Thus the advice is to follow the convention on each platform, or the convention still evolving on the mobile web. There are often cases where some old convention or ideom travels through the evolution on different devices or the creation of new devices. In this case - stick to the overall convention if you can't find a specific convention from your target device/mobile web, and you'll be safe.

Answer 3

One important point to consider is what the platform conventions are. If all dialogs put OK on the left and Cancel on the right and your app breaks that convention by switching the buttons you will probably find your users mis-clicking a lot.

Answer 4

I would agree with Vincent (based on the research done by Nielsen Norman Group), but would even take it a step forward by saying consistency within the application is probably what is most important here. If you have the "OK" button on the right and then switch it to the left on the next dialog, this inconsistency is what is going to trip users up more than if the application had self-contained consistency.

Answer 5

Don Norman ("father of UX") talked about this fairly often, and finally he posted an article talking about this very big question: do I put ok first or last?

His conclusion was it didn't matter, but what does matter is being consisted throughout your interfaces. Switching the order continuously throughout will cause the biggest problem.

One way of making your button stand out would be to emphasize it more through color, like most applications do. You could also change the size to emphasize even further either path you'd like them to take, or you know they would take.

^{download bmml source – Wireframes created with Balsamiq Mockups}

As for mobile, why not just center the button and make it full width? That way it's easily accessible by both left and right handed people. That's what I do, it and it seems to work fine.

Hope that helps

Answer 6

Don't make it too complex just:

• Avoid dialog popups on mobile as it distracts, interupts flows and increases mental effort. And your popup-ad won't work in terms of CTR because it is annoying.

• Don't use dialogs like "Do you want download/signup/etc" just present one link for it to do.

• Use plattform specific convention for the order of ok/cancel. Check Apple/Android/Win8 styleguide.

• In case of web take what ever you want, but be consistent all the way.

• In web its good practise to highlight your CTA-button and present cancel as a textlink.

• Try to just give one button for the offered action centered and stretched at bottom. If not wanted one can perform a back or up click.