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

4 Answers 4


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.


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.

  • +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 Dec 13, 2011 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.

  • 3
    A source would be nice...
    – Phil
    Dec 13, 2011 at 11:57
  • 2
    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. Dec 13, 2011 at 14:25
  • Thanks, interesting read (and no, I'm not studying Cognitive Psychology or HCI ;-))
    – Phil
    Dec 13, 2011 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.

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.