Radio button groups with thumbnails

Question

Please advise which of the following approaches is more usable:

1. Switching images, all captions are visible:

2. All images and captions are visible:

3. Swithing captions, all images are visible:

Answer 1

Based on your mockups, I would say that the third is the most usable. The user shouldn't have to worry about which radio button goes with which image. Simply letting them click the image they like best.

Answer 2

I would definitely go with the third option. It is the most intuitive and it flows much better than the second one (we read right to left). The problem with the first one is that it will rely on the users memory to make the best choice and they will have to scroll through them a few times to make the choice they want to.

Answer 3

The important question about which option is best for your users is "What information do they need in order to choose?"

1. Users will choose which item based on the text description.
2. Both the text and image are equally important to the choice.
3. The image is important, but the caption is not.

For example, if the image is a supporing icon to the text, you would pick option 1. If it's a 'choose your favorite picture', you'd pick option 3. And a political cartoon with a text punchline would use option 2, since both parts are critical.

Answer 4

If the choice is amongst the three go for 3rd option (assuming image click is workable in your case). It would be fancy way for a user to choose image (answer) rather then old fashioned radio button. you will also save some good space and explanation.

You can also put the description in image title (but, not a good approach to show data in this way , though) for telling user what that image is for.