DesignAday

My name is Jack Moffett. I am an Interaction Designer with over ten years of experience. According to Herb Simon, that makes me an expert, so I must have something worth sharing. I have started this venture as an exercise to spur critical thinking about my chosen profession. I hope that others may find it thought provoking as well.

DesignAday will present a brief thought about Design every weekday.
Feb 21
Permalink

Pseudo Tabs

I’m in the market for a new car, looking to replace a Chrysler Voyager. I was checking out the Mazda5 on their site, and decided to use their “Build a Vehicle” feature (shown below).

I selected a trim and transmission, and then pressed the “Colors” tab. Nothing happened. I clicked again. Still nothing. I clicked the “Model” tab and was returned to the screen on which you choose the model. Then I pressed the “Trim” tab to return to where I was. Again, nothing. Then my wife, who had used the site previously, pointed out the orange arrow buttons at the bottom of the screen. It’s a serial process—a wizard. You must make selections on the current “tab” before proceeding to the next.

There is a fundamental disconnect in the functionality presented by the site and the mechanism used to present it. Tabs, by their very nature, indicate an arbitrary method of navigation. They also suggest saved state. I should be able to click on any tab in any sequence secure in the knowledge that selections on each tab will be saved as I jump between them.

Contrary to this natural expectation—a basic design pattern—the Mazda site commits three grievous errors:

  1. The “tabs” represent a serialized process with required inputs. Thus, they cannot be used to navigate arbitrarily, nor to navigate forwards through the process.
  2. Even though the tabs will sometimes allow navigation, and sometimes won’t, they do not convey state. Inactive tabs could be grayed-out to indicate that they cannot be clicked. 
  3. They will allow the user to navigate backwards through the process, but state is not saved. Having navigated backwards, the user must make their selections anew before proceeding forward. To make matters worse, the user is not alerted to the fact that they are erasing their selections.

The result is a very poor user experience. It is confusing at first, and completely frustrating. That can’t be good for business.