I’m not a huge fan of web awards programs, largely because you typically have to pay to be considered and so the pool of contenders is somewhat self-selected.
That being said, the IMA is a fairly well established awards program that attracts some good entries. They recently put out their list of the top 10 websites of 2009, along with a bunch of nominees.
Here’s the list of winners:
A $6M website
A recent BBC news article writes that the British government spent £94M last year developing and running websites.
This includes £4M spent on developing the UK Trade and Investment website alone — a site that averages 28,000 visitors a month.
Hopefully some of those visits resulted in sizable investments in the UK economy, because I can’t begin to understand how so much money could be spent on a single website.
As I was finishing installing Microsoft Office on my home PC, I was presented with this alert:
Microsoft Office installation alert message
What does this even mean?! What are the consequences if I say yes?
Web application error messages and alerts are often equally badly written because all too frequently they are left to developers to write or the default ones that come with the software are used.
This is not a good thing. Error messages and alerts should be treated as part of the UI along with the more visible components of the application.
I’d like to look at three approaches to redesigning a website:
These approaches have their advantages and disadvantages. Let’s consider them in reference to a large, content-rich website.
Keeps your site looking consistent.
Last week my hard drive started looking like it might be on its last legs. The built-in diagnostic tool that comes with my HP computer was returning a “BIOHD-8″ error, which suggested that my hard drive was not feeling too healthy.
Unfortunately, the last time I backed up my data was about a year ago (I know, I know) so I dusted off my external hard drive, which — click, click, click — also turned out to be dead.
Hoping for a long term solution less prone to mechanical failure I opened an account with the online backup service Mozy and started backing up my data to the cloud. At a rate of around 2GB uploaded a day, it was going to take about a month to do the initial backup.
And then on Friday, with about 10GB of data uploaded, my hard drive failed completely — error message “BIOHD-1″ for the record. I tried using the built-in recovery tool on my PC but it was too slow and rudimentary. Fortunately, a little searching brought me to a useful article — 5 Ways to Retrieve Data Off a Crashed Hard Drive.
I’m not usually one for messing about with PC problems. The time spent vs. money saved calculation rarely seems to be worth it. But this time I decided to try the Live CD option that was outlined in the article.
Using my other PC, I downloaded Puppy Linux and burned the ISO file to a disc using ImgBurn. With the CD inserted I restarted the main PC and changed the boot sequence to detect the CD tray first.
This time when the PC restarted it loaded up Puppy Linux. After clicking through a few configurations (the default settings were mostly fine) I found myself faced with my first Linux desktop! Even better, I could see my failed hard drive ‘mounted’ on the desktop and I could click into it and navigate around it just like using a regular file explorer.
I plugged in my USB flash drive, which was also detected and displayed on the desktop and started copying my files over, ready to be transferred to my remaining working computer. To my surprise, not only did the live CD solution work, it was actually fairly easy.
I’ve been giving We Rule a try on my iPhone (username ‘chwats’). Recently though, I’ve been having connection problems, with the game being slow to load and play, and sometimes unavailable. Yes, all online services have issues sometimes, but this was getting ridiculous.
I was just about ready to uninstall it when I received a perfectly timed email from ngmoco, the developer of the game.
It was a great example of how to apologize to your customers for service problems, and frankly, kept me as a customer. Here’s why.
Firstly, although I only discovered this once I had read to the bottom, I really appreciated that the email had come directly from ngmoco’s CEO, Neil.
I also appreciated his honesty in describing the issues that were causing the connectivity issues:
…we underestimated the number of people that would play the game, the number of social connections that they would have, the number of push messages that would be sent, the number of times that they would play per day and the number of minutes that they would play for.
Simply put, ‘we didn’t expect the game to be as successful as it’s been.’
I liked how the steps to resolve the issues were outlined and the urgency with which they were being implemented:
…we’re working around the clock to scale our physical infrastructure and we’re also in the process of finishing a new round of changes to both the We Rule and Plus+ servers, as well as an update to the We Rule App…
Lastly, it was heartening to learn that not only were service issues being addressed but new features were also being brought online:
We’re going to be rolling out new content on a fairly regular cadence over the course of the game’s life and we have enhancements lined up for many many months to come.
As a customer, the first part of this email saved me from leaving and the last part aroused my interest enough to stay around for the foreseeable future in order to see how the game evolves. Nice job, Neil.
In case you didn’t know, Britain will be electing its next government on May 6. In keeping with the spirit of the election, I am taking a look at the websites of the three main parties, starting with the incumbent, the Labour Party.
Labour Party home page
Labour’s slogan is “A future fair for all.” In case you missed it, they’ve repeated it three times on the home page. Surprisingly for what I imagine is a fairly content-heavy website, there is no site search.
Labour’s color is red, and the site does a reasonable job of using that core color, without making your eyes bleed.
I’m not sure why the header is separated from the main navigation. At first I thought it was a browser bug. I’m also not keen on the large gray smudge graduated gray background behind the main body of the site — it just looks dirty.
The main navigation is straightforward but unimaginative, with the requisite social media icons easily accessible. It’s too bad that the “Support Us” drop down has some z-index issues with the content behind it.
The hero promo feels busy and complicated. Here is a great place for Labour to drive home its key policies through strong messaging. Instead visitors are expected to sit through minutes of tiny video.
Maybe it’s me, but I didn’t realize that the hero promo was actually a carousel and that the slides were controlled by the navigation section to its right. This appeared so disassociated with the main promo area that I thought these were simply shortcut links into the site.
As you move down the home page, the grid seems to get thrown out the window. The layout of the content boxes loses any sort of overall cohesion.
Seeing as many visitors to the website will be looking to learn more about Labour’s policies, I’m surprised that they’re listed so far down the page. I can’t believe that pics of Prime Minister Gordon Brown on Flickr are more important in helping voters to decide which way to cast their ballot.
The names of the policy links are pretty awful. “Standing up for the many” doesn’t give you much to go on, and using basically the same link for Health and Education is very unimaginative. What’s the difference between “Securing the recovery” and “New industries, future jobs?” As a visitor, I don’t have a clear idea of where either of those links will take me.
Over on the right sidebar the “How Can I Help?” section clearly outlines how you can get involved in Labour’s campaign with bold icons and clear labeling. It’s not clear to me why it’s almost immediately followed by the “Labour Doorstep” section with essentially the same links. Surely these two areas could have been combined into one?
The Facebook and Twitter social media sections further down on the right feel too large and are awkwardly implemented, especially with the lack of white space between these content areas.
Although small, the “Meet the Candidates” content box will be useless for most visitors. Unless that candidate is campaigning in your constituency, they have absolutely no relevancy to you.
I do like the sitemap-style footer, which makes it easy to access any part of the site.
Overall, the site feels rushed and lacks the polish I would expect from a major political party, especially with the experience of the 2008 US elections to draw from.
Next, the Conservatives.
If you’re in the San Francisco area at the end of June you may want to check this out. New Riders’ Voices That Matter web design conference takes place June 28-29.
It features such web luminaries as Jesse James Garrett, Dan Cederholm, Tantek Çelik, and Steve Krug, author of one of my favorite web books, Don’t Make Me Think.
Readers of this blog can get a $150 discount off the conference fee by entering the code WBNBLGA
Gerry McGovern’s recent post on the decline of the home page reminded me of a similar post I wrote last year.
However, while I wholeheartedly agree with the overall point he is making, the issue is not that
…too many marketers and communicators are destroying whatever credibility their homepages have left with customers by filling them with useless graphics and meaningless words.
While this may have been true a few years ago, the majority of web teams have moved beyond happy, smiling faces and marketing jargon to creating home pages that are useful and engaging.
The problem is simply that there is an undue emphasis on a website’s home page relative to the attention it receives from its users. This is not surprising given that this is the main page by which the web team will be judged, whether it is by internal decision makers or external peers.
Your CEO (or other C-level exec) is not going to be too familiar with most of your website, but you can be sure he knows what the home page looks like. And may have some opinions on it…
The challenge is that the visitors to a website constitute a vast, silent majority while the opinions of those internal and external people who interact with and influence the web team have a far greater sway over where focus is placed.
The answer is, of course, metrics. If you can show that taking a holistic approach to your site and improving other parts of it can produce a higher return on investment than endlessly tweaking the home page, you will be able to keep your influencers happy and meet the needs of your visitors.
Good luck with that.
I don’t do much freelance work any more. Mainly because work + family + gaming habit + blog doesn’t leave time for too much else. However, I do have a couple of clients and I recently redesigned the website for one of them — Bike and the Like.
Bike and the Like home page
I was pretty happy how it turned out, although I’m not much of a graphic designer and so the header could do with a proper logo.
To save development time, I used a pre-paid template as a framework for the site. However, I was surprised to find that in the end I changed the design of the site so much it really would have been just as efficient to build the site from scratch.
I also used @font-face for the first time with a free font from Font Squirrel for the headings. It was really easy to implement, although if I was building more sites I would be more likely to use Typekit in the future as it has a greater range of fonts to choose from.
Buttons are a small but critical part of a web site design. In the best designs they create a strong call-to-action — add to cart, sign up, or learn more — as well being one of the details that reinforces the overall quality of the design.
Zendesk button
Here are over 60 examples of great web button design to provide some ideas and inspiration for attractive buttons to enhance your next web page design.
Looking for examples of good design of the various elements that make up a web site? Check out my Elements of Design showcase. It covers a range of areas, from search boxes to footers, and is regularly updated.
Now that the iPhone has a true competitor in the Nexus One, I thought it would be interesting to see how their home pages compared. What is Google doing from an online standpoint to take on the smart phone market leader?
When I first viewed the Nexus One home page I was struck by how utilitarian it looked. The logo, the hero image of the phone, even the ‘buy now’ button — there is nothing compelling about what’s being presented. This really surprised me for such a major product launch.
Nexus One home page
Compare this to the iPhone home page, which oozes quality. The logo is bold and elegant and the hero imagery shows off the iPhone’s excellent industrial design to great effect. The autoplaying slideshow shows off the key features of the device without requiring any user interaction.
As soon as you arrive on the page, it starts telling you why you should buy an iPhone.
iPhone home page
I think it’s fair to say that the Nexus One can’t compete on visual design, both in terms of the hardware and software (take a closer look at the phone’s home screen to see what I mean).
So, I was surprised that more emphasis was not placed on the features where it does stand out. Why exactly is this phone a worthy competitor to the iPhone? It would benefit immensely from a more upfront presentation of what sets it apart from the iPhone. What exactly are its killer apps? Surely not Gmail and voicemail?
Apple uses the space below the main promo area to call out additional features and benefits, and Google would do well to do the same. Apple also enables the visitor to easily learn more about each feature. I don’t know where I’d go to dive deeper into the features of the Nexus One.
The Nexus One’s interactive demo is good once you start using it; however, there’s no guarantee how many features a user will click on, and even if they will realize that the image of the phone is interactive (we know how people hate to read instructional text). I couldn’t even tell that some parts of the phone were clickable without mousing over them.
Google should be much more proactive about what features the visitor should know about by displaying them automatically once the page loads. Otherwise, without the benefit of great overall site design, the page appears very static and boring.
The page would also benefit from tightening the layout and a greater application of polish to the visuals. For example, the Nexus One logo and the tagline lack association due to the spacing between them, and the hover effect for the already lackluster ‘buy now’ button adds nothing.
The Nexus One page hammers home the importance of good copywriting. There is nothing remotely compelling about the content on the page. “Web meets phone” is not a strong value proposition when compared with the iPhone. I think most people would agree that web has already met phone.
Compare “Click on an icon for a demo of each app” with “The fastest iPhone ever. Load web pages, launch apps, and more — even faster.” No contest.
Overall, the Nexus One site does a poor job of both launching and simply selling its product, especially when you consider the competitor it is going up against. Which is a shame, because I’ve heard it’s a pretty decent smart phone. You’ll just have to find that out from another website.
I recently came across a collection of website navigation bars from a few years ago. I couldn’t help but wonder how those navbars looked today, and how the impact of site growth, redesigns, branding updates, etc. have affected them.
Here’s a comparison of the old versus the new (click on an image to view a larger version).
Back in March, Jacob Nielsen made a surprising recommendation for using “mega drop-down menus,” saying that:
Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.
I’ve seen these types of menus popping up more often around the web, usually on e-commerce websites.
Now that they are a more widely recognized design convention, I thought it would be useful to pull together some of the best examples into a mega drop-down menu design showcase.
You are currently browsing the archives for the Smiley Cat category.
