SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question best way to trigger action upon text selection

    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?

  2. #2
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Oxford, UK
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    so long as you're okay with it only working with mice

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •