2

I have a client that has some content with pretty intense scientific language. They realize this, and want to offer contextual definitions, on demand.

I can find lots examples of this being done via modal windows and new windows, but I would really rather do it inline so not to lose the broader context of the page.

Are there any ways to give the user a good experience when they are viewing on mobile?

Improve this question

4 Answers 4

Reset to default
4

It doesn't need to be a modal or a new window, you can use the footnote model - just allocate a special panel at the bottom of your screen for these annotations, and make sure to distinguish them visually from regular links. So when a user taps an annotated word, the panel would come up at the bottom and display the definition. On tap elsewhere on the screen the panel would go away. Or, preferably, it can be swiped away.

EDIT: Of course the size of the section can be dynamic, with a certain maximum. We wouldn't want people to have to scroll in that tiny space.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
3
  • +1 I had the same thought. Often, dotted lines are used for the hyperlinked words, to differentiate them from pure hyperlinks.
    – tohster
    May 20, 2015 at 22:20
  • How does this scale for a desktop browser context? Would you retain the footnote model, or surface the definition physically closer to the word?
    – TrollBar
    May 21, 2015 at 16:13
  • It doesn't scale well, because on a large screen you have a much greater distance to cover between the top and bottom of the screen, you users will get tired and frustrated quickly. An in-place tooltip-style solution will be much more appropriate.
    – Vitaly Mijiritsky
    May 21, 2015 at 18:01
2

A dedicated footnote section is a good solution, but I wouldn't focus only on inline solutions. A popover is not necessarily that bad. The downside is that it covers a large portion of underlying text, but the upside is that the size is flexible: it can grow for longer definitions, making the need for scrolling to read a long annotation less likely.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Another inline solution is an in-place show/hide region, where the text following the annotation slides down at the next available line. Again, the space used is flexible and can grow up to a certain size, but you're right in the context of the word you looked up.

mockup

download bmml source

Improve this answer
1

I had a similar problem on a webapp I was working on. It involved lots of complex financial terms. I basically ended up building in a context sensitive help system to explain some of the words - the help can easily be toggled on and off so people familiar with the terms don't need to see it every time.

Help Off

enter image description here

Help On

enter image description here

(The help text in this screenshot could probably use some touch up to be clearer..)

Improve this answer
2
  • I like this implementation for standalone words / titles / headers, but how would this work of the vocabulary word appears in the middle of a sentence, and is preceded and superseded by many other words?
    – TrollBar
    May 20, 2015 at 20:31
  • I'm not seeing how it could work very well for that specific case. Vitaly Mijiritsky's solution looks better for that IMO. The help I presented is kind of "all or nothing", where as in your case it sounds like users would only need to define some words in a paragraph and not others.
    – Sentient
    May 20, 2015 at 21:18
1

Have you seen the tags here on UX.SE on mobile? One of ways is present right here.

On desktop these tags show a definition on hover. Along with number of questions under this tag.

On mobile these tags need to be clickd and they show definition of the tag. And lists down all questions with these tags. With most recent one on top.

No modal window.

Coincidentally i was on mobile when read this question. :)

Improve this answer
1
  • 1
    I see how stackexchange handles tag definitions, but my challenge is doing something like that in the context of a sentence or paragraph. Sure, I could instruct the content authors to build a tag list for any "scientific" terms that would appear at the bottom of the article, but I fear that takes the user too far away from where the original word appears.
    – TrollBar
    May 20, 2015 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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