7

Say I have a list of courses on a mobile device (black square), and a user makes a touch interaction on said course (red circle), which of the following locations would their eye most likely go?

I'm going to have 2 buttons appear after the touch interaction, "View more details" and "add to cart", and I'm trying to figure out what would be the best place to put "add to cart" button to give it the most attention.

enter image description here

  • 2
    What kind of interaction? A tap? With what hand? Or a swipe? In what direction? I would guess these matter. – Bergi Oct 2 '14 at 22:57
7

In order to answer this question you should conduct eye tracking studies. However, Google kind of has an answer already by describing a 'meaningful transition' in their design guidelines, especially 'hierarchical-timing' (see link below).

http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing

They show a video (the one labeled as 'Do') in which they show an animation to guide the user to a certain location. Thus the layout builds-up from the left to the right.

So basically, besides guessing or researching this, you could also help them to focus on your button, since you said that you show the buttons after pressing, you could try to make them appear in order.

4

It doesn't matter much (because you're animating).

Perhaps it is important to mention that as you use animation for the buttons, visual cognition has it that the effect of their position is likely to be minute.

This is due to the fact that motion (animation) is the most effective way to draw people's attention - it is very hard for the brain to ignore. You can read more about it in this UX.SE answer.

Combined with dirk's excellent idea (showing first the more details and then the add to cart one), I think it'll be job done.

Mind the thumb

However, do consider that the thumb may cover parts of the screen, so possibly top is better than bottom.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.