User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am creating a To Do list in my company's web application. Each item on the to-do list is marked with a flag, which acts as a toggle (as in outlook) for to-do/completed. The icon cycles between a flag and a checkbox.

I want to make it easy to recognize this as the function for marking an action as completed and am trying to figure out the best way to indicate this.

A) On hover-over the flag icon highlights and a tooltip appears "Mark as completed"

B) On hover-over the flag icon changes to a highlighted checkmark (but does not stay a checkmark as you move off of it)

C) Just use a checkbox (some of the stakeholders in this project think that would be too "ugly")

D) Something else?

share|improve this question
up vote 1 down vote accepted

I would say options B but give a grey-scale version of the completed icon to let them know the action and to easy tell the difference between completed and the hover state


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer


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.