Using select boxes to convey choice

If you live in Canada, you would have to be living under a rock for the past few weeks to not notice Bell‘s agressive rebranding campaign. They’ve been peppering nearly every medium with their ‘er’ ads. From bus stop signs to television ads, you can’t really escape it. Curious what they had done with their web site, I decided to check out.

My first impressions were positive. The design is pretty good. Then I noticed the language and province indicators at the top of the page, “Language: FR” and “Province: ON” respectively.

Naturally, one would expect “Language: FR” to mean the current language is “FR” (i.e. French) and “Province: ON” to mean the current province is “ON” (i.e. Ontario).  The current language however, was not French.  The site was in English.

To confuse things further, “FR” is a link, so it stands to reason that clicking it will bring you to a French web site.  But then what does clicking “ON” do?  Bring you to an Ontario web site?  That doesn’t make sense.

All of these inconsistencies are quite confusing at first, but after you fiddle with it a bit…well, it’s really too late.  Choosing your language and province is something you do once or twice, so it’s imperative for the user that it is simple and intuitive the first time around.

From Bell’s attempt, it may seem that creating intuitive controls to choose your language and province is difficult, but it’s not.  Just look at Air Canada‘s web site.  It uses simple select boxes to choose your country and language.  A select box is a brilliant UI element (developed in the late 70’s by Xerox PARC) to convey choice to the user.  As a bonus, a select box can convey to the user which option is currently chosen.  Although Air Canada used select boxes, radio buttons can work better in some situations (as I’ve written about before).

The above image demonstrates what an intuitive interface for choosing a language and province might look like on Bell’s web site.  Styled select boxes give the user an important visual cue which is not currently present: there are other options to choose.

You may have noticed that I’ve been highlighting the word “choose”.  Why?  Because the word “choose” is a really good hint that some form of a choice control should be used to let the user know there is a choice to be made.