Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm working on a wizard of sorts that first takes in systems that a client is interested in.

image

As you can see, the selection is full of dead links, since we're not sure if we want to use icons or hi-res images just yet. I guess I'm still pretty stumped on the design direction of this, and how usable this interface is.

Looking for opinions mostly, and my main question is, what is the most optimal way of displaying a range of choices to a user pictorially while indicating that more than one choice can be made?

share|improve this question

1 Answer

up vote 2 down vote accepted

Provided that you have few enough options that they can be displayed together on a single page (like in your screenshot) I think you're off to a great start. It's important that people understand a) that each of these can be toggled by clicking and b) which categories are currently selected.

You've done an excellent job indicating the selection with the large checkbox overlay. The difficulty may come when this is first loaded and it's not clear how it can be used. As a starting point, try fading each item out slightly to indicate a deselected state and then they can "light up" when the mouse hovers over. You may even want to include a small checkbox icon at the corner of each item as a hint for how these should be used.

share|improve this answer
Using the default browser checkbox seems really ugly, even though all the UX answers that I've read seem to insist that users recognize checkboxes as 'multi-option'. dribbble.com/shots/650832-Add-Products-Modal-iPad-App has a really nice custom approach, but I'm not sure I need as much textual labeling. Is the key word 'which' (versus 'what') enough to indicate multiple selection on page load? – actaeon Aug 9 '12 at 17:29
They don't need to be the default browser checkboxes, just something recognizable as a checkbox that communicates the functionality. The Dribbble example you gave does this well. Yours may not have as much textual content, but with a larger font size that same approach would look fine and provide a large clickable target. Using 'which' as opposed to 'what' is a good hint, but it's still best to use something resembling a checkbox. – Mike Wheaton Aug 10 '12 at 11:42

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.