Blog

Using select boxes to convey choice

August 29th, 2008 at 4:02pm | 2 Comments

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.

  1. ChadL

    Doesn’t the link bring up a prompt to change the province?

    The whole notion of choosing your province is a little lame anyway, as some geo targeting on your IP address would virtually eliminate the need for this annoying “choose your province” prompt. I’ve always thought those were very poorly done.

    Isn’t it Cossette that did the re-brand for Bell? I suspect they did the website as well.

    August 29th, 2008 at 9:04pm

  2. Brad Touesnard

    @chadl Yes, the province link does bring up a province selector dialog. However, my point is that it’s not obvious to the user that they can change their province by clicking on that link. The select box in my proposal conveys to the user that they can select another province. Of course clicking the select box could still launch the province chooser.

    Yes, IP address based geo targeting could help guess the province, but although it’s quite accurate, it’s not perfect, so it wouldn’t be a replacement.

    Cossette was involved with the rebranding project, but I don’t know if they did the web site. In any case, this was a good current example of overlooking form controls to convey visual cues. It wasn’t a gripe about Bell or their rebranding partners.

    August 29th, 2008 at 11:49pm

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>