enter image description here

Im having this big horizontal bar see image above, and want to "guide (read force)" the users from reading the text on the left to clicking the join button on the right. Are there any thoughts on how to originally design this guidance from left to right?

I know the general thoughts on call to action and the principles I've read a lot about in terms of design and page layouts. But the problem is I cannot come up with something better than a join button on the right and I would like to graphically "guide" the user to the right side , so they cannot resist and have to click ;)

2 Answers 2


As most people look at any page, there eyes naturally start on the left and move to the right. This is because of the way that English is oriented, moving left to right. If you look at eye tracking heat maps, you will notice that unless there is something highly noticeable, peoples eyes tend to stay on the left side of the screen, however.

All you need to do to easily guide people to the button is to make it strongly contrast and stand out. You could also include a linear background to draw people from the text over to the button.

Even just an arrow, or a color strip will lead people over. Also I would recommend that the button be about the same size if not bigger than the text block.

You could also make other parts of the site darker, that way after people have looked at the text, the next big thing they look at is the button.

Another way to draw attention to that side of the screen would be to add motion and animation. Even a simple animation on the button is much more noticeable than a static button. Don't go to crazy though with motion and shaking, that reminds people of advertisements.

  • 2
    NO NO NO FOR THE LOVE OF LITTLE GREEN APPLES NO ANIMATION PLEASE! Not just for the annoyance factor -- "reminding people of advertisements" is properly called "banner blindness," and yes, if your button moves or blinks, people will think it's an ad and ignore it. Contrast yes, size yes, color yes. But not movement. Jun 22, 2012 at 10:20
  • I didnt say movement like shaking or flashing. I meant very subtle animation. Jun 22, 2012 at 10:52
  • Sorry, when it comes to animation, any movement is as subtle as a hand grenade in a barrel of oatmeal. :) Jun 22, 2012 at 11:40
  • A barrel of oatmeal is the perfect hiding place for a hand grenade. Works for cannon balls and gunpowder, too. Ask any highlander... :-D Jun 22, 2012 at 20:09

The first problem with your layout isn't the left-to-right reading order. It's that there is a vast, empty ocean between the text and the box. The second is that neither the top, the center nor the bottom of the box align with the top, center or bottom of your text.

The result is that they just aren't visually connected, so they look like two completely separate items.

Design the whole -- text and button -- as a single item. Make them a single horizontal composition (squinting your eyes to blur the lettering will help you "see" the whole, independent of the parts) with the first initial cap of the text as the START and the button as the STOP, with no big gap between text and button.

If the black represents your whole page background, that's as far as you need go. If this will be a banner with a background different from its surroundings, take the additional step of giving the rectangle of text-plus-button an even set of top, right, bottom and left margins within the banner so the whole looks coherent.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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