Make clickable elements more obvious

September 26, 2008

I needed to translate some text from Swedish to English this morning. Since I don’t understand a word in Swedish I went to Google Translate.

google translate

After I translated the text I wanted to try to translate something from English to Swedish. Since two arrows between language buttons didn’t tell me that they are for switching languages I changed languages manually.

Wouldn’t it be more obvious if we place a text link somewhere below the buttons, like in my example below? Or to use some more meaningful graphic element?

google translate2

Do you have a better idea of how usability could be improved here?

I discuss these topics on twitter too. In case you feel nostalgic, my RSS feed is still working.

13 Comments

  • JEggers (September 26, 2008)

    I could see one possible usability improvement is to make the double arrow a two-item list as well. One for >> and another for <<. It would take little effort and provide a better user experience than what you initially had through manually changes the languages.

  • Kris (September 26, 2008)

    Something more obvious would be to add labels to the dropdowns (infront, behind, somewhere) that states "Translate from" "Translate To" or "Source" "Whatevever the opposite of source is in language terms". You get my drift. It’s not obvious what either dropdown is intended for the way it is now.

  • Gerasimos (September 26, 2008)

    I vote the text link Janko suggested. Obvious and simple :) Good call

  • Samuel (September 27, 2008)

    From my standpoint your option is the best Janko, easy and clear, I can’t understand why the companies make this kind of.. mistakes?.

  • Muhammad Mosa (September 27, 2008)

    Not sure if you noticed Facebook tooltips. Actually they are not real tooltips they are always visible, you can call them hit boxes. Just exactly like your idea, a hint element, but with an arrow pointer showing were exactly they hint is related. In this case the arrow pointer should points to the [b]}}[/b] switch button

  • Janko (September 27, 2008)

    Jeggers, interesting solution.

    Kris, I thought of something more intuitive. Two arrows definitively indicates the direction of translation. Putting labels "From" and "to" will make one more step for the user and that is to select both languages. But switching problem remains.

    Muhammad, I don’t have Facebook account, but that’s definitively great idea.

    Gerasimos, Samuel, thanks.

  • Matt (September 27, 2008)

    I like your suggestion on having the textual link there for "Switch Languages". I was thinking that you could use some ajax perhaps to drag one before the other, or vice versa, but that might also be confusing since you would have 2 actions now on one button; one to be able to get the drop down, and another to drag and drop.

    If they just made the raquo look more like a button, or gave it some whitespace and a different background color, or even just a different color altogether, that might work.

  • Janko (September 27, 2008)

    Matt, yeah, just a simple improvement like making it looks like a button will do.

  • Webdesign Grafische Vormgeving (September 28, 2008)

    Hmm, I think >> is not the right simbol cause it actually doesn’t mean ‘switch’.
    When I saw it I first of all didn’t see I was a button, and second I thought it was just there to make clear it was going to translate FROM swedish TO english.

    So I think changing it to someting like <-> or <- -> would make more sense.

  • Matt (September 28, 2008)

    About the raquo meaning switch, it doesn’t. It simply implies direction in this case, which makes sense to some, but maybe not to all, which is where the usability issue comes into play.

    If when you click it, it changed the values of each button, then that would work nicely, or if the raquo changed to laquo perhaps…

  • Daniel (September 29, 2008)

    Make it two text boxes. When the user updates one, the other gets the translation.

    A non-ajax version may be to have two text boxes with two buttons between them: <- To Swedish and To English ->

  • MarcusT (February 4, 2009)

    I suggest something rather different – leave the ">>" in place (merely as a helpful visual cue representing translation) and put a button marked "swap" or "switch" centred below the two existing buttons, with graphical arrows pointing to the two buttons above it.

    Something like (no preview facility with these comments so I’m guessing – please add a preview!):
    [quote]Swedish >> English
    \—– SWAP —–/[/quote]

  • DerHorst (February 15, 2010)

    Seems like google reads your Blog.

    (Okay, they "read" nearly everything in the internet.)

    They changed the behavior of the translation interface to exactly the way it was mentioned here.

    See yourself at translate.google.com
    I also made a screenshot of the current style:
    http://ft06.de/extern_verlinkt/gTranslate.png

    The swap-button is not displayed, when the language in the inputfield is selected automaticaly.