All articles

Make clickable elements more obvious

26. September 2008 12:41 by Janko in Articles | tags: usability

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?

If you liked this article why don't you share it:

Stumble it delicious Digg it Float it DZone it Kick it Bump it E-mail

Amazing web design articles of Summer 2008This is the second part of best summer 2008 articles, but this time focus is on web design. Again, t...Justify elements using jQuery and CSSWhen creating a web form you have to make a functional and visually aligned layout. The simplest way...Awesome web development and web design articles and sites in May 2008This article shows a reviews of 16 great articles and sites I found in May 2008. There are articles ...

Comments

JEggers

26 Sep 2008 at 02:05

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 at 03:19

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 at 07:45

I vote the text link Janko suggested. Obvious and simple

Good call

Samuel

27 Sep 2008 at 05:35

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 at 09:11

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 at 10:27

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 at 06:23

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 at 09:12

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

Webdesign Grafische Vormgeving

28 Sep 2008 at 03:03

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 at 06:50

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 at 03:59

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

Add comment

Name (Required)
E-mail (Required) (Will show your Gravatar icon) Website Country Country flag

b i u quote Comment

Notify me when new comments are added

	Kris 14 comments
	Santhos Webdesign 10 comments
	Jin 9 comments
	Marco 8 comments

Make clickable elements more obvious

Related posts

Comments

Add comment

Find me on:

Supporters

Favorite posts

Recently published

Top commenters

Friends

Twitter

I wanted a simple footer.

Make clickable elements more obvious

Related posts

Comments

Add comment

Find me on:

Supporters

Tag cloud

Favorite posts

Recently published

Top commenters

Friends

Twitter

I wanted a simple footer.