Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
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 Apr 15 '13 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 Apr 18 '13 at 0:11

4 Answers 4

up vote 7 down vote accepted

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.

share|improve this answer

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.

share|improve this answer
    
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? –  Lescai Ionel Apr 15 '13 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. Apr 15 '13 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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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