I'd been wondering how the different sections of my Elements of Design site had been performing and so thought it would be useful to do the same analysis for it.

Here's the chart that resulted (covering the most popular sections of the site):

Elements of Design % of total page views by section (click to view larger)

It was interesting to see what a large and consistent percentage of overall traffic the Login Forms section represented. Obviously, a lot of people are looking for inspiration and guidance with designing these.

You can also see how the Buttons section, which I introduced in December 2009, grew to about 11% of traffic over the next month before tailing off to a steady 6-7% of page views.

In this example I used percentages rather than raw numbers to more easily show how the different sections compare against each other. Of course, this doesn't show how the each section is performing in absolute terms over time (is traffic growing or falling), so both views have their uses.

Hull Digital Live website navigation menu

Although the new site sports a more modern design (though it is arguable how attractive it is), the feedback overwhelmingly reports that the site is now harder to use.

Here's how the new site looks:

New Metacritic design (click to view full image)

Compared with the old site (which you can still access temporarily):

Old Metacritic design (click to view full image)

As a regular user of the site, I too find the new version less usable. Although this may be partly due to my unfamiliarity with the new design, it does take more clicks for me to get to the content I'm looking for (the list of movie/game reviews) and I find the new presentation less scannable.

I'm sure the design team must have been pretty surprised by the outpouring of negative feedback, because when they posted a preview of the new site the feedback was overwhelmingly positive.

Of course, they only provided snippets of what the new site would contain, which presented out of context don't look like bad ideas at all. Some full page screenshots would have been more effective in soliciting useful feedback, however.

This week the design team have responded to the feedback with an update on the redesign, but the fixes they've implemented based on the feedback seem pretty minor.

I understand that the redesign was driven by a need to replace the technology platform on which the site was based. However, an evolutionary approach to adding the new features to the site would have avoided upsetting so many loyal users.

Another approach that might have been more successful would have been to introduce the new site as a 'beta' or preview version alongside the old one.

Here's another take on the redesign.

The Glasgow Collective breadcrumb trail

Breadcrumb trails can be a useful secondary navigation tool for large sites such as online stores. They facilitate easy navigation back up the hierarchy of a website as well as providing a location indicator for visitors who may have arrived directly at the page (via search or a referring link) without navigating to it.

I thought it would be useful to look at some of the better and more visually interesting implementations of breadcrumb trail design. View the breadcrumb trail showcase.

• Breadcrumbs In Web Design: Examples And Best Practices
• Breadcrumb Navigation Examined: Best Practices & Examples
• How to Enhance Your Website Using Breadcrumbs – Showcase
• Best of Breadcrumbs and How They Enhance Your Website

In particular, the concept of these seven basic types of headlines is useful not only from the perspective of driving traffic but also as a basis for developing the content in the first place. Here's the list in brief:

1. The Know-it-All
2. The Teacher
3. The Gossip
4. The Instigator
5. The Nay-Sayer
6. The Campaigner
7. The Connector

I, for one, should start mixing up my own headlines a little more. I think I rely on numbers one and two a little too much.

A little research resulted in several useful articles about how much more you can do with this tool than just check for broken links:

• 7 Things You Can Do With Xenu Link Sleuth
• Xenu's Link Sleuth - More Than Just A Broken Links Finder
• 3 Not-So-Obvious But Totally Awesome Uses Of Xenu Link Sleuth For Webmasters
• Using Xenu Link Sleuth to Find Broken Landing Pages

Despite my own interest in the subject, there were a lot of sites I hadn't seen before.

However, when visiting different sites I've seen little consensus on how many characters should be viewable in a search box, even though being able to read what you've typed is key to search usability.

I thought it would be interesting to review the search boxes of web retailers to see if there were any best practices that could be learned from them regarding search box size.

Rather than pick sites at random, I took my list of online stores from Internet Retailer's top 500 list and picked out the top 30. After all, for these sites search should be an even more critical component as it would be used so frequently.

To determine the size of each search box I repeated the string "1234567890" and stopped adding numbers when the initial "1" was no longer visible.

The average search box length was 29 characters and the median was 27 characters. Interestingly, this closely matches Jacob Nielsen's recommendation (albeit made back in 2002) that search should be at least 27 characters wide.

4 out of the 30 stores (13%) chose to emphasize search with really big search boxes. Not surprisingly, Amazon led the way (as a point of reference, Google's search box fits 49 characters).

• Amazon - 59 characters
• Overstock.com - 56
• Staples - 50
• Buy.com - 50

Another 4 stores (13%) had large search boxes, although the size of the box relative to the rest of the website was greatly influenced by the padding and font size of the search text box.

• L.L.Bean - 49
• Nordstrom - 41
• Sears - 40
• Grainger - 40

Only 2 stores (7%) chose the 'middle' ground of the 30 character range.

• Netflix - 34
• QVC - 33

A full 40% of stores — 12 out of 30 — had search box lengths in the 20s, with quite a lot of clustering around the average search box size of 29 characters.

• NewEgg - 29
• Williams-Sonoma - 29
• Office Depot - 28
• HSN - 28
• Dell - 27
• Walmart - 27
• CDW - 27
• JCPenney - 24
• Best Buy - 23
• Sony - 21
• HP - 21
• Avon - 20

Over a quarter of stores — 8 (27%) — had very small search boxes. This was surprising given how screen real estate has increased over the years. I don't really see why these search boxes need to be so small.

• Victoria's Secret - 17
• Macy's - 17
• Costco - 16
• Target - 16
• Gap - 15
• Apple - 15
• OfficeMax - 15
• Amway - 15

Here's how the search boxes compare when placed side-to-side. Click on the image to view the full version.

Search box size comparison (click to view full image)

A follow-on study I would love to see is whether smaller search boxes cause users to enter shorter, less descriptive search terms and hence reduce search usability. It would be interesting to test if increasing search box size had a direct correlation with longer search terms and better search results.

How do different retailers approach writing persuasive copy for the a product that they all sell? Do they just use the manufacturer's product description followed by a bulleted list of specs, or do they tailor the copy in any way?

So I looked at how a number of online retailers wrote product overviews for Samsung's LN55C650 55" LCD television. Given the high pricepoint — around $1700 — I expected that the copy for this product would be pretty well crafted in order to draw the customer in and drive a buying decision.

Samsung LN55C650 55" LCD television

Here's how Samsung introduces the TV on its own website:

Stream movies, play games, view photos, and more while you watch your favorite shows on the Samsung LCD C650 TV. It’s all possible with web-connected Samsung Apps. With crisp details and bold colors, the brilliant 1080p picture quality is something you have to see to believe. And if action is your passion, you’ll never miss a piece of it with Auto Motion Plus™ 120Hz Clear Motion Rate. It reduces blur so every scene is full of sharp realism.

Looking at the online retailers, Amazon, Buy.com, OneCall.com, and Abt Electronics all share the same product description, apparently provided directly by the manufacturer:

The Samsung LCD 650 HDTV is a smooth operator: 120 Hz Clear Motion Rate technology allows you to see fast action with a smoothness that’s clearly ahead of the competition. The AllShare feature even allows you to sync up your entire household: A wired or wireless DLNA connection lets you stream your PC audio and video files to your HDTV using your remote. And Samsung's Touch of Color design combines texture and color that will complement any décor.

This product description doesn't compare well with the one on Samsung's own site. It manages to combine clichés — 'smooth operator,' 'clearly ahead of the competition' — with confusing jargon — really, what is a 'DLNA connection?'

BuyDig and Beach Camera carry an abbreviated version of the standard manufacturer product description used above. I'm not sure why as there is plenty of space on their product pages for a more detailed description:

A smooth operator, the LCD 650 series has 120Hz Clear Motion Rate technology, allowing you to see fast action with beautiful smoothness. The AllShare feature allows you to sync up your entire household, via a wired or wireless DLNA connection.

Sears and MacMall also share product descriptions:

Samsung's series 6 marks the first appearance of crystal design. Inspired by designs from the automotive and fashion industries, Samsung's molding process eliminates the need for glue or screws to construct the television cabinets. The result is an LCD HDTV with a clean, smooth finish infused with a hint of a translucent color. On the wall or off, these sets give the impression it is floating, with soft lines that complement any home decor. The company has taken care to harmonize the crystal design with Samsung's largest viewing and technological advancements, such as Ultra Clear Panel and 100Hz Motion Plus technology, providing the sharpest, smoothest pictures even when images are moving at top speeds.

It's interesting to see that this time the overview is much more focused on the physical design of the TV than on its technical capabilities. Perhaps Samsung provides different versions of its copy, focused on differing customer demographics? Or maybe it's just an older version.

CompUSA focuses much more heavily on technical jargon:

The Samsung LN55C650 55" Class LCD HDTV brings phenomenal viewing into your home with true 1080p resolution and a 150,000:1 Dynamic Contrast Ratio! This HDTV also comes with a response time of 4ms and screen refresh rate of 120Hz to ensure every spectacular detail comes through clear, even when the action gets intense. With its four HDMI ports, connecting your external devices is no problem; you can even stream online content directly from your computer!

Dell gets a little carried away with hyperbole — 'powerful picture quality,' 'the breathtaking media experience' — and suffers from some initial grammatical challenges.

However, overall the description marries sales blurb and tech specs quite well, although it could do with some formatting improvements such as a paragraph break or two:

Enjoy the full brilliance of LCD TV with decor-enhancing style and value of the Samsung LN55C650. Witness the powerful picture quality, vivid colors and stunning clarity of Full HD 1080p resolution and catch every detail without blurring with the Auto Motion Plus 120Hz technology. It's hard not to get into the action with its HyperReal engine which enriches the sharpness and clarity of whatever you're watching. With Wide Color Enhancer and Ultra Clear Panel features this 55-inch LCD creates truly breathtaking images. And that's not limited to movies and programs; Internet@TV communicates with your PC and phone to let you access the web and mobile content on the big screen. Moreover, the Touch of Color™ design compliments its energy efficient working. Now, enjoy the breathtaking media experience with Samsung LN55C650.

Newegg really go to town with their product description, even throwing in a little humor — 'cutthroat solitaire!' The description is clearly aiming for a good balance between tech specs and readable English:

Samsung's 55" LCD HDTV offers top-of-the-line picture quality. The 150,000:1 dynamic contrast ratio provides the sharpest images. With four HDMI inputs, it connects to all of your high-definition digital equipment, and with your PC's analog RGB hookup, you have an ultra-large PC monitor at the same time. A screen this big means you can have an awesome game of cutthroat solitaire! Your DVD player, cameras, and your favorite game console will complete this outstanding entertainment system.

Keep up with what’s happening outside your home with just a touch of a button! With Samsung’s Touch of Color design, the TV is an elegant addition to any room. The built-in ATSC tuner brings in broadcast digital signals without a set-top box, so you have everything you need for a bright, gorgeous picture. It also supports 802.11 wireless technology, providing maximum convenience and flexibility.

Samsung LCD HDTVs bring every color to life, giving you a brilliant view of the world around you. With this fantastic Samsung LN55C650 55" LCD HDTV, you get an outstanding entertainment center for your home, designed for the way you live!

It's a good product overview that works hard to sell the product, takes the time to explain the technical jargon, and presents the content in a readable format.

Crutchfield lay out their product description fairly well using paragraphs and headings, and aim for a more plain-language/educational approach:

Blur reduction is extra important for large screens

Samsung's advanced blur reduction circuitry keeps the LN55C650's 55" screen looking crystal clear, even when the on-screen action picks up the pace. You can independently adjust 120Hz processing and "anti-judder" processing. Judder is the image stutter you sometimes see during long camera pans. It's an issue for film-based sources, but applying too much judder reduction can give movies a "video" look that some viewers don't care for. The ability to fine-tune motion processing ensures a smooth, natural picture with all your sources.

When you're connected to the Web, there's always something cool to watch

When you connect to your broadband Internet service you can use Samsung's built-in "widgets" to access a variety of free online sites, like YouTube®. And you'll love being able to stream titles from your Netflix® Instant Queue, and order on-demand movies from Blockbuster® and Vudu®. You can even use one of the TV's USB ports to plug in Samsung's wireless adapter for convenient media streaming over your wireless network.

Best Buy's overview is short, workmanlike and does little to sell the product:

Enjoy your favorite movies, TV shows and sporting events with this HDTV that features a Wide Color Enhancer that delivers brilliant color and clear, detailed images. The 120Hz Clear Motion Rate technology for crisp images during fast-action scenes.

TigerDirect takes the opposite approach to Best Buy and goes all-out with the marketing hype. Can a TV really be 'awe-inspiring?'

The Samsung LN55C650 55" Class LCD HDTV delivers a totally immersive experience. It's hard not to get into the action with the LN55C650 HyperReal engine which enriches the sharpness and clarity of whatever you're watching. Not settling for less than awe-inspiring, Samsung N55C650 combines 120hz technology, Wide Color Enhancer and Ultra Clear Panel to create truly breathtaking images. And that's not limited to movies and programs; Internet@TV communicates with your PC and phone to let you access the web and mobile content on the big screen.

Finally, Vann's spends far more time touting the TV's internet capabilities than its ability to display a good picture. Again, in one long, dense, wordy paragraph:

When you're not enjoying Full HD viewing on the LN55C650's 1920 × 1080p LCD panel, you might consider dabbling in the internet. Combined with a rear-panel ethernet port and your pre-existing internet connection, Internet@TV widgets and Samsung Apps bring the web to your home theater. Check the weather at AccuWeather.com. Access you Netflix account. Tweet on Twitter. Listen to Pandora radio. And more! And using AllShare technology, you can convert the LN55C650 into a networking multimedia hub with wireless capability (separate wireless dongle required). Further, for enhanced viewing when watching fast-action sports and movies, look to the LN55C650's Clear Motion 120Hz technology. Finally, four HDMI inputs offer optimal HD system connectivity.

Obviously, there's a lot more information than just the overview on these product pages that ultimately leads to a customer buying decision.

However, the main product description is a key place to connect with the customer, especially those (i.e., the majority of people) who are less familiar with what all the many tech specs actually mean.

It's interesting to see the range of approaches taken to this one area of ecommerce copywriting, both in terms of the content and its presentation. I liked NewEgg's product description the most as they really took the time to explain and sell the product. How about you?

• Product Descriptions: Are You Romancing Your Features?
• Improving Product Descriptions Using Competitor Customer Reviews

Take this example article from Joystiq which doesn't have a single external link despite all the games mentioned.

When something is referenced and linked to in an online article I like to go to the original source of information for that topic — usually another website — rather than read yet more news about it on the same website.

So when sites do not discriminate between internal and external links it's frustrating because I'm required to mouse over each link in order to see the target URL in the status bar so that I know whether it's worth clicking on or not.

UX Magazine displays internal and external links differently

Consequently, I really like the way that UX Magazine differentiates between internal and external links so that it's easy to tell which ones take you to more internal content about a topic and which direct you to the external site in question.

It even goes so far as to emphasize external links by presenting them in the more traditional link format, making it easy for readers like me.

I wish more sites would take this approach.

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:

• Kiwibank
• Madagascar: Escape 2 Africa Video Game
• New York Life — Guarantees Matter
• Vitsoe
• Mohawk Fine Papers
• Landing — Stories from the Cultural Divide
• Electronic Arts
• Hong Kong Heritage Project
• TONY HAWK: RIDE
• Mercedes-Benz USA E-Class

It's something of a mixed bag, but worth checking out.

Personally, I'm a big fan of the EA website, which combines visual design, information architecture and functionality/interactivity to great effect.

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.

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.

1. Big bang — move completely from an old to a new design in one go
2. Gradual — implement the redesign by sections over time
3. Evolutionary — avoid redesigning altogether and focus on improving the existing site

These approaches have their advantages and disadvantages. Let's consider them in reference to a large, content-rich website.

Keeps your site looking consistent. On one day your whole site simply changes from one design to another.

Easily understood by your visitors. Whether or not they like it, your visitors will be familiar with this traditional method of redesigning. Messaging around the redesign is not about what is going on but more about why it was undertaken.

Easy to sell this approach internally. It's easier for stakeholders to understand the concept of moving completely from one design to another than an approach that involves interim steps where more than one theme may be viewable to visitors.

Keeps your web analytics clean. Having a single cutover date makes it easy to immediately start measuring the effectiveness of the new design and comparing it to the previous one.

It can take a long time. You need to migrate all of your pages over to the new design in order to launch and cannot gain any of the benefits of the new design until you do. While you're doing the project, you also have to maintain the live site and so are likely managing content in two places.

It can create a jarring user experience. No matter how well you advertise the upcoming redesign in advance, the changeover is still going to catch many visitors by surprise. Suddenly they have to relearn how to use the website, and many of them won't be happy about it.

Keeps your site static. Redesigning a website in this way is such a large endeavor that it is only undertaken infrequently. This can lead to your site design being static for longer than it should be based on changes in business conditions, your knowledge of your visitors, etc.

An increasingly popular approach is to launch a site redesign in stages, starting with the most popular pages or even just the home page. This approach has become quite common with news sites, which may just start with a home page redesign and go from there.

Easier to implement the redesign. For large, content-rich sites, it's easier to move smaller sections of the site over to a new design than to do it all at once. You can also control the pace of the redesign so that the web team can keep up with maintaining the live site as well.

Shorter time to launch. If you're starting with, say, your home page, you can be up-and-running with a site redesign in a much shorter timeframe than if you were going to switch over the whole site. This provides an opportunity to gather feedback from your visitors much earlier and to apply it as you redesign the rest of the website.

More gentle introduction to the new design. Most people dislike change, and so introducing it at a more gradual rate will make it easier for your visitors to get used to it and adapt the way they use your site.

Can be complex to do. If the redesign involves information architecture changes, it can be difficult to introduce the new IA gradually while still maintaining the old one. Extensive use of redirects may be necessary in order to avoid broken internal links. The same challenge is true for sitewide features like a new search tool.

Harder to sell to stakeholders. This approach is harder to sell internally as there will be concern that the site looks broken. Most stakeholders don't understand how task-focused web users are and instead focus on keeping the look of the site consistent above all else.

A third method, the 'evolutionary' approach, tries to avoid the need for a redesign altogether. Rather than change the overall design of the site, the pages, content, features and functionality within it evolve according to changing visitor and organizational needs.

Netflix is a good example of this. Although the overall theme of the site has not changed substantially for years, the pages within it (particularly the home page) are constantly changing as the team tests out new ideas with their users.

Avoids the pain of redesigning. Large website redesigns are very challenging to do and will tax the resources of most web teams. They are often very political (especially what goes on the home page) and can be subject to the whims of higher level executives.

Frees up time to work on something useful. Time spent not redesigning can be spent on something more relevant to the bottom line, such as A/B testing of checkout flows, refreshing old content, or improving the conversion rate of a signup page.

Keeps your visitors happy. As I mentioned before, people hate change and website redesigns are generally received negatively. Unless your website is in desperate need of an overhaul, you may be better off leaving it as is for as long as possible. Better to direct your focus instead on ensuring that visitor tasks can be easily completed.

We're bored with the old site. The teams responsible for the website will become bored with the current design and will want to update it. Redesigning a website is also a very obvious way of showing 'progress' to internal decision makers when it comes to annual review time. It's often harder to sell less tangible improvements made to a website unless they have more obvious visible components.

• The Quiet Death of the Major Re-Launch
• Getting Ready for a Website Redesign: Advice, Resources and More
• Redesign: When To Relaunch The Site and Best Practices
• Thinking in the Right Terms: 7 Components for a Successful Web Site Redesign

It works well in Firefox and is even faster in Chrome. You can learn more about this experiment at Mr. Doob’s blog. Who knew there was a JavaScript physics engine?

Now I just need to come up with a good reason to use it in a project!

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 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.

• Apologizing like a human, not a corporation
• The bullshit of outage language
• How To Apologize for Server Outages

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.

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 when registering. Register before May 14 to get early bird pricing. The all-day HTML5 workshop on the last day in particular looks like it could be useful.

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.

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.

My Starbucks Idea login button

Placing the button within the text makes it fit more naturally with the wording and I like the economical use of space. Maybe I also just like the fact that it feels a bit different.

That being said, if you don't already have an account, there is no sign up button so you have to click 'Sign In' first in order to be presented with the option to create one. That seems a little clunky.

I don't recall too many other examples of button placement like this — in fact, none come to mind right now. I'd be interested to hear about any other examples.

However, what seems to have many in the community up in arms (see comments, here, here, and here) is what's been taken away — namely social features such as friend reviews and top 10 lists.

It certainly seems like an odd move in this era of social everything, especially given how strongly many users clearly feel about the usefulness of these features. I didn't use the friends feature very much myself, but I certainly didn't find that it got in the way of my browsing experience.

If you compare the new page with a couple of older versions that I found online you can see the differences. The new page is certainly much cleaner in terms of having been stripped away of the features that Netflix had been adding over the years.

Whether that's a good thing is clearly up for debate.

New Netflix movie details page (click to view larger)

Old Netflix movie details page (click to view larger)

Older Netflix movie details page (click to view larger)

One significant change I did find surprising is moving the "Add to Queue" button from beneath the movie box shot to the top right of the page. To me it makes a lot more sense to have the button along with the product image and the ratings.

I'm not sure what prompted Netflix to change this particular design element which has been working fine for years. The new position does not help the overall layout of the page at all and seems disassociated with the other information on the page.

Another change that stood out to me in the redesign is that the page now feels rather bland. There is an awful lot of gray and metallic gradients in the new design. This style feels somewhat dated to me and in need of a refresh.

If you're a Netflix user, I'd be interested to hear your thoughts on the new design and the change of features. Is this an overall improvement or have they ruined the experience of choosing a movie?

Many web site footers contain some level of site map. Often this is a duplication or expansion of the main navigation in order to aid the visitor as they move around the site.

With more options for where visitors may want to go, e-commerce sites can have a much more detailed site map.

It's probably a good idea for a site of any significant size to have a site map. And if you do have a site map, your users will expect to find a link to it in the footer.

Despite the expanded use of the footer, it's still regarded as the place to go for copyright information and legal-related links such as your privacy policy and terms of use.

It makes sense for commercial websites to have their contact information easily available. Where better than in the footer?

In addition, for businesses with a physical location, a link to a map and driving directions can be a great help for visitors.

Some sites have taken it a step further than simply providing contact information by including a contact form in the footer as well.

If space is tight, a call-to-action button makes a good alternative to encourage prospective customers to get in touch.

Many online stores provide a convenient email signup form in the footer. Signing up for (yet) another email is often an impulse action for customers, so it's sensible to make this as easy as possible.

If a site design does not allow for a search form in the header or if search is an action of secondary importance, the footer provides a viable alternative location. It's unlikely, however, that visitors will know to look for search in the footer without discovering it first through browsing.

The footer makes a great place to place your social media links in an easily accessible place on every page.

By breaking a footer up into columns, it's easy to include lists of recent news, blog posts, tweets, etc. These can give visitors a quick insight into what is going on with your organization and encourage them to venture further into your site.

It's common to place country/language selectors in a 'utility' navigation in the header. However, if a site design does not support such a layout then the footer is a good alternative location.

It's a good idea for online stores to let customers know upfront what methods of payment are accepted. Putting this information in the footer makes it readily available to visitors.

The footer is a good location for other e-commerce related information, such as security badges, guarantees and offers, as well as customer support information.

The footer makes a good place for blogs to list post archives or categories. Tag clouds seem to be less popular these days, but can fit within the navigational context of the footer well.

Since almost any page on a website can be the first one that a visitor encounters, a quick summary of the company or person can help orient new visitors. This overview can also help to add a little personality to pages that would otherwise be dry and factual.

Footers make a great location to showcase your best content or work so that you can do your best to ensure that visitors don't miss it, even when they reach the bottom of the page.

Similar to displaying featured work, listing awards and accolades in the footer allows you to show off your success and expertise without being too upfront.

If your site is one of a number in a network, it makes sense to link out to your partner sites. The footer is an ideal place for these links.

While the footer can contain features that aid usability and drive visitor interaction, it can also be a great place to add a touch of personality and have a little fun. After all, we're all people.

For example, to create the image above you'd just use the following code:

<img src=" [dummyimage.com] alt="Dummy Image">

• Dummy text generator
• Random image generator

[via Lifehacker]

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.

• Call to Action Buttons: Examples and Best Practices
• Button Design Showcase
• Web Design Trends: Call To Action Buttons
• Showcase of Buttons in Web Design
• 80 Examples of Add to Cart Buttons for Design Inspiration
• 20 eCommerce Add To Cart Buttons For Your Inspiration
• “Add to Cart” Button Showcase
• 107 Add to Cart Buttons of the Top Online Retailers

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.

If you're not monitoring your site's uptime, I use Host Tracker, which monitors up to two URLs for free.

Fortunately, for anyone wanting to learn more about what services would best meet their needs, User Effect has put together a great guide to low cost usability tools. Well worth checking out.

Optimal Workshop is offering to send free, "Jacob Nielsen approved" usability buttons to anywhere in the world.

What better way to enhance the geek cred of that usability specialist in your life? I especially like the "What Would Jacob Do?" button.

Get yours by filling out this order form before they run out.

TechCrunch home page as viewed in Notable

TechCrunch is the most recent recipient of a home page critique by Zurb, using Notable, their visual feedback tool for design teams.

Zurb have also reviewed the home page designs of other popular sites, such as Twitter and CNN.

While some of the feedback about the TechCrunch design feels somewhat subjective (view TechCrunch's own post on the subject), I do agree with their feedback on the footer, that a different design would likely increase engagement.

In fact I posted my own redesign of the TechCrunch footer a while back. It will be interesting to see if something like this ever gets adopted.

Notable itself looks like it might be a useful tool if it is intuitive for non-technical people to use.

I know it is aimed at design teams, but I would find it really helpful for gathering feedback from other stakeholders (e.g. marketing) who are not always the best at giving their feedback in a clear and detailed manner.

I do like the options Notable provides to review code and copy as well as the visual design of the page. That's something you don't see often. The history/tracking features of the tool look handy too. Fine, sign me up for the free version.

Simply leave a comment on this post as to why you'd like the business cards. The winner will be drawn at random from the comments and notified by email (so use a real email address).

The deadline is 11:59pm CST Tuesday, 24 November.

UPDATE: Congratulations to Anita P who is the randomly chosen winner!

Well, this year I've come up with a few more, mostly as a reminder to me for the next site that I'll be running.

If you're going to show the impact you've made on your organization's web sites, you'll need a point of comparison to start from.

You want to be able to show how things were before you started making improvements. So take screenshots of your site, as many as you can. Also take screens of how your site ranks in search engines for branded and non-branded keywords.

If you're a coder, take screenshots of your site's source code. In six months time you can show how much cleaner you've made it. Take screens of how well your pages validate, how accessible they are, etc. Run a page load speed test and take screens of the results.

Run some quick 'guerrilla' usability tests of your site with friends and family or other employees. Video the results. Not only will this help to establish a baseline of usability for your site, but it will help you to become more familiar with it and identify some usability-related quick wins.

Set up some goals and conversion funnels in your analytics tool — easy to do if you're using Google Analytics. Make sure your website up-time is being monitored by using a tool such as Montastic.

Start tracking how your site ranks on search engines. Set up your site in Digital Point's free search engine keyword rank tracking tool so that you can see how your site is performing over time.

Establish yourself as someone who gets things done and start making an impact by getting some easy fixes under your belt.

Set up a quick A/B test on a popular page (not necessarily your home page; find one that's easier to make changes to) and share the results internally. Stakeholders love data-driven decision making.

Some highly-trafficked web pages are all too often viewed from a purely functional standpoint. Try adding a promotional area to your account log in page or site map. Or how about adding some calls-to-action on your newsletter sign up confirmation page?

How useful is your footer? Does it contain links to your social media URLs and other important destinations?

Review the automated emails that are sent out when someone signs up for an account, forgets their password, etc. Can they be made more useful and/or user-friendly? Chances are they haven't been looked at in a while and could do with an update.

You need to become intimately familiar with all aspects of your site as soon as possible.

Click through most, if not all, the pages on your site(s). Become familiar with what's out there and any navigational and IA issues. Sign up for your site's email newsletter using an account from each of the main email providers.

Speak with team members and stakeholders to learn the history of your web site and the reasons for certain design decisions.

Review the most popular landing pages on your site, especially the ones with the highest bounce rate. Are there any obvious quick fixes that can be made?

Read through the content on these pages — chances are there are readability improvements to be had, if not grammatical and typographical errors to be fixed.

The more organized and structured you can be from the get-go, the better.

Set up a general web team email address and use this for creating accounts with any online tools and services. Start encouraging internal employees to use this address for web requests and inquiries. Add it to your email signature.

Start keeping a record of everything that you do. This makes it much easier at annual review time. A good way to ensure you do this is to send a weekly update of your accomplishments for that week and goals for the next to your supervisor. They'll love this.

It's fascinating to see the results of this sort of A/B testing, especially when the results can be so dramatic.

Most of the time when you're running a website you're focused on the larger things — adding new content and features, increasing usability, improving page speed, etc. So little time is spent on the details, such as how a link should be written.

However, it's clear that this is an area where you can receive the most return on your time invested. Setting up a test using Google's Website Optimizer or just adding some campaign tracking tags to the link URL is quite easy to do with a little practice.

One particular bone of contention for me has always been promos or ads where the call-to-action (CTA) link reads "Learn more" or "Read more." It's so weak; almost anything would be better than this.

So much time is typically spent making the banner look visually appealing compared with the content that is driving people to click through.

This issue of weak CTAs often arises for two reasons:

1. The content author doesn't really understand about writing for the web and how it is an interactive medium requiring strong, direct calls-to-action to be successful.
2. The content is not seen by the author in context. It is written and approved in MS Word and then handed off to be added to the site. There's no review of the content in-place where the author can see how well it works within the constraints of how it is being presented.

One solution to this is to write a web style guide that specifically explains how content should be optimized for web presentation (headings, links, lists, etc).

It's not hard to do and has the added advantage of creating a common understanding of how content — which can often be so subjective — should be written for the web within an organization.

[via Gerry McGovern]

A few months back we launched a teaser website to kick-off marketing for the game.

Old Mytheon teaser website (click to view larger)

It certainly helped to get the buzz going, but it was never planned to have a long lifespan. And so now it's been replaced by a full-featured marketing and community site, powered by Drupal.

New Mytheon website (click to view larger)

As project lead, my responsibilities included strategy, IA, wireframes, art direction, writing content, you name it. At least the project management side of things was made a little easier thanks to Basecamp. It really was an invaluable tool.

Initially, I tried out a number of site layouts, especially for the home page. However, after not really finding anything that was especially compelling, I decided to go with a traditional layout that players of MMOGs would be familiar with.

Instead, because the game is so full of lore and mythology, I opted to focus more on the content than just the visuals. In Mytheon players take part in a war between mankind and the gods. It draws upon various mythologies, starting with Ancient Greece, which makes it a gold mine from a content perspective.

Although, with hundreds of Power Stones (many more to come) for players to use in the game, each of which we intended to have its own page of background and description, there were times where I was concerned that we were biting off very much more than we could chew.

The mythological setting is also why we decided to use Poseidon as our signature character, as he is one of the more recognizable Greek gods.

Because of the great visuals in the game, we also used lots of screenshots for banners and spot art. Many a late night was spent taking those, although it has been interesting to watch the game progress and become increasingly polished with each build.

Another important component of an online game website is the forums.

Mytheon forums (click to view larger)

I've always been really happy with how our forums turned out. Working with forum software is never the easiest, and I was pleased that we were able to give ours a pretty custom look.

The design for ours is based on the teaser site, but I think it still it ties in pretty well with the new site. It will probably be a candidate for a visual refresh in the months to come though.

You can see more examples of great forum design in my forums showcase.

Here's a comparison of the old versus the new (click on an image to view a larger version).

Old Navy: then

Old Navy: now

Shopping.com: then

Shopping.com: now

Adobe: then

Adobe: now

Weather Channel: then

Weather Channel: now

REI: then

REI: now

Amazon: then

Amazon: now

Apple: then

Apple: now

Google: then

Google: now

Netflix: then

Netflix: now

Expedia: then

Expedia: now

Walmart: then

Walmart: now

Pogo: then

Pogo: now

All Recipes: then

All Recipes: now

Bank of America: then

Bank of America: now (it hasn't changed!)

Buy.com: then

Buy.com: now

Like many sites, we use the reCAPTCHA service, although we have customized our implementation to make it fit better with the design of the site.

CAPTCHA on Warrior Epic signup form

I haven't done any A/B testing to see how the CAPTCHA is affecting our signup form conversion rate (it's a little tricky to set up in Drupal). However, I am able to see to what extent visitors to the page are having difficulty with the CAPTCHA by looking at how often they reload it, request an audio version, or click for help.

Here are the stats. Over a recent one month period:

• Reload the CAPTCHA and get a new image = about 9% of pageviews.
• Listen to the audio version of the CAPTCHA = approx. 2% of pageviews.
• Get help with the CAPTCHA = slightly less than 1% of pageviews.

Of course, the numbers are approximate as someone filling out the form may have reloaded the CAPTCHA multiple times and then listened to the audio version. However, with the large sample size that we have, it's fairly safe to assume that most people who had trouble with the CAPTCHA interacted with it once or twice at most.

I can live with the numbers for requesting the audio version and clicking for help. However, nearly one in ten people filling out our signup form had difficulty with the CAPTCHA and had to reload the image.

That seems high to me and worth investigating. Clearly, some people are having difficulty reading it which could be affecting our account creation rates.

Digging further into the analytics I saw that 40% of the CAPTCHA reloads were made by visitors from Turkey (we are actively marketing the game in this country), followed by the US at 22%, and then Germany at 7%.

From this I can conclude that visitors who are using the Turkish version of the signup form are having trouble with the English language CAPTCHA. Which is not all that surprising, really.

So, what to do? One option would be to use a non-text-based CAPTCHA — such as Microsoft's ASIRRA project — for the Turkish signup form. Another might be to use a question or calculation (what is 3 + 5?) for these users.

My wife, who is the main Mint user in our household has been struggling with it ever since.

One of the main issues is that the redesign of the budgeting page (for some reason they call it 'Planning' which makes no sense to me) is now much longer. Consequently, it now requires much more scrolling up and down the page in order to get an complete picture of your current budget status.

A comment in the support forums echoes this view:

The budget section is nice but takes up too much space - make this smaller so that it is more usable and concise - the old view was much better.

Sample from the Mint budgeting page: before

However, with a few CSS tweaks, I was able to reduce the length of our budget screen by 20%. In the example below, you can see that 6 budget items are now visible in the same space that could previously only fit 5.

Sample from the Mint budgeting page: after

I also took the opportunity to make some of the very light gray text darker in order to make it easier to read. Mint is a great tool for managing your finances, but I do feel that they have a way to go on its usability in certain areas.

Rotating text to the rescue! Following Jonathan Snook's article it was easy to implement the few lines of CSS necessary to make this adjustment.

Getting it to look right in IE7 and IE8 was a different matter. In the end I used the *:first-child+html hack for IE7 and the 9 hack for IE 8.

I realize that I should replace these hacks with conditional comments (should I?), but for now they'll suffice. Also, with a little more research it looks like this IE7/8 hack would have been more elegant.