How should I indicate that an element responds to user click?

Question

I have a list of people that the user wants to contact. They can "Mark as done" when they have made the contact (then it goes to their follow up list 3 days later). Displaying the "Mark as done" button makes the list appear very long and fall off the page, so I hid it by default and only display it on user click of the contact.

In observing a user interacting with the list yesterday, they didn't realize they could click on a contact to mark complete.

What's the best way to indicate that they can mark as done by clicking on the contact? Or should a "mark as done" button/link be displayed by default?

Answer 1

Remember that your users dont always know what the expected action unless its very obvious to them. Hence requiring them to discover a hidden functionality by hovering over it is bad user experience as most people might not be aware of it.

I faced an example of it today while doing an event edit in Eventbrite. Eventbrite uses inline editing for its subject line which is enabled when clicking on it. To give them credit they highlight the line when the user hovers over it as shown below but that is not intuitive as I spent like 20 minutes trying to figure out how to change the subject line.

Hence I would recommend using a simple text link or checkbox to inform your users about the action that can be performed as users dont have to hunt for the functionality and having a simple action to perform makes the next step in their path clear. Here is an example of astrid does it:

Answer 2

Websites like gmail change the cursor when hovering over elements that can be clicked, just like any url on this page. You could do that or you could add a checkbox next to each name that would perform the same function as the Mark as Done button.

Answer 3

I like the checkbox I idea, in fact one feature you can place is once the user checks a box then a mark as done button appears on the top in one consistent location. If your user wants to mark 15 items as done it can get annoying to have to click on the name and them click on the "Mark as done" button each time. Here you can just have them Check off the items that they want to mark as done and then click the mark as done button to confirm.