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 UNL.edu 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.
Let’s See the New Template!
From the Top
- In the top left corner is the “N,” roughly the same size as in our current design. However, the University of Nebraska-Lincoln title is much larger and more prominent.
- In the upper right corner is a much larger search box. We have also removed the option to select the type of search to handle, and will replace with a results page that incorporates search results from unl.edu, peoplefinder and the local site. The idea is to create one simple interface element to use when searching the site.
- Immediately below the search box is a row of icons. The muted-in-color icons serve as links to site-wide resources (in order): RSS Links, current weather, the event calendar, peoplefinder and the public webcams. When the mouse rolls over these icons, they will be presented in color with little help “balloons” describing each element. Clicking on these will bring available the selected resource.
- Perhaps the largest advancement from our current site is the display of the navigation. The new design brings together the multiple navigation schemes present on any page and places them in a single, efficient and compartmentalized section. More on the functionality of the navigation below.
- Below the navigation, is a full-width, four-column content section. This area is reserved for the most important elements of the page, and is available to the developers to present in the fashion their users most need. Content area resources will be available for developers.
- The last section of the page is an extended footer. This is reserved for site-wide content that can be found on every page (related links, promotional items, contact information, etc…)
How does the Navigation Work?
The navigation on this template has been streamlined into one, easy-to-use element. What previously represented four separate navigational areas, has been combined and organized at the top of the page.
The navigation starts with the breadcrumbs/site hierarchy. For instance, on the image below, the red bar shows UNL > Admissions. The navigation displayed is for the Admissions department, as it is the current site our user is on.
The tab visual indicator is used to show which site the navigation belongs to.
At this point, our user can move her mouse over any of the Admissions links and by doing so, open a full drawer of all the links for the Admissions department:
This drawer will overlay the content and will disappear when she moves her mouse off. She can use any link in the drawer.
If our user would like to keep the navigation displayed at all times, across all sites on UNL.edu during every visit, she can opt to select the link at the bottom of the drawer that says: “click to always show full navigation.” (note, this wording may change based on user-testing). By selecting this option, the navigation will always be displayed, and the content will be pulled out from underneath the drawer:
Upon doing this, the link at the bottom of the drawer will change to: “click to always hide full navigation,” allowing our user to change her preference at any time.
In addition, this navigation element allows for added functionality. Our user also has the option to mouse over “UNL” in the red bar, and the navigation in the drawer will refresh with the navigation found on unl.edu, giving her quick access to the global navigation. Each site in the breadcrumb area (the red bar) will have the ability to showcase its primary navigation. For instance, if our user is on the “Accounting” site, her breadcrumb area would be laid out as: UNL > College of Business Administration > Accounting. By default she would have the Accounting site’s navigation, but a mouse over “College of Business Administration” will present CBA’s navigation, and a mouse over of “UNL” will present the global UNL navigation.
The new template adds the most real estate available to the content, while also streamlining hierarchy and efficiency through the compartmentalized navigation element. For more examples of the new template, check out the bulletin board post.
The process of coding this template into a workable page is underway. In order to help our users get to know the new template, we will be providing resources over the next few months that will allow our users to learn more and play with the future of UNL.edu.