I'm searching for a way to have a quick method of applying two different actions to each word within a text.
I currently try do design a UI to help myself learn new vocabulary by reading texts. For this, I display a text and highlight each word which I do not know, yet.
Now I want two different options for each word in the text:
- search translation of this word (possibly by redirecting to a dictionary website; or displaying it inline if I have data available)
- mark this word as known (if currently unknown) or unknown (if currently known)
So, each and every word in the text will have two different actions which can be applied to it.
Consider this text below. The italic words are words I do not know, yet:
This is an example text with some unknown words.
Toggling a word between known and unknown - to my current experience - should be quick, because at the beginning of learning, text is mostly unknown. I also want to keep the option of leaving individual words unknown even if I read the whole text, because sometimes I cannot find words in dictionaries and do not understand it from the context.
Thus, I decided to link the toggling directly to clicking on a word. If I clicked on the word unknown in the sample above, I'd now be presented with:
This is an example text with some unknown words.
However, like this I cannot bind the vocabulary lookup to the word itself, anymore. My current idea is to have a small tooltip on hover which displays a button for vocabulary search and possibly another button for "mark word as read" (for people who do not know the direct click option).
download bmml source – Wireframes created with Balsamiq Mockups
Is there a better way to let a user apply my two actions two each word (quickly)?