USI Website critique

The Good

• Navigation: Besides the "myUSI" button, the left navigation bar is well organized and clearly indicates what goes where.

• Images: The flash video at the top of the page is eye-catching and informative. The links in the center of the page are very clearly summarize what they link to.

• Color: The colors of the website mimic the USI logo.

The Bad

• Navigation: The navigation seems slightly cluttered in my opinion. The "myUSI" button confused me when I first used the website because I was not aware that it led to my student email, blackboard, etc. and I spent about 5 minutes searching the site for them. Both the top and the navigation bars very awkwardly change in size between the sub-pages of the USI website, making it confusing to read and difficult to navigate.

• Images: The thumbnail images in the center of the page seem too large for their relative links in that they create too large of a margin between the links. The images in general seem spaced out and disorganized. I get the impression that the USI website was created from a template. The images, particularly the top logo, changes from page-to-page making it confusing to determine wether or not I've navigated away from the USI website.

• Color: The colors seem condensed and tightly packed against one another. I think that this is due to the awkward placement of the left navigation bar and it's awkward background image color; green has no place on the USI website.

• Space: The space seems very horror vacui. The visual elements appear to battle one another for attention and argue over which one will be read first. The left navigation bar is too short to demand attention to itself and stand out as the primary navigation. The text on the left navigation bar doesn't have enough padding on the bottom and not nearly enough at the bottom. The images at the bottom of the left navigation bar are too close together The website could benefit from being able to scroll down. Condensing this much information into such a tight space is overwhelming.

My Recommendations / What Needs Changing

• Navigation: Move the left navigation bar down so that it borders the red space holding the search bar and extend the left navigation bar to the entire length of the page even if the majority of it is bare. Keep the top navigation bar and USI logo above it on every page and sub-page to establish the pages as official USI pages and preserve the ease-of-navigation from page to page.

• Images: Decrease the size of the flash video by 1/4 so that it doesn't dominate the page. Include a photo gallery with images of the campus buildings from multiple angles so the new students know what to look for when going to class. Include pictures of special attributes of the campus buildings such as student lounges, Starbucks, sandwich shops, etc. so that students can plan quick stops between classes to study or eat. If I had been aware of the sandwich shop in the Liberal Arts building in my freshman year then I would have established that location as my home base between classes.

• Color: Stay consistent with the color scheme of the pages and sub-pages.

• Space: Move the "Campus Events" panel below the "University News" panel. Moving the Campus Events panel will increase the breathability of the page and decrease the information-to-space ratio and eye fatigue.

Overall, maintain the professional appearance of the USI website by staying consistent in the placement of the navigation bars. If this is done then viewers will have a central location to let their mouse idle while they read the information on the page.

Examples of Strong Graphic Elements

1. The navigation at the bottom of the University of Minnesota is nicely placed and easy to read. - http://www1.umn.edu/twincities/index.php
2. The padding between the "Events", "Spotlight", and "Academic Programs" panels on the University Of Chicagos website makes for a very breathable and informative data display. - http://www.uchicago.edu/
3. The top navigation bar of the University of Virginia is extremely easy to read and clearly indicates what their relative drop-down menus hold. The drop-down menus are very well organized and clearly indicate what they lead to. - http://www.virginia.edu/
4. The University of Michigans website is a prime example of medium-toned geometry that produce little to no eye fatigue while clearly housing navigation options. The page has very few images but still maintains a strong visual appeal. - http://www.umich.edu/
5. The Univeristy of Oregons website is very similar to the current USI website in its placement of navigation but does a much better job of reducing eye fatigue because of the easy color transition between the left navigation bar and the background color. - http://www.uoregon.edu/

What do these sites have in common?

• Each of the listed sites has a delicate balance between information and unused space. The use of space is absolutely vital to websites. Too much open space combined with poor visual hierarchy allows the viewers eyes to wander around the page without guidance. Too much open space with a strong visual hierarchy draws the viewers attention to the use of visual elements rather than the information they hold. An example of strong visual hierarchy and too much open space is a website with vividly colored and strong geometry binding short body text and navigation, and a high contrast between the geometry colors and background color. The viewer tends to focus on the steep contrast between the geometry and background instead of reading the body text.

Conclusion

• The University of Virginias website has an outstanding top navigation bar but all the navigation on the page is overpowered by the flash videos and contrasting colors. The University of Michigans website boasts an outstanding use of soft colors. If the two websites were to combine the mentioned assets then the result would be an organic and professional website with clear navigation combined with a fine tuned ratio of information to color to open space.