2009 Design Candidate - #11

[smeranda]

[smeranda]

Navigation seems to be of great concern to all of us, as well as to our audiences. The goal of this design is to better frame and better structure the interactivity of the navigation.

As it stands now, we have five navigational elements: global nav, college nav, local nav, breadcrumbs and search. It doesn't make sense to have these spread across the page. Therefore, I have grouped them together visually to produce a more logical structure. From top-down, the navigation flows from global to local, therefore creating hierarchy and separation through juxtaposition and layout.

I will showcase the proposed interactivity of the navigational elements that break the typical mold at the next WDN meeting (November 11, 2008).

Other considerations in this design:

Search: Removed PeopleFinder and Web options. Now that PeopleFinder is integrated into the search results, the option is no longer needed. There isn't a need to use unl.edu as a launchpad for external searches. I'd like to pursue the options of integrating local searches into overall search, therefore removing all the options (Don't make me think).

Full width of content area: As a developer, there is tremendous value of having the full width of content area to work with. While this wasn't the main approach for the restructure, it is a welcome by-product.

Photos: Stay the exact same size, only the frame would change (already in the CSS).

Bottom Bar: This element would always stay at the bottom of the window (not page, think Facebook). It would house the current items in the shelf, but would be expandable as new applications are created. This area also houses quicklinks, to sections on the current page, as well as our typical quicklinks. I'll also showcase these elements in more detail at the next WDN meeting.

[smeranda]

Here are some screen shots from my presentation at yesterday's WDN meeting.

Bottom Bar that appears at the bottom of the window (normal state, with onhover for webcam):



Bottom Bar with webcam clicked:



Navigation Enhancement (default of shown):



Navigation Enhancement (hidden, based on user input):



As mentioned yesterday, the navigational elements could use some help. The last screen shots are a possible way of streamlining the elements. Does anyone have other ideas on how best to enhance/combine/streamline the navigational elements?

[s-mjuhl2]

One idea would be to use a pseudo drop down menu navigation. Instead of expanding when the user clicks a navigation element, it opens above the content when the user hovers on a nav element.

[smeranda]

I like what you are doing. Here are a few thoughts that led up to my design element decisions:

The items in the navigation are created from the breadcrumbs. Many of the deeper levels have lengthy breadcrumbs, therefore allowing the maximum width for these pages would be desirable. However, the breadcrumbs could wrap (though this would create other design issues (does the drop down appear over part of the breadcrumbs?)

In order to ensure a somewhat smooth transition to the new design, the navigational elements should appear in their display state. The user would then be given an option to hide the navigation (for this visit, and any subsequent visits). I like the drop down onhover, however if displayed by default, it would cover content.

Perhaps there is a way to shrink the height of the navigation box while still retaining purpose and importance.

[Erin Paseka]

FWIW, I asked some coworkers to share their impressions of the top 7 designs, and here's what was said about this one:

* "#11 - no. Looks too clunky or something. Not appealing."
* "# 11 - Nice look. While navigation seems easy, I wonder what people running a 1024 x 768 resolution will see on their screen. How much of the content under the menu at the top will they see? They'll have to scroll down a lot to get to some other info. So not sure about this one."
* "#11 - The header is too plain on this one. The top line navigation takes up too much space - the content is too far down. I don't like the mustard yellow text."
* "#11 - This navigation confuses the heck out of me."

[dsockrider]

I like the 'facebook like' icons at the bottom. It'd be really cool if the actual facebook chat feature could be integrated into the design.

What is a shopping cart for?

[smeranda]

A site-wide chat feature has been on a discussion list related to the Smart Site. I would see it fitting into this bottom bar in some context. The idea behind the bar is flexibility; allowing for more site-wide applications and experiences to be incorporated.

The shopping cart is an example of this. With the Smart Site Storefront (campus-wide e-commerce) only a few months from becoming available, I included it as an example.

[smeranda]

Below is the latest revision from this morning's design meeting:

[mjuhl24]

I don't like the top banner as much with that gray background. I really like the original concept with the textured red header and the 'rays'.

[smeranda]

Matt:

Though the change allowed for a more efficient use of the top, I also wasn't a fan of the "grayness". Last week I made some more tweaks (see below) which help. It could still use a little more texture up top.

We're discussing this design tomorrow at 10:30 in the student union (room to be posted). It would be awesome if you could come and contribute to the design.

[mjuhl24]

Yeah I agree. It's good but just needs a little something... Do you have a psd file you'd be willing to share? I'd like to toy around with it a bit.

I'm going to try to make it tomorrow morning...

[mjuhl24]

[smeranda]

Here are the latest designs.

Navigation hidden (on user request):




Navigation shown (default):

[smeranda]

Here are the versions for the final testing: