0

I am trying to design a app for learning languages. It lets you watch 15 sec youtube videos. The goal is for you to watch videos and try to understand what is being said with subtitles which are clickable word for word. Upon clicking a word the user gets some tools such as like
'Look up word in dictionary,' 'Translate sentence,' and 'Ask for help from the community.' What would be the best way to display these? In a pop up, or having it slide out? Maybe have it go over the video?

What we want is that when the user genuinely tries to understand the sentence in the video and interacts with the app, they naturally indicate what they find difficult and what they don't. The use of the app should align with generating the list of words that need to be relearned. It should all flow together.

So, the challenge is: what actions would you like to take to understand a sentence, and how can we intelligently and automatically ensure that we convert that behavior into a 'to learn' list?

Edit:

I have made a prototype:

https://www.figma.com/proto/lto8RzKkPowxZ3fW63OhFO/LingoLLama?page-id=4%3A3&type=design&node-id=125-4168&viewport=4715%2C906%2C1&t=udgFof0Nxn5BxW9s-1&scaling=scale-down&starting-point-node-id=125%3A4168&mode=design

What do you guys think?

Cheers

edit The above design was something I found on the net. I have added my design below please let me know what you guys think!

Work in progress

Improve this question

2 Answers 2

Reset to default
2

Usually, Language apps have these additional features close to the content. Consider Google Translate (see on the right)

enter image description here

or this one:

enter image description here

Also, I think the problem with your UI is that elements are disconnected. yu have a video on top, then a navigation, then some wording with additional navigation, then a translation, then a lot of white space, then the video controls. You should try to group elements in a logical way. I did a quick skecth (which isn't necesssarily correct, and it probably isn't) to illustrate what I mean and where could you place additional controls

enter image description here

Finally, consider the relationship between text and its translation, I think it's really huge and disproportionated , try benckmarking othe rapps to see how they do it

Improve this answer
2
  • Thank you for your response and design! I have added my design.. the example before was something which is already made! Please let me know if you have some feedback!
    – Ahsan Hussain
    Aug 15 at 16:34
  • it's much better, but I'm not sure about the navigation placement, be sure to test with real users
    – Devin
    Aug 15 at 17:10
1

...What would be the best way to display these? In a pop up, or having it slide out? Maybe have it go over the video?

I see these two options:

  1. Keep all content on a single page. It’s easy to read and find. Consider adding a way to navigate quickly to video via swipe and having tools eg, “Translate” (I would keep the name short) as an accordion

  2. (iOS-only) Show tools/actions in an iOS-native tooltip component.

Hope this helps!

Improve this answer
1
  • Please check out my added design! :)
    – Ahsan Hussain
    Aug 15 at 16:34

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.