best way to trigger action upon text selection

[RRH]

Hello

I have not seen this pattern yet so I don’t know how it should work. What I am going to do is to be able to select some text and then display its definition in a dictionary (in a lightbox).

Yesterday I came up with this:
http://ryrych.pl/null/cambridge/cambridge.html

You can double click a word, or select a passage. But I see a few shortcomings:

• user can’t undo selection/link
• user cannot just select text without making it a link

What I don’t know is that, if it is a good idea to have a few selections.
But first of all, I*don’t know what’s the best way to trigger a lightbox. Should it be trigger after clicking on a link*(current solution), clicking on a tooltip, or after pressing some key?

What do you think?

[TomH]

The main problems I see with this approach are discoverablilty and unexpected behaviour. Unless someone is told how this works it won't be obvious upon viewing the page that you can select text to view a definition. It also breaks standard expected behaviour in the browser, where selecting text merely highlights it for copying.

It kind of reminds me of touch gestures in iOS apps, some of which are hidden away and not revealed until you start swiping around with your finger. Many users will be totally unaware that they exist and may only find them by accident.

In my experience I've found the simplest solution to always be the most usable. In this case, why not have a small form comprising of a text box and "Define" button?

• When the user selects text on the page the text box is populated with that text, leaving the user with the freedom to still select text on the page without it being transformed into a link.
• It eliminates the need for an "undo" function, since the user can simply amend the text box contents if they weren't precise enough with what they selected.
• This approach could be implemented to work without JavaScript, since the user could simply type their word/phrase into the text box and click the Define button.

Alternatively you could tweak your current approach to automatically float a "Define" button besides any text selected on the page, which would be a little more usable than creating a link that cannot be removed, but you would still have the same discoverability problem as before.

As far as I can see, everyone wins with a simple interface.

[Stomme poes]

I like Tom H's answer very much. Unexpected behaviour and mystery-meat actions cause user frustration, unless you at least let users know they'll have a bit of a learning curve and explain what and where. But I like a "define" clickable better. Lightboxes also are a bit of a pain accessibility-wise as far as screen readers go: you can move the focus() with Javascript to the lightbox but TAB can stick to the page underneath and continue to allow the user to move around on the page, unaware of the lightbox. They can also have unexpected keyboard traps inside if you use many of the default popular lightboxes out there. A dialogue box needs to absolutely limit all users to that dialogue box and then the use must always be allowed a clear way out (and that must bring the user back to where they were on the page before they clicked). Lightboxes don't always fit/follow these rules.

One possibility for hidden things and discoverability is similar to the "more results" link on DuckDuckGo search results. Every result actually has a "more results" link, but you don't see it (they wanted to avoid visual clutter) unless you're hovering/focussing/etc on the result itself. If you hide the link simply by colour change, it's always in the DOM, doesn't 100% rely on the user being able to hover, focus (think mobiles) or be able to see to know the link is there. But if you did such a thing you'd want to user-test pretty hard.

[RRH]

Thank you very much guys for these comprehensive answers. Actually I wanted to come up with a solution that is better to ‘double click on a word → open pop-up window’ that has been used in a site I like much. The aforementioned solution is not ideal one to my mind. As it turns out, mine is not ideal either.

This solution seems to be better: http://pl.bibliobird.com/content
(just hover over a word and click on it)

[Stomme poes]

so long as you're okay with it only working with mice

[C. Ankerstjerne]

In Windows, a word is highlighted by double-clicking it, and a paragraph is highlighted by triple-clicking it. This is useful both for copying text, and for making the text more readable by highlighting it. Thus, any default feature that is activated by hovering, clicking or douple-clicking is by definition inaccessible.

Make it opt-in. Let the user check a checkbox for advanced text features. This is very easy to code, and could even be set up to a accept any number of different inputs as per the user's choice.

[TechnoBear]

In Windows, a word is highlighted by double-clicking it, and a paragraph is highlighted by triple-clicking it. This is useful both for copying text, and for making the text more readable by highlighting it. Thus, any default feature that is activated by hovering, clicking or douple-clicking is by definition inaccessible.

I would avoid double-clicking for anything. You only need to watch a couple of older folk with arthritis attempting to double-click to understand why.