7

Checkboxes and icons

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.

Improve this question
2
6

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:

Mockup

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.

Improve this answer
1
  • I like the use of normal over just toggling fast to selected or unselected because the automatic association of something that is not fast is that it is slow. Labeling the not fast option normal reduces the strength of that association
    – uxzapper
    Jul 21 '13 at 2:40
5

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:

enter image description here

Possible simplifications, keeping the redundancy:

enter image description here

None of those are exactly simplified.

The one I would with, personally, would be something like this:

enter image description here

You could also have a message ('Fast') displaying for a couple of seconds above the icons:

enter image description here

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

Improve this answer
1
  • 1
    I would go with the first or second options. The clock is entirely unclear and I'd have no way of knowing I'm supposed to interact with it. Better to be redundant than confusing.
    – Lauren Ipsum
    Jul 19 '13 at 11:04
1

keep the interactions together and Labels on one side.

enter image description here

Improve this answer
3
  • The icon isn't for fast delivery - the person is making their own food. What represents someone who needs to make food in a deadline? A clock is reasonable. Also, the second suggestion you make of only showing it if it's ticked is already applied.
    – Ayub
    Jul 19 '13 at 15:50
  • "The checkmarks ask what food you want and the clock asks if you want it fast." Your post misled me :< A clock is still too generic - it represents time not the rate at which time flows or acceleration, I would recommend you change that icon and use any approach suggested in the answers (as all are valid and good)
    – Rayraegah
    Jul 19 '13 at 15:58
  • @Ayub You should be using a clock symbol like this - FAST: thenounproject.com/noun/clock/#icon-No2047 NORMAL: thenounproject.com/noun/clock/#icon-No2048 SLOW: thenounproject.com/noun/clock/#icon-No2049
    – Rayraegah
    Jul 19 '13 at 16:25
0

Realization and dish types are different search parameters, so they must be separated.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • The original appears to require one value for 'fast'ness for each of the dishes.
    – Alex Feinman
    Jul 19 '13 at 17:38
0

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.

Improve this answer

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.