In some ways, I feel strongly that the art of UI design has devolved for me to be even writing this post. If I recall correctly, the checkbox was invented in the 1970s. In the glory days of desktop GUIs of the 90s, it played a fairly minor role next to the direct manipulation of windows, columns, floating panels and multi-dimensional controls. However, in the late 90s, UI design and development shifted dramatically with the dominance of web-based applications. Suddenly the creation of a user interface equated with generating a stream of HTML text.
Webmail was one of the first widely used web applications with a user interface that went beyond links and forms. By the early part of this century, webmail usage surpassed the number of people who read email with a desktop, installed email application. The dominant paradigm for selecting messages was the checkbox. There was really no other choice.
Checkboxes were understood to be a necessary evil. HTML offered a small subset of the traditional graphical user interface. In 2002, Oddpost entered the webmail scene with an Outlook-esque interface. It only worked on IE Windows, but provided a glimpse of things to come….or so we thought. If only we waited till the new generation of browsers gained adoption, web applications could be blessed with drag-and-drop and multiple select using modifier keys CTRL and SHIFT. No need to clutter up the screen with columns of redundant checkboxes.
Yahoo aquired Oddpost and several years later offered a new Yahoo Mail with a similar desktop-like interface, combined with a web “look” and more polished graphics.
Meanwhile, Laszlo was also developing a Webmail application. Like Oddpost, it has a desktop-like UI with drag-and-drop and double-click. Additionally, it provides a cinematic user experience with a login panel that visually transforms into the application and animated details that help novice users learn their way around. We were looking to go beyond the desktop experience, and didn’t think twice about leaving behind the bad-old-days of plain old HTML.
Just a few years later, it seemed that Yahoo took a step backwards in their UI by including checkboxes for multiple select.
working at Laszlo, I’ve learned that when large amounts of people using HTML email were introduced to a desktop-like experience, some of them complained that they couldn’t find the features they used to have. People had grown accustomed to the “old” way. They wrote feedback messages asking “how do I delete multiple emails” and “I want to delete the spam that I receive without viewing it.” A few even specifically requested “checkboxes.”
It makes one wonder: is it just a matter of learning something new or is there something to this checkbox thing? Is this just a legacy UI that we have to accommodate and in the future people will wonder why its there and we can let it fade away? or is it somehow a good thing to provide an affordance for multiple select, so novice users know it is there. Also, in providing an alternate method for selection, there’s an option to have the checkbox not display the message, while selecting anywhere else also displays the message. This lets people delete spam without viewing it. It may sound like a sophisticated use case, but there’s a significant minority of folks who care enough about this to be vocal about it.
Time will tell. I’d be interested in what other folks think. (If in fact there is anyone amongst my readers who even considers this little backwater of UI design worthy of discussion.) Whether checkboxes are good or evil when applied to this purpose, I predict that within 5 years Outlook will have checkboxes.
I personally think that check boxes are like the raisins in “Total Bran” Cereal. Some people hate them, some people love them.
I use Gmail, which uses checkboxes, so if we went on popularity, it seems the community at large enjoys the elementary school learned instinct of filling in the bubble.
Which is I think where the familiarity stems from. The drag-and-drop feature is the ‘new’ check box, but it HAS to come with some indication of selection.
So, are check boxes out of date? Nope. Are they here to stay? Mabey.
Who knows, it may become “retro” in our lifetime.
If we went on popularity, Gmail is a distant third behind Yahoo Mail and Windows Live (http://weblogs.hitwise.com/bill-tancer/2008/02/microsoft_and_yahoo_putting_th.html)
From my anecdotal evidence, Gmail has done as well as it has mostly by offering huge capacity and fast search. Although I’ve heard passionate fans of their UI, most folks are drawn there for other reasons.
I don’t think the checkbox will ever go away, but I actually hope it has no staying power as a multiple-select affordance. I hope to be wrong about the Outlook prediction. I would love to see this UI pattern become “retro” in my lifetime.
Sarah
Are you only thinking in terms of webmail UI? even so, I can see cases where checkboxes can allow different actions to multiple items whereas a single selection cannot. I’m also thinking of the Drupal interface where you can see a side-by-side comparison of user role permissions, and how checkboxes work there. I can’t think of a better UI right now that would work without checkboxes for that.
My main point was in using checkboxes for select and multi-select, instead of the standard desktop convention of click and ctrl/shift-click. I can’t think of places I’ve seen that besides webmail, but I wouldn’t be surprised if it is used elsewhere.
If you are talking about this kind of permissions: http://www.linuxjournal.com/files/linuxjournal.com/linuxjournal/articles/087/8710/8710f3.inline.png
Then checkboxes are being used in a standard way where they represent a true/false attribute of an object. I think the visual design of that particular UI could be improved for clarity and readability, but I see that as a standard use of checkboxes.
I can see the benefit of checkboxes as a “marking” tool. The Ctrl/Shift-click process is awkward for inexperienced computer users. One inadvertent click, and their whole carefully-cultivated selection is lost.
The idea behind checkboxes for marking is that you can still use the left click to “select” an item, but you click the checkbox to mark the item for a future task (like delete, mark-as-spam, etc.). Note that this is *not* what Yahoo! Mail does. In Yahoo! Mail, the checkboxes are completely redundant.
An example of the UI concept I described is the checktree (which I wrote):
http://www.laszlocode.com/application.php?projectid=8
You use the normal left click on a tree leaf to “select” it. That means view this item. However, if you need to prune your tree, you use the checkboxes to “mark” the items you want to act on.
This metaphor actually translates to an email application quite well: Left-clicking message can select it for viewing. When you want to act on a bunch of messages (e.g. delete them, send them to the spam folder), you would check them, then select the action you want to perform. When you think about it, we have to fudge our metaphors by a little by Shift/Ctrl-clicking messages: If left-clicking one message views it, what does shift-left-clicking five messages mean? It doesn’t mean anything. We have to disable the preview pane if people select several messages. Moreover, having a separate mechanism for marking as opposed to viewing, means that a user could mark a large number of messages, but still have the ability to preview one by left-clicking it.
I sometimes think the whole paradigm should be rethought. In Yahoo! email, for example, I dislike the checkboxes, but use them if I don’t want the email to appear to be read first. This happens if I select the email, as it then displays in the preview pane, which presumably loads images and other things that let a spammer know he’s reached his mark.
Why do I have to select the message in the first place, just to delete it? Maybe I can right-click with Yahoo, I don’t know, but even with the checkbox, the focus is on the message first, action second. It would be nice to maybe think of a way I could just delete an email without even touching it. Maybe I could drop a bomb from the toolbar onto it, for example. Boom! That would be satisfying. And it puts the action first. I could drag the bomb over a range of emails, or onto a contact, or maybe even onto my account when I’m ready to close it for good.
But even drag-n-drop has its problems. I am forever running out of desk real estate with my mouse, for example, when trying to drag things around. That can often lead to me inadvertently dragging things to somewhere I didn’t want them, since I MUST of course keep my mouse depressed until the exact moment I want the action to occur–nothing like relying on the accuracy of my motor skills to make something happen on my computer (as if this doesn’t frustrate me enough when I’m playing video games). And then there’s often the “hidden window” problem where what I want to drag or where I want to drag it is now behind something else on my desktop. (I guess Apple is now trying to solve this with the idea of a semi-transparent window, but how long did it take for someone to even address this–twenty years of desktop GUI’s?)
Like the calculator example I always use (WHY are PC calculators made to look like the little hand-helds that have been around for 30 years: you know, with a single-line LCD and an M+ button–hello people, this is a full-up computer capable of storing a baZILLION numbers, not just the last one on the screen, so why not REINVENT the calculator to use the full capability) there definitely is the sad reality of paradigm lock. And maybe it’s those idiot users demanding it be that way because it’s what they know. But I always think that UI designers should look for new, more intuitive ways to get things done; if they’re really good, users will grok them without needing to even have them explained, let alone lectured on how much better it is.
Easy for me to say of course since I’m not a UI designer :)
I found another example of the checkbox/selection paradigm that I commented about earlier: The calendars option in Apple’s iCal. The checkboxes control which calendars are displayed. The selection of the actual item indicates which single calendar is “active” – i.e. which calendar a new appointments will be added to by default.
Here’s a screenshot:
http://www.antunkarlovac.com/stuff/apple_ical_checkbox_selection.png
I started using a Mac (along with iCal) several months ago, and never paid attention to this. I guess that means it felt natural to me. Of course, since Apple designed this UI, it must certainly be beyond dispute.
I’ll prefix my comments by saying that the majority of my development has occurred on the desktop side of things although I have been developing for the web for the past couple of years.
I personally it difficult to look past the fact that checkboxes have traditionally been used to indicate positive/affirmative states. For instance:
– CHECK -> I want Option 1
– CHECK -> I want Option 2
– UNCHECK -> I do not want Option 3
Using the above e-mail examples, I find it slightly counterintuitive to use checkboxes to indicate selection for a negative action, e.g. checking e-mails to delete them. When a list exists from which items are being removed, I’ve seen users get confused by whether checking an item will maintain its existence on a list or whether checking an item will cause it to be removed. The question ends up being: Am I checking it to keep it or am I checking it to get rid of it? I know that people are thinking “Well, you’ve checked an item to indicate it for inclusion for deletion”, but anecdotal experience has sometimes shown otherwise.
Although checkboxes make some things easier, they can complicate other UI interactions.
Well, 5 years have shot by since we had this discussion, and made our bet. I’m happy to report that there are many more online applications that are pushing the boundaries of UX design, and that HTML itself has enabled some of these advances.
Also, Outlook doesn’t have checkboxes. You owe me $5 :)