2

Here's a piece of text I have on my website:

Text

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?

  • Generally you let people know a word is clickable by making it a link, by just changing the text colour. Why not simply follow that? – Liam Hammett Oct 4 '17 at 23:54
  • Who is deciding how this is highlighted? – Mike M Oct 5 '17 at 2:56
6

Make it obvious by providing a signifier for what can be done (or should be done).

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:

  • visible persistent signifiers (a shape around the text)
  • a fairly well understood icon (edit pencil)
  • hover states that change the tint of the shape and/or text
  • tooltip that tells the user what they can do

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I would add to the signifiers a bit by giving the “chip” a shadow, which would make it look even more like a button. On top of that, it would be nice if clicking on the chip expanded it in-place into the editable dialogue box, not moving the original highlighted words. – David Regev Oct 7 '17 at 23:12
1

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.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.