The Onion

The Onion website could improve its usability by perfecting its navigation structure.

The website makes good use of conventions. For example, the search box is on the right upper corner of every page within the website. The label “SEARCH THE ONION” in the box is intuitive as it tells people where to click and disappears automatically once users click in the search box. The main problem of its usability is its structural hierarchy. The sections are not well ordered in the navigation bars, which gives users difficulties in accomplishing their goals. It takes me more time than what I would like to spend to find what I want. It would be beneficial if the website works more on the sequences of its elements.

The visual noise on the pages is a minus of its user experience.

The ad spaces below the main navigation bar and on the right side of the page are intrusive and distracting. The home page looks busy as different elements are all competing to be above the fold, though the page gets cleaner as users scroll down. The main navigation bar highlighted in green is catchy but gets confusing once I look at it closely. The different shades of green and different font sizes are probably used to categorize the sections, but the categorization does not seem clear to me. The navigation bar on the very top of the page independent of the main navigation bar does not help users to find things in a efficient manner.

MLSSoccer.com critique

I chose to critique MLSSoccer.com for a few reasons. One, I don’t really have to worry about anyone else already having critiqued it for this class because I think I’m one of maybe five people at MU who follows Major League Soccer. The other, and primary reason, though, is that MLS is a league whose demographic is primarily Internet-savvy 20 and thirty somethings.

The MLSSoccer.com Home Page

Having said that, I think this puts pressure on the league to have a great website experience.

Design Heirarchy

The hierarchy of  information is, I think, quite effective. There is a clear focus of the page – you eyes are immediately drawn to the giant image in the middle left part of the page. You eye is immediately drawn to that site, and for good reason – it’s the top story. If a goal of front page design is for your top story to be the first thing your readers’ eyes are drawn to, I think this site succeeds.

The next thing my eyes are drawn to is the “Latest News” section directly to the right. This makes the web design two for two, then because I think that’s the thing they consider second-most important. These are things, I think, they want you to look at after the top stories.

From there, my eyes are drawn to the scorebar (for lack of a better term) up top, and then the list of different sections of the site.

Once you get past the top of the page, the hierarchy becomes a little less clear. I’m not exactly sure where to head next because everything just seems sort of fit it. It’s not disorganized, just not prioritized. It’s as if they don’t really care where you head next, which isn’t necessarily a bad thing.

Taking advantage of convention

I think the site follows, quite effectively, the conventions laid out before it we know work. It’s very common for sports sites to have that big top story that rotates through the other top stories flanked by other news and topped by scores and a navigation bar. Why break from that if it’s obviously what the industry standard is?

Also, the search bar is in the top right. So they got that right.

Clearly defined areas

This is, I think, a very clean website. There is a clear main column and a clear sidebar column that each run all the way to the bottom of the page. The main column sections are all separated by a simple, easily-visible but not-at-all-distracting line. The content sections all have a clearly defined header so the user knows exactly what type of content they’re clicking on.

What’s clickable?

By and large, the site does a very good job of emphasizing what’s a link. I say by and large because there is one exception – the top story. The whole thing is a big link to one story, which isn’t really clearly defined. Beside that, they’re pretty clear. Most of the copy links are in blue, the rest of the copy is in black.

Noise?

As I previously mentioned, this is a very clean site. It’s well organized, the color structure is vibrant but not over-bearing. I actually find it less noisy that its considerably more wealthy contemporaries, the NFL, MLB and NBA.

Blog 2 – Newsy.com Examination

For my news site, I chose newsy.com.  Newsy, based in Columbia, MO is actually a pretty clean website.

The first thing I see on the webpage is that dark middle bar. In this case, it is featuring a video showing a very vibrant photo, and the headline “NYPD Accused of Racist Facebook Postings.”

Next, I see the grey menu bar, where you can choose your news by genre – health, sports, etc.

There’s a scrolling banner at the top, and out of habit, I ignore it.  Now that I’m examining the website, however, I’ve noticed  that it is a pretty cool latest news bar.

The menu bar they used and the methods they use for choosing between videos are pretty typical, and therefore easy to navigate.

The different ways to view content is useful, too.  You can choose their “headliners,” as well as by topic, by most recent, or by most viewed.  It’s all very easy and intuitive.

Everything that looks clickable is, except for the orange text on the left.  I expected to be able to click on that to be linked to the image page or associated news articles.

Nose is also minimal, however, the Latest News thing looks like noise to me.

CNN.com critique

I visit CNN.com sometimes to read some international news and watch video clips. I think the site follows Krug’s five guidelines.

1) Visual hierarchy

Overall CNN.com does a pretty good job with visual hierarchy. There are two major stories with photos, taking the left and middle columns. On the right, there’s a square advertisement, but it’s not too bothering, because the size is pretty comfortable and doesn’t stir up the whole harmony. But because it’s placed next to the story, users may click on it more by accident.

In the left column, it’s the breaking news, topics, and latest news. And in the middle Column, it’s videos. Everything seems to be in the right place and looks comfortable.

2) Take advantage of conventions

CNN.com did a pretty good job taking advantage of conventions: there are two search bars, one in top right corner and one in bottom right corner. The navigation is just below the page title, and it’s horizontal. There’s a slight color difference with the first three tabs in the top navigation bar: Home, Video, and NewsPulse have a darker red comparing to other tabs. This is a smart design, because these three sections contain more recent and important stories and probably used more often by users.

3)Break pages up into clearly defined areas

CNN.com breaks up the pages into different categories. On the home page, below the three main columns, it’s a smaller section named “From our shows”, and below this, there are 12 sections, each include 7 links to stories that are most recent or important. The sections are basically the same as the top navigation bar, like U.S., World, Politics, Tech, etc. But it provides the users a clearer idea of what stories are important and should pay attention to. The users don’t have to go to the specific tab to browse some stories, they just have to scroll down. The page breakups of other pages are slightly different, but are also clear and efficient.

The weather information is listed at the very bottom on the home page, which is not very convenient. There’s actual some empty space in the right column on the home page, and it maybe more comfortable to be under the stock index information.

4) Make it obvious what’s clickable

I think all the links on CNN.com are very clear. It’s easier to spot what’s clickable because the links are of the same blue color throughout the page. And the design is consistent throughout the site.

5) Minimize noise

The CNN site is clean and has little noise. There aren’t many advertisements on the page, and they are not disturbing for the users because they are located at basically the same place on every page. The background color is white, and the logo & navigation bar is red. It’s very clean and clear, and the users can find the information more efficiently when the design of the page is consistent.

DVICE– Site Critique

Upon first look something seems weird about the DVICE website. The site makes sense it’s boundaries between one story to the next seem clearly defined, so the oddity took me a while to figure out. Then it hit me: The “Top Stories” underneath the very top site header serves as the main navigation. For a while I even thought the search bar was missing until I spotted it under the “Top Stories” on the right side.

This site has great and flashy content, it is meant to make the viewers pay more attention to the pictures and text than anything else. So, my guess is that the placement of things like “Top Stories” was all in an effort to place attentions where the writers wanted it. Outside of the irregularity and feeling a little slow to find what I want, this site follows Krug’s guidelines fairly well.

There is a clear hierarchy on the page, which is what I eluded to with the placement of “Top Stories” at the top. Although it’s not incredibly important I do wish the “DVICE categories” bar was coser to the top, but if I didn’t really care about any of the stories I was scrolling through I could have used this tool to put what is most important to me at the top.

Pretty much every picture or headline is clickable, the idea is to get the reader off this first page and onto a page devoted to what pops out at them. I like this because I can assume everything will take me elsewhere on the site, but I don’t like that the “Top Stories” bar remains the same size and maintains the same stories no matter which page I go to. I feel it would be more effective if that bar was thinner on supporting pages and full-sized on the main one.

Lastly, I will point out that sections of this site are clear. There is no bleeding of one box into another, and I can always tell what I’m getting myself into by clicking on something. As a whole I really like the site, but the aforementioned are things that would make the site more user friendly and easy to grasp as a new comer.

Facebook Story Telling

While searching through the web, I discovered an interesting profile piece about a woman named Shana Swers. What made this profile interesting was that it utilized her many facebook status updates to tell the story of pregnancy and premature death. Among the stream of status updates, are strategically placed boxes, in which that the writer of the piece adds context and facilitates the stories progression.

I like this page because of it’s simplicity. There are no videos or flash graphics. The few pictures shown are the one she uploaded of herself and her child. There arn’t many complicated elements going on with this story and I believe that was done on purpose. The page uses a similar format to a facebook news stream bringing you through a story anchored by the personal soundbites of the doomed woman. While reading, it’s easy to get a sense of familiarity with Swers–as if her stream is something viewed as a Facebook “friend”.

The only issue that I see with this format is the lack of organization. By adopting this Facebook format, it makes it very difficult to search for the information I most want to get. The streaming template leaves no room for headlines or sub heads which is kind of annoying when plowing through Swers’ somewhat tedious musings.

All in all, I think this story works. The purpose of a profile piece it to clue you into the life of an individual. As a journalist, we strive with words, pictures, and video to tell a person’s story, but we can never tell that story better than the actual person can. This does that in an innovative and engaging way.

http://www.washingtonpost.com/wp-srv/special/metro/facebook-story-mothers-joy-familys-sorrow.html?hpid=topnews

VICE.com video page

This page is particularly important to me for a few reasons: one, this is where I interned this summer so a lot of the content I’ve worked on in some capacity. Two, this is a site redesign that is still in beta. Three, I was supposed to critique it and never got to, so here’s my chance with some “knowledge” to back it up.

The focal point of the site is definitely the video, creating a clear hierarchy of importance with video content as #1. It’s clear as to what page I’m on, as shown by a black box around “VIDEO” in the navigation bar.

The navigation items, though vague, give somewhat of an idea as to what kind of stories we’re clicking to. As far as I know from this page, the only videos on the site will most likely be on this page (which is mostly true, if you click around). The “More Parts” navigation section doesn’t really make sense to me. I see that, “Here, we’re offering more parts to this video piece.” But how are the following videos related? Why should it make sense to scroll through them all? The second navigation item is straightforward in saying that I’ll navigate to other stories produced by “VICE NEWS” (woo), but then what is “more news”?  What’s the difference between the two? The grey boxes around the text tell me I should be clicking these, but fail to address what they actually mean in terms of content.

The visual hierarchy is also supplemented with the use of contrasting font sizes. But is it weird to anyone else that the VICE logo is smaller than the headline? What would be the rationale or goal for this?

With the only noise problem below the fold (to be addressed in a few paragraphs), the use of few basic colors and large dominant images instead of busy, multiple thumbnails, this page seems to be very clean. I could argue that while generally kind of “minimalist edgy,” the design is almost too minimal. Under the main video player, the vague headlines with no descriptive photos or even extra hover summary text make for a focused video, yet a somewhat bland or confusing, even, related content to view. Because there are so few text decorations, I was unsure what text was clickable at times.

Conventionally, the search bar is located on the top right hand of the page. Like other video-dominant sites like Vimeo and YouTube, the video placement is pretty much vertically central on the page. This designer modified the left-justified convention by placing the video in the very center and blocked it out with a black background to make the video the predominant focus with minimal other distractions.

I like that the feedback tab follows the page as I scroll. For a beta site, I think it’s a pretty smart move, and it’s pretty obvious as to what they’re asking for.

As I mentioned above, the only noise, I think, comes from the incessant rotating through the top stories (on the right hand side). A “new” story rolls onto the page every five or six seconds, essentially making it look essentially like an animated element. I think it’s pretty distracting and annoying, especially when everything else below the video is static.

I’m not sure why the “Featured Videos” text is the same size as the “All Shows,” “Dos & Don’ts,” “Top stories,” etc., while “Shows” is a much larger font size than any other text on the page.

Speaking of the “Shows” and “All Shows” distinction…I don’t get it. Are they trying to promote specific shows in the first section? Still, it wouldn’t really make any sense to me. I feel like they should be combined and put into a standalone scroll through to see all of the options. Maybe put the promoted ones on the first mini page of the scroll instead of listing them alphabetically. (God, I’m sure all of these have technical terms I don’t know. Hopefully these suggestions make sense.)

Also, Dos & Don’ts is kind of VICE’s thing. I understand that social media and recycling stories are big deals in terms of increasing traffic, but wouldn’t putting the VERY characteristic thing that many people visit for above this make more sense? On a different but related note, I feel a lot of people now generally ignore boxy Facebook share widgets (like we saw on the Times’ site on Tuesday) because they mentally compare them to ads. Hence, ignore it as most people do to ads, as we saw the eye-tracking study exemplified. Even though the box is really trying to get you to click on other stories, it looks like it’s a Facebook-related widget. My mind groups the two page elements together and passes over it entirely.

The grid design seems pretty conventional and easy to navigate. The arrows over the “Featured Story” images direct me to click to play. Again, I’m not immediately sure on what text is clickable and what isn’t, generally, though the hyperlinked text is smaller and blue, and everything else is black and larger.

Basically, this is the end of the page. There’s more below to click to other sections within VICE.com, but other than that is a pretty standard footer with a clear-cut “About,” “Jobs,” etc.

More of the grid design shows up here, which makes the navigation similar to the ‘second’ page and, hence, easy.

The numbers below the listed shows make scrolling through easy, but the entire page reloads every time “Next” or a new number is clicked. Which means that the video restarts if you want to scroll while listening. (Here’s where my confusing mini page scroll thingy makes sense, maybe.)

Overall, I think this page has bad usability, but is an aesthetically pleasing user experience.

The Economist’s Usability vs. User Experience

I’m an avid reader of The Economist, but I rarely consume its contents on economist.com. One of these reasons is its very busy, text-heavy design.

It doesn’t strike me as a website from 2011, but rather a quaint throwback to the late 1990s. It’s simple enough to use the top navigation bar, but the layout alone makes finding any article a chore. My eyes dart all over the page as I try to decide where to click. There’s plenty to click, but where do I begin? On my iPad or on my laptop, it’s quite simple to decide where to begin—I just turn to the page that interests me. There could be some great articles on this front page, but I would not know that based on the way they are presented.

The editors do a great job of giving users a choice in what they want to consume, but sometimes I don’t want to think about what I should click. Sometimes it’s obvious what I should click; other times, it takes me a few tries before I can find a topic that interests me enough that I want to devote 15-20 minutes reading about it.

I will compliment the design on its simplicity, however, in the sense that I always know where a certain link will lead me (once I figure out which one I want to click). The top nav does a good job of dividing the different sections of the magazine, but the page layouts are swimming in text. It’s the Economist, so there’s going to be a lot of explanatory, detailed prose (which I appreciate), but I don’t think it’s necessary to have so many stories cluttering the pages. There has to be a better way to consolidate them and to make individual sections’ pages look more attractive.

Aside from the visual noise generated by the sheer volume of text, I must also compliment the site on its avoidance of other forms of visual clutter. There is little to no advertising, which makes the browsing experience a little less intrusive, and as a subscriber who pays a good chunk of cash to the fine people in London, I appreciate that. Whenever I click a blue tab, it turns a lighter color and pops out from the rest of the bar depending on its location. This is something Krug discussed in his book, and although the book (and this site’s design) are just a little bit dated in 2011, they still work to create a more efficient browsing experience.

The Commercial Appeal – Memphis, Tenn.

Before considering the importance of usability on websites, I always thought of The Commercial Appeal’s website as being very unattractive. The color scheme wouldn’t have been my top pick, but the layout of everything makes sense. The tool bar is exactly where one would expect, across the top of the content, with clearly defined categories. There is a header which clearly identifies the website, and the search bar is at the top right. It’s easy to figure out which text you can click on, since when you hover your cursor over, say, a headline, then that text becomes underlined.

It is clear which topics the newspaper thinks is most important in the first section, since the “top” story is slightly bigger than the others and is listed first. The other sections are clearly grouped and the easily-identifiable clickable content is still easy to spot. The text still becomes underlined and parts that are buttons or images change color slightly. The ads on the page are nicely separated from the content, and the entire site is clean and uncluttered.

The search tool is effective. My one complaint is that the user cannot change how the results are listed — they are automatically listed starting with the most recently posted matches. When the user clicks one a story to read, the header and tool bar remain consistent. The headline and cutline positioning and size, plus the following text, follow convention. There are options to email and share the article under the headline, a spot I very often find such options. The ad on the right of the story is sized appropriately, with clearly blocked off sections for top news, weather and even a calendar. The comment system at the bottom appears normal and is exactly where one would expect to find it.

Blog 2: Usability vs. User Experience

The news site I chose was newseum.com. I heard about it recently but had never visited it before.

Usability rating—9 out of 10

1.)    Hierarchically, the site’s format conforms to Krug’s criteria:

a.)    Newsuem’s name and a short description of what it is are at the very top, where they should be. Directly beneath is a thin row of information tabs.

b.)    Beneath that row is a humongous graphics box with a fading-in-and-out-slideshow of images depicting newseum’s most pertinent news and events.

c.)     Underneath that graphic are two columns. The left-hand column lists topics in this order: “Latest news,” “Upcoming programs,” “Exhibits,” “News you can use,” “Fun and games.” They are listed in order or relevance or importance—“Latest news” is listed first and “Fun and games” is listed last. The right-hand column displays a featured video at the top and then a list of calendar events featuring guest speakers underneath.

d.)    There is a far-right column for learning about the museum, buying tickets, contacting the museum, social media, etc. Hierarchically, since people read from left to right, it makes sense that all of the news information is contained in the left and center columns and that the other information is listed on the far-right.

2.)    In regards to conventions, the search bar is located near the top right of the page, and the cursor morphs into a mouse hand over links and images that are clickable. The museums’ contact information is also located in small print at the very bottom of the site page. Also, social media icon pictures are displayed and recognizable.

3.)    The page is broken up into clearly chunked, defined areas. Columns and rows are used to help the user access necessary information quickly, and a minimal color scheme is used to define the boundaries of rows and columns. The use of contrasting vertical and horizontal elements (horizontal being the images and vertical being thin columns) also help separate content into clearly defined areas.

4.)    It’s obvious what’s clickable: the cursor turns into a mouse hand automatically and some elements also simultaneously change into a different color when the mouse is hovering over it.

5.)    Noise is minimized. There are no distracting elements. The site contains basic information in a clear, chunked format.

User experience rating–7 out of 10:

There are a few things I would change:

1.)    The thin row of 8 information tabs directly beneath the main heading at the top of the page was not at first noticeable to me because of its light gray color with white text, so I would place a thin black boundary around either that row or surrounding elements to make it more distinguishable since the tab headings can lead the user quickly to important information.

2.)    Additionally, the row of tab headings consists of a blend of existing and new, additional information, which is confusing. Some of the headings on these tabs correspond with some of the headings on the site page, but 3 of the 8 tab headings provide additional topic information. To me, this creates inconsistency—it would make more sense if all the tab headings corresponded (in sequential order) with all of the headings on the site page or if all the tab headings were links to new, additional information that could not be found anywhere else on the site page. The intention was obviously to provide information access points in more than one location to make it easier for the user to find information. However, the site was so basic and easy to navigate that this was not necessary and ended up confusing me.

3.)    I would also change the placement of some of the grouped elements. The left-hand column of information is twice as long, vertically, as the center and right-hand columns, so there is a ton of empty space in the bottom half, center and right-hand side of the site page. If the “Visitors Say” quote box were moved to the right hand side underneath the social media icons, this would serve 2 purposes: One, its placement would make sense—a testimonial box underneath social media icons screams “get involved with my site; everyone else is!” Two, some of the large blocks of information in the really long column on the left-hand side could be moved over to the center and right, making the bottom half of the page 2 fat information columns. This would make the site page shorter so you have to scroll less. Moving this information would, in my opinion, not affect usability negatively because (you just have to take a look at the site) the information blocks are so separately and cleanly and clearly defined by use of colored rectangular box-headings and parallel formatting of information contained within those blocks.

4.)    Also, in regards to user experience, I felt as though the humongous graphics box with the fading-in-and-out-slideshow of images faded in and out too quickly for me to read the captions and decide if I wanted to click on any of the images.

5.)    The user experience wasn’t memorable and doesn’t entice me to return to visit it: Since this is a news site, I like that the format is straight-forward with minimal fluff. However! The heading at the top states that newseum is “Washington, D.C.’s most interactive museum.” The word “interactive” promises a more engaging format, but after interacting with this site page, I am definitely skeptical of how creative and interactive their actual museum in D.C. is. I feel the site page also lacked creativity. The color scheme was a blue and dull gray, and I feel as though small pops of contrasting color could have made the site more attractive without detracting from its seriousness or purpose or sense of credibility. The only images on the site page were photographs or still shots of interviews or broadcasts, which got a little monotonous.