Case Study 2: Slate.com

Slate

The objective of Slate.com is to provide daily news on politics, science, and culture.

The number of navigation systems is unclear.  The website is a collection of articles.  The basic navigation system is a drop-down menu system divided into categories of news, such as "Arts", "Business & Tech" and "Science".  The two categories on the end of the menu are "Podcasts & Videos" and "Blogs".  The menus contain lists of current stories in that topic.  It is unclear how the stories that appear in the menu are chosen.  Below the list of stories is a link to see all stories in that category.  Below and clearly divided from those is a link to another story, which is labeled "SPONSORED CONTENT".  The leading on that section of the drop down menu is crowded.  Each story is also labeled with the column they belong to and the author.  This makes for a very busy drop-down menu. 

The most eye-catching navigation feature of the homepage is the slideshow of featured stories containing interesting photographs and typography.  Slate apparently picks three stories each day and creates an image for each, to put into this slideshow.  To the right of the slideshow is a list of other stories. 

To the right of this section, there is some sort of media section, with different tabs along the top.  The tabs are "Today in Pictures", "Cartoons", "Doonesbury", and "Today's Video".  At least, this is what I THINK they are labeled.  A search box is overlaying this feature in Safari, obscuring the tab titles. 

Below the slideshow is yet another list of stories and smaller pictures, organized in a sliding horizontal list.

Below this are TWO MORE navigation systems.  One is a column that organizes the information in different ways, such as by columnist or "briefing", whatever that means.  The other is a list of today's stories, which can be changed by a tab at the top to display blog posts.

Down a little more you find another way to get to stories, via a list of Top Viewed and Top Emailed stories.

I could continue in detail, but I think it will suffice to say that there are four more ways to get to stories.  It's hard to say which of these is the most prominent.  Visually, the top menu seems like the stable, official method of navigation.  But it's hard to say what stories I am seeing and not seeing by taking that route.  Many of these navigation systems disappear when a story is clicked on.  The top drop-down stays, the media viewer stays, and the sponsored links stay.  

Once you get to a page, there is a breadcrumb at the top of the article that attempts to let you know where you are.  However, the breadcrumb "Home>The Oscars>Let's Talk about the Oscars" doesn't really show a hierarchy.  It seems like there are endless categories on the second-level of the site, and it's anyone's guess where a story might be located.  At least you can always get to the home page via the giant SLATE logotype at the top.  

The site seems to have the information to warrant a huge architecture, but it seems like there isn't really an architecture.  There are so many categories and different ways of finding the same story, it seems like a huge flat pile of information you have to rummage through.  The site map confirms this.  It is a list of hundreds of unhelpful categories such as "Television", "TV Club", and "TV Week".   Other sections had interesting, clever, but completely non-descriptive names.   If you are doing anything but browsing, the only reliable method of finding what you want is the search box, hiding on top of the media viewer.  The search results were very nicely displayed and labeled, and it seemed to do a thorough job.  

The typography is simple and seems to work, but the quantity of information on every page and the busy typography of the surrounding multitudinous ads really hindered its ability to organize the information.   The first thing I notice on any page is the huge bolded headline. The grid stays fairly consistent, but that the grid it self seems out of proportion.  The information extends down and down and down the page to the point that some information feels buried.  

The imagery was usually appealing and added to the articles, but the advertisement imagery was distracting.  The only real color was the maroon used at the top of the page.  Other (what seemed like sister -) sites were assigned colors in sections that linked to their stories.  

The biggest improvement Slate.com could use is a consolidation of categories.  There should be clearly named categories and sub-categories for stories to be filed into.  They should stray from clever and go for clear.  If they really want readers to associate stories with specific writers or columns, they should organize it by ONE of those methods.  Or provide the option to choose which method of organization is preferred.  I would also recommend trying to find a way to support their site that doesn't use intrusive ugly advertisements.

Case Study 1: www.whitehouse.gov

the White House website

The objective of the White House website is to keep people updated about the activities of the executive branch of the United States government and provide a basic history of former administrations, the White House itself, and the government in general.

There are two main systems of navigation. The first is a drop-down menu system across the top of the website. This interface acts like an awning to the website and remains present no matter what page you navigate to. The site map, the second navigation system listed at the bottom of the page, also stays put. The drop-down menus are more prominent because of their position and flashier graphics. This is a very logical place for navigation and it works well. The menus are titled by category and each drop down menu lists subcategories. Clicking on the category name brings you to a page with the same title, a short descriptive blurb, and a list of the subcategories. This could be called the scenic route. That is, using the list of subcategories in the drop-down menu bypasses the category pages. Similarly, clicking on a subcategory name brings you to the information and a list of the other subcategories within that category. You can always get back the home page by clicking the White House logo at the top of the navigation menu, or by clicking an American flag within the menus, or by clicking the title of the website, “the WHITE HOUSE”, in the top left corner. Breadcrumb menus can be found at the top of each page, identifying where you are in the site’s architecture. There is also a “You are here:” breadcrumb at the bottom of each page. I found the architecture of the navigation system to be very impressive and the most useful part of the website.

One clarifying feature was left out of the site’s design. The links do not change appearance after they’ve been viewed. I’m not sure it’s necessary, given that the subjects are so well divided and confusion about what has already been viewed would not be a problem. I also believe this could be an aesthetic choice. The designer(s) may not have wanted purple (or other colored) “I’ve been clicked” links messing up the look of their site. I suppose they could have had them grey out or something, but I don’t see it as an issue.

The site is fairly large in scope, but not in depth. That is, generally, the site only goes two levels deep, with the exception of the White House 101 page, which has links that display different information within the same page, the blog, which links to individual posts, and some other briefing pages, which contain frequently updated lists of links to proclamations and executive orders. The user is completely removed by the site by clicking the "Pool Report” link in the “the Briefing Room” category. This page is empty and drops the entire navigation system, except for the logo link back to the home page.
However, it is obvious that the designers chose to include a lot of information on the subcategory pages to keep the navigation shallow and easy. The site is generally flat, but as mentioned before, some articles and blog posts are only accessible within the subcategory pages. The site is searchable via a search box but I found the results to be shoddy. You can find the main pages easily but searching for content contained within the pages didn’t seem to work well or clearly.
The structure of the site is very clear and the hierarchy of titling draws the eye in a logical path. The first thing I notice is the title of the page. The imagery is appealing but not overwhelming, and very relevant to the information surrounding it. The presidential color scheme is very fitting, consisting of blues, white, and bronze.

The typography is very readable, consistent, and aesthetically pleasing. It would be hard to improve it. Some of the text that is formatted into blog formats looks a little crowded. Titles are generally bolded and/or all-caps and in a formal serif font, Georgia, while the body text is in Lucida Grande.

I found this site to be very well-design. The layout is crisp, appealing, and functional. The architecture is simple and serves its purpose. It's hard to find much wrong with this site except for the shaky search function.

Number One

Whoa!

1. This
2. is
3. a sample.

COLORFUL.