I'm working on a small language learning app, in which the user can:

  1. save text and audio to read and listen later

  2. click on a word to add notes and example sentences

  3. get some stats per language + other features

I'm not sure how I handle the 'click on a word' event. After clicking a word, The user should be able to:

a) Add a definition if the clicked word is not yet defined.

b) Add example sentences (as many as he wants)

Somehow, the user should also be able to edit the definitions and example sentences.

The available space is the right panel. The user focus is on the text, so I don't want to change screens or distract them of the main task: quickly define/edit words and sentences.

My current design is this (the 'Add sentence' part is not yet implemented):

a) before any word click

enter image description here

b) after click on a word which is not defined yet. Clicking 'Save' will show item c) below:

enter image description here

c) after Saving a word. Clicking 'Edit' will show item b) above, with the text-area filled and focused:

enter image description here

Clicking 'Cancel' or 'Close' will show the Instruction message. Notice that the current word is underlined in black on the text panel.

Edit

Based on some answers, maybe a single popup on click would solve all these problems? This popup would bring fields to add a word definition and a sentence. Then I could list everything on the right panel, allowing edition there.

What do you people think? Any other suggestions? Thank you!

NOTES:

1- By right clicking on a word, the user can evaluate how much he knows this word, via a popup. The blue words are "new" (meaning not yet in this language database). Then from red to green it covers "started learning" to "almost known". No color with a green underline means "well known word". No color with red underline means "ignored word".

2- The text is inside a scrolling div, so the right panel is always visible, no matter the text position.

  • Why do different words have different highlight colors? What does it mean? – Devin Jun 25 '17 at 16:40
  • @Devin The user can evaluate how much he knows a word. The blue words are "new"(meaning not yet in this language database). Then from red to green covers "started learning" to "almost know it". No color with a green underline means "well know word". No color with red underline means "ignored word". – Fernando Jun 25 '17 at 17:17
  • Popup would be an effective solution, as per @Devin's answer – cheersphilip Jun 27 '17 at 9:48
up vote 3 down vote accepted
+50

First of all

  1. Congrats on your color choice, it passes the accessibility tests for color blindness, it looks like you put some effort on that.

  2. I really don't see your approach as bad. As a matter of fact, I think it's good. Could be better? Yes, but it exceeds the purpose of this site.

  3. Remember your opinion is subjective. Test with real users, and if you see there's an issue, then you can correct it, but let data tell you the story.

An approach

For the reasons stated above, this is not THE approach, not it intends to be the correct answer. It's just an approach to give you ideas you can test. Testing will tell if this is correct

Screen 1

I started by adding some space between elements and remove the noise (such as container borders) so your design may breathe a bit in order to transmit information in a more relaxed way. In this screen, you have NO RIGHT COLUMN.

Note: I forgot to add it to this screen, but content on your right area should be in the main column, just above the content to translate

enter image description here

Screen 2

After an user clicks on a word, a modal dialog opens. The reason for this is that you need user to interact. See NN/G's take on this subject:

  1. Use modal dialogs for ask for information that, when provided, could significantly lessen users’ work or effort.

Modals can work effectively when the information being requested or presented is relevant or can streamline the completion of the current task.

So, with this in mind, you can do the following:

enter image description here

Note that both the dialog and button's label are consistent so users are aware of their interactions and what is expected from them.

Screen 3

Here we consider that the user has added some words, and the right column starts to fill up with content. You'll see all words added in this session are listed (you can add filters if you want). This is done in order to psychologically reinforce the acquisition of the word by viewing it out of the text block and as a group of newly learned words. Each time the user adds a word, she will see the previous ones in conscious or unconscious ways.

enter image description here Clicking on the icon will open Screen 4

Screen 4
If user wants to edit a word, we'll keep consistency, reflecting teh action both in title and button label. This time we're not ADDING, but EDITING, hence title and action reflects this scenario.

enter image description here


OK; here I'll stop, hope it helps you :)

  • 1
    That's the direction I'm going, it solves all issues. Two questions: a) What if the user click on an already added word (on the text)? b) How can I help the user 'memorize' the word? In your design the 'Add/Edit' captionsare bold, but the word is not. Thank you! – Fernando Jun 27 '17 at 13:46
  • A) This would mean the word needed some reinforcement, hence why the user has to edit it. In such case, you just trigger the edit popup just as if it was on the right column, and after closing it, it effectively shows on that column to remind the user of that edition and reinforce the word by constant visualization. About B), I just did it in "quick wireframe-ish" mode, hence no style intended, but you're correct, the word itself should stand out a bit more (not that much either, just a bit). The Add/Edit headers just use header styling, like H3 or H4 and should be consistent with your styles – Devin Jun 27 '17 at 14:32

Change a few things to tie all ends together. In your current version there's no clear flow for your users.

  • You can fill the right panel with a 'call to action'. Tell your users they can click a word and add a note. See picture one.

  • Also change the save button label to 'save and hide'. Tell your users what happens when they click it. This way it will make a lot more sense. See picture two.

After closing, users will see the call to action from point one again.

enter image description here enter image description here

  • Good tips. I changed a bit my design, now it's more complicated because the user can also edit/see a previous defined word. I'll soon update the question. Thank you! – Fernando Jun 24 '17 at 20:12

Idea 1: Now, about your question, you could have a button on the top navigation bar which opens your right panel. So your right panel is opened by either clicking a word or that button.

The moment users finished working on a word, they can close the right hand panel,and a number can be added to that button's icon, either like a shopping cart number or maybe more clear. In that way they can always see the number of words they translated and still open the panel to check that list.

Idea 2 Have a section on the right that would sit on top of the "Word Definition" panel which shows them the number of words they already worked with. In the beginning it may say 0 words or maybe an interesting fact about that language: "Did you know....", only until they actually have a word to put in that list.

  • The number idea is very good. The problem here is that I don't want the user to click on stuff (besides words). I want the interaction with the text to be as quickly as possible. – Fernando Jun 23 '17 at 13:44
  • What if you have a tiny icon or something like an underline that signals that a word has been translated or worked with. however, in this case you should reconsider a little, the use of color so the interface doesn't become all cluttered. – Tudor Teisanu Jun 25 '17 at 6:06

You can create a hovering popup to allow user to add note. As for a call to action, you can have a banner in top menu suggesting that user can add note on any word by just clicking. Also, I will suggest keeping a simple autosave option if you are using popup for input. You don't want user to lose information if they misclick outside the popup window.

Edit: To give you an idea, check the share button in this answer or your question. Once you click the share button, it opens a popup right there, which you can dismiss by clicking "close" or clicking anywhere outside the popup.

Edit: My earlier suggestion is when user is clicking on the notes option for limited amount, say 10 words per page. If it is really high amount, then keep your existing style.

As for the instruction, you can keep it, and also move some extra information to that panel. Sort of like right side panel in this window.

Maybe if you wish, you can display all the words already translated, in a list. User can click on the translated word to edit the translation again, so you got an extra avenue to reach the editing option.**

  • That's very different from what I have now, but it looks good. I also have to handle the user saving/editing sentences. Maybe a single popup with 2 inputs, one for word note, another one for a sentence. – Fernando Jun 25 '17 at 23:02
  • Yes, that can be done too. Or if there are more than two inputs (say in future), you can do a hidden div similar to the comment box here. But again, major point of contention is if your users will end up using it a lot more often. You don't want the whole popup thing happening for 20+ times in one page. – jitendragarg Jun 26 '17 at 4:19
  • They indeed will call the popup a lot to define words. Why is that a bad idea? – Fernando Jun 26 '17 at 13:20
  • Because then it can be distracting. In that case, side panel is much better. You keep a common design. And obviously, in the side panel you can keep the history of words edited, to give users a sense of progression – jitendragarg Jun 27 '17 at 4:01

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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