Gamespot has some nerve. I went to read their GTA IV review, only to be shown this:
It goes without saying that GameSpot is a big website, but they obviously have no idea about design or usability. Pop up windows are now universally despised because they interrupt the user experience. They should never be used unless the user is expecting them to appear.
Any content that is going to automatically pop up in a new window when you load a page is not worth reading. It’s as simple as that. Even worse is that you’re not told what you “may” be missing out on. It could be anything, but one thing is for sure; no-one is going to bother to find out.
This is such an elementary error that I almost have pity for GameSpot. Their site isn’t exactly well designed to begin with, but this is a total shambles.
Archives are often something that are left until the last minute and I don’t think anyone really considers how best to create them. Designers often throw together a chronological list of posts and leave it at that. However, I stumbled across a design by Kyle Meyer today that’s a brilliant solution to the archive problem. On his website Astheria, he represents his archive visually, altering the distance between posts to show fluctuations in frequency.
Clever, isn’t it? How is it done? Well all he’s done is dynamically style the list items, altering their top margin according to the difference in dates. I guess that this is done in a custom PHP script he’s written to grab and display his blog content. The rest is just done with CSS.
Co-founder of the Web Standards Project, Jeffrey Zeldman is one of the best known Web development personalities. His landmark book Designing With Web Standards, released in 2003, was updated almost two years ago. I picked up a copy the other day after reading many recommendations, so is it still relevant five years down the line?
Designing With Web Standards, Second Edition is a much larger and more comprehensive book than I anticipated it being, serving as an introduction to a range of topics. It begins by making the case for web standards, showing what’s wrong with (then) current websites and what can be done. It examines why they’re not perfect, but why they’re also the way forward. Zeldman then goes on to explain how websites can be made to comply with web standards.
It’s a book which caters for a wide range of users, from those who have just used the likes of Microsoft Frontpage to seasoned programmers. Zeldman writes in a style that everyone from site owners who are commissioning projects to those implementing them will understand.
Designing With Web Standards‘ main flaw is that it was obviously written for a particular period in Web development and because of this, its age shows. There are plenty of references to browsers like Netscape 4, which no-one uses any more and probably didn’t when this second edition was published.
Zeldman’s book was always going to make itself obsolete if Web standards became widely accepted, and so his appeals to redesign websites are a little futile for anyone picking it up today. This irony merely demonstrates the scale of the Web Standards Project’s achievement though and reinforces its values. Although it may not be need to convince current site owners, for those who are just starting in Web design, this is a superb primer for the technologies, issues and decisions that lie ahead. It may seem a little out of date, but it provides the context in which to appreciate why we use the practices we do today.
Although I began making websites in 2000, I’ve come from using nasty table-based layouts to writing standards-compliant code without really being pushed by anyone to do so. As I’ve grown up and learnt more about programming, I’ve gone from using code generators to writing it all myself. The transition to technologies like CSS hasn’t really come from an awareness of Web standards, but a desire to make things easier for myself. So although I was oblivious to Zeldman’s campaign at the time, Designing With Web Standards is still and interesting read and one that shows just how far the Web has come in a mere five years.
All of the information we create and use is either on your computer or in ‘the cloud’ of servers on the Internet. The choice between these two usage patterns is an interesting one. My email is all online via Gmail (although I access it via a desktop application), but everything else is on my own computer. My feed reader, calendar and task manager are all offline standalone programs. I don’t anticipate moving these into ‘the cloud’ anytime soon, but what about bookmarks?
Over the last few months, I’ve noticed that I’ve stopped adding many bookmarks to my browser. If I see something new, I either subscribe to the site’s RSS feed if I like it or simply remember where it is. I use the bookmarks toolbar in Firefox just below the address bar, but I rarely get to sites via the bookmarks menu option. More commonly, I use my Protopage to get to my most visited sites.
I’m thinking of slimming down my browser bookmarks to just my most commonly used ones, then shipping all the rest over to an online bookmarking system like del.icio.us or ma.gnolia. I’m wary of using a Web-based system though; how quickly will I be able to find links? Will the need to tag everything make it a less attractive prospect? It would be really interesting to see a study or analysis of the usability of different bookmarking methods.
On the new version of Thunderbolt, there are three news feeds in the right column of several pages. We take news from other sites using RSS, then display it for users to read. However, there’s one problem; if you rely on other people to provide a service, then you can’t guarantee that it will always work.
This issue has appeared a couple of times on the site when the feed from GamePolitics.com went down. This caused the RSS parsing script on Thunderbolt to timeout, sending loading times through the roof. So what can we do about it? The solution is to cache (make a copy of) the RSS feed every so often and if we can’t find the original site, we just display the most recent version. You could do this in a couple of ways; cache the feed yourself or let someone else do it.
FeedBurner offers a free feed distribution and publishing service. Once they’ve ‘burnt’ your feed, you point your users to your feed on FeedBurner (who check and update their copy during the day). The main benefit is the bandwidth you save through offloading your RSS to FeedBurner, but what we’re interested in here is the ability to ‘burn’ any feed you like.
So here’s the cunning part; you set up a FeedBurner feed for the site you rely on - GamePolitics.com in this case - and then point your website to it. So if the other website crashes, you’re not affected because FeedBurner will keep running using a copy of the RSS.
Sending other websites’ feeds through FeedBurner first is a bit like sending your email through Gmail to filter spam. It’s free and keeps your site running smoothly no matter what happens to the website you’re taking the feed from.
One thing that surprises me is how few people use RSS feeds to keep updated with news and blogs. Even though it saves users countless time, few seem to know about or understand what it is. Whenever I try to explain RSS, it’s hard to get across what exactly it does in a clear and concise manner. So if it’s difficult to communicate the value of new technology that’s essentially invisible, how do you do it?
Enter Common Craft, a company I found yesterday via Twitter, who they’d produced a video for. They use simple paper drawings to explain concepts like Wikis and social bookmarking in short and clear presentations. Check out their RSS video:
Common Craft then license better versions of these videos to individuals and companies, as well as creating custom ones for clients. It’s a neat way of explaining Web technologies to people and an inspiration for anyone trying to wrestle with a tricky concept.
My games website Thunderbolt has received a visual overhaul today, with a cleaner design and a number of new features.
The eighth version adopts a minimalist style which is designed to detract from article text and images as little as possible. I paid special attention to making the site as legible as possible and I’m really pleased with the result.
Aside from the visual adjustments, the new site also introduces comments for the first time and dispenses with the news. I asked myself what people enjoy doing the most and writing news was obviously that. Now the site is firmly focused on reviews, features and opinion, hopefully offering a credible alternative to the likes of GameSpot and IGN.
As any designer knows, ‘whitespace’ or ‘negative space’ can make websites more legible and easier to digest. Whenever I layout a page for print or the Web, I actively monitor how much negative space there is around, then use it to balance out text and images. However, in the world of videogames websites, this and many other best practices are often discarded in the relentless pursuit of squeezing as much content and advertising space into view as possible. This, then, is a guide to how not to design a videogames website, using a number of the most popular sites on the Web.
1. Anything you can see is fair game
GameSpot is one the worst designed videogames websites and a fine place to begin. The entire background is given over to advertisers, with the main content pushed into a narrow column, leaving no negative space whatsoever. The typography and colours within this main section may be consistent, but the overall impression given by the overpowering array of colour is a negative one. Any focal point that the page had quickly disintegrates in the mess that unfolds and the user is left to navigate their way through the treacherous sea of advertisements in search of content.
2. Put content on multiple pages
I’m not sure who came up with this dastardly trick first, but I’m pretty sure that it was an advertising or marketing committee. The theory goes something like this, “if we make people load more pages, they’ll see more ads, click them and make us a ton of money!” How anyone could think that this is a good thing for the user is beyond me. Unless the article is ridiculously long, it should stay on one page. It takes long enough to load a single GameSpot page, let alone two or three.
3. Make the actual article difficult to read
Typography on the Web is just as important as it is in print. Yet some sites like IGN don’t seem to understand this. Their articles seem to use the default line-height and a font size which is too small, making them difficult to read. Most of the other large videogames sites get this right, leaving IGN sticking out like a sore thumb.
4. Take a commercial break
If the amount of ads on the larger videogames sites like 1UP wasn’t enough already, some of them have the cheek to halt your progress through the site to show you an huge commercial. Users don’t pay attention to this sort of brute force advertising; all they want to do is find the ’skip to content’ button as quickly as possible.
5. Put anything you like on the site navigation
IGN’s site navigation is comical at best. Not only is it split up, but it extends down the page for what seems like forever. The most relevant options may be towards the top, but that still doesn’t excuse the excessive number of those available. Having too many navigation links like this slows the user down, prolonging the process of finding what they’re looking for.
Follow the leader
I’m not saying that every large videogames website should ignore its commercial responsibilities in favour of beautiful aesthetics, but it wouldn’t hurt to use some common sense in their designs. It can be done; Eurogamer has plenty of ads and uses the multiple page trick, but its navigation is concise, the typography is sound and doesn’t take breaks like 1UP. In fact, it’s the only moderately well designed large site out there.
There are hundreds of videogames websites, but many of them are much smaller that the ones I’ve mentioned so far. The trouble is that the designers of these second and third tier sites often replicate the layout and practices of GameSpot et al, resulting in a plethora of badly designed sites. Such poverty of design has become so commonplace that it’s now accepted as normal, and that’s a real shame.
I’ve written about Threadless on here before and I think they’re a perfect example of how to do business online and a brand worth evangelising. They never seem to be resting and are constantly improving the service they offer. The latest wave of Threadless updates sees a website redesign, improved shirt quality and new customised packaging.
The site has always allowed you to view clothing by size, type and line, but now you can do all three in one screen. Using a few well designed drop-down menus, you can mix and match criteria to view all the medium hoodies, for instance. Rolling over items also shows their design immediately too, further improving usability.
Threadless has also started to print its designs on its own brand shirts instead of just getting American Apparel or Fruit of the Loom to do it for them. I recently got a shirt through the post from them and the increase in quality is definitely noticeable. The material seems much thicker, feels nicer to touch and the actual print appears to be more vivid. The shirt quality was never bad, but now it’s even better.
They’ve also started using their own custom designed packaging, which made me smile the first time I saw it. As you can see below, it uses the same style and wit that the site embodies, adding a unique value to the product.
These updates are in completely different parts of their operation, but all three show Threadless’ commitment to improving their service.
I discovered online clothing retailer Threadless in late 2006 and since then, it’s the only place that I’ve bought my T-shirts from. Since placing my first order on December 29, 2006, I’ve spent a total of $341.80 there. What can we learn from its success and why do I keep going back there? Here are ten reasons:
Threadless is all about community. Artists submit designs, which are then rated by other site members over a week. The best entries are picked by Threadless staff and are turned into actual clothing. Not only does getting your shirt printed give you money, but kudos in the community. Here’s the key factor though; because customers choose the best shirts before they’re on sale, the designs that get through are almost certain to sell out. It’s a fantastically self-referential concept and one that keeps the quality extremely high. Getting your customers to do your quality assurance for you is pure genius.
High incentives attract talented artists. If your design gets selected for print, you get $2,000 in cash, $500 Threadless Gift Certificate (can be redeemed for $200 cash), $500 in cash each time your design is reprinted, up to $10,000 more if you win a “Bestee” in the Threadless Awards and Alumni Club membership.
RSS feeds are used very effectively to update community members and customers. The weekly feed (right) is kept extremely simple, allowing you to browse through without actually visiting the site.
Easily anticipated updates keep people coming back every week. New designs come out every Monday and because of this strict schedule, Threadless members begin to associate that day with the site. Even if people aren’t on there often they’re probably going to return on a Monday.
Affordability is a huge draw for me. Even though my shirts are flown all the way across the Atlantic, they’re still the same price or cheaper than going into a shop here and buying one. If you wanted to get an equivalent product from a normal shop in the UK, you’d expect to pay at least double what Threadless offer them for.
Designs are of a very high quality and there are plenty of them. If you can’t find something you like on Threadless, then you’re really not trying hard enough. When I wear a Threadless shirt, a lot of the time people will compliment me on it and ask where I got it. ‘High Street’ retailers don’t stock anything nearly as humourous or artistically unique as the Threadless shirts.
Limiting production adds a huge amount of value to shirts. I don’t want to look like everyone else or buy the same clothes that Average Joe has. When you get a Threadless shirt, you know that you’re one of a few thousand owners around the world and that you’re highly unlikely to ever see it on anyone else.
Excellent web design makes Threadless extremely easy to use. Not only does the site look fantastic, but it includes features which make buying shirts a breeze. For instance, you can view the catalogue by size, so you only see items that are available and that will fit you.
Street Team points encourage loyalty and community. If you submit a picture of yourself wearing a shirt, you get $1.50 credit and if you refer a friend who then buys a shirt then you get $3.00. The more shirts you buy, the more points you accumulate. I think I’ve even bought a shirt which only cost me the shipping because I had so many points.
Shipping internationally greatly increases Threadless’ potential customer base. The cost of postage is a little expensive, but I’ve never had a shirt go missing and they’ve always turned up in good condition.
So there you go, Threadless dissected for your pleasure. It’s one of the few retailers I’ve seen take full advantage of the power of community and their success is something we can all learn from.
Co-founder of the 
Zeldman’s book was always going to make itself obsolete if Web standards became widely accepted, and so his appeals to redesign websites are a little futile for anyone picking it up today. This irony merely demonstrates the scale of the Web Standards Project’s achievement though and reinforces its values. Although it may not be need to convince current site owners, for those who are just starting in Web design, this is a superb primer for the technologies, issues and decisions that lie ahead. It may seem a little out of date, but it provides the context in which to appreciate why we use the practices we do today.
RSS feeds are used very effectively to update community members and customers. The weekly feed (right) is kept extremely simple, allowing you to browse through without actually visiting the site.
Excellent web design makes Threadless extremely easy to use. Not only does the site look fantastic, but it includes features which make buying shirts a breeze. For instance, you can view the catalogue by size, so you only see items that are available and that will fit you.