The old site was created in 2006 and ran on Drupal, but wasn’t really used as anything more than an archive for articles and even then, not all of the magazine’s content was uploaded to it. I started afresh, creating the new site with WordPress as its content management system.

The main challenge was fitting all ten sections onto the front page without making it seem cluttered. I ended up with a fairly strict four column grid layout, which I think works really well. I thought a lot about adding more colour to the site, but every time I tried it, it just didn’t feel right.

Another thing I wanted to do was to make the website a great companion to the magazine. The In print page has a Google Map of where you can pick up a copy of the magazine and the home page also has prominent information boxes highlighting how people can read and get involved with Impact.

The main problem with the old site is that no-one ever used it, or when they did, it was reluctantly. To combat this, I created a guide which outlines exactly how to use the site. When I went up to Nottingham to help design the first issue, I had the chance to watch other editors use the WordPress system and so this ad-hoc usability testing really helped when it came to writing the guide. I probably wouldn’t have spotted some of the problems people were having without watching them use it.

Although the new site has only been online for a matter of days, the feedback has already been very positive and I hope that it’ll continue to be a success throughout the year. If you get a chance, do have a look around.

So here we have our homepage, the starting point for all users once they login. On the left we have shortcuts to various pages within the CMS and away from it. On the right, we have a small AJAX chat section powered by the wonderful jQuery and a summary of recent activity in our game tracker below that.

One of the major improvements in the new CMS is the usability of the forms. I’ve now added inline help, which slides down (again, using jQuery) when users click on the red question mark.

We’ve also got inline validation (yep, jQuery), which should prevent a lot of common mistakes which were all too easy to make in the last edition.

Another upgrade has been to the image uploader. In the old CMS, it was really unreliable, but now we have one which renames files for you and resizes them. It cuts the time taken to do images in half, which makes it a lot quicker to publish articles, especially if there are several of them.

As part of the intranet side of things, the new CMS has what I call the game tracker, which catalogs all of the titles people are reviewing or will be reviewing in the near future. We used to organise this via the forums, but now we can see what’s being worked on with greater clarity.

The statistics section has also had a sizeable upgrade, with plenty of graphs to visualise data. I used the excellent pChart to do this, which takes a bit of getting used to, but is extremely flexible. I also included live traffic data, which is taken from our Mint installation. This was fairly tricky and I might publish how I did it at a later date, but if you’d like to know the details, feel free to get in touch.

We also now have our staff handbook integrated into the CMS, which should be a lot easier for new staff members who need to quickly look up something, as opposed to trawling through a PDF file.

Building the new CMS has been a lot of work, but I think it’s been really worth it. Part of what I do at Thunderbolt is to look years ahead and steer us in the right direction, and one of the things we have to do is make the site sustainable. What I mean by that is to be able to keep it running even if all of the editors and most of the staff writers are employed full time and therefore can’t spend ages each day keeping Thunderbolt ticking over. The new CMS makes it easier to publish work, particularly when it comes to organising images, so I think it’ll be a success in this regard.

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.

Krug starts by laying out why you’d want to read Don’t Make Me Think! and what it will and won’t contain. It’s a smart introduction to a book which is not just aimed at designers, but manager and executives as well. He then proceeds to outline the book’s central principle: “Don’t make me think!” It’s a remarkably simple rule, but you’d be amazed how many websites and interfaces forget to spell out the obvious.

Don’t Make Me Think! goes on to explain how people really use the Web; not by reading everything and making logical decisions, but by scanning and muddling through. Krug focuses on a great little fact; we don’t make optimal choices; we satisfice (a neat portmanteau of satisfying and sufficing). People choose the first reasonable option, not the best one.

The book moves on to visual hierarchies, choice, writing for the Web and an extensive section on graphical cues and conventions. Krug touches on a few business issues too, including homepage design and how to safely navigate making design decisions in a team. He introduces more formal usability testing, then moves on to accessibility and a brief introduction to cascading style sheets.

What makes Don’t Make Me Think! so easy to recommend is not just the balanced choice of topics, but also Krug’s writing style. He explains issues and suggests guidelines in plain English that everyone can understand. The book is also in full colour with plenty of illustrations, so you know exactly what he’s talking about.

Looking at the cover, you’d be forgiven for thinking that it’s a one principle book that revolves around a few anecdotes and a handful of buzzwords, but it’s the complete opposite. Don’t Make Me Think! is an essential read for anyone remotely interested in the subjectand a great title to having lying around as reference. If I could only have one book on usability, this would be it.

Working in a Microsoft Office environment, everyone has and uses Outlook, but its to-do list is not the most flexible tool and doesn’t scale nearly as well as a dedicated program like Things. Instead, I’ve started to use 37signals’ Ta-da List, a simple online task manager.

Ta-da List is far more basic than Outlook and much more than Things, but its beauty lies in the lack of clutter. To get to my tasks in Outlook, I’d have to open the application, click the to-do tab and then focus on the small portion of the screen in which the list resides. With Ta-da, I get a plain list with large fonts, devoid of emails, calendar items and other noise. Outlook is a wonderful program if you need total integration with the Office ecosystem, but when I’m deciding what to do next, I need as few distractions as possible.

I guess this highlights the divide that separates many programs; those that do one thing and those that try to do everything. When you’re reading your calendar, do you need your email there as well? Is it sensible to put your RSS feeds in your email application? Looking at the programs on my personal computer, it’s definitely a case of one application per task, with the notable exception of Coda. But I digress.

When your productivity system is suddenly rendered unusable, it’s initially difficult to adapt. Without your trusted tools, you have to invent an entirely new system within a set of limitations and this takes time to adapt to. However you manage, it’s important to remember not to lose control over your time because of unfamiliar surroundings and tools.

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.

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.

The homepage fails to answer the two most important questions, “What is Nectar?” and “How can I get it?” For this example, let’s assume that we really want to sign up and that we make our way to the next screen.

The ‘Get started’ page isn’t much clearer. About half of the text is redundant and no sensible visual hierarchy is employed to guide the user through the choice the page presents. The entire top half could be replaced by this:

Now the user has much less text to read, but the same information is conveyed.

The forms you’re presented with once you choose to register without a card aren’t really as bad, but many users may have given up before that point. There are a few notable usability issues though:

Here you would assume that like other forms, you put your house number and post code in, then it pulls the rest from some database. However, here the house number and name are both required, even though it’s extremely rare for a house to have both. If you actually try it, the form doesn’t complain if you just leave the house name blank.

Here, I assumed that I could just tick all three and avoid unnecessary offers, but when you click the first one, you’re prompted with this box:

You have to read through the entire thing before finally realising that it’s simply a vain attempt to get you to repent on your unwillingness to sign up to their mailing list.

Finally, you’re presented with this cardinal sin of form design; using check boxes instead of radio buttons.

For a scheme of its size, Nectar tests the user’s patience an extraordinary amount in their search for a loyalty card. By altering a few parts of their website, they could probably increase the number of successfully registered users by a huge amount.

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.

The page you see when you first open the book is a perfect example of the clarity with which Lupton presents the subject. I simply reads, “Typography is what language looks like.” Crisp, concise and succinct.

Thinking with Type is divided into three sections: Letter, Text and Grid. The first introduces the context in which the rest of the book can be explained, looking at the history of typefaces and their evolution since the presses of the Middle Ages. It explores different letterforms and their anatomy, so you’ll never wonder what people mean by a ‘humanist sans serif’ ever again.

While the first section concentrates on individual letters, Text examines what happens when we bring them together into a coherent block of text. Lupton explains tracking, line spacing, alignment, hierarchy and paragraphs, both in the context of print and the Web.

The final section introduces the historical context and practice of using grids in design. It’s perhaps less focused on typography than the previous chapters, but it’s a relevant and welcome inclusion nonetheless.

Unlike most books, Thinking with Type’s appendix is actually well worth reading. It offers helpful hints, short pieces of advice and a brief guide to proofreading conventions.

As you might expect from a book of this sort, it’s designed really well, with interesting but consistent page layouts and typography that’s easy on the eye. Thinking with Type is also just the right size and length to be referred to while you’re working.

While I already knew a fair amount about typography, Thinking with Type has undoubtedly been a worthwhile purchase. It’s clearly structured, provides a solid historical context, explains theories clearly and has excellent examples. I’d highly recommend it to anyone who uses type on a fairly regular basis and wants to learn more.

Links:
The book’s website
The book on Amazon UK
The book on Amazon USA