User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have designed two options, but would like to get to know which one would you prefer, and why?

Option 1: enter image description here

Option 2: enter image description here

On the basis of your answers and comments, I have made up a new wire. Answering the question: the picture is only an illustrative thing. The webpage uses illustrative photos of product, services, so this page would be kind of empty without a photo. The one on the wireframe is not the final either. - and maybe instead of the 4 radio buttons in the middle there could be a slider.

Option 3. enter image description here

share|improve this question
up vote 4 down vote accepted

If the picture doesn't help them choose the options, it shouldn't be there at all...

If it does help (and the one above is a placeholder), then put it on the right as 'additional information' and clearly indicate which decisions it's aiming to help with. Split vertically with whitespace if necessary and align with the questions on the left so that any association is clear.

share|improve this answer

I prefer the 2nd with the text on the left. People read left to right and I feel the image on the right is just getting in my way, not so much with the 2nd version.

I'm guessing this is just a mockup but I'd defiately try and get a bit more whitespace between the radio buttons.

Also does that image need to be that big? do you even need it. Just feels like its getting in the way and not adding anything.

share|improve this answer
+1 for the fact that it's not just the image but the layout of the options that matters. Image and textual content need to work together – Roger Attrill Dec 13 '11 at 11:15

Option 1 is the correct one.

It is not question of preferences, but neuropsychology. Images are processed easier by right hemisphere, text by the left one. Optic nerves are crossed, so everything what's on the left side of perceived picture goes to the right hemisphere and what's on the right side goes to the left hemisphere.

To be brain-friendly in layout such as yours, you should keep image on the left.

It's widely accepted rule.

share|improve this answer
A source would be nice... – Phil Dec 13 '11 at 11:57
Quick study to proving my point: Psychology of the consumer... There were recent revisions of those studies - I just can't find accurate link. Anyway if you're studying Cognitive Psychology, or HCI in Europe - can't miss it. It's also widely used in Advertising and Interaction Design. – marcintreder Dec 13 '11 at 14:25
Thanks, interesting read (and no, I'm not studying Cognitive Psychology or HCI ;-)) – Phil Dec 13 '11 at 14:46

This depends on the relationship between the image and the calculator. Does the user need to view the image before using the calculator, or does the user need the image to add context?

If the image is a prerequisite to using the calculator, it should be on the left and large as in the first option.

If the image is additional information and not the first item to be viewed following the header, it should placed on the right (as in option 2) and be smaller (as in option 3).

If neither of the above are true, remove the image.

share|improve this answer

Your Answer


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.