Got a moment to see if your site passes this quick usability checklist? These are some common usability mistakes we encounter on the web while reviewing sites.
Sign On San Diego (http://www.signonsandiego.com) is a newspaper by the Union-Tribune that covers news from San Diego to national news. It communicates it’s purpose clearly, though there are several things that would make the browsing experience more pleasurable.
The first thing I notice is the banner ad up top. When I realize it’s a banner ad, I feel a bit duped. The page lacks much color, so I think that’s why I gravitated towards the banner ad. The next thing I do is look at the top left of the screen, to see “Sign On San Diego.com.” Next, I’m drawn to the large picture on the page. Underneath this, I see the heading “Heating up at Coachella.” I’m then drawn to the stories next to the featured story. It appears this website uses a grid, and that’s a good thing because otherwise it would be very difficult to find anything.
Scrolling down the page, again, I notice the advertising outright. There’s a lot of it, to be sure. I read the heading “Multimedia” and then scan for other headers: Business & Sports, Union-Tribune Columnists & Weblogs, and Features & Entertainment. None of these particularly appeal to me, and here’s why: each section uses the same format to present it’s content. This is probably not the fault of the designers, though—they have a huge variety of stories and information to present so a simple format is best. Still, as someone who is used to the flashy and multi-media rich interfaces of modern websites, my eyes become tired and my “regular” way of browsing sites doesn’t work.
As I browse Sign on San Diego for the first time I easily recognize the format of a newspaper type website. These high content super sites have to be creative in the way they are layed out to fit in as much as possible.
As I continue on the site the first thing I notice is strong sense of inconsistency. The index is center aligned while the majority of the other pages are left aligned. Also the designs are very different on each section. I feel like I have to re accustom myself to the web page each time I jump into a new section.
SignOnSanDiego is instantly and obviously an online newspaper. It’s always nice to visit a site where the purpose and function of the site is instantly clear.
There is so much information on this page that it is hard to know where to look if you try to read it like website. If you take into account that it is a newspaper and treat it as such, though, it is perfectly readable and accessible.
When I first arrive at SignOnSanDiego.com, there is an instant understanding that I am on some sort of news website, and it’s quite obvious that it’s local news for San Diego, California based on the region included right in the title. The layout of headings, images, text, and navigation is very familiar to me from other news websites. Purely by the design of the site alone, I already have a fair understanding of what this website is about.
What Confuses Us
Next, I decide to try other sections of the site. I’ve been to exactly two different section of the site and found a different presentation for the content inside of each. Maybe the third time is a charm. Upon clicking on “Sports,” I’m presented with even more options for how deep I wish to go down the rabbit hole. I decide to click on Chargers.
The resulting section removes the other options from my view. Again, if I accidentally clicked on Chargers, or wished to return “Home,” I wouldn’t really know where to begin. This leads to an interesting point. On the resulting Chargers page, there are two home links. How does one reconcile this in their mind? Perhaps I wish to go back and choose a different section of the Sports category to browse. I click on the “lower” of the Home links. No dice. It looks like I’ve made my choice and now I’m stuck with it.
The vast difference in the sites apperance between different sections is the most confusing aspect of this website.
When I think of large news websites I think of CNN first. I visited their website to see how they dealt with section differences. CNN’s recent redesign really is beautiful and it also makes the website very easy to navigate.
CNN changes their header for each category of news you are viewing. This is a great tactic, it leaves the rest of the site and the general navigation very similar across the whole website. The sporadic design and alignment across Signonsandiego.com gives a very unprofessional feel. It leads me to assume that several different designers worked on this website and none of them worked together. From a user stand point this could lead to confusion and frustration.
The banner ads at the top have flashing information, which is incredibly distracting. I understand the need for sites to have advertising, but this particular flashing is drawing me away from the intent of the site.
The search bar appears to be very typical at first, with nothing but the usual text entry and “Search” button. As I briefly mention in my post about creating effective search results pages, a simple text input and search button are the bare minimum, and really ideal for many searches (it’s very easy to understand, and required little thought or effort on the users part). However, there is more to this search than meets the eye.
There are actually three tabs above the search, “News/Sports”, “Entertainment”, and “Web”. There are two problems with this:
- Only the active tab is styled like a tab, which completely loses the effects of useful tabbed navigation.
- What if a user wants to search the whole site, and not just one section. Why isn’t there a search “All” option selected by default so that the user can constrain results only if they want to?
What We Like
Looking around the Smart Living section is like taking a breath of fresh air, though. Although it suffers from many of the problems of it’s parent site. This microsite is easier to browse and makes better use of color and typography. While many of the stories in this section are short, they appear longer due to the narrow content area.
One thing I like most about the index and Today’s paper section is the footer being included. It helps me find where I want to go with links clearly divided in to sections.
Even though there is a vast amount of links it helps the user find where he is looking to go quickly instead of wading through several forms of tabbed navigation in the header.
The navigation is very straightforward. Just like a newspaper, I can choose to go to different categories or topics.
On actual news articles, my eyes jump immediately to where the content begins. The styles aren’t as pretty as some other news sites I frequent, but this is clear indication that it does it’s job well (for me at least). Some really quick tweaks like using lighter colors for the dates and author credits would probably make the connection to the content more instantaneous.
Conculsion & Suggestions
Signonsandiego.com offers a compelling, multi-faceted newspaper site to their community. Unfortunately, each section of the site presents a unique challenge as well as its own subnavigation. Each part of signonsandiego.com feels like its own site and this is its core issue.
Because the content in this site spans many different sections, its easy to be reading an article in sports and end up in the entertainment section, which leaves users feeling like they’ve left the site they were on. What more, modern websites and blogs address a specific issue, so the fact that signonsandiego tries to do everything at once seems like overkill.
In the end, users will most likely end up frustrated because at any given time, the section of the site they end up on does not resemble the front page that greeted them when they came to the site.
- Establish Consistency — Try and figure out what elements need to be on each page. Perhaps the logo always appears in the top left. Whatever the case, make sure the some elements appear on every page in the same position. It helps users feel grounded.
- Orient the User and Simplify — Directly following the point above, make sure that your users know where they are on your site at all times. Highlight the “tab” that “contains” the content your user is seeing. Use navigational elements like breadcrumbs and contextual navigation (a la wikipedia.org) to help users get around your content. Finally, try and de-emphasize navigation that takes users to content that isn’t related to what they’re looking at. On some pages, there were nearly 20 links within the top 200 pixels on the page. Is this truly necessary?
- Use Microsites where Appropriate — Many of the sections of signonsandiego.com appear to be self-contained but lack any real sense of distinction. The best example of a microsite from what is present on the site is the Entertainment section, followed by the Smart Living section. Consider providing similar treatments to the other sections, but keep in mind that these microsites should employ consistency and good information architecture so that users feel like they’re still on your website.
- Use Good Graphic Design Principles — Make sure to pay attention to the consistency, repetition, alignment and position of elements on your site. If a “story” contains things like an author, date, and article copy, make the title of the story bigger than those elements, and make sure it precedes them. In this way, your users will understand their grouping. Make sure to establish a convention for how you display this information and stick to it.
Make your design flow: Work on making your site design float better. Choose center alignment or left alignment and stick with it. If you would like to make a section look different model it after CNN’s header only approach to signify differences.
Be consistent with navigation: Create a simple way to navigate to each section of the site. Currently there are 3 different upper forms of navigation in the header competing for attention.
Create a site wide search: Currently I am only able to search News/Sports, Entertainment, and the web. What if wanted to search the whole website for articles on snowboards, for example.
- Streamline the front page so that there is not repeated information. What is displayed on the front page should be original.
- Consider preventing flashing banner ads from being displayed, as they can distract the reader and prove to be annoying.
- Make sure all text used on the site is readable. Avoid tiny tiny fonts.
- Unjumble the links in the footer.
- Make the news expanded menu consistent with the other ones.
- Distinguish content from ads for easier readability.
- The search is the biggest problem in my opinion. The inactive tabs should appear to be tabs (they shouldn’t appear to be active of course), and by default there probably should be a way to search everything.
- While browsing the different sections (entertainment), keep things that a user expects to be the same on every page exactly the same. Do not change the style or position of things like Search or Global Navigation too much.
- Clean up the Utility Nav to have fewer choices, and don’t include items that would probably work just as well in the Primary Navigation.
- Some pages such as Autos and Jobs simply have too much going on for me to decide what I need to do quickly. Cleaning these pages up a bit by removing less important parts would help someone understand what to do quickly.
Write for UX BoothContribute to UX Booth
Contribute a guest post to UX Booth and let the community know what's important to you!