2009 Design Candidate - #11

Notes on the visual redesign process

2009 Design Candidate - #11

Postby smeranda » Tue Oct 28, 2008 2:43 pm

Image
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby smeranda » Thu Nov 06, 2008 4:35 pm

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.
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby smeranda » Wed Nov 12, 2008 10:59 am

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):

Image

Bottom Bar with webcam clicked:

Image

Navigation Enhancement (default of shown):

Image

Navigation Enhancement (hidden, based on user input):

Image

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?
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

A few ideas

Postby s-mjuhl2 » Fri Nov 14, 2008 10:57 am

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.

Image
Matthew Juhl
mjuhl24@gmail.com
s-mjuhl2
 
Posts: 4
Joined: Fri Nov 14, 2008 9:47 am

Postby smeranda » Mon Nov 17, 2008 11:20 am

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.
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby Erin Paseka » Wed Nov 26, 2008 5:45 pm

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."
Erin Paseka
 
Posts: 147
Joined: Tue Jul 13, 2004 3:02 pm
Location: Graduate Studies

Chat

Postby dsockrider » Thu Dec 11, 2008 10:54 am

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?
dsockrider
 
Posts: 189
Joined: Fri Dec 16, 2005 10:37 am
Location: Engineering

Postby smeranda » Mon Dec 15, 2008 10:04 am

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.
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Latest Revision

Postby smeranda » Tue Jan 06, 2009 1:56 pm

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

Image
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby mjuhl24 » Mon Jan 26, 2009 3:04 pm

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'.
mjuhl24
 
Posts: 3
Joined: Tue Sep 02, 2008 2:11 pm

Postby smeranda » Mon Jan 26, 2009 3:31 pm

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.

Image
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby mjuhl24 » Mon Jan 26, 2009 4:02 pm

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
 
Posts: 3
Joined: Tue Sep 02, 2008 2:11 pm

some ideas....

Postby mjuhl24 » Tue Feb 03, 2009 4:44 pm

Image
mjuhl24
 
Posts: 3
Joined: Tue Sep 02, 2008 2:11 pm

Postby smeranda » Tue Feb 10, 2009 10:56 am

Here are the latest designs.

Navigation hidden (on user request):

Image


Navigation shown (default):

Image
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications

Postby smeranda » Tue Mar 10, 2009 4:27 pm

Here are the versions for the final testing:

Image

Image
Seth Meranda
User Experience Architect
University Communications
(402) 472-8513
seth@unl.edu
smeranda
 
Posts: 111
Joined: Tue Apr 05, 2005 2:34 pm
Location: University Communications


Return to Visual Redesign

Who is online

Users browsing this forum: Yahoo [Bot] and 1 guest

cron