Skip Navigation

UNL.edu and You

Who needs a tagline when you have us?

Introducing the Future Design of UNL.edu

May 19th, 2009 by smeranda

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!

The visual design of the 2009 UNL.edu template in the default state.

The visual design of the 2009 UNL.edu template in the default state.

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.

navdefault

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:

navhover

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:

navdisplayed

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.

Final Thoughts

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.

Related Posts

http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/digg_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/reddit_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/stumbleupon_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/delicious_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/furl_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/technorati_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/google_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/myspace_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/facebook_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/yahoobuzz_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/sphinn_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/mixx_32.png http://www1.unl.edu/iimblog/wp-content/plugins/sociofluid/images/twitter_32.png

8 Responses to “Introducing the Future Design of UNL.edu”

  1. Wayne State Web Communications Blog » Blog Archive » [Firday Links] The oops missed a few weeks edition Says:

    [...] Introducing the Future Design of UNL.edu [...]

  2. mw Says:

    I only checked in on the selection process sporadically, but I like the end result!

  3. David Sockrider Says:

    Overall, I like the design. The large content area is an improvement for display of content and media. I’m very interested in seeing the navigation in action at the department level.

    I do have some questions about the reasons some elements are displayed the way they are.

    1. The left random promo was designed to call attention to ‘promotional’ items that need emphasized. Why is the left random promo moved to least visible place on the page? Promotional items should be on the screen without scrolling.

    2. Will we be able to choose an alternate background image rather than the ‘rising sun’ graphic in the back? It would be nice to be able to create individual section identity using a custom background image.

    3. Why do we have a link on every page of the UNL site to a webcam that looks at the top of tree? What’s the value and purpose of that? I think the camera should be moved to see the fountain or other more public area, otherwise get rid of the link.

  4. smeranda Says:

    David:

    In our current design, the random promo is only visible after a scroll. Given the compartmentalized nature of the design, the promo item only naturally fits in two places: the content or the footer. Since the content is exclusively reserved for the department, it makes more sense to put the promo in the footer. With that said, the content area is available for any additional promos.

    To my knowledge, there has been no discussion on allowing the background image to be editable.

    As for the webcam, we are the home of Arbor Day! :-)

  5. Bob Crisler Says:

    Agree on the webcam, David. I’ve talked with the Union a few times over the years about placing a camera up on the balcony. I just haven’t been able to come up with the money for a camera with an outdoor housing. At this point, I’d want a 16×9 view and decent resolution … it’s on the list of to-dos, just hasn’t been something I’ve been able to get done. Perhaps we can take up a collection. :)

  6. David Sockrider Says:

    …so the promo in the footer isn’t going to be customizable by department/college?

    Can we discuss allowing the background image to be editable? Not trusting departments to customized this image has been mentioned at least once. If you can trust us to update content images, you can trust us to update that image.

    Maybe the webcam link should be removed until a useful view point is established. Maybe a security cam viewpoint isn’t the best view point to use.

  7. smeranda Says:

    The random promo in the footer is completely customizable by department. If you don’t want it, you are able to replace with appropriate content.

    As for the webcam, new cameras (HD) are being purchased, and as part of that an optimized location for the union has been selected that will allow for a view of the fountain, and much of campus in the background.

  8. Brian Striman Says:

    It looks like we are continuing with the persistent choice of non-black for the font color of UNL official webpages text. What is the problem with using BLACK as the default font color instead of the charcoal gray? Black lettering would be much easier to read. The design choice for your highlighting-style fonts would then utilize graphic techniques such as bolding or underlining to bring out text richness for category terminology. I’m not saying to use black *everywhere* for all text, just in lieu of where you use charcoal gray. Other than that, the new design looks very clean and business-like, with it’s structured info-zones. It’s certainly not cutting-edge style or innovative at all. Classic Nebraska. Try looking at Notre Dame’s webpages at http://nd.edu and poke around their website–now THAT’S innovative! Why must we stay the course with all the other land-grant universities? Our pages are not much different than our peers.

Leave a Reply