Friday, November 26, 2010

It never occurred to me to ask the question, until last night. We have a fish in an aquarium in the corner of our dining room. I think he is a char — we caught him in a pond as a minnow so I have never been sure.

He doesn't get upset easily; I can move around the room without disturbing him and we went all the way through Thanksgiving — setting up the table, eating and cleaning up — without his showing any sign of stress.

He can clearly see what is going on. When I come down in the morning, he swims to the corner (closest to the kitchen) and wags his tail, waiting for me to feed him as is the daily ritual.

But last night, after clearing the table, I figured we would switch directly from Thanksgiving to Christmas, but as I moved towards the table to put on the new tablecloth, our fish (Sam) suddenly started splashing and darting back and forth in alarm. Something had set him off.

What was it? I occasionally take him by surprise and he splashes and hides behind his rock. But this time he was more alarmed than usual. And I wasn't even that close to his aquarium. But there was one difference: I was carrying a bright red tablecloth.

The bright color red had triggered something in him. He was very agitated until I had the tablecloth on the table. Once it stopped moving, he calmed down. I hadn't seen behavior like this since he was a very young fish (and not accustomed to his environment).

So, do fish react to the color red like the proverbial bull? Or would it be anything bright and moving that triggers a defensive response? He hasn't reacted to colored shirts or other materials that I noticed. Whatever the cause, the result was dramatic.

Tuesday, November 9, 2010

OK. I am back to designing interfaces. Well, interaction design more than UI design since I am concentrating on the larger scale sets of content and interaction rather than the detailed UI artifacts on the page.

One thing I am learning this time around is that I have a proclivity for tabs. But tabs are dangerous. Let me explain.

Tabs are an easy way out. They let you create multiple "views" or "panels" at an equal level and tie them together with the tabs. For example, Facebook (with Home / Profile / Find Friends), Yahoo Shopping, or — most famously — Amazon. Of course, Amazon has dropped their tabs. But the intent is still present in their lefthand pull-right menus.

The key to a tabbed interface is that it lets the user decide between multiple functions or views. The advantage is that the tabs stay present so the user can navigate easily between functions. The disadvantage is that it is up to the user to decide; the interface does not promote a specific priority or process.

Which is what makes tabs dangerous. It is too easy for the designer to accede responsibility for guiding the user and say disingenuously "the user gets to decide".

Tabs make sense when dealing with a large inventory of heterogeneous objects. In this situation the tabs act as a classification mechanism. But what if the content is not evenly distributed or readily partitioned? Then the tabs are simply a way to "chunk" a large set of functions with little regard for their natural affinities (c.f. the facebook tabs).

While working on my current design project, I discovered that I often fall back on tabs as a default technique for organizing disparate information and controls. The consequence is that I tend to get lazy and not think through the other possible options.

Even if done well, tabs tend to reinforce ingrained ways of viewing the content, without thinking too deeply about the alternatives. Using tabs feels safe, but it can unnecessarily fragment the workspace, separating functions the user may want to compare or contrast. (Jakob Nielsen has an excellent essay on this topic.)

So, if tabs are not the answer, what are the alternatives? Perhaps it might serve us well to think about why tabs so readily come to mind. I suspect it is historical. The web started as a hypertext delivery system, where the text was largely static. There were forms, but little other interactivity. Much of the "early days" of the web were focused on determining best how to:

Structure the content

Represent the structure as navigation

Menu bars, navigation menus, and ultimately tabs became essential components of the web experience and designer's toolkit. However, as we move into Web 2.0 and the predominance of scripting languages, flash, and HTML v5, the web is not only interactive, it becomes an application of it own.

Although there is still a lot of text and pictures where navigation plays a role, there is a lot more interaction involved and the design must help direct users through processes, not just content. It is unclear that what has been learned from years of application interface design has yet to be effectively integrated in web interface design.