A New User Experience, Part 4 (of 5): Web Standards Architecture

July 31st, 2009

Topics: Measurement, Optimization

In the 1981 documentary “Vernon, Florida” by Errol Morris, there is the following joke…

Two sailors are looking out at the ocean. First sailor says, “That’s a lot of water out there.” The second sailor responds, “Yeah, and that’s just the top of it.”

That is how I feel about web standards. What you see in the browser, is just the final rendering that is a combination of html, css, and javascript. So much care and detail can go into these elements to produce the final result. Often, as I browse the web and stumble across a nicely designed site, I will turn off styles and/or javascript to enjoy the simplicity of the plain html and then scan the css and javascript to see how it was constructed.

In the previous article in this series, I walked through some of the more significant design changes we made to Tag Builder. In this article, I will walk through the changes we made just below the surface, to the client-side architecture (html, css, and javascript) to create a new user experience.

1. Web Standards

Web standards is nothing new. It is usually the term used to describe a web application or web site that uses basic HTML elements for marking up content, css for presentation and layout, and javascript for interactivity and dynamic content updates. Web standards typically avoids using unnecessary browser plugins to do the heavy lifting. With advances in javascript libraries and browser performance boosts, web standards based web applications are approaching native OS level quality. To build a world class user experience with our web applications, building in web standards is key.

Tag Builder

Tag Builder

Our goal for this revision of Tag Builder was to strip down the HTML to its bare essentials. Divs, classes, lists, paragraphs, headlines, and form elements are the basic building blocks we rebuilt it with. All of the layout, styling, and behavior is achieved using CSS and javascript. You can see it for yourself by turning off styles in your browser (use these instructions to turn off styles in Firefox, IE, and/or Safari). By taking the time to separate these layers and let the rendered html, css, and javascript to do the heavy lifting, it frees up the server side code to be much simpler. This dramatically improves performance and reduces server side complexity.

Tag Builder with styles turned off

Tag Builder with styles turned off

2. Accessibility

One of the major benefits of working with web standards is accessibility. In my previous experiences with developing web applications, accessibility is often thought of as an additional task like multilanguage support. By staying true to web standards, many accessibility considerations come automatically. Our attention to detail created one of the most unusual challenges we have experienced with web standards. We wanted to ensure that the Tag Builder form could be navigated by keyboard. When the elements tabbed down into the Additional Options, we found that the browser would jump the view to each field as it was highlighted. This seems normal, but what was surprising was that the javascript or CSS was unaware that the page had moved and so we saw that fields would just show up in odd parts of the interface and destroy the multi-slide effect of moving from one section to another. We eventually found a way to trigger a call to javascript just before the field was in focus so that all things were ready when the tab action occurred. We were able to keep the javascript sliding effect and the ability to navigate the form by keyboard.

3. Javascript for Helpful Behavior

There are many javascript libraries available today to add a bit of slickness to web interfaces. These can often be overdone and to the detriment of the user experience. For Tag Builder, we had a few areas in which javascript behavior was considered to be beneficial and we used it sparingly.

Tag Builder is one long form with many options. We wanted to make sure that users could access the many options but not be overwhelmed by them nor did we want to split the form into many separate forms as many users like to hop around the options when configuring their tracking code. The solution we came up with was to collapse the options using javascript and then as the user clicks on the options they are interested in, those options slide into view. As a user fills out the form fields, light gray dots turn dark indicating how much of the form is filled out.

Indicator Dots

Indicator Dots

Another way in which we leveraged javascript for behavior was to use it to surface help topics.

4. Integrated Help System

In the previous version of Tag Builder, each form field had companion help that explained what the option entailed and exposed the details associated with each option. This was met with praise from users but left the form littered with little question marks and reduced the readability. To solve this challenge, we used javascript and css. If you turn off styles, you’ll see that the quick help is part of the html. When you turn styles and css on, you’ll see that only when you rollover a form field, will the quick help appear. This quick help provides enough information to address the basic implication of each form field. We also added a link at the end of each quick help for more info. When a user clicks that, a simple modal window pops up with the related content, explaining the option in further detail.

Rollover Help

Rollover Help

With the focus on web standards, the redesigned Tag Builder is much cleaner, simpler, accessible, friendlier, and ready for future expansion. With the launch of the Webtrends API, we also developed a simple web standards based interface for developers to generate and test various web services.

REST URL Generator

REST URL Generator

I hope you’ve enjoyed this series but you are probably thinking, “How much can this guy write about a simple one page form web application?” This is the last article. For the 5th and final part in this series, I have something much bigger than Tag Builder or the REST URL Generator to detail. Our team has been very busy over the last couple of months. I’ve been trying to pace myself with this series on our new user experience as we wrapped up development so that I could end it with some exciting news. I’m happy to say that next week is it! Follow us on Twitter to find out as soon as we announce and stay tuned to this blog to learn more following the announcement.

One Response to “A New User Experience, Part 4 (of 5): Web Standards Architecture”

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>