35

I making this website for users to learn languages. The idea is for them to choose a language they understand and a language they want to learn.

In the home page the users choose a language they understand and this will take them to the next page.

That page is writen in the language they choose. It will ask "What language do you want to learn" and have a list of available languages.

The problem is, everyone I've showed the site make wrong selections from what they really wanted.

Here's a screenshot of the home page.

Homepage

And a screenshot of the next page for a user that choose "French"

enter image description here

How can I improve the user experience?

Improve this question
6
  • You say the people you've tested this with all make the wrong choice, did you ask them why they chose the wrong option?
    – JonW ♦
    Mar 14, 2014 at 11:30
  • 3
    They simply didn't get it. Some in the homepage choose a language they wanted to learn.
    – InfoStatus
    Mar 14, 2014 at 11:32
  • What language do you want to learn: 日本の, 中国的, or 한국의? I think this might be an issue...
    – Mooing Duck
    Mar 14, 2014 at 18:50
  • 3
    @MooingDuck: I think you misunderstood it like the other users. The site shows language names in the user's language. "What language do you want to learn: japanese, chinese, korean?".
    – Christian Strempfer
    Mar 15, 2014 at 14:10
  • Real users make this selection before they see your UX. If I wanted to learn Hindi, I would Google "Rosetta Stone", a leading language teaching brand. That brand name is also in English. Use different websites / brand identities that appeal to users of each language.
    – Simon Gibbs
    Mar 17, 2014 at 12:17

10 Answers 10

Reset to default
54

Obviously, the first thing you have to ask is the language that the user speaks, because without that information, you can't ask them meaningful questions.

However, a user is coming to the site with the intent to learn a language. If you show them a list of languages, of course they're going to choose the one they want to learn. The fact that the site has to first ask the language that they speak doesn't even occur to them.

I think it could be solved with more context in the initial options, something like...

  • Ich spreche Deutsch
  • I speak English
  • Hablo español
  • Je parle français
  • etc...

(Disclosure: all non-English options here are from Google Translate because I'm not multilingual, to my eternal shame)

By having longer and less familiar options, the user will likely click on the first one they understand and ignore the rest, even if they don't read the text.

Improve this answer
2
  • +1: although the user's want to pick the destination language without knowing what language they speak it might get harder to communicate to them in the next step.
    – SztupY
    Mar 14, 2014 at 16:53
  • 1
    This, combined with the answer below (locale detection), would be great in a single-page mode. After you select the language you speak, on the same page - below the selection - it will ask you what language(s) you want to learn, in your language.
    – user8889
    Mar 26, 2014 at 20:02
42

You can actually pull a language preference from the user's browser. Using this as a default may streamline the process and remove one of your entry barriers.

Details here: JavaScript for detecting browser language preference

The flexibility you offer is fantastic but it's likely the user has already taken care of this on a more global level. By no means would I suggest that you remove this ability to change the language, but I think you can score a few sophistication points and meet the user half-way.

Improve this answer
5
  • 7
    +1 This way is best because it minimizes the number of choices the user has to make before getting started. You could leave an option in your settings page for users that want to change display language afterwards.
    – Mechanical snail
    Mar 15, 2014 at 5:03
  • 1
    @Mechanicalsnail: The second part of your comment doesn't make sense. Users don't want the right 'display language' they want the right 'language course' (a course isn't a translation it contains different content). This choice is far more important than just an option in a settings page provided afterwards. It's the core business. The pupils native language is as important as the language they want to learn. Don't get me wrong. Detecting the global language preference is the right thing to do. But the user should have the option to change it's 'from language' on the spot.
    – allcaps
    Mar 15, 2014 at 10:21
  • 1
    Setting the display language is the first order of business, namely to be able to ask the vry first question, "which language do you already speak?" By asking this in the same language as the user's display language, there's a high chance they understand the question. The display language does however not have to equal the "from" language. Let them choose the "from" language at the start, and leave a setting for changing the display language somewhere else.
    – nitro2k01
    Mar 16, 2014 at 15:59
  • 4
    Then you have 2 problems... The 'user preferrence' is not always a user preferrence, I suppose most users aren't even aware of that preferrence. And in some environments user can't change that either, so you'd have to cope with the language choice anyway, and additionally to the problem with guiding users to fix bad choice based on HTTP headers heuristics.
    – Danubian Sailor
    Mar 17, 2014 at 10:14
  • 2
    I'm going to say if done correctly this can be used. But there are loads of sites out there that don't. I'm from belgium for example a country where we have multiple main languages: Dutch and French. Now I am from the Dutch speaking part, and I don't mind if the site switches me to Dutch or english. But what annoys me to hell is when it forces me to the French website, it happens with Origins of EA for example. It just plain forces me to French which annoys the sh*t out of me.
    – Lyrion
    Mar 17, 2014 at 10:38
9

So, taking ideas from several of the answers and comments given here, I've come up with this solution:

I've made only one page where the user clicks the language he speaks and then it is shown the languages he can learn. This is written in his language.

Here's the English option: enter image description here

And the French option: enter image description here

It will check the browser's predefined language and that will be selected by default. If there's no predefined language it will default to English.

Improve this answer
8

If users start from picking the language they want to learn, you should let them do so (so: reverse the process).

Regarding the process itself, to make it more understandable, you should present it in a more visual way, showing the steps of the selection process:

  1. User selects language s/he wants to learn. Support it with visual cues, like flag and "Learn" word (so it looks like "Learn Japanese." or "Learn English.").
  2. User selects language s/he knows.
  3. User clicks Submit.

As a guidance, user should be allowed to proceed to next step only after s/he fills in the step before. Steps should be presented in the same view, described in a very straightforward way and numbered. This way user would see and understand the simplicity of the process.

Improve this answer
3
  • 4
    Exactly what I was thinking. Pick what you want to learn, then the language you want it taught to you in. That makes perfect sense to me. +1
    – Code Maverick
    Mar 14, 2014 at 12:38
  • 3
    I would not recommend using flags. There are a number of reasons why flags (and their corresponding countries) do not equal language. A good list of links with arguments can be found at: 456bereastreet.com/archive/200604/…
    – Tim FitzGerald
    Mar 15, 2014 at 4:00
  • That's a very good point! My assumption was that it shows the option to select in a more intuitive way (which it does) but at the same time indeed it may be misleading - both in case of multilingual countries and languages used in multiple countries.
    – Dominik Oslizlo
    Mar 16, 2014 at 19:51
4

It seems to me that the issue is more that you're abandoning a standard UI element: Language of the current site is viewed as a setting, usually selectable in the upper corner of the page through a dropdown.

So I'd remove the initial page where the user selects their language. The homepage should be, as suggested in @CodeMaverick's answer, "What language do you want to learn?", and have an additional dropdown in the upper corner of every page that changes the language for that user.

For example (using CodeMaverick's image and the image from the linked question):

Language selection in corner

Changing the language in the corner should, as this control normally would, refresh the current page in the appropriate language.

Improve this answer
2
  • I'm English and want to learn German. To bad you don't provide that course. What about English - English?
    – allcaps
    Mar 14, 2014 at 23:27
  • @allcaps My point is to use the standard language selector for "I speak this language". I just borrowed other images so I didn't have to spend too much time making my own while at work. When language is set to English, you'd use "German" instead of "Deutsch". May as well hide "English" at the same time since it doesn't make sense.
    – Izkata
    Mar 14, 2014 at 23:46
3

You could possibly take a tip from dating sites. Every single one seems to have two dropdowns on the front page:

  • I am a ...
  • I am seeking a ...

I’ve always seen both dropdowns presented together, in that order. I have never seen this implemented as a two-step process.

Of course, for a language site, it gets a bit trickier, as you don’t know what language to put the labels in, but picking some sensible defaults from the browser information shouldn’t be too hard.

Improve this answer
2

Since I understand that your website core goal is to help people learn language - You should get straight to the point of "Language they wish to learn" with options provided (in a carousel, drop-down etc.), Ideally rather than to ask users the language they understand firstly. I believe users where you tested are confused between these two questions and needs a little of cognitive load applied when they are not really attentive of the question asked.

If your website goal is to make users learn languages - then probably your focus question and first should be on that.

But - how do you currently show these phrases - I mean in which language? Because a Polish guy may want to read this first question in his language of choice rather than to be in English. Ideally there exist a problem where the Polish guy might have traveled to Russia and thus even tracking through the IP will show the geo-location but not the preference of language (unless its overridden by browser by setting it to convert all languages to Polish). To connect this issue -

I would recommend clubbing your both questions as one - "I like to learn German", "Me gusta aprender aleman", "J'aime apprendre l'allemand"....the following in "English", "Spanish", "French".

Now that if the user chose "I like to learn German" it means that the user understands English and would prefer to learn German. So the main prevalent languages are assembled on priority on the top half and moves to lesser consequent languages to the bottom.

Since you have solved the first level problem, now you cannot definitely keep writing "I like to learn Spanish or Arabic", so next to "German" there could be a drop-down/mega-drop-down that quickly list out the language you need the user the choose such as "Arabic, French....."

So it means the user do not need to say what they know and what they need to learn - but simply say what they wanted to learn. It puts lot of cognitive load to answer questions, but by showing preferred or language of choice the eyes can quickly read it amongst the noise.

Designing the content part - Now the problem of language choice/learnability is addressed - the way to arrange the entire content - "I like to learn German or Foreign language with a drop-down" (with multiple languages) are showcased in some rational way (alphabetical).

The other way to address the content is to have an option for the lesser relevant languages with a country of residence/world map on the nav bar. By clicking Angola - you may show options for Portuguese and Bantu alone in languages that mean "I like to learn German/Foreign language".

These options may have a higher probability to sell with your users!

Improve this answer
3
  • That option to choose both questions at once was a good solution but for now I already have 5 to 5 languages (and expanding). That's 25 options and growing exponentially.
    – InfoStatus
    Mar 14, 2014 at 14:30
  • @InfoStatus At once doesn't have to mean as a single input choice. You could have two selection boxes or radio groups as long as they are both on the same page/form.
    – Marjan Venema
    Mar 14, 2014 at 15:33
  • @MarjanVenema Yes, I'm thinking of doing something like that, a double selection. But the way inkmarble was recommending was as a single input choice (read his answer closely). I liked that solution if there weren't so many options.
    – InfoStatus
    Mar 14, 2014 at 15:40
1

I would add to @DominikOslizlo's answer in that I would drop the Hello example from both selections. It adds to the confusion, as you haven't started learning yet.

So home page would be:

enter image description here

enter image description here

... and then the next page would be:

enter image description here

Improve this answer
3
  • Yes. You both make very valid points and got me thinking in some solutions. But I don't know if your perspectives aren't conditioned from an english perspective. For example a spanish that want to learn english. He simple wouldn't understand the question.
    – InfoStatus
    Mar 14, 2014 at 12:55
  • Also, the initial question is in English, which doesn't do much good if you don't speak English.
    – DallonF
    Mar 14, 2014 at 13:48
  • @InfoStatus and DallonF, the language for the initial question could be very easily be chosen based on detecting the user's current culture.
    – Code Maverick
    Mar 14, 2014 at 14:00
1

Selecting your language is boring.
Selecting the language you want to learn is fun.

Make it look like that, too:

  • Use a simple language switcher for selecting the user’s language.
    • Place it in a typical location (e.g., at the top, above the site header).
    • The language names need to be in their respective own language: Deutsch, English, Français.
  • Use something eye-catching (e.g., the graphics from your example) for selecting the language the user wants to learn.
    • Place it in the main content area.
    • The language names should be in the current user’s language: in case of an English user: German, French.
[Deutsch] [*English*] [Français]
-----

Learn languages!

"Hallo"
German

"Salut"
French

[*Deutsch*] [English] [Français]
-----

Lerne Sprachen!

"Hello"
Englisch

"Salut"
Französisch
Improve this answer
1

All the current answers have one thing in common - the two language selections are on separate pages.

Since there's an obvious relationship between the choices, you can show the relationship to the users with simple graphics.

Hello        Bonjour
Bonjour  ->  Hallo
Hallo        Hola
Hola         Hello
Improve this answer

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.