In the previous two articles*, I introduced the newly redesigned Webtrends custom tracking-code creation tool called Tag Builder and then provided some background into the user centered design methodology, Paper Prototyping, used to construct the flow of the application. In this post, I will highlight the most significant design improvements that defined the new look of Tag Builder and influence products to come.

1. Palette

The most noticeable change with the new Tag Builder is the monochromatic color palette. It is sparse, simple, and gets right to the point. As we push the design of Webtrends applications forward, we are intent on establishing a professional, concise, and highly engineered look and feel. Think German automobile. Think professional photography equipment. Webtrends products are professional products. The palette of charcoal, magnesium, and white dominate the design while hints of litho blue and stop sign red reveal themselves on hover states and error messaging. Color is still there, just reserved for when it is effective.

In an addition to Tag Builder, you may have also noticed that the brand identity for Webtrends received a facelift. The webtrends.com website reflects this and is being rolled out across all of our marketing materials. The new wordmark is modern. The new palette, is complimentary to Tag Builder. Both are heavily monochromatic but the modern blue and warm grays have a much stronger presence with the outbound marketing while the product reserves its use of color for important indicators and highlights. This sophistication in coordination is like the outfits of a well dressed Hollywood couple attending the Oscars. Tag Builder was released before the branding update was revealed and so you will see future refinements to product design to reflect alignment.

2. Grid

The grid has received a lot of attention in the web design community in the past couple of years (thanks to pioneers like Khoi Vinh at the New York Times). The grid has been used for decades to organize typographical information in print so that blocks of type define the geometry and patterns of the design. This allows for the elimination of ornamental design clutter and reduces design to its essential elements. The new Tag Builder uses a 960 based grid and this allowed us to simplify the design dramatically. It may seem a bit open at first with excess whitespace, but as soon as you interact with Tag Builder, you’ll notice that the whitespace gives way to hover help text that no longer requires a click just to get the basic concept of each fieldset.

3. Language

Because the previous Tag Builder required this additional click to access any help, the field labels ended up being sentence like in places and overly descriptive. This created a wordy design that left the user with a lack of confidence and uncertainty as it required more comprehension even for basic fields. The new labels are short and conversational in tone. This is easier to comprehend and it leads to a more confident user. For instance, a certain label read, “Single first-party cookie (use one first-party cookie across the primary and each subdomain: Cookie domain attribute.” In the new interface it now reads, “The site domain you want to track,” followed by the entry field. When the user hovers over the field, hover help appears and provides the user with an opportunity to confirm their assumptions as well as providing a link if the user wishes to explore the topic in depth. In addition to improving the readability of the labels and hover help, we also improved the error messaging for improperly filled out fields. The language short, concise, and straight to the point.

4. Indicator Dots

One of the most troublesome design challenges we faced with the new Tag Builder was how to clearly communicate completed fields when only one tab was visible at a time. We solved this challenge with a unique solution that we named, “indicator dots.” We noticed in the prototyping tests that users would click through the tabs a few times just as a driver in a car trying to make a left hand turn onto a busy street swings their head back and forth. With the indicator dots, now they at least knew which tabs that had completed some information in. This challenge grew as we realized that there was no clear way to message the user if they had improperly filled out a field on one tab when clicking the “Build Tag” button. So, we also leveraged the indicator dots to turn red when there is a field error on a tab. In the end, the indicator dots communicate to the user three things; how many choices are there on a tab, how many were filled out, and which fields contain errors when submitting the form.

5. Confirmation

A related challenge to the indicator dots was the lack of any confirmation before the user clicked the “Build Tag” submit button. The previous version of Tag Builder directly triggered the “download” function of the browser when this was clicked. This worked ok in Internet Explorer but in Firefox and Safari, the download function didn’t allow the user to name the file. We realized we needed a confirmation page that condensed the information related to that particular tag setup on one screen paired with the option to name the zip package.

Summary

We made many additional improvements with Tag Builder and I hope if you are a user, you have noticed an improved workflow. In the next article, I’ll walk through the changes we made regarding the web standards architecture.

I’d love to hear your feedback (thoughts, comments, questions, or critiques) on this new design direction.

*When I set out to write this five part series, I didn’t intend for it to be as drawn out. A new baby and product design improvements beyond Tag Builder are keeping me quite busy.

Tags: Best Practices, Tagging, tracking, UX

This entry was posted on Wednesday, May 13th, 2009 at 4:00 pm and is filed under Customer Experience, Inside WebTrends, User Experience, WebTrends Innovations. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.