Working on a mobile UI for viewers to see available insurance plans.

Context: this is a marketplace where the employer is shopping for health insurance for their employees. The marketplace is different then a tradition plan selection marketplace. The business owners are signing up for a service that allows the insurance company to send out as many plans as possible to their employees that FIT the employers budget and contribution level. The employee can then select a plan that fits. Instead of the employer selecting the right plan.

So this example is showing 25 available plans. The employer can deselect the plans they don't want.

Question: The green dot is an indicator of the plans that are included. Is there enough affordance to let the user know they can deselect a tile and remove the plan from the number of available plans.

Mobile UI of number of plan tiles

  • Your wireframe seems to show an intermediate state - when some plans are selected and some deselected - but the questions refers to affordances when an employer first views the list. Do you have an initial state designed, or are the deselected options deselected for some other reason? This is important because having some selected initially gives a strong cue to the user that wouldn't be there if they were all the same state.
    – Justin
    Apr 23, 2016 at 7:22
  • 1
    I wouldn't want to work for a company where they configure the available health plans on a mobile device by tapping...
    – Aprillion
    Apr 24, 2016 at 8:38

2 Answers 2


Personally, I wouldn't have known that the tiles were tappable. I like the aesthetic of the green dots, but it doesn't seem intuitive to that the green dot means "selected".

Another thing to consider is the target area for selecting these tiles--do you really want the entire tile to be tappable? I would think that might lead to accidental taps as the user tries to scroll down this potentially very long list, but this could all be user tested.

Instead, I'd recommend:

  • A check box: indicates that something is selectable
    • Represents a selected/deselected state
  • Toggle: indicates that something is able to become active
    • Represents an active/inactive or on/off or enabled/disabled state

Pick which fits your mental model more appropriately.

As a side note, I might not make the deselected tiles as light as they are. I would think that it would be more useful if I were still able to easily read the plan details without selecting it.


Two issues:

  1. The green dot does not provide enough affordance because it's almost always used as status indicator, rather than input control.

  2. Fading out unselected tile reduces legibility.

Given that this is a mobile app, I recommend going with something like this, because thick outlines make it clear that the entire tile is clickable. (vs. using checkbox). enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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