I'm trying to decide between these two layouts. For some reason, putting the pictures on the right makes it feel really funky but I can't explain why. Someone suggested that's it's because we read from left to right. Can someone offer a better explanation ? photos on the right

photos on the left

  • 3
    I don't know for definite (hence this being a comment not an answer) but I would hypothesize that the issue is because the alignments with the content inside that column aren't consistent in the second example. In the top image both the text and the images are aligned left, whereas on the second image the text is aligned left but the image is aligned right. Perhaps if you aligned the text right in the second image it would work better.
    – JonW
    Commented Apr 15, 2013 at 14:09
  • I only noticed the difference after reading the replies. Visually, I prefer the second because the text on the left provides a divider between the main image section and the related articles images.
    – uxzapper
    Commented Apr 18, 2013 at 0:11

4 Answers 4


We read from left to right. It's so ingrained you can't really help starting at the top left to process a piece of text. However, we like looking at pictures more. Select boxes in a form do the same thing (perhaps not because we like em more, but rather they're more complex than other form elements): we're drawn to look at them.

Your second example really drags my eye to the right edge of the screen. The very light contrast of the text next to the images only reinforces that. Our eyes really like to move to the right to continue looking at something. However, in your second example there is nothing there. So, in stead, our eyes have to skip over the text next to image to start processing that. Moving from left to right, we again end up at a thumbnail and the edge of the screen. So, again, we have to force our self to skip back to process more of the screen in a zig-zag manner.

Your first example works better because our eyes are almost naturally drawn to each thumbnail, keeping our eyes from leaving the screen.

Basically it's one of the laws of composition. You can make eyes leave the area by putting something really interesting on the right, but a good image keeps eyes bouncing around inside it. A similar thing happens for instance when you put a person on the right edge of a photograph and have him looking to the right: it's so natural to try to look at what that person is looking at we almost immediately stop looking at the photograph.


A couple reasons it might be feeling 'funky':

  • All native/default(?) iOS apps use the left side for the menu/navigation hierarchy and the right side is left for content, which is opposite of what you're doing here.

  • Like you mentioned, we read enlgish from left-to-right and here you see image and then content, and then when you move down, content again. Sort-of de-emphasizes the image part here. Adding a bit more to this point: Since there is white space in the background of the image and the text panel is a light grey background; whenever you read one line and go down to find the beginning of the second line, your eyes are distracted to the left since it is not a clear differentiation.

  • I might be pedantic, but, you might want to align the direction of the images. Some bikes are pointing right and some, left. Which can be a little disorienting.

  • point 1: the main purpose of the "control" is to offer additional information - it's based on the facebook app's friends/chat thingy, and it disappears in portrait mode; there is another "classic" drawer control on the left for navigation point 2: is finding the next line an issue in the first image as well? Commented Apr 15, 2013 at 13:59
  • Facebook does 2 panels (on the iphone atleast) left slide-in panel is navigation and right slide-in panel is chat. Finding the next line is easier in the first image since you have thumbnails to break flow.
    – rk.
    Commented Apr 15, 2013 at 14:02

I'd like to propose an alternative answer :

The design looks strange with the information on the right due to mismatched proportions and unbalanced negative space.

The overall design is not framed in a way that contains the information in a pleasing layout. Try using thirds or the golden ratio to get the proportions right (they're essential the same heuristic).

The white (empty) space in the bottom right is out of balance. Look at the other places you have white space, and (top right, below the picture, and top left around the bike). The white space is neither symmetrical nor asymmetrical. Make the white space look intentional.

As a side note, there's a great resource on the paradox of white space here. It is an opinion piece, that is well supported by the current understanding of the effects of visual acuity on cognitive processing. In short, it requires more energy to observe complex images, so we are physiologically drawn to observing simple images. But in terms of cognition, we are drawn to complex images - as simple images are not stimulating. Striking the balance (and using white - a full spectrum light) satisfies many of the anatomical triggers for complexity, without engaging the physiological functions for complexity.


Its funny you posted this because it involves something I noticed today. For the pages I view these days, the right hand side is riddled with useless and ridiculous ads. I've become accustomed to completely ignoring the right side of a page

Don't know if this has anything to do with the "feel" or not, but it was the first thing that came to my mind.

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.