makeover

Clinetic

This startup was building a web-based product to help doctors share patient data. In 2000, they contacted us and asked us to take a look at their interface and provide some quick and easy-to-implement fixes. This was not a product where we were free to rework the main interaction elements - the flow from step to step, for example. The product was near release and needed some quick repairs.

Their existing interface used controls on a white background

Like many web-based interfaces we see, we noticed immediately that they are using controls on a white background (above). This is a problem because it makes it difficult to differentiate areas where the user can type in data from the general background. Our first suggestion, then, was to put the controls on a light gray background (below).

Our suggested design helped controls stand out better

There is another problem with the white background. All the basic controls used in our modern interfaces have a 3-dimensional bevelled edge. You can see that the top and left have black and dark gray, and the bottom right has a medium gray and then a very pale gray (almost white). When these controls are placed on a white background, the bottom right edge vanishes, like this:

White controls on a white background don't look 3-dimensional

The result is that the controls on the white background look less 3-dimensional, it's a subtle effect, but one which lowers the overall quality of the interface. We made other observations about color, as well. The colors used in tables were very strong and high contrast.

Original interface used harsh colors

We reduced the overall strength of these colors, producing an effect that's easier on the eye but still draw's the readers attention to the rows and headers.

Redesigned interface was easier on the eyes

We worked on problems beyond just color, however. The navigation system for the product involved a menu of choices on the left, which the user clicked on to initiate processes. In this example here, the user has clicked on "Create Referral" and gone through several steps to reach an "Approved", finished referral.

Titles don't match

The result is that the navigation and orientation elements are out of sync. If the user were to get up and leave his machine, then return, he may have difficulty figuring out where he is in the process. We recommended moving to a model that shows the steps in the process of creating a referral, but this was beyond the scope of changes they were able to make at the time. Finally, we went through each screen of the product and cleaned up the layout and controls to improve readability. This is the screen before we started (you can click on the image to see it in full size).

Before

Original Screen (click to enlarge)

Problems we saw:

Right alignment makes text more difficult to scan
Buttons on bottom right were small, and vanishing. The buttons were also 2-dimensional objects and the tabs 3-dimensional shaded objects. Controls look different.
Button groupings were odd - Clear, Save, Approve, Delete. It was too easy to hit Clear or Delete, and too difficult to see which button would complete the task and move on.
Controls on white background were difficult to read
It was hard to spot "required fields", which have the blue dot
The tabs looked low quality - fuzzy and hard to read. And the colors were either too strong (the yellow) or too close to the other colors of the page. They didn't look like controls, and they didn't look anything like the buttons.
The bands of gray headers were too high contrast, too strong.

After

Redesigned screen (click to enlarge)

Changes we made:

We unified the design of tabs and buttons to help them stand out and look more like controls.
We left aligned all text
A background gray was added to control area, and the headers changed to the yellow used elsewhere in the product.
Required fields were moved to the left and grouped first in each section.
Buttons were reordered on the bottom.

Copyright ©2008 Two Rivers Consulting Corporation. All Rights Reserved.
Telephone: 978.352.2585 and ask for Hagan Rivers
We are located on the North Shore of Massachusetts
Email: moreinfo at tworivers.com (we don't link to our email address so we won't get spam)

Two Rivers Consulting Corporation never sends mass mailings (spam). If you think you have received spam mail from us, then you have been misled. We detest spam mail and we do not support its use. The Coalition Against Unsolicited Commercial Email can help you track down and stop unsolicited email.