Our homepage was one of the final pieces of the Gustavus Website that needed to be updated to the look-and-feel we introduced in December. We have been hard at work to create a concept that incorporates global trends, reflects our new design paradigms, addresses known information architecture issues, improves the accessibility and usability of the homepage, and addresses many of the most common complaints.
Essentially, this homepage concept maintains the same functionality of the previous homepage while incorporating additional useful and informative content. We’d love to hear what you think.
- A Little More Elbow Room
- Going Global
- Flashless
- Color
- I am a…
- More News
- RSS Galore
- Footer
- Invisible Improvements
A Little More Elbow Room
The previous homepage had a content area 640 pixels wide, which was originally designed to take advantage of common monitor sizes and configurations. Since that time, the trends in monitor sizes have changed and so have standards in web design. With an expanded width of 740 pixels, the homepage now gives us just a little extra room for all of our content.
Going Global
If you were to think of a website as a book, global navigation (the links at the top of every page in the Gustavus Template) is analogous to the table of contents. Alternatively, if you think of a website as a highway, global navigation is analogous to road signs. Therefore, global navigation helps visitors navigate through the major sections of the Gustavus Website just as a table of contents helps readers find the chapters in a book or road signs help drivers find their exits. The Gustavus Website at this time has the following seven “chapters” or “road signs:” Calendar, Athletics, Academics, Admission, News, Arts, and A-Z Directory.
This homepage concept provides additional continuity with the Gustavus Template by including the global navigation at the top of the page. Visitors will be able to navigate throughout the Gustavus Website with just a modicum of experience with the global navigation paradigm initiated on the homepage and reflected on most subsequent pages.
Flashless
While the accessibility features and market penetration of Adobe Flash has greatly increased over the past couple of years, it is still not ideal for most situations due to continued accessibility problems for the visually impaired, detrimental SEO issues, excessive load times, and unsustainable nature.
This homepage concept retains the five core value stories but removes the flash in favor of an XHTML/JavaScript element with similar functionality. This switch will provide a smoother visit for users without Flash Player installed, decrease the load time for every visitor, and will be easier for us to maintain and modify.
Color
The majority of criticism we received about the previous homepage involved the color palette. While some liked the use of the blue, most argued that there was too much blue. We agreed. With this homepage concept an additional warm palette was introduced to balance the coolness of the blue. Additionally, the background color was changed from a cool tone to a warm tone to match the Gustavus Template.
Using Color to Show Function
One of the biggest issues is the lack of function that color plays on the previous homepage. The way color was used seemed entirely ambiguous, potentially obfuscating the homepage’s functionality. Because each of the three link categories (“Information For,” “Information About,” and “Resources”) were grouped with each of the three news stories, the design suggested that they were related in some way. Quite the contrary, the three link categories were related to each other as were the three news stories.
The use of color on this homepage concept enhances usability and information architecture by utilizing color to differentiate between the different types of content:
- Global navigation at the top and the in-page navigation on the left is gold
- News content is blue
- Other pieces (masthead, footer, and background) are standard colors from the Gustavus Template
This allows visitors to quickly and easily relate similar elements and decide which action they wish to take. Because visitors judge a website in 50 milliseconds, rapid differentiation of content blocks is extremely important.
I am a…
When working on the information architecture of the homepage concept, we tried to put ourselves in the position of first-time visitors. We quickly noticed that the two headings, “Information For” and “Information About,” seemed unnecessarily related compared to the third heading “Resouces.” Additionally, “Information For” didn’t speak to us or catch our attention even though we identified with some of the target audiences that were listed. Finally, it was apparent that the phrase “Information For” was written from our perspective and not the visitor’s which is the opposite of our original intent.
Therefore, “Information For” was changed to “I am a…” for the following reasons:
- “I am a…” further personalizes the homepage and immediately asks visitors to think about how they relate to the College
- “I am a…” distinguishes itself from the other two navigation categories of “Information About” and “Resources”
- “I am a…” encourages visitors of relevant audiences to navigate into areas of the website that are targeted specifically toward them
More News
Because content is king, this homepage concept dynamically pulls additional news content from Athletics and Fine Arts and tucks it neatly away using the same accordian-style slider technology that our news page currently utilizes (see also “New News is Good News”). This provides a lot of fresh content for repeat visitors without unnecessarily extending the length of the page.
RSS Galore
RSS is the most effective method of distributing content to a large audience. Because we already have a number of RSS feeds that relate to various links and sections on the homepage, this homepage concept brings those RSS feeds within one click of every visitor, making it easier to find and subscribe to the feeds, stay connected and informed and compelled to return. Additionally, this concept uses the standard RSS icon that we use throughout the Gustavus Website, provided by Feed Icons.
Footer
The footer on this homepage concept is identical to the footer on the Gustavus Template. Visitors will be able to rate the homepage using the globally-recognized five stars system, easily return to the top of the homepage if they have scrolled down, navigate to other areas of the Gustavus Website, and find address and contact information–all from the footer!
Invisible Improvements
Finally, there are a number of additional hidden improvements with this homepage concept that make it more accessible and usable for the visually impaired:
- Tableless layout
- Symantecally structured XHTML
- Minimal use of images
- User resizable text
- Descriptive links
Tell Us What You Think
After reading about all of the changes that we incorporated into this homepage concept, we would love to hear what you think. Please leave a comment and let us know specifically what you like and dislike about this homepage concept.
Leave a Reply