Smiley Cat: Christian Watson's Web Design Blog

10 Key Tasks For Your Next Web Site

Fri, 06 Nov 2009 10:21:45 -0600

Last year I wrote about 12 essential web site building blocks — things that you should check when you take on responsibility for a new web site, or even just launch one.

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.

Establish a Baseline

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.

1. Capture Everything

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.

2. Usability Testing

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.

3. Site Monitoring

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.

Quick Wins

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

4. A/B Testing

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.

5. Identify Underutilized Pages

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?

6. Review Automated Emails

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.

Familiarize Yourself

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

7. Learn Your Site

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.

8. Know Your Popular Pages

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.

Get Organized

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

9. Team Email Address

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.

10. Record Accomplishments

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.

The Importance of Links as Calls to Action

Tue, 03 Nov 2009 13:18:04 -0600

I enjoyed this conversion rate analysis by Dustin Curtis on the link he places at the bottom of his articles to his Twitter account.

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:

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

Mytheon Website Launch

Mon, 02 Nov 2009 08:14:40 -0600

If it's been a little quiet around here lately, it's because I've been busy with, among other things, launching a new website for Mytheon, the next game from True Games Interactive.

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.

Website Navigation Then and Now

Tue, 29 Sep 2009 22:07:59 -0600

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

Old Navy

Old Navy: then

Old Navy: now

Shopping.com

Shopping.com: then

Shopping.com: now

Adobe

Adobe: then

Adobe: now

Weather Channel

Weather Channel: then

Weather Channel: now

REI

REI: then

REI: now

Amazon

Amazon: then

Amazon: now

Apple

Apple: then

Apple: now

Google

Google: then

Google: now

Netflix

Netflix: then

Netflix: now

Expedia

Expedia: then

Expedia: now

Walmart

Walmart: then

Walmart: now

Pogo

Pogo: then

Pogo: now

All Recipes

All Recipes: then

All Recipes: now

Bank of America

Bank of America: then

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

Buy.com

Buy.com: then

Buy.com: now

Redesigning the Mint.com Bugeting Screen

Sat, 12 Sep 2009 15:46:03 -0600

Not too long ago, Mint, a popular online service for managing your finances, redesigned a great feature which enables you to set a monthly budget and track your progress against it.

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 with CSS

Wed, 09 Sep 2009 20:18:56 -0600

If you look up you'll notice I made a small update to the way dates are presented in my headings. It's not a big change, but I wanted to include the year without increasing the height of the date stamp.

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.

10 Web Form Design Guidelines Based on Eyetracking

Wed, 26 Aug 2009 20:04:19 -0600

cxpartners have produced a useful set of form design guidelines based on an eyetracking study they did on the signup forms of 4 major websites: GMail, Hotmail, Yahoo! Mail, and eBay.

It's worth noting that the study only used 8 participants, so its findings may not stand up in a court of law.

The guidelines:

Use a simple vertical layout with labels above the input fields.
If vertically aligned labels are not possible, make them bold and left-aligned.
If you put more than one field on a row (e.g. first and last name) make them look like a single piece of information.
Emphasize section headings (via color or shading) if you want people to read them.
Only ask for required information. Identify optional fields rather than required fields (don't use asterisks).
Use a single input field for numbers and postal codes, and allow input in various forms.
Avoid displaying unnecessary information and make sure important information stands out.
Real time feedback may be distracting — good implementation is key.
Place instructions to the side of the field.
For multi-page forms tell users how many steps remain before completion.

I was a little surprised by the second part of #5 as I've been conditioned to use asterisks to indicate required fields on forms that have both required and optional fields.

If it's better to only identify optional fields, this raises the question of how best to do so for fields other than input fields — such as checkboxes and radio buttons — without causing information clutter.

[via GUUUI]

Firefox Add-ons for Designers

Sat, 22 Aug 2009 16:22:56 -0600

Enjoyed this post from SitePoint with a useful collection of Firefox add-ons geared towards web designers. I use a number of these already, but there are some new ones that I'll be checking out.

Colorsuckr in particular seems pretty clever and useful.

Two Schools of Thought to 404 Error Page Designs

Sat, 22 Aug 2009 09:16:57 -0600

There appear to be two schools of thought when it comes to 404 error page design.

The first, as exemplified by Apple and BMI, present the 404 page as a standard page within the regular site template.

Apple 404 page

The second — see Twitter for an example — present the 404 page completely independently from the design of the rest of the site. As such, it tends to look more like a website maintenance page.

Twitter 404 page

I've always appreciated the creativity that can go into the design of the 'independent' style of 404 pages and I would love to use my sites' 404 pages as a sort of creative 'easter egg' for someone who has the misfortune to arrive on them.

However, I've held back from doing so because I feel that error pages which fit within the overall site design are more user-friendly. They make it easier for the visitor to correct their course and navigate, if not straight to the right page, at least to the right section of the website.

But that's just one person's opinion, and I'm sure there is good reason why so many designers take the other approach. I've just never seen it explained.

So, is one approach better than the other or does it even not matter? I'd be interested to hear people's thoughts.

Mega Drop-Down Menu Design Showcase

Sat, 08 Aug 2009 21:45:25 -0600

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.

EA mega drop-down menu

As usual, if you have more examples to share, please send them my way or let me know in the comments.

Landing Page Optimization with A/B Testing

Sat, 18 Jul 2009 17:09:57 -0600

Like many online games, Warrior Epic has a landing page to which we direct traffic from our web marketing campaigns. Luckily for us, our first landing page actually turned out to have a surprisingly good conversion rate.

Using Google's website optimizer, we recently tried out a couple of new landing pages to see if we could improve upon it.

I've been pretty happy with our initial landing page. Although it's quite long, it showcases the game well and I feel does a good job of selling it to a new visitor.

Warrior Epic landing page #1 (click to view larger)

Like I said, we were getting conversion rates above what is usual for banner traffic so I didn't feel a strong need to do a lot of tweaking.

However, marketing wanted to try out some new concepts and so we tested out version 2 which was a variation of the original landing page.

Warrior Epic landing page #2 (click to view larger)

The goal of the second landing page was to brighten the page up a little, move more content up above the fold, and remove any non-conversion-related links from the main content area.

I thought we achieved this pretty well; however, the landing page performed very slightly worse than the original.

The third landing page featured a completely new design.

Warrior Epic landing page #3 (click to view larger)

I'll be honest; I wasn't a fan of this design at all. The white background felt too stark to me and it removed the content which highlighted the key features of the game.

The great thing about using an A/B testing tool to optimize your designs is that you get a definitive answer as to which works better. The only thing you have to invest is the time spent developing the variations.

It took less than a day of A/B testing against the original design to show that this new version dramatically outperformed it. It's a good job I didn't listen to myself.

We plan to run a few more variants of the winning design to see if changing the call-to-action wording has much of an effect.

We also have a version in the works which has the account sign up form embedded in it. I'm really keen to see how that performs, as I simply have no idea.

Contrasting Design Conventions

Sat, 11 Jul 2009 16:17:05 -0600

Working on a website recently that incorporates a music soundtrack I noticed that audio and video controls function in opposite ways.

The video play control shows you what will happen if you click on the button. So, if a video is playing, the pause button will show. And if the video is paused or stopped, the play button displays.

However, with audio the reverse is true. If a website uses music or sound effects the on/off control will show you whether sound is currently on or off, not what will happen if you click it.

It must be because I'm so familiar with how these controls function that this intuitively feels right to me. However, on reflection, it's odd that they've come to work so differently.

The more I think about it the more it seems strange that the video play button displays the opposite of what it is doing. I can't think of another instance in which a button works in the same way.

Video Game Web Site Showcase: 75+ Examples of Game Site Design

Tue, 16 Jun 2009 19:24:52 -0600

For such a large industry, not much is written about video game web site design.

The only article of note in my recent memory is one by Smashing Magazine which offered some useful insights into good and bad game web site design practices.

Working for an online game publisher, this is an area of interest to me and I try to stay on top of what's happening in this part of the web design industry, although usually within the MMORPG sub-genre.

To that end, I have collected together over 75 examples of creative video game web site design.

Not surprisingly, if you click through to many of these sites from the showcase you should be prepared to encounter Flash pre-loaders, age gates, country selectors, sound effects, and auto-playing music.

However, this is far from being always the case and there is actually a surprising variety in the presentation of these sites. Oh, and lots of good design — take The Beatles Rock Band as a 'for instance.'

The Beatles Rock Band

So, enjoy the video game web site showcase and let me know if I've missed off your favorite game.

Oh, and my favorite gaming site? It's not original but it's still got to be Diablo 3. The art direction is incredible.

10 Quick and Dirty Ways to Lay Out a List of Links

Thu, 04 Jun 2009 08:15:56 -0600

The best way to lay out a list of links — say, like those you would find in a footer — is typically to code them as an HTML list and use CSS for the presentation.

However, sometimes this is neither convenient nor practical (can you say, "legacy CMS"?).

In which case, here are some variations on how you can separate a list of links, starting with the old standby, the vertical bar or pipe.

1. Vertical bar

2. Broken vertical bar

3. Medium list dot

4. Big list dot

5. Colon

6. En-dash

7. Forward slash

8. Generic currency symbol

9. Lozenge

10. Diamond

Get Ready to Claim Your Facebook Vanity URL

Sun, 31 May 2009 20:54:39 -0600

TechCrunch is reporting that Facebook users will soon be able to pick their own vanity URLs, which is pretty big news if you're a business using the site for marketing or community-related purposes.

Another way to create easy-to-remember Facebook URLs is to create a subdomain on your own web and redirect it to your Facebook page.

For example, for Warrior Epic, our recently launched online action RPG, we created:

Even if you do get the vanity URL of your choice in the upcoming Facebook landrush, it may not be a bad idea to create your own social networking subdomains anyway. It keeps these URLs simple, consistent, and memorable.