30 Days to Your First Website Design

Lesson Notes * The Ugly Duckling of Web Design * Don’t Make Me Think book

Transcript Hey guys – Welcome (back) to 30 Days to Your First Website Design, a Tuts+ premium course. I’m Ian Yates and today we’re going to look further into planning by examining Usability. Let’s take a look at what we’ll be covering in this video.

So we’ll begin with a question: What is Usability?

It can apply to many aspects of life, but it’s a term you’ll hear thrown around quite often in Web Design, and it all boils down to common sense. Usability (in our case) describes the ease of use of a web site. Another word you’ll hear a lot is “Intuitive”. Something which is used intuitively requires no real forethought, using it is instinctive, easy, it’s “usable”.

Familiar interfaces are great examples of good usability. Tabs, for example. We’ve started to think of these as a web design tool, but they originate, of course, from the tabs on files. We’re already familiar with using them in real life, so using them as a means of navigation on a website feels intuitive. They’re present in websites, they’re present in browsers, and for good reason.

A website is a vehicle. It’s used to perform a function, convey a message, communicate ideas, and if it does this well, the user will barely even notice the site itself. At the point when a user becomes conscious of what they’re doing, starts thinking about how they should be behaving on a website, there’s a chance you’re going to lose their attention. They’ve become distracted by the how, when all they should be concerned with is the what.

Now, usability isn’t universal – what works well for one site doesn’t necessarily work well for another. It’s entirely reliant on each individual, which is why it’s so important to determine who your users are when planning a website. By generalizing your user group, you can approximate their behavior, their desires, motives, and then get a better idea of how they will deal with your website.

We’re talking about User Experience. When designing a site for a user, you’re designing his or her experience. Whereas you (the designer) may analyze a site by its aesthetics, or its clever use of javascript, and the client might judge a site by how much cash it generates, the end user shouldn’t really be assessing anything. They should simply be experiencing it.

The Users

So who are our users? How old are they? We’ll need to cater for their visual tastes in order to draw them in, but we may also need to consider their individual usage needs (perhaps we’re dealing with the elderly, or the young, in which case font size might be crucial).

Where are they from? For example: we’re still a long way from global equality where the internet is concerned, and some nations are far less accustomed to making online transactions than others. Trust is hugely important when encouraging someone to tap in their credit card details, not all countries are like the U.S. where we can assume a certain level of eCommerce savvy.

How will they use the site? Increasingly these days we have to consider the devices our site will be viewed on. That nice jQuery dropdown menu you’ve built? Are you sure it works OK on a touchscreen tablet? If it doesn’t then you’re preventing users from accessing crucial navigational elements of your site! Not great on the usability scale!

Practice Empathy

It’s all very well saying “know your users”, but how do we actually do this? You’ll need to practice Empathy. Putting yourself in the shoes of others. This great article on Webdesigntuts+ by Paul Boag covers the forgotten skill of putting yourself in the shoes of others.

It’s classic web designer behavior (and I’m as guilty of this as anyone) to be defensive of your work, to get wound up and irritated by people who see your design differently. It took me a long time to accept that my wife’s perception of my designs is just as valid as anyone else’s! Test your designs on different people, accept constructive criticism, and you’ll soon become accustomed to designing through the eyes of a user.

While we’re on the subject of further reading, I also recommend you check out Steve Krug’s DON”T MAKE ME THINK., It’s the seminal usability reference, which makes common sense really seem so common sense.

Secondly, I’d like you to ask yourself some more questions, so we can continue to develop our corporate website:

• Who is potentially going to use the site?
• What will they expect to gain from doing so?
• What do I expect them to do whilst there?

Give them some thought, then we’ll move onto the next section!

Next time on 30 Days to Your First Website Design, we’re going to look at content. This is Ian Yates, and from all of us here at Tuts+, thanks for listening!