How to make checkbox selection less of an eyesore?

Question

I'm working on a component (see image) that shows the results of a keyword search.

Each result displays:

• the title/link to an article,
• a snippet from the article,
• a checkbox reading "This article solved my issue" that the user can select if the article actually did solve their issue.

A majority of users I asked feedback from said they glanced over or didn't notice the checkbox because it visually blended in with the text above it; they weren't compelled enough to select it.

Is there a way I can visually improve the checkbox, such as a design pattern that may help fix this? I want it to be noticeable, visually pleasant, but not outshine the article title and snippet.

Answer 1

Note: This answer is a frame challenge.

The checkbox should not be there at all.

According to your screenshot, your users use your search engine to find a solution to their billing problem.

You write that your users "weren't compelled enough to select [the checkbox]". And why should they be? They have a billing problem, and so, their number one priority is to solve their billing problem. Informing you about the usefulness of the search results is, at best, at the very bottom of their list of priorities. They have a much more important problem right now than to give feedback to a random stranger on the Internet.

So, when would be the right time to ask them for feedback? After you have helped them solve their problem. Currently, you show them a snippet of a page that could help them. They don't know yet whether this page will help them or not, they need to read it first. And no, they won't make a mental note to return to the search result page afterwards to click your check box. As I said, they have much more important things to worry about right now.

So, where is the right place to ask for feedback? Right after they found the solution. This is what your "Reading your invoice" help page could look like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Here is how to download your invoice:

1. Lorem ipsum dolor sit amet,
2. consectetur adipiscing elit,
3. click on the "Download" button.

[ This solved my issue ] <-- should be a button, not a checkbox

Answer 2

Try using actions that represent a clear choice between two outcomes. Phrase in the form of a question or a command to address them directly.

Your question is about graphic emphasis, but I'm suggesting rethinking the checkbox and the writing you have.

A checkbox is associated with a setting or configuration. Here, you're asking the viewer to leave an assessment about the quality of your support, not to configure, add, or other interactions we associate with a checkbox.

Try using opposing controls

Using thumbs up / thumbs down (Twitter uses smile / frown emojis), you're leveraging a fairly common interaction. Once selected, you can make the icon selected solid, indicating a change of state. This allows them to unselect if they would like to revoke their answer.

You can trying various type treatments, such as italics, which distinguishes it from the rest of the text.

You'll see this in doc sites; here's from Google Cloud, in which they call 'Rate and review':

Answer 3

There really isn't a design pattern that would address this, since design patterns are more abstract concepts for solving problems that still require some implementation and testing to see if it is effective.

So while this is primarily a visual design issues, and therefore falls into the domain of Graphics Design StackExchange, the principles used in the presentation of information and the experience of the uses does fall into the types of things discussed in UXSE.

And given this particular perspective or angle into the question, the principles that are applied in visual design which stem from psychological principles are the Gestalt Principles of Design. Without going into too much detail, which would make it a graphic design topic, here is a summary of a process to consider which will improve visibility without disrupting hierarchy:

1. Look for the most obvious thing that reduces the amount of contrast between the checkbox and the other content, whether it is the colour, size, other visual embellishments or position of the UI element and increase it in the direction of more contrast (e.g. increase intensity of colour or size)

2. Establish the types of visual design elements used in the component and identify any others that can be used (e.g. icons, text styling, animation, micro-interaction, etc.)

3. Establish the hierarchy of visual design elements used in the component and sort from the most prominent to least prominent, and work out how you want the checkbox element to sit in that hierarchy

4. Apply the combination of visual elements to the checkbox and reassess the effect of the change

Now you have a process to experiment with the combinations of visual elements that can be used to manipulate the contrast/visibility of the checkbox element until you achieve the desired level which you can apply iteratively

Answer 4

I think the problem is not so much that the checkbox is mixed with the text, but that it is not clear that the user needs to do an action. In fact, the current checkbox looks like a bullet that accompanies the statement of "This article solve my issue".

I would try to make clear the possibility of interacting by showing an active / inactive element accompanied by a question.