10 Tips to Create a More Usable Web

Wdd Logo.
June 04, 2009

Whether it's your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience.

Usability measures the level of a user's experience and can be characterized by how easily a given task can be completed; whether it's done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said:

"Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease–of–use during the design process."

In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project.

1. Creating active navigation

Letting the user know what section of the site they're in, or what category they're navigating through can be give a huge usability boost to any site. Active navigation is one of those usability concepts that are almost automatic at this point. And we all have our own way of creating it.

The ideal situation for creating active navigation is to do it server-side, because it massively cuts down on the amount of HTML and CSS needed. If generating an active state server-side isn't an option, manipulating your body element to style each navigation element directly is also a fine choice.

As a third option, you can easily create active navigation with JavaScript.

Your active navigation state should always be different from your hover state.

active and hover navigation example

2. Clickable labels & buttons

When you take the time to mark up a form properly a user can click a label to activate the associated form element and there's a really easy way to show it off. This is a great piece of functionality built right into HTML. Unfortunately, very few users know about this natural gem of user interface.

Letting the user know a label is clickable only takes a line or two of CSS (depending on how you write it) to change the cursor from the default text insert to a more clickable and friendly pointer.

form label with hover effect

By now everyone's well aware that submit buttons are clickable. I've always thought it was weird that this - obviously clickable - element doesn't use the same cursor as a link. So I like to apply this bit of CSS to buttons as well:

label, button, input[type="submit"]{cursor:pointer;}

3. Linking your logo

Not linking a logo to your site's home page is one of the more frustrating things I've come across on the Web. I can't understand why someone wouldn't so this. It's so easy, and by now, it's safe to say, users expect it.

Linking your logo is so common nowadays that many sites are finding that having a link labeled "Home" isn't useful anymore, as users are just clicking the logo to navigate to the home page.

Sites such as Facebook, track user clicks by adding the "ref" parameter to each navigational element. Below is an example of how Facebook links their logo:


4. Increasing the hit area on a link

About a year ago, Ryan Singer from 37Signals wrote an article about how they padded link targets for better mousing in Basecamp. This is another small usability trick that you can use by simply adding some padding around links to make the clickable area larger.

This is a great addition to any site and it can help prevent misclicking on a link, which can often be a little frustrating. It also helps a lot in mobile Web design, where users click with their fingers and really need that extra large hit area on a link.


5. Adding focus to form fields

Applying focus to a form field is a growing trend in UI design. It lets the user know that what they just did caused something to happen (did that make sense?). It's a quick and easy way to pass useful, unobtrusive information onto the user. Saying something like: "Hey! You just clicked here." Can be very useful.

a focused form element

6. Providing a useful 404 page

Making the user feel comfortable is very important and displaying a big Apache error message on the screen isn't the best way to accomplish that. A useful 404 page can go a long way and it doesn't have to contain the numbers "4" or "0", as they aren't very helpful to anyone other than the developer. Besides this, no one really needs to know the error code for anything that happens behind the scenes. Users just want a site to work the way they expect it to.

On the off chance a user does find themself on a "Page not found", it's much more helpful to lead them somewhere where they might be able to locate the information they're looking for, by providing some apologetic text, a search box, or suggest some possible destinations. But try not to put the blame on the user for landing on a wrong URL.

Blogussion wrote a great article about creating an informative 404 page that lists some very good tips and even some code for those WordPress users among us.

404 error

7. Using language to create a casual environment

Writing on the Web is a big topic right now. It's like we're going down some giant checklist dealing with issues: HTML, CSS, progressive enhancement, accessibility, writing for the Web, and the all encompassing "Web standards".

We're hearing a lot about writing on the Web and it seems to keep changing. From the days of Steve Krug telling us to cut our content in half to using bulleted lists wherever possible.

Now we're all supposed to write like we're talking to a friend and it all goes back to making the user feel like they're in a comfortable environment. When you keep the copy on your site casual, it makes a user feel less stressed, so even when they do encounter something confusing they can still feel a sense of relaxation and informality as they search for their answer.


8. Applying line height for readability

Line height is one of the things that can be directly inherited from physical media, such as books and newspapers. These sources have been around for hundreds of years and have had plenty of time to master readability and line height. So the next time you're stuck on this, don't be afraid to crack open a textbook and check it out.

This is an aspect of Web design that can be easily overlooked and easily abused. I usually start off with a line height of about 1.4em and adjust it from there, based on the design and content.

example of line height

9. Utilizing white space to group elements

Grouping items together is one of the easiest ways to show association. You can do it with images, borders, or just plain old white space. Using white space to group elements creates natural associations between related elements that, even when read at a glance, can be easily picked up by the user.

As the eye scans a page, a user will naturally read the headings first. This happens a lot with top 10 lists (::ahem::). Hopefully, the content is interesting enough to grab some attention and entice the user to read a little more closely. You push users in the right direction by designing your content in a way so that things that are related actually look like they're related.


10. Being accessible

By being accessible, I don't mean Section 508 and ADA compliance. Accessibility, in this case, means being there for your users when they have a problem (responsiveness).

If usability is all about trying to make sure your users don't get frustrated and leave, responsiveness is your last line of defense against losing that user to one of the millions of competitors who are a short click away.

Ultimately, you can do all the testing that you want and follow all of the usability advice that you can get your hands on, but everybody is different. Users will get confused and lost and eventually need some help. The amount of time you leave a user confused can be the difference between someone who will come back and someone who won't.

When talking about accessibility, many people default to a conversation about the visually impaired, but accessibility extends far beyond that. For example, you have to make your web site accessible to users with bandwidth restrictions (dial-up connections, cell service, slow networks) and older browsers (some companies won't let employees upgrade browsers).

If we do our best to make our sites as accessible as possible and respond quickly to questions we can create an overall experience that will leave the user constantly wanting more.

Customer service matters... even on a blog.

Written exclusively for WDD by Tim Wright, web designer/developer and blogger. You can find more of his writing at CSSKarma or follow Tim on Twitter.

Do you follow all these principles on your websites? How can we create a better and more usable web? We'd love to hear your comments...

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…