Design "join page" and guide them graphically from left to rightside towards a join button

Question

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 ;)

Answer 1

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.

Answer 2

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.