The Metropolitan Police have launched a website which uses Google Maps to display London crime figures. It provides a clear visual representation of complex data and also adjusts depending on how far you’ve zoomed in. It’s a great example of using a clean and simple interface to make otherwise dull information accessible. The related information in the bottom right corner is an inspired touch too, inviting people to learn more about crime in their area and what they can do about it.
Published in Websites on 20th August 2008. No comments.
Designing forms for the web is a tricky business. Left-aligned labels or right-aligned labels? What about putting them above or using none at all? Tool tips or more substantial help text? Thankfully, Yahoo design chief Luke Wroblewski is here to help.
Web Form Design: Filling in the Blanks is sadly not available in the UK, so if you really want to buy it, you’ll have to either download the digital copy or have it shipped from America (although it comes with the PDF version if you order a hard copy). I think it’s a shame because it would probably do well enough to justify its presence over here, but I guess that’s the cost of going with a smaller publisher.
Wroblewski begins by outlining the problem: “Forms suck. We should design accordingly.” He introduces the basic benefits of good form design and then moves on to cover every aspect of web form design in the clearly delineated chapters that follow.
Although there’s a lot to take in, Wroblewski writes very clearly and the full colour book is full of illustrations. Best of all, each chapter ends with a short list of best practices, so you don’t have to read through an entire section again when you use it as reference. Web Form Design also includes a number of contributions by other authors, labelled as ‘Perspectives’ in the book. These are well placed and offer additional context to the main text.
With the higher price due to shipping, my expectations were somewhat higher than usual for Web Form Design, but it’s more than justified the price I paid for it. It’s a very specialist book, but one that will probably stand the test of time better than a lot of other technical books. For anyone who designs web forms on a reasonably frequent basis, this is an essential read.
Published in Book reviews, Usability, Websites, tagged forms on 2nd August 2008. No comments.
Nectar is a loyalty card scheme which I recently signed up for because you can earn points at the supermarket I use. It’s a pretty large scheme, so I was surprised to discover just how poor the Nectar website’s usability is. Let’s walk through the task of signing up for a Nectar card, having heard about the scheme in store.
So, load Nectar.com and you’ll immediately notice two things that are conspicuous by their absence. First of all, only the browser’s title bar tells you what Nectar is, a place that most people won’t look to assertain the meaning of a website. It mentions points and there are some offers, but it lacks a definitive statement of intent.
Aside from assuming knowledge of the product, Nectar’s homepage also contains no obvious link to a place where you can get a card. Going from potential customer to an actual customer should be an easy process. There’s a small ‘Register’ link in the top right corner and a couple of pointers hidden in the menus, but these are probably too little, too late for less determined users.
Continue reading →
Published in Usability, Websites, tagged forms on 28th June 2008. No comments.
I’m a fairly frequent user of Amazon’s Wish List feature, but its usability is far from ideal. It may be okay if you don’t access it too often, but I use it to store a list of books and other items that I intend to buy sometime, but not right now. Here are two really simple ways in which they could improve the usability of Wish Lists:
Don’t make me hover over a link or click twice to access my Wish List. The site’s redesign makes you do this, even though there’s plenty of space in the interface for a simple link.
Before the redesign:
After the redesign:
Allow me to save the default sort order of the Wish List. I assign a priority to each item, but whenever I load the page, it sorts items by date.
Ideally, I should be able to click on “Wish Lists” and then see my list sorted by priority. Instead, I have to click the “Gifts & Wish Lists” drop down menu, then on “Wish Lists”, then “Sort by”, then “Priority (high to low)”, then “GO!”. Amazon make you click five times more than is necessary, but they could improve the usability of Wish Lists by altering two simple parts of their design.
Published in Usability, Websites on 16th June 2008. No comments.
Getting on the front page of Digg is huge achievement for many Web developers, but is it really worth it? On May 19th, one of our articles on Thunderbolt - The Top 10 Most Entertaining Speedruns - made it to the front page and it gives us a chance to analyse what really happens once your site gets ‘dugg’.
During the first hour of being on the front page, we received 6,583 unique visitors. To contrast, we usually get around 600 a day. The second and third hours were similarly strong, as we got 5,918 and 4,032 unique visitors respectively. The traffic then tapered off as we moved off of the front page and on to the second, third and so on.
Although Thunderbolt is a fairly lightweight site, we ran out of bandwidth within 10 hours of being dugg. During the first hour, our host told me that we were going through about 4GB every 15 minutes! We quickly adjusted the limit and continued to attract visitors though. The traffic boost lasted quite a few days, helped on by a sizeable number of StumbleUpon users.
Using Google Analytics, we can also see where Digg users are and what sort of habits they might have. They spent less time on the site than usual, viewing an average of 1.44 pages (41% less than usual) and spending an average of 2:12 on the site (31% less). 94% hadn’t been on the site before (11% more than usual) and 79% left without going to another page (8% more). 72% were from the US, 10% from Canada and 6% from the UK. As you might expect, Digg users are pretty tech savvy. Only 16% used Internet Explorer, with Firefox dominating as the browser of choice with a 73% share. 15% also used Macs and 5% were on Linux, significantly more than most user profiles.
In total, the number of unique visitors produced by being dugg was around 48,500. That’s not bad for free, but Digg and StumbleUpon users don’t interact with your website in the same way that others might. We didn’t get any significant boost in the number of forum users, RSS feed subscribers or repeat visitors. So aside from using up all our bandwidth, being dugg hasn’t really had any worthwhile effect on the site. That isn’t to say that it isn’t nice to see these sort of crazy traffic numbers on a site you work on, but it’s certainly not sustainable.
Published in Websites, tagged Digg, Thunderbolt on 1st June 2008. No comments.
Safari is a fine browser, but I’m put off by its lack of seemingly basic features, like a new tab button. Sure, you can get plugins to solve this, but you shouldn’t have to. However, one thing it does right is colour. Observe:
This image, taken from my GTA IV review demonstrates why colour profiles can cause havoc on the Web and why you should care. As you can see, the Safari image is more saturated and the Firefox one washed out. This is because Safari supports embedded colour profiles, while Firefox does not.
Continue reading →
Published in Websites, tagged colour, Firefox, Safari on 10th May 2008. One comment.
Although CSS is not a complex language to learn, the amount of best practice advice out there is overwhelming. It seems like there are essentially two tiers of CSS knowledge; the first will give you to a reasonable understanding so you can make a basic website, while the second will help you progress to a professional level. There are plenty of books that cover the first tier, but not too many that do the second. This is where CSS Mastery: Advanced Web Standards Solutions comes in.
Andy Budd’s book is aimed primarily at those web designers and developers who already have a good understanding of (X)HTML and CSS. It starts with the basics, then quickly moves on to the advanced techniques that you bought it for. The first chapter goes over code structuring, meaningful markup and using appropriate selectors to get the job done, while the second is a recap of the box and positioning models.
CSS Mastery then covers in detail background images and image replacement, styling links, lists and navigation, forms and tables, layout, hacks and filters, and bugs. Budd then includes two walkthroughs of entire designs, the code for which can be downloaded as it can be for the rest of the book.
Technical books can be dull and suffer from a lack of clarity, but CSS Mastery is written in a style which is easy to digest and understand. Multiple alternatives are given to problems like drop shadows and rounded corners, giving you a great overview of which one is most suitable to you.
Although I consider myself to be a pretty advanced CSS user, I definitely learnt a lot from reading CSS Mastery. Sure, there are plenty of tutorials on the Web, but few are as well written and edited as this.
Links:
Book website
The book on Amazon UK
The book on Amazon USA
Published in Book reviews, Websites, tagged CSS on 7th May 2008. One comment.
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.
Published in Usability, Websites, tagged GameSpot on 1st May 2008. No comments.
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.
Published in Design, Websites, tagged CSS, minimalism, organisation on 24th April 2008. No comments.
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.
Published in Book reviews, Websites, tagged Web standards on 22nd April 2008. No comments.
