Smiley Cat: Christian Watson's Web Design Blog

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.

Forum Design Showcase

Wed, 27 May 2009 08:11:20 -0600

Compared with the current state of design across many areas of the web (look at all the great themes being developed for WordPress, for instance), the state of forum design leaves much to be desired.

Although forums are a critical part of many web sites from the perspective of driving traffic and retaining visitors, from a design standpoint they often feel like a tacked on afterthought.

Looking For Group forum shows a high level of design

The vast majority of forum designs are generic and ugly. I mean really ugly. And blue — if you want to make a forum design look in any way original, do yourself a favor and don't use blue as the main color. Or green.

That being said, if you look really really hard there are some bright spots out there. I have gathered these together in a forum design gallery over at my Elements of Design site.

I'm sure these can't be the only forum designs worth celebrating and sharing. Please let me know of any others in the comments.

Typography-Based Layout Contest

Fri, 22 May 2009 07:58:30 -0600

For any designers with a bit of spare time on their hands, Smashing Magazine is running a contest for the best typographic web page layouts.

The deadline's a little tight, but the prizes are pretty nifty. Oh, and the post about it includes a gallery of web sites that feature excellent typography so it's a handy resource too.

The Value of Paper Prototyping

Sun, 10 May 2009 21:03:33 -0600

When I was working on the wireframe stage of the NCsoft West web site redesign I began by sketching the main templates out on paper.

I find the whole process of paper prototyping to be extremely valuable. Here's a photo of some early prototypes attached to my bulletin board (sorry for the quality — iPhone):

Paper prototypes for the NCsoft West redesign

Rather than sketch the whole page on a sheet of paper, I prefer to draw out the various components of the page, cut them out, and Blu-Tack them to the paper. This makes it easy to change different elements, switch them around, etc, without having to redraw the whole page each time.

Sketching out and adding individual components in this way enabled me to quickly come up with a general template layout. I then went back to particular features about which I had more concrete ideas and drew them out in more detail.

I would revise some of these components multiple times as I tried out different layouts and features.

This process also enabled me to quickly and easily try out different page layouts in order to spot potential issues, whether they were related to usability or to the goals of the page.

Plus, it made the work feel like a craft project! Unlike Visio, it's great fun to do, and when you spend the majority of your day staring at a computer screen it's nice to do something more tactile. However, I did garner a number of odd looks from passers-by who were wondering what on earth I was up to.

Creating paper prototypes in this fashion also helped the wireframe review process. I could stand in front of the cork board with my web designer while we discussed a template and unlike on a computer screen, no matter how long the page was we could see it all.

If we had new ideas or changes, it took no time to replace the areas in question with new ones.

Another really helpful feature of paper prototypes — as long as you have them visibly attached to your wall — is that you get to look at them every day. I found this to be invaluable for letting the wireframe 'sink in' so that I could view it and review it multiple times a day and make sure that I was happy with it.

This level of visibility also enabled my team to have many opportunities to view the wireframes, understand them, and provide feedback. This would never have happened to the same degree with electronic wireframes.

Paper prototypes are a terrific, low-cost way to try out design ideas, share (and test) them with your colleagues, and to spend time with your design before layout and features are committed. If you're not using paper prototyping for your early design work I highly recommend giving it a try.

LinkedIn Recommendation Generator

Mon, 04 May 2009 20:59:52 -0600

Given how common requests for LinkedIn recommendations are and how devalued their currency has become, I've thought for a while that it would be helpful to have a tool to generate these automatically.

I guess that's another project to cross off my to-do list because I just came across the LinkedIn endorsement generator.

Here's how I'd use it to recommend myself:

Christian did an exceptional job on the recent project. Christian is a detail oriented, innovative and careful perfectionist - his ideas, skills, creativity and understanding of change requests made the project a dream. He has an extensive knowledge, and his open-minded approach could not be overestimated. He denotes a strong experience in areas such as project management and software architecture.

That's better than I could do! The fact that the grammar is not perfect makes the business-speak even better.

Exclude Dynamic IP Addresses in Google Analytics

Wed, 22 Apr 2009 13:08:52 -0600

It's good practice not to include internal traffic in your analytics reporting. The standard way to exclude traffic in Google Analytics is through IP address-based exclude filters.

This works fine for static IP address ranges, but what about if you want to exclude a computer whose IP address range changes (e.g. someone who's working from home)?

The default method that Google provides is based on setting up a special page on your domain.

I've always found this to be kind of a hassle and depending on your setup, it also might be difficult to implement.

Fortunately, on the Analytics Talk blog they've come up with another way to do this which replaces the special web page with a snippet of code that you paste into your address bar.

Very handy!

New Year; New Job

Sun, 19 Apr 2009 21:14:14 -0600

In my previous post about the NCsoft West site redesign I mentioned that was my last project with NCsoft.

That's because I've moved on to take on the role of running the web team for another MMO publisher, True Games Interactive.

Far from being a large multinational gaming company like NCsoft, True Games is very much a start-up with about 20 or so people and our first game — Warrior Epic, an online action RPG — launching soon.

Warrior Epic web site

Also unlike NCsoft's subscription-based games, True Games has a free-to-play, micro-transaction based business model.

So, yes, you'll be able to download and play Warrior Epic for free, and if you're really into it, customize your characters and your warrior hall (castle) through micro-payments.

When I joined True Games, for various reasons I found myself leading a team of one (myself) and so I've spent my first month with the company getting up-to-speed, putting some web best practices into place, bringing in some outside help, and hiring a team.

Fortunately, I've been able to triple the size of my team, with the addition of two key hires: Matt Vance and Steve Svoboda. Thanks guys, for lightening the load.

I'm still looking for a web designer with killer design skillz, so if you've got the chops and you're interested, drop me a line.

One of the challenges of my new role is that I have no experience with Drupal, our CMS. I'm familiar with it and know how widely it is used and how powerful it is.

However, having grown up on Movable Type and Wordpress, the learning curve has been quite steep. It's been pretty hard being responsible for a CMS that you don't actually know how to use.

Still, it's always good to learn new things, right?

Reflections on a Web Site Redesign

Sun, 12 Apr 2009 22:21:19 -0600

When I joined NCsoft a little over a year ago, one of the core things I wanted to improve was the main US web site. Well, it took somewhat longer than I had planned, but recently the redesigned site went live.

New home page

Old home page

When you're embarking on a site redesign, one of the key questions to ask is whether you can take it on in-house.

Most corporate web teams are under-staffed and over-worked, and while they would relish the opportunity to work on a critical site redesign, it's often just not practical to take it on internally.

I had those same doubts, but once I started seeing initial comps from our web designer, Clark Wimberly, I knew we had something that was going to work.

Even so, the design process took us far longer than we had allowed for (even with a good deal of padding added to the schedule). This left us with considerably less time to build the site than we needed, including an unforeseen requirement to translate it into three other languages.

Another element which caused a considerable challenge was the fact that we were dissolving our old PlayNC gaming brand and moving back to NCsoft.

This involved a domain name change and meant that we couldn't roll the redesign out in phases due to the fact that we needed to update the branding throughout the site.

Instead, we did a 'big bang' redesign, which included our online store as well as our billing and account management system. And, gave me many a sleepless night.

I believe that the launch of a web site redesign is just the beginning of the redesign process. The initial site is typically full of compromises, things that you never got round to implementing, and issues that you'll fix after launch.

Our site is no exception. I'd say we got to about 80% in terms of what I'd hoped to achieve with the new site.

However, once your site is actually live it's so much easier to add those new features, fix those outstanding bugs and rectify those weird design choices that came about through the need to compromise in order to achieve a consensus.

All-in-all, I'm extremely happy with the way the site turned out. It's so easy to get so fixated on the issues and the things that didn't work out quite as planned that you start not seeing the bigger picture.

Now that it's launched and I'm no longer with NCsoft (see future post) I can sit back and say yes, that thing is badass. Thanks everyone for all your hard work on it.

MMO Free Trial Landing Page Design Review

Mon, 30 Mar 2009 22:33:15 -0600

A free trial has become something of a pre-requisite for a subscription-based MMORPG (massively multiplayer online role playing game). In fact, of the major MMOs only Age of Conan does not offer a free trial.

With so much competition for players to choose from it is critical that MMO free trial landing pages are effective at communicating their value proposition and answering potential questions in order to convert visitors into trial accounts.

Let's look a little further into the key elements of a successful MMO free trial landing page. (Scroll down the page for free trial page screens.)

Clear, focused design

Good landing pages are focused on one thing: converting traffic. To that end, the best ones are usually designed as a self-contained web site and are not presented within the confines of the main game web site.

This enables the design of the page to be completely focused on the task of converting traffic. Guild Wars and the World of Warcraft landing pages are good examples of this concept in action.

Warhammer Online and Star Wars Galaxies fare less well because the landing pages have to compete with the 'noise' of the rest of the site. Look at all those links for potential customers to click rather than the one that converts the visitor.

Other pages fail due to too much reliance on large amounts of text (EverQuest II) and competing calls-to-action (EverQuest).

Compelling message

The better landing pages have a strong headline which sums up the appeal of the game and doubles as a call-to-action. City of Heroes nails it with:

Become a Super Powered Hero

Although poorly presented, Warhammer Online's "Experience the thrill of realm vs realm" powerfully sums up one of the key selling points of the game.

War of Warcraft makes the most of their main strongpoint, their huge player-base:

Over 10 Million Online!

Eve Online gets part of the way there with:

A massively multiplayer game set 21,000 years in the future

How about something more dynamic like:

21,000 years in the future, rival corporations fight for control of the galaxy

Star Wars Galaxies fails completely with a long winded:

Join Star Wars Galaxies today! Try Star Wars Galaxies and the Star Wars Galaxies Trading Card Game: Champions of the Force now for free!

In 24 words not one reason has been provided as to why someone should try this game.

EverQuest actually has a compelling selling point for its free trial which it fluffs completely because of poor messaging. Its trial is level-based rather than time-based, meaning that you can enjoy it at your own pace.

However, this important differentiator is only pointed out in the 'small print.' How much more powerful would it be to say something like:

Discover EverQuest at your own pace. Play for free until level 10.

rather than

Introducing a unique start into the classic world of EverQuest.

Strong imagery

A key component of an engaging design is having strong imagery that supports the key messaging and represents the essence of the game. This imagery should ideally be bold and specific — it should represent the game rather than the genre.

Compare the character in the Guild Wars page who is almost reaching out through the screen at you to the flat and generic character in Lord of the Rings. Which one makes the bigger impact?

Looking through the examples below, most free trial pages do a poor job in this respect, either minimizing the imagery so that it has little impact or using such standard genre imagery that it undermines the messaging on the page.

Answer key questions

Important questions for any MMO free trial are "How long will it last?" and "Do I have to give you my credit card?"

City of Heroes and Guild Wars deal squarely with the second question by stating that the no credit card is required and that there are 'no obligations.'

Most of the other MMOs either make no mention of this point or place it in the small print.

With regard to the first question, for some reason Guild Wars is the only trial that does not state how long it lasts. Most of the other trials are for 10 days so those that offer a 14-day trial should present it as a selling point compared with their competitors.

Provide access to more information

Although free trial landing pages should feature a strong, focused design, it is useful to provide access to more information in case a visitor needs a little more selling before taking the next step.

Typically, this information is in the form of screenshots, videos, and an outline of the key features of the game.

Dungeons and Dragons Online tries to present all this information on the page at once and makes it needlessly cluttered. Eve Online keeps you on the page by presenting additional information in a modal window.

City of Heroes and Guild Wars make additional information available further down the page on-click. However, it may not be apparent to the user that they are still on the free trial page, so an additional 'free trial' button at the bottom of the page would be a helpful addition.

Clear call-to-action

The free trial button itself is an important component of the landing page. The wording that is used may be what causes an undecided visitor to actually take action and click. Therefore, the button label should be a clear call-to-action.

It is better to say something action-oriented like "Start Playing Now!" or "Get Started!" than a more generic "Download Now" or "Create Trial Account." Believe me, there's nothing exciting about downloading large files or creating accounts.

Here's how the free trial pages themselves look:

City of Heroes

Dungeons and Dragons Online

EverQuest

EverQuest II

Eve Online

Guild Wars

Lord of the Rings Online

Star Wars Galaxies

Vanguard

Warhammer Online

Warhammer Online: EU version

World of Warcraft

World of Warcraft: EU version

World of Warcraft: Burning Crusade

World of Warcraft: Wrath of the Lich King

Design in Action: Real World Examples of the Design Process

Tue, 10 Mar 2009 16:16:50 -0600

I always enjoy reading real world examples of the design process in action. It's fascinating to see the thought process and choices made in arriving at a certain design.

I especially like 37 Signals' occasional 'Design Decisions' posts where they talk through the process of redesigning an element of one of their web apps.

Mon, 16 Feb 2009 07:38:52 -0600

Just came across a post on the Google Webmaster Central blog about their support of the new canonical link tag.

This tag is also recognized by Yahoo! and Microsoft.

The canonical link tag tells the search engine what the preferred URL for a page should be. It goes in the and looks like this:

<link rel="canonical" href="http://mysite.com/page.html" />

This is extremely useful for sites that can have multiple versions of a page thanks to variables such as tracking parameters or session IDs. Another benefit is that PageRank is passed to the canonical URL.

To understand more about the implications of this new tag it's worth reading through the comments to the post and in particular Google's response to them.

This definitely sounds like something I should add to my 12 essential web site building blocks list.

[via Website Magazine]