There’s an old way of making websites, a hangover from the graphic design industry, and it goes something like this. You, the client, want a website, so you hire a web design agency and they produce some static designs for you to look at. Essentially these are pictures of what your website will hopefully look like.

There’s a bit of back and forth until a final design is approved and signed off, then the web agency go off and turn it into a “working” website.

At first glance it might seem sensible, but it’s not viable and it’s not how we at The Tomorrow Lab are going to be doing things.

I’m going to explain why, but first I’m going to set the scene with a couple of examples of bad design.

Cafetieres

A black plastic cafetiere and a stainless steel cafetiere

Which one do you think is the best?

The chrome cafetiere costs £1 more than the black plastic one and is arguably better looking. Going by those two features alone it could reasonably be assumed to be a better cafetiere.

However I have owned both and the black one is by far the best. It is sturdy, works exactly as expected and pours well.

The Chrome one on the other hand, oh dear. The plunger handle has a lot of sideways movement, there’s a little nut inside the lid that keeps coming loose, the pour is splashy, and coffee collects on the inside of the lid when pouring then spills out when it’s upright again.

It’s as if it wasn’t even tried out before being put on the shelves. In short it’s badly designed.

Europa taps

I was at the Europa Hotel in Belfast recently and had cause to wash my hands in the restroom. The taps look great and the whole sink arrangement looks nice, like someone with a bit of taste chose it.

Alas, these also are badly designed. The end of the tap is too close to the back of the sink so when you wash your hands they have to be hard against the ceramic.

The tap can be opened more but that makes the water come out so hard it splashes everywhere, including the front of the person trying to wash their hands.

Websites are for using

The reason I chose these two examples is because modern web design has much more in common with product and industrial design than it has with print or graphic design.

Poor testing, lack of usability, annoying user experience, and mistaking visual appearance for design are all symptoms of bad web design.

Here are some words and phrases that are used a lot in web design: user-centric design, usability, user testing, user experience, user journeys. It’s all about use and users. Websites are there to be used, not looked at.

If your website lets the people who use it to do or find what they came for, and at lightning speed, it will be a successful website.

The decisions and process needed to get to that point cannot be made in Photoshop or round a table in a meeting room. They must happen by designing a website much the same way as furniture, phones, cars, toys and robots are designed — by prototyping, testing, improving and iterating.

Take the time to read how a watch that can be used by people with visual impairment was designed. It’s a fascinating story of design.

The information the watch designers received from testing was sometimes surprising, sometimes counter-intuitive, sometimes totally unexpected, but always invaluable. It showed them what they could never know by drawing a watch and passing the paper around for people to give their opinions on until they agreed it looked good enough to build.

Just to drive home the point that this applies to web design, this article is on one of the world’s leading web design sites. It is meant to be read and applied by web designers, not watch designers.

A good design process

Ok, we’ve seen some examples of bad design and looked at how other “for use” products are designed, but what does a modern effective web design process look like? What are the specifics?

The 3 prerequisites

Before anyone goes near a computer there are 3 things we need from a client: clear goals, an understanding of the nature of the web, and content.

Clear goals

If you are unable to answer the question, “What do you want your website to do?” it will fail.

If you can answer that it’s for selling, for B2B lead generation, for recruiting good people, to be a repository of expertise, for reputation management, for public education, for information dissemination or anything else clearly defined then your website can succeed.

As an aside, “promoting our brand” doesn’t count. All websites should do that by default.

With clear business objectives in place we can test specific tasks, find the right type of test subjects, and design components that help achieve those objectives while rejecting those that don’t.

The nature of the web

The web is a wonderfully messy place. Lots of websites are ugly, lots are completely baffling, and lots of them are mind-boggling. Any reason you can think of for raising your eyebrows you can be guaranteed the web has already thought of it. I use the word “thought” deliberately there, because the web is a bunch of people more than anything else.

All the diversity of humankind is reflected in the web, and that’s ok. In fact it’s great. What it means for you is that designing products for the web is an exercise in human interaction.

The other major feature of the web you need to be aware of is the sheer number of ways people will access your website. There is no such thing as a standard screen size, in fact there aren’t even categories of screen size like mobile, tablet, desktop.

In Android alone the range of screen sizes is a sliding scale, not a series of well defined steps.

Some people print websites and read them that way, others listen to them using a screen reader. Some people take advantage of the relative ease with which you can override the colours, font sizes and other styles on a website. It’s also becoming really common for people to use services that strip out everything except the text and images on a page then save it in a completely different service for reading later.

The upshot is we have much less control over how our websites are interacted with than we have ever had, and we should forget about trying to wrest that control from our users.

This isn’t actually a new idea, it’s something that more enlightened web designers have been saying since at least 2000.

It’s imperative you understand these principles when designing for the web.

Content

Content is much more that just text and images, and maybe a product list with prices and photos.

It is also about how information is structured. How are your executives profiled? What information is included in a typical job listing? Will statistics be used anywhere? Do you issue press releases? How do you categorise blog posts? How do you want people to contact you? What do your promotions and special offers look like? Will there be long scientific words that won’t fit into a sidebar? What information do you need to collect in forms? Where does it go? What do people see after sending it? These and many other questions need to be answered.

For an eCommerce website there are even more. Do your products come in different colours and sizes? Are there any customer groups such as wholesalers or account holders who get better prices? How are those prices calculated? Is it likely you will run discounts on the medium-sized but not the small and the large t-shirts? Will you be using vouchers? Can a product appear in more that one category? What do you need in the admin area?

The list goes on, but the point is that we need to spend a lot of time talking to you to find the answers before we can start writing code.

The ingredients

Once the 3 prerequisites are in place the design can start, and there are several aspects of the website that need to be designed as discrete but intertwined threads as part of a collaborative process.

Typographical design

The isms go, the ist dies, art remains.

Some beautiful web typography

The typefaces used on a website have a huge effect. They each have their own personality, and talk to users in a subtle but effective way.

An obvious example is that Comic Sans is not suitable for a website about drug addiction or serious legal matters.

A screenshot of an article on the European debt crisis with everything changed to Comic Sans

This website does not suit Comic Sans

Good typography on the other hand can give your website the perfect tone of voice. You may want to appear friendly but not sycophantic, modern but not futuristic, futuristic but not dystopian, classy but not staid, confident but not arrogant, etc etc etc. Good typefaces do that for you.

There are some technical considerations too: how a font looks on Windows and Mac; how readable it is when used for body text or at smaller sizes; how it pairs with other fonts; how much extra weight it adds to a web page.

These are all aspects of good typographical design that have a direct bearing on the success of your website.

Usability & interaction design

The simple truth is that no one wants to use your website. People want to find information, buy products and complete tasks that make their lives better in some way. Your design should get out of the way and let them do it.

Nobody is ever going to tell their friends there’s a great B2B website they can’t wait to read the “About Us” page on. No one is ever going to recommend buying from an eCommerce website because it looks nice.

The good news is that usability is testable and measurable. As soon as the design process kicks off we can test how navigation, forms, buttons and other interactions are working for real people. Usability testing is where we can see how easy it is to learn complicated or unfamiliar interfaces, and how we can reduce errors.

A big part of it is designing affordances that make it easier for users to understand interactions. Take this hose nozzle for example.

A green plastic hose trigger nozzle

You know from here how it feels in your hand, what it feels like to remove the cap, how the screw at the back feels in your fingers, and what it feels like when you push the little clip back and forward against the plastic. Those are affordances and every good website provides them.

User experience design

User experience design, often shortened to UX, is closely related to usability design. However UX isn’t about how a thing works, it’s about how it makes people feel when they’re using it, and how they feel about you as a company and a brand.

The UX has an infinitely bigger effect on brand perception that a logo or colour scheme ever will. If you ask website users about your brand they will talk in terms of how they felt, not what they were looking at.

Furthermore, the UX is also how someone feels in anticipation of having to use your website. Are they more likely to be untroubled or irritated by the prospect?

Good UX means less cognitive load for users, more new and returning customers, more conversions and more leads. It also means more people use your website, which gives us a bigger user base for testing the effectiveness of new features.

Good UX design means planning, testing, measuring, learning and adapting. Again, not something that can be designed in a graphics program or by guessing in a meeting.

Accessibility

A common misconception is that accessibility is all about making sure a site works for blind people, but there’s much more to it.

Some people who don’t have any disabilities prefer not to use a mouse, so we need to make sure our websites can be used with just a keyboard.

Sufferers of what is commonly called colour blindness can also have a hard time if websites aren’t accessible. For example if error feedback is in the form of dots, red for error and green for success, it’s not accessible.

A visual comparison of how red and green look to protanopia sufferers

Normal vision on top, the same image as viewed by people with protanopia, or red-green colour blindness

An accessible website is obviously good for your bottom line. If more people can use it, more people will convert on it.

Visual design

A website should look good, there’s no question about that. If your website looks good it will do better than if it looks bad.

A problem arises when massive amounts of time are wasted agonising over visual design with little or no thought given to how it will affect the success of the website.

Another major issue is that people often look for the wow factor in the visual design. Few websites have “make the marketing director say wow” as a serious objective, but it can turn into an unofficial objective when people start to base their judgement of a website solely on its appearance. Paul Boag puts it well.

When done properly visual design looks good, keeps out of the way, and is informed by the other design elements.

Performance

Faster websites do better. Everybody knows time is money, how many times a day do we hear this? Well here’s something to give you a little more prospective.

  • Google changed from 10 results per page to 30 which led a 20% drop in traffic caused by the extra 0.5 second load time
  • Amazon ran a speed test and saw a 1% drop in revenue for every 100 milliseconds lost
  • 40% of eCommerce site users abandoned their shopping if pages take more than 3 seconds to load

Roughly speaking a website turning £1,000 per day could make an extra £25,000 per year by tuning up by just 1 second.

And it’s not just about how speed affects your website when people are already there; it’s about how they get there too. Since 2010 Google has been ranking fast sites higher in the search results. Suddenly the term time is money seems a whole lot more new-fangled!

Conclusion

In the past I’ve heard web design compared to building a house, but it’s a poor analogy.

A better one is baking a cake. There are some things you need before you start e.g. a big bowl, a mixing spoon and an oven. Then you mix the ingredients. They compliment each other, working together to get to the end goal, a delicious cake that looks appetising and makes people happy when they eat it.

Where the analogy falls apart is that with websites if one of the ingredients isn’t measured properly it turns to poison. If one is missing the rest taste like sour milk.

Modern web design ensures that won’t happen. It gives you a huge advantage in a competitive market, it works towards your business objectives and it keeps your customers happy.


All that is half the story. Once your site goes live it becomes more like a garden than a cake, and that’s what I’ll be talking about in my next blog post.