User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Here's a piece of text I have on my website:
When the blue highlighted word is clicked, a dialog box opens to let the user change the information. I want to keep this design where the user has to click on the word to change it, but the users don't try clicking.
How could I improve my design to let them know it's a clickable word?
If it's important for users to correct this information than it's good to be a bit more obvious.
If you have tested it just looking like a link, and people are not clicking/interacting, you can be more obvious that they are expected to correct the output they are seeing on your website.
I'm not sure about the details of your use case, but you can provide:
You could treat these as chips, found in material design, with a little difference.
In the base material design, chips when clicked on or hovered offer more detail, but there's some Google products where chips can be edited in a simple manner.
Chips are usually either created or deleted (with a prominent 'X' to the right of the label), but you can use the Edit icon, to provide a hint of what they can do.
download bmml source – Wireframes created with Balsamiq Mockups
I would suggest following Medium style of highlighting text. They follow a unique design in which they have normal highlighted text with an underline which clearly states the text is a hyperlink and on the other hand they also have a top highlighted text which we can share, comment or save. A tooltip appears on top of the text on hover which has those options.
In your case, you can have a tooltip to edit the text. Also, the highlighted color should be a mild one which makes it readable and makes the text clearly visible out of the paragraph.
