I tweeted a couple days ago about a critique I was working on of MiamiHerald.com. Below is a breakdown of key things that stood out to me while browsing through the website. I didn’t spend a lot of time on this critique and I am sure there are plenty of other things that you folks could find. I looked at design, which includes placement, usability and features. I organized it by the header, top fold and the rest. Would love to hear your thoughts in the comments below.
Remember that the header is prime website real estate and this is the place where all visitors will look to find ways of navigating the site. The current design of the header seems scattered. For example, the loging and register links look like they are almost part of the logo for the site, which includes the date. The login and register links should at least be distinguished through separate fonts or move altogether.
- Awkward white space: Because it is prime real estate, there shouldn’t be too much white space, like that between the logo and weather.
- Weather: This can be much more interactive and part of the header as a whole. Websites should be an experience, not just information resources. The Lasvegassun.com website is a good example of a header that changes entirely with the weather. Or another example, though not as good: StarTribune.com’s snowman, which I know from their Web director gets a lot of attention and clicks from users ever since they implemented this.
- Ads: Advertisers more and more are wanting ads on both sides of the header, similar to that of the NYTimes.com. As a result, you will likely sell more (We implemented this at a college paper and that ad spot shot up substantially, but would likely be frowned upon by editorial folks). With the white space in the middle, you could fit another ad. Web folks still design sites for the smallest screen sizes and may argue against it, but most screen sizes aren’t that small anymore so that argument is moot.
- Navigation Bars: I mostly don’t have any problems with the navigation bar, except that the non-content buttons (i.e. Shop, Cars, etc.) should be distinguished – most sites do this by coloring them differently or placing them at the top. The top bar is for business-type sections and the bottom is strictly content.
- Logo: A may separate logo could be reconsidered altogether for the website. Typically, the audiences are different, though most newspapers try to use the logo to connect it to their print product. Some, however, market their websites as a separate product. It’s not clear what is more effective, but just a thought.
- Columns: A structure of the top fold from four-columns to three is another thing to think about. It will simplify the design and make it appear and feel less cluttered. If you got rid of the “highlights” column, which is a bit vague of a description and hard to determine its purpose, you would have more room for featuring the breaking news column by expanding it and perhaps including visuals with that. If you still want to feature the content in “highlights” you could make your main visual a rotating ticker (see StarTribune.com for example). Many sites have tickers and they are quite effective in featuring content from other sections of the site. Generally, it is difficult to know where the eye should go after the main visual and exactly what news is most important.
- Breaking news: I think in general, breaking news should be featured more prominently, only if it is breaking. With the current design, it might be more appropriate to label it as “Latest News” and have a completely separate design for breaking news, like a column that stretches across at the top and only appears when there is real breaking news and showcases it prominently. It would bump the rest of the content down. This will drive more traffic and users will quickly learn that this is something that is very important because it doesn’t regularly appear on the site. Or you could consider a scrolling-type feature for the latest news. The BBC.co.uk website does this, though I don’t think it is prominent enough.
- Headline colors: The stark black is a bit too much. Many news sites are adapting softer, off-black colors. Since the color-scheme uses blue, you may want to try a dark blue, or a lighter black tone. In general, there should be a difference in color or share between the headline and blurb. It makes it look cleaner.
- Blurbs: Though if you changed the amount of columns this would no longer be an issue, but with the current amount of columns the blurbs look too long, especially under the breaking news column.
- Labels: The labels for things like “breaking news” and highlights shouldn’t just be kickers. I think they need to be more prominently labeled by making them bigger. Also, the “breaking news” label should be consistent with the rest of the labels.
- Main visual: There is a reason why most news sites include their visual to the far left or at the center. The visual on this site is off-center left. Eye-tracking studies have shown that viewers start at the main visual, which is most effective on the left, and work through the site from left to right.
- Search placement: I think this works better when it is integrated into the header somehow. I personally like CNN’s most because it is so accessible and prominent, but either way it should be part of the navigating option. I was pleased to see it was available on all pages. This does also push the ads and navigation tools like “Most Popular” box down.
Below the Fold:
- Most popular box: This box contributes to an increase in pageviews when it is featured prominently. Readers love this and eye-tracking studies have found it very effective. However, on the site it appears below the fold. This is probably because of the three ads in a row above it, which the business folks likely pushed for. However, the most popular box being higher would contribute to more pageviews, which would make ads more popular, etc.
- Connect with us: These are very important ways for users to connect with the site and draw more views and visitors to the site and it is buried. I think these things should be more prominent and perhaps integrated into the header. Though Mashable.com is considered a blog, they do this very well by featuring these links prominently and get 8 million visits a month, mostly because of their tools to connect through social media, which drive traffic to the site. News websites, generally, can learn a lot from popular blogs. I think college news sites are doing a better job than most professional news sites. Here is a good example: http://mustangdaily.net/ – notice how the buttons on the right are prominent and quite large.
- Index: A site index on the bottom footer of the page can help increase SEO of the site and make it easier for users to navigate in general. They are becoming quite popular on many sites. Here is an example of this: http://www.freep.com/ – scroll to the bottom.