3

I am trying to devise a mechanism whereby a user can select only two options at a time in order to display summary information for their selections.

It looks like this at present (actual content cannot be disclosed for confidentiality reasons):

enter image description here

So, by default, the first two 'items' are selected. The checkboxes for the rest of the items are disabled (although this is not very visually clear with the Axure widget I've used). To select a different item, the user has to first deselect one of the two items. Summary information for the selected items is displayed beneath the selection mechanism in cards (so, in the image, Item 1 and Item 2). The user can then drill down into the item by clicking 'Open'. They can then configure the item on a different screen and, after returning to this screen, the item will then display as 'configured'. Configuration is indicated with the little dots on the cards and on the selection mechanism (grey for not configured, green for configured) and a label:

enter image description here

My problem is, when there are more than 5 items (the most there can be is 9-10), I run out of horizontal space. At the moment, I've used a dropdown menu to display the other items. This is not ideal though, because when you select one of the items in the dropdown menu, you cannot see that it's been selected. As below. If you select Item 6, for example, and close the menu, that selection is hidden. I'm also not so fond of the fact that the user has to deselect an item before they can select another one.

enter image description here

Any suggestions on how to improve this?

Thanks a lot

Improve this question

1 Answer 1

Reset to default
1

Do they need to be so wide or just one row? Would it help if it were more like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Alternatively you could have all the items in a drop down?

Improve this answer
1
  • Hi Chris, thanks for your answer! I like that, however some of the item names are quite long and end up taking 2 lines, which look fine within the largish boxes. Also, would also need to incorporate the little grey / green round icon to say configured / not configured.
    – Amy
    Apr 2, 2015 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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