Good/Bad Design

A closer look at some examples of good and bad design

Good/bad: Car Audio Dashboards

I don’t own a car, but I do occasionally ride shotgun and man the audio controls in the cars of friends and family members. Two of the cars I’m familiar with, my brother’s 2013 Honda Civic and my Mom’s 2013 Mini-Cooper, contain very different audio control user experiences.

The Good: 2013 Honda Civic

The overall usability of the audio dashboard is very good due to it’s clean layout and the relative size of the controls.

It’s clear that the designers carefully considered which functions are most important to drivers and assigned real estate accordingly. The next/fast forward, previous/rewind and volume controls are given the most real estate for good reason. All of the controls are very easy to locate and use while driving.

The Bad: 2013 Mini Cooper

In contrast to the Civic’s dashboard, the Mini-Cooper’s is hard to use and error prone. The designers devoted a huge portion of the center dashboard to the speedometer (as part of the car’s circular theme), which crowded out the audio controls.

The biggest issue is a break from convention by placing a tuner dial in a location many users associate with volume control (highlighted with yellow circle). The volume control (highlighted with red box) was placed below the CD player, away from the rest of the audio controls. My Mom has driven the car for ~3 years and she still occasionally adjusts the radio stations instead of the volume by mistake.

Another issue is the awkward mapping of the dashed buttons directly below the display. When the car is turned on, these buttons are most commonly used to select preset stations and change from FM to AM and vice versa. The awkward angle at which the driver sees these buttons in relation to the digital display, leads to frequent errors.

Good/bad: Analytic web apps

The Good: Mixpanel

When first logging into Mixpanel, it is very clear what you can do and what you should be doing. The user should ‘SET UP NOW’ so that Mixpanel can start collecting data. Another suggestion is for the user to ‘Update project settings & invite team members’ (bottom left message).

While the app itself has a ton of features, they are clearly and intuitively grouped into navigation areas. The side nav bar groups items — each of which has a unique name and icon — into three clear nouns, Activity, Engagement and People. The top left dropdown is clearly a way to organize and create projects. The bottom left icons are easily identifiable administrative tasks and they display descriptions on hover.

The Bad: anonymous enterprise web app ☹

This app is poorly laid out resulting in a few usability issues. First, the ‘Projects’ navigation area is too small and doesn’t display the entire project names. The only way to see the whole project name is to hover. This is an issue because many of the project names are very similar. With so much white space elsewhere, there is no reason this navigation area should be so crowded.

The main navigation bar (home, chart and lightbulb icons) should also be bigger. Because the chart and lightbulb icons are a bit cryptic, it would be best to use actual text instead of icons.

It’s also unclear what the user can do from the landing page. He can see that there are a handful of projects, each of which has a number of reports, but he gets no sense of how to interact with the reports — those details are only available once a report is clicked on.

Good/bad: Tabbed navigation

The Good: Ministry of Sound website

The use of tabs on this site is very clear and effective. The tab label is connected to the sub-nav and content using color. Each section uses a unique color which is used as an accent in the content below. The use of slightly rounded corners also helps distinguish the active tab. The label names are all clear, straightforward nouns making it obvious what each tab contains.

The Bad: Balboa Park website

The main issue with this site is the lack of consistency in the navigation. There are two areas with tabbed navigation and they each behave differently.

The first navigation bar is not actually tabbed — clicking on any of the elements opens a new page with totally different navigation elements. The second tabbed navigation bar appears to be nested within the first, and it does behave like actual tabs — clicking on a tab displays it’s content.

In addition to the lack of consistency in their functionality, the navigation bars use different sans-serif typefaces: Helvetica in the first and Arial in the second (two other typefaces are also used on the site).

The active tab doesn’t look like it’s any closer or more prominent. The content of the active tab doesn’t look like it belongs with the tab label, it appears to be floating below the nav bar.