Case 5: Penn Abroad

I am now evaluating the Penn Abroad website, which I've been using in preparation for my semester in London.  The first glaring mistake in judgment is the title, which is in Times New Roman with excessive letter spacing. The banner has a few pictures of different places around the world, and then three key sections to the site in what may or may not be the primary navigation. (see picture).

 There is also the atrociously spaced Penn side navigation, which is more detailed, which makes me think this might be the primary navigation. 

 When you first arrive on the page, it asks you if you have a Penn Key.  This is supposedly the User Identification Wizard.  Sadly, this system is anything but magical.  First of all, there is a login button on the top right (in size 10 font in the top left corner), which bypasses this login system.  The system tries to figure out who you are and basically if you DON’T have a key, it tells you how to get one.  The thing is, 99% of the people using the site have a Penn Key.  The site should just have a Penn Key logon right on the first page.  If you don’t have a Penn Key, then you can enter the system to get a logon.  

Upon signing in, I’m taking to my Applicant Home Page.  Here I can see a link to my current application my semester in London this fall.  I also see “My Messages’ which is basically all the emails I have recieved from Penn Abroad since I signed up.  There is also a spot where I can sign someone up to be CCed on all my abroad emails.  I can also edit my address on this page (I’m not sure why I can edit this aspect of my profile, but not anything else, from the home page).  

The application page is fairly clear and has a checklist of everything I need to hand in.  The navigation on the side has links to many articles about going abroad, detailing in long prose the process.  I feel like this information could be formatted into a roadmap/ flowchart type of thing to make it more digestable.  No one is going to sit through reading all of this information.  Some of the pages have links to more information, which comes up in pop-ups.  I don’t understand why they’d have tons and tons of information in the original form, and then have some of come up in pop-ups.  The pop-up seem unnecessary.   It doesn’t help that the information is presented in a very plain boring way as far as colors, typography, and style goes.  Penn Blue and Red is the only color we get.  The hierarchy of type is established with the standard Penn CSS format.  The grid is consistent, but variety may have helped make the site more interesting.  I understand that the site is trying to present a LOT of information but no one is going to absorb the information if it isn’t presented in a pleasing way.  There are no icons and no imagery other than the pictures in the abbner, which change from page to page.

There is a working search function powered by Google.  The most useful feature is the application page, especially the checklist.

Case Study 4: Tumblr

Tumblr.com is a new type of blogging site.  The blog is like a scrapbook.  You can grab text, quotes, videos, pictures, and songs and post them to the blog in a variety of ways.  It can function as your standard text blog, but it’s not set up primarily for that.  As a registered user, you see your Dashboard, which is a very basic posting system.  You pick the type of post you want to make and the relevant interface comes up.  Because this is extremely basic (in a good way) I will focus on the site as a new user/visitor.

On the home page, in GIANT lettering, Tumblr announces itself as the Easiest way to blog, and offers input fields to register right there.  I love this feature, especially because the registration form is so simple: email, password, blog URL.  Below this enticing registration banner, there is a Popular Stuff from the Tumblr Network section.  The posts on Tumblr all have a “Reblog” button in the top right corner.  This reposts the same posting to your Tumblr instantly, so things become viral quickly on the site.   This Popular section shows what has been reblogged the most.

There is a small top navigation: Sign Up, Log In, and Explore.  Explore is a drop down, with menu items such as Radar, Directory, Trends, Map, and Themes.  Some of these titles are more obvious than others.  Also at the top next to this navigation is a search box. 

The Radar section doesn’t become any clearer once you’re inside.  It seems to be similar to the popular, or perhaps it’s a random section.  It’s basically a giant quilt of Tumblr posts.

  I suppose it’s an interesting way to browse the site.  The Directory is broken up into sections such as Staff Picks and Music.  The thing that annoyed me about this page is that there isn’t actually a full directory obviously available on that page.  There are categories you can browse, but no full list.  Trends is also an interesting way to browse or learn about the site.

  It lets you put in KEYWORD vs KEYWORD and then creates a chart that graphs their usage on Tumblr over the last few days.  The default comparison was Canon vs Nikon.  Apparently Nikon was really popular to talk about near the end of April.  Map was really fun.  It displays a giant google map and then moves all over the world as people add posts to Tumblr.  When it gets to where the post is coming from, it displays it in a little speech bubble.  I thought this was a really fun way to see what’s going on with the site.  The Themes section displays popular, new, and featured custom themes for Tumblrs, that are downloadable.

The navigation for the site is overall extremely basic.  The site is completely geared towards function.  Tumblr is really an online tool than a presentation of information.  Each Tumblr itself is completely flat, ie a chain of postings.  You can’t organize into folders or anything too fancy, which I like.  The imagery of the site is very Fisher-Price/cartoony/bubbly, but not obnoxious.  It makes it feel very easy to use and highlights the content of the postings.  The type is very clear and obvious in hierarchy. I feel that Tumblr is constantly seeking to make itself as user-friendly as possible, and isn’t trying to sell anything.

Case Study 3: Valet.com

Valet is a men’s fashion site that provides articles on trends and products.  The navigation is two-part.  The primary navigation is the horizontal menu at the top of the page, which remains there as you peruse the site.  There is also a site map at the bottom of the page.  The home page is set up to have different featured articles and headings, such as Ask Valet, Essential Trends, Most Popular On Valet, etc.  This format is mimiced in each specialized section found in the top navigation.  In essence, the navigation bar at the top acts like a filter.  The page remains the same, but the content in each box becomes more specialized.  The home-page button (an icon of a house) is always there, but I didn’t notice it at first.  

Once in the articles, the site gets a little confusing.  The articles can be very very short, and it’s not clearly indicated if there is more to the article.  Also, many articles are actually links to Valet’s online Handbook, which is formatted slightly differently than the rest of the site and has it’s own identity/branding/logo.  This is unfortunate because it ends up looking like a website within a website.  The architecture is not very deep.  The amount of linkage makes the site look massive, but a lot of things are just linked in multiple places on one page.  The amount of linkage and large fonts with little variety combine to make the site cluttered.  Padding and leading would do wonders for this site.

There are some interesting things to note about this site.  First, the breadcrumb is in the title of the page, ie at the top of the browser window.  I don’t know if this is the most visible spot for a breadcrumb, but it could be just that I don’t usually look there for a breadcrumb, or at all.  However, if I got used to it being there, I’d say it’s a good way to save space on the actual page.  It works just as effectively.  

I mentioned that the pages are short and you aren’t sure if there is more.  This is in part due to the way the articles are presented, which is atypical for sites of a similar genre.  The pages look like day-to-day rip off calenders.  The date is very big on the upper left.  There is usually a large image as the focal point.  And then there is a short blurb of text underneath, which sometimes links to relevant sections of The Handbook.  The articles seem to be about the imagery, but they aren’t.  They are trying to provide useful tips or trend alerts.  The pictures are pretty, but their size and position make them seem more important than they are.  The colors on the page are minimal because the images command the eye.

Another interesting aspect to this site is the fact that they almost never have text within an image.  This means that all the text they use is highlightable actual HTML text.  In many cases this is overlapping the images, and it looks nice.  However, because of the complexity of the formatting, the text is sometimes misaligned, cut-off, or just in the wrong spot.  For this reason, I would get rid of this feature.  Also, it would allow them to use a font more interesting than Georgia (although it’s working pretty well for them at the moment.)  

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.