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?

1 Answer 1


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

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.