Hanging panel after user Click

Question

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

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

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

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.

Answer 1

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

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:

4. 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:

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.

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.

---

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

Answer 2

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.

Answer 3

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.

Answer 4

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.**