Skip Navigation and You

Who needs a tagline when you have us?

All Paths Lead Forward

May 14th, 2009 by smeranda

As the User Experience Architect, part of my role is exploring in depth our users’ web site habits, their likes, their dislikes and their usage requirements. Many primary and secondary research methods are constantly used to gather as much knowledge pertaining to our users as possible. This helps inform directions and requirements when creating online interactions. It’s really a fun and dynamic experience.

As a reader of this blog, you are aware that the Web Developers Network is in the process of realigning with a face lift. Aaron has explained much of the process in his previous post, and I won’t rehash his descriptions. Instead, I’d like to take you on a journey of how the knowledge gained from the research went into the future design.

As you may recall, at the end of March, we began gathering survey data designed to capture specific information regarding our current audiences’ use of the internet in general, their thoughts and expectations of currently, and their reactions and impressions of three possible design candidates. In addition, over the past 9 months, data has been gathered through site-wide web analytics, from discussions with students, faculty and staff, and from outside entities with specific understanding and knowledge of higher ed internet usage and design trends. Each of these have played a key role in determining the elements of the future design.

WDN Design Survey

This survey played a key role in determining the broad requirements of the realignment while also allowing the design team to distill the opportunities from the three design candidates into one future design.

On a broad level, several key findings either reinforced previous concerns of in its current form, or introduced new issues. This research identified the following major issues with

  • Our current navigation system is fractured. When it comes to navigating, most of users have a less than satisfactory time finding what they need. Many factors play into this, but from a design standpoint two main issue arose:
    1. The commas used as separators in the left-side navigation interferes with readability, ease of use and overall way-finding. In addition, the navigation hidden by the “more” button also contributes negatively.
    2. Multiple navigation systems exist on one page and confuse our users. For instance, if a user is on the Engineering department’s site, does she click on the “Prospective Student” link at the top of the page, or the “Prospective Student” link in the left-side navigation? Furthermore, if she then travels to the College of Business’s site, does she click on the “Prospective Student” link in the top right college navigation?
  • Page hierarchy is difficult to understand, and in need of streamlining. For instance, a department’s title is on the same vertical level as the college’s navigation.

In addition to data specific to, many more discoveries of general internet usage have helped shape the path:

  • Search is preferred over navigational systems
  • Video usage is an expectation of positive usage experiences
  • Visit other college and university web sites are not expectation setters of, instead expectations are set by everyday used sites like Facebook, Google, Amazon, etc…

The research also gathered impressions of the three design candidates. Going into this evaluation stage, it was understood that the future template would likely be dramatically different than any single proposed candidate. Therefore, this survey was designed to help us gather a consensus on look and feel and reactions (both positive and negative) on proposed elements. As a refresher, here are the three candidates:

Group A Design Group B Design Group C Design

What we learned from this portion of the survey:

  • All three were very strong, with each receiving many positive reviews. In the end, the Group B design had the strongest visual structure.
  • While the Group B design provided the look and feel most demanded, many elements from Group A & Group C were also favored strongly.
  • Some audience members are passionate about their expectations of! (which is awesome)

The next step in the road was to use this information to distill each of the three designs into the future template. Tens of thousands of comments were read, evaluated and explored (often multiple times). Many of these comments provided excellent feedback that helped refine directions. It was up to the design team to take the feedback, and provide leadership into the future design.

Other Informing Sources

The WDN Survey wasn’t the only input into the direction of the future, nor will it be the final source of evaluation. Some key findings from other sources of research that have played a role in this design:

  • On, when the top global navigation is used, 90% of usage is from 1 of the top 6 global pages. Of the remaining 10%, most usage is accidental (as mentioned in the above Prospective Students example). This means, that 99% of our pages do not need the global navigation displayed, and in fact it hinders user experience on many of these pages.
  • Online videos are getting larger in size and higher in quality. Combined with an expectation of video usage for a rich user experience, we have the need for a full display stage.
  • Access to content must be even quicker. Users are turning more to search, and ignoring the “chrome” of pages to quickly get to the primary reason for their visit.

The Distillation Process

The design group had the enormous task of taking the three well-received designs, combined with the various aggregation of direction-forming knowledge, and create one future template. The following image represents the visual distillation of the three designs into the future template:

As you can see, the final design incorporated elements from all three designs, with the encompassing vision and direction set forth by the Group B design:

  • The header is a refinement and evolution of Group B.
  • The navigation (more on navigation in a future post) is a hybrid of Group C in terms of functionality, but changed the row-based layout to a more readable column-based navigation.
  • The content area brings in elements of all three designs, and offers the most flexibility possible, by utilizing the full width of the design.
  • The footer improves the expanded element of Group C, and combines with the visual design of Group A.
  • The outer shell, and the background for monitors wider than 1024 pixels is a direct evolution of the Group B design

So, What does this Design Provide?

The largest evolution in comparison to the current template is the navigation. As I mentioned before, the current template utilized multiple levels of navigation spread out across the page. This new design brings all the navigation elements into a single, compartmentalized structure. The navigation is now at the top of the page, and contributes to the solution for the visual hierarchy problem.

Above the navigation is a much more usable and prominent search box. Our research indicated users preferred search over navigation by an almost 2 to 1 margin.

Below the navigation is the full-width content area, a new feature that will allow for the ultimate display of video, web applications, and content.

Finally, the expanded footer allows for the consistent content found on all pages of a site.

The Improvements Won’t Stop

Even though the visual aspect is at the coding hand-off stage, on-going user testing will continue to be done in order to refine the design. Just as done before, many improvements will be made during the upcoming coding process, and updates will be done as needed after implementation.

Overall, the process has been very informative for all involved. Our users have provided valuable feedback along the way that has influenced the design up to this point. We expect our users to continue with this effort, and I’m always eager to learn more about our users needs — in fact, the new design will incorporate an element to provide feedback more quickly and easily.

2 Responses to “All Paths Lead Forward”

  1. UNL | Website Realignment | Introducing the Future Design of Says:

    [...] On May 12, the final result of the design team was presented to the Web Developers Network. The design, a visual realignment, will become the new template and interface for beginning August 17. For details on how the design came to be, take a look at Aaron’s explanation of the process, and my explanation of the research. [...]

  2. Meg Lauerman Says:

    I appreciate the posted explanations in such clear terms.
    Thanks for the great work on this project to all in the Web Developer Network.
    I look forward to the launch.

Leave a Reply