User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
The checkmarks ask what food you want and the clock asks if you want it fast.
Where is the best place for the icons to go in this example? The icon basically acts like another "yes/no" checkmark.
The options as I see it are the way I have it now, the way I have it now except the icons are at the end of the label instead of being vertically aligned, or the icons go before the label.
I'm looking for suggestions and examples of how this is solved in existing websites.
I might try something where the "fast" options slide in when the item is checked, that way your eye goes to it. I'd also put two choices in so you know that you have to make a choice.
So it might look something like this:
You could probably do without the "normal" option entirely if you think this takes up too much room. A grayed-out "Fast" button should speak for itself.
I can see the first group of checkboxes very clearly, but the second group of icons gets lost. I don't really know if I have to click the clock to do something, like activate it.
I think the second action needs to be clarified in some other way. The straight-forward one would be:
Possible simplifications, keeping the redundancy:
None of those are exactly simplified.
The one I would with, personally, would be something like this:
You could also have a message ('Fast') displaying for a couple of seconds above the icons:
The icon is there for a quick reference (you can add a tooltip, again with 'Fast'), but still a tickbox is required, so the clock is not just a clock, it's an option.
Mockups done with Balsamiq
keep the interactions together and Labels on one side.
Realization and dish types are different search parameters, so they must be separated.
download bmml source – Wireframes created with Balsamiq Mockups
How about having just two buttons next to each dish, labeled Fast | Normal. The buttons can toggle when each is pressed, but if the same button is pressed twice, it clears the choice. For example, clicking Fast highlights it, now if I click Normal - normal gets highlighted and Fast is greyed. Now if I click Normal which is already selected again, it gets unselected. This clears both Fast and Normal this making the dish selection as unchecked.
You can use colors to highlight the selection that would make the choice much clearer to the user.Alternately, use 3 buttons(NONE|Fast|Normal) to make it much clearer to the user.
