Posting examples of tweak designs????

[mmesarch1]

I know its been said that it can be done faster in meetings, but where can we post examples of images of design ideas for the navigation tweek btwn meetings? Here?

[augshow]

Here's what I presented yesterday.

http://bit.ly/dja-mockup

I think everybody who presented designs were doing so to present ideas rather than say "Hey, let's use this design". For example, mine utilizes a single-drop down, in hopes to simplify navigation, gets rid of site and page titles, and moves the breadcrumbs off the red bar and gives it a larger font (to replace the site and page title), I also reduced the size of the 3d N and the Univeristy of Nebraska-Lincoln heading. Things I need to better incorporate into my design are a way to access parent navigation, and better incorporate the site title and heading. It also sounds like the overall consensus was to stay with a "mega drop-down".

I also think that the ideas that did come out of the meeting are progressing us toward a better "navigation bar".

[jnothwehr2]

I've come up with an idea that is basically a slightly altered version of what we have now.

http://snr.unl.edu/test/UNLTemplates/NavClosed.png - Closed Navigation
http://snr.unl.edu/test/UNLTemplates/NavOpen.png - Open Navigation

I moved the site title into the header area, and reduced the size of the "University of Nebraska-Lincoln" text. I tried to make the active breadcrumb appear more attached to the navigation menu. The page title has been moved up, and is now in red. I added a divider between the page title and the content area to divide the space better as well. Probably most noticeable is the fact that when the menu is closed, nothing is displayed. The goal of all of this was to move the content area up higher on the page as much as possible.

I made a couple of changes to the navigation menu itself too. I tried to add some transparency to the menu, so it doesn't totally block the content but also maintains readability. Additionally, if there are fewer than six primary headings, I expanded the width of the columns to use the whole space (in this case there are only four). I think this change would help shorten the length of the menu in a lot of cases, meaning that less content would be covered up when it is open.

[jnothwehr2]

Based on the discussion at the meeting on March 1st, I have developed a new design concept.

http://snr.unl.edu/test/UNLTemplates/NavClosed1.png - Closed Navigation
http://snr.unl.edu/test/UNLTemplates/NavOpen1.png - Open Navigation

I also condensed and reorganized the header area a bit in order to move the content area further up the page. I moved the UNL text into the gray area in order to create more separation with the site title. I swapped the positions of the tools and the search bar, and made the icons smaller. The search box may be a bit too subtle in this case, but I wanted to try something different. I've also made an attempt to deal with a navigation system that has more than 6 primary headings.

http://snr.unl.edu/test/UNLTemplates/NavClosed2.png - Closed Navigation
http://snr.unl.edu/test/UNLTemplates/NavOpen2.png - Open Navigation

[acoleman]

Apologies for not posting these sooner. Here are the meeting notes to date.

February 22 Meeting
More than 20 web developers, communicators and others participated in a meeting on Iterative Nav Revisions held at 17 Wick Alumni Center on Feb. 22.

Consensus was sought on the scope of the work ahead to be launched on July 1, timed for the entry of UNL into the Big Ten and CIC.

This was the first broad-scale meeting, following conversations between UComm and other members of the UNL Web Developer Network, including CBA, SNR and others.

Some first-draft ideas were shown.

Discussion centered around relationships between UNL branding, site title, navigation and page title.

Consensus on several items:

* Create a more natural relationship of site title to navigation, navigation to page title.
* Providing a single, obvious ribbon of primary navigational elements across the screen.
* Reduce the visual prominence of the breadcrumb access to parent navigation
* Free up vertical space for content

At end, attendees were asked to raise hands if they agreed with the direction as defined in consensus items above. Agreement appeared to be unanimous.

Weekly meetings will continue to be held on Tuesdays at 10:30am at 17 Wick.

March 1 Meeting

Attendees: Mark Mesarch, Jeff Nothwehr, Roger Simonsen, Derek Augustine, Brett Bieber, Eric Rasmussen, Robert Crisler, Seth Meranda, Aaron Coleman, Melissa Sinner

Design Proposals:
Derek Augustine
http://dl.dropbox.com/u/177486/Work/Tem ... p-rev0.jpg

Jeff Nothwehr
http://snr.unl.edu/test/UNLTemplates/NavClosed.png - Closed Navigation
http://snr.unl.edu/test/UNLTemplates/NavOpen.png - Open Navigation

Bob Crisler
http://ucommiimdisplay.unl.edu/20110301 ... isions.jpg

Aaron Coleman
http://ucommcoleman.unl.edu/images/iterative.jpg (site navigation)
http://ucommcoleman.unl.edu/images/iterative2.jpg (parent nav rollover state)

Eric Rasmussen
http://ucommrasmussen.unl.edu/2011.jpg

Seth Meranda
http://ucommdev.unl.edu/smeranda/2011Re ... tDraft.png

Discussion of building in some sort of logic to navigation that not only allows users to back through the site using navigation, but also navigation forward through the tree of the site using only navigation.


March 8 Meeting
Attendees: Melissa Sinner, Mark Mesarch, Jeff Nothwehr, Roger Simonsen, Brett Bieber, Eric Rasmussen, Robert Crisler, Seth Meranda, Aaron Coleman

Further iterations on design proposals:
Jeff Nothwehr
http://snr.unl.edu/test/UNLTemplates/NavClosed1.png - Closed Navigation
http://snr.unl.edu/test/UNLTemplates/NavOpen1.png - Open Navigation

http://snr.unl.edu/test/UNLTemplates/NavClosed2.png - Closed Navigation
http://snr.unl.edu/test/UNLTemplates/NavOpen2.png - Open Navigation

Seth Meranda
http://ucommdev.unl.edu/smeranda/2011Re ... efault.png
http://ucommdev.unl.edu/smeranda/2011Re ... nHover.png

Because of its length, "Jeffrey S. Raikes School of Computer Science and Management" has been noted as the maximum length site title in coming up with design considerations.

With the designs converging on similar ideas, we need to find a visual representation to denote the section of breadcrumbs corresponding to the navigation being shown. Because of visual confusion, this design element should not be a tab.

[caggens2]

Here are three versions of the same mock-up. I tried to deal with some of the typographic issues at the top. In these examples I saved the file with both a long and short site title, as well as with expanded navigation (I prefer the mega drop-down.) Some of the type is a bit small but I think it is legible.

Long site name, navigation closed:
http://aah-caggens.unl.edu/NavigationTweekLongName.png

Long site name, navigation open:
http://aah-caggens.unl.edu/NavigationTweekNavOpen.png

Short site name, navigation closed:
http://aah-caggens.unl.edu/NavigationTweekShortName.png

[jnothwehr2]

I've posted another revision of what I've been working on based on feedback I've heard. I decided to allow varying width navigation elements inside of the red bar (I meant to do 10 but added one extra so I kept it that way). I also tried to include a gray outline around the active breadcrumb and navigation bar to show that they are related.

http://snr.unl.edu/test/UNLTemplates/NavOpen4.png

[sinner]

I'm posting a slight variation of Jeff Nothwehr last design: http://www.unl.edu/libr/design/Sinner03152011.png

-Melissa

[acoleman]

After the iterative navigation meeting of March 15, 2011, design elements from a variety of the above submissions have been pulled together into one design, which I've linked below.

http://ucommcoleman.unl.edu/images/20110315_Iterative.jpg

[acoleman]

At the March 22 meeting, there was much more discussion on fine-point changes of the iterative nav design, as well as the functionality that it will have. A few changes were made in the upper-right part of the page, restoring the search box and "widget" elements closer to their current placement.

Two variations of the navigation were discussed, including a variation of the megabox, as well as "flag" drop downs.

Megabox
http://ucommcoleman.unl.edu/images/20110322_mega.jpg

Flag
http://ucommcoleman.unl.edu/images/20110322_flag.jpg

Although the design wasn't finalized, it was agreed that there will be four variations of the navigation to do user-testing on. The navigation will have to be built to support more than 6 primary navigation elements. These are:

1. Flag (liquid-width nav elements)
2. Double-bar (a. more than one megabox; b. nested mega-box, all dropping down)
3. More... (link or graphical element to show/slide more navigation)
4. Better UI (User Interface) for current primary nav elements after the first six

[jnothwehr2]

I've been working on some ideas for dealing with more than 6 primary navigation elements. I've worked on a couple of designs based on ideas that were thrown around at the March 22nd meeting.

The first is a double bar with the navigation elements offset in the second bar. The idea is that they wouldn't appear to be connected directly with the elements contained in the first bar.

http://snr.unl.edu/test/UNLTemplates/DoubleBar1.png

The second idea is to use liquid width navigation elements in order to allow developers to have as many elements as possible in the first bar. Another benefit is that this can more easily accommodate elements with longer names.

http://snr.unl.edu/test/UNLTemplates/DoubleBar2.png

Another idea was to "break up" the bar into "buttons" for each of the navigation elements. The second variation of the design uses empty "buttons" at the end of each row in order to make sure things line up.

http://snr.unl.edu/test/UNLTemplates/Buttons1.png
http://snr.unl.edu/test/UNLTemplates/Buttons2.png

The drawback to most of these is that they will only work with flag navigation, and not the megabox.

[kabel2]

See attached PDF that describes the various "low-level" prototype designs that could be used to support navigation with more than 6 primaries.

This is intended to get comments about what might be the best combination or overall winner.

[kabel2]

I'd like to revisit the proposed UI for the breadcrumbs. While we agree that the tabs should be avoided, end-users (in my opinion) will feel less inclined to use the breadcrumbs if they are just simple textual links. Adding some graphical appeal to them will let users know that they can interact with them and give an overall better appeal for the entire navigation hierarchy.

I'd like to see the use of chevron style links, such as can be seen in the attached image.

Screen shot 2011-03-25 at 11.00.11 AM.png (5.86 KiB) Viewed 1717 times

Implementation is fairly simple as can be seen at http://jsfiddle.net/eQPGM/2/embedded/result/

[kabel2]

Another idea was to "break up" the bar into "buttons" for each of the navigation elements. The second variation of the design uses empty "buttons" at the end of each row in order to make sure things line up.

My two cents about using a "button" style for navigation:
I would argue that this is a misuse of a common user-interface element and end-users would ultimately attempt to interact with them differently than expected. For example, buttons make me want to click, and up until now, the desired interaction is a delayed hover.

In any case, your examples make use of a combination of the "low-level" prototypes Liquid Flag and Multi-bar. Liquid would probably require "flag" but otherwise, a multi-bar could handle mega-box (albeit busy and/or confusing).

[mmesarch1]

I would also like to revisit the placement of the global buttons. I think they need to move them back to above the search box. Generally its become accepted that a search box for a web page is going to be in the upper right hand area of page. Ours is so large people are not going to miss it even if it not the top most item. But I think someone said that the buttons are not being used very much. So why not bring them into more prominence by being at the top. And since the Centrix is not being printed any more directing people to the Directory (People finder) button will be helpful, even if they can type the name in the search box. Plus when the Alert button becomes visible it will not be buried between the search box and the navigation.