Sep 26 2008 13

Make clickable elements more obvious

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 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. Sigh!

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 on how usability could be improved here?

With support from

Written by Janko in User experience, tagged under usability

13 Comments - Show them and leave yours

JEggers 26 Sep 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 26 Sep 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 26 Sep 2008 #

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

Samuel 27 Sep 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 27 Sep 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 }} switch button

Janko 27 Sep 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 27 Sep 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 27 Sep 2008 #

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

Webdesign Grafische Vormgeving 28 Sep 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 28 Sep 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 29 Sep 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 04 Feb 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!):
Swedish >> English
\----- SWAP -----/

DerHorst 15 Feb 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.

Comments are closed