Website Usability & UX Design
Anyone who builds websites today has a lot to keep in mind: balancing function and beauty and keeping up on the latest developments in technology, all while keeping in mind the demands of your boss or client is no easy task!
It's no wonder that usability is often a last-minute item on the checklist or something that's forgotten altogether. After all, it is one of those things that, when done properly, is never noticed at all.
But usability is a crucial factor to keep in mind when designing and coding websites. After all, it doesn't matter how beautiful or well-coded your website is if it frustrates your users!
Fortunately, it is a hot research topic and our understanding of how people behave on the web — and why — grows every day.
Brushing up on it will make you better at your job, and save you plenty of time and effort in the long run. Here's why it's important, plus plenty of resources for you to up your game.
What Is Usability?
Just as you might guess from the term, website usability is a measurement of how easy websites are to use.
If your website is easy to use, does what it's supposed to, free of errors, and efficient and satisfying to use, then it has great usability.
But if your users...
- have trouble figuring out how to navigate your site or use certain features;
- have to click many times or jump through hoops to accomplish a task;
- have to re-learn how to use your site every time they return;
- make the same mistakes over and over;
- are frustrated or made to feel stupid by your website
...then it has bad usability!
It is not as simple and intuitive as it seems. Sometimes features that seem obvious and foolproof to a web designer or developer will baffle users, or cause them to behave in ways you wouldn't expect.
It's easy to blame the user for not "getting it," but in reality the problem often lies in the website's usability.
What Is UX Design?
UX stands for "user experience." It is closely related to usability, but it isn't the same thing. While usability is concerned with people being able to accomplish tasks easily on a website, user experience is concerned with people feeling good about what they do at and get from a website.
Usability is an important part of UX design. See Usability vs User Experience for more details.
What Is Accessibility?
One key part of usability is to design for accessibility. That means designing for users who rely on assistive technologies. Not all of a website's users will visit the site in the way the designer intended them to. Some visitors are blind or deaf. Others have difficulty using pointing devices. When designing for usability, accessibility must be kept in mind.
History of Web Usability
The history of web design is marked by two major periods.
The first period began in the early 1990s with the release of the graphical web browser and peaked with the explosion in popularity of flash-based website designs. This first period was characterized by web designs driven by a desire to push the boundaries of what was technically possible on the web. Unfortunately, the focus on technical expertise removed the website user as the primary object around which websites were designed.
Beginning around the year 2000 the tide began to turn, and website users began to move back toward center stage in the web design process. Today, user experience, or UX, is at the heart of modern design thinking, and designing for usability takes precedence over all other facets of the design process.
Why Is Usability Important?
Today we're used to instant gratification thanks to fast technology and the web. You can look anything up at the click of your mouse or the tap of a smartphone. We're not used to being patient and taking time to understand how a website works — we just want it to work, period! And if it doesn't, we'll navigate to another website that does.
You can have the most beautifully designed website or the cleanest code on the web, but if users are getting frustrated by it, it won't matter, because they won't use it.
While it may seem like common sense to make your website easy to use, the principles of usability aren't as obvious as you might think.
As a designer or coder, you're much more tech-savvy than the average internet user. Your behavior when navigating the web is going to be different than your average user. It can sometimes be very difficult to anticipate how the average person is going to behave on your site.
And then there are factors like the device they're using. Usability is also very different depending on whether someone is navigating via desktop, tablet, or phone. What works well with a keyboard and mouse might be incredibly frustrating on a smartphone. You've probably experienced this yourself.
You might think that if you're using a well-designed CMS, you don't have to worry about usability because it's built in for you. But that's not true — you still need to keep it in mind. That's like thinking that since WordPress is good for SEO you don't have to do anything to rank high in search engines. The foundation is there, but you still need to understand the principles and put in the effort.
That's why it's important to learn the basics of usability, and how to apply it to your websites so that your users can stay happy. Here's how!
The Process of Making a User Interface Usable
Many different guidelines have been created by designers to define the standard by which usability is measured. For example, the primary functionality of a site should be implied by design and not depend upon text to explain it. In order to test for implied functionality, some designers make the text unreadable (eg, "Pharetra cras odio tortor...") and then give users specific tasks to complete.
Another standard applied to web and smartphone application design is the "Two-Tap Rule." It was coined by Marissa Mayer, CEO of Yahoo! It's very simple:
Once you're in the app, is it two taps to do anything you want to do? If no, time to redesign the app.
The "Two-Tap Rule" is obviously based on tablet and phone systerms. But the goal is more general: to make digital products as easy to use and efficient as possible. Regardless of the specific guidelines applied, designing for usability means taking a user-centered approach to website design.
According to the user experience research firm MeasuringU, there are three key principles that drive a user-centered design process:
- Place the focus on users and tasks early in the design process. Users need to provide feedback directly to the design team as early in the process as possible.
- Design in an iterative way. Good designers don't bank on getting a design perfect the first time. They plan on going back to the drawing board a few times during the design process to make significant changes based on user feedback.
- Base design choices on empirical measurements. Don't make design decisions based on informal user feedback. Develop specific metrics to measure usability and let that information inform design decisions.
Resources for Learning About Website Usability & UX Design
There are a lot of resources on usability and user experience. We've collected the best.
These articles are perfect for beginners who want to learn the basics of making your websites easy and enjoyable to use:
- Usability 101: Introduction to Usability: a quick beginner's guide to the basics of usability by famous usability expert Jakob Nielsen.
- What & Why of Usability: the US Department of Health and Human Services manages this website on usability, with plenty of articles on the basics. Be sure to read User Experience Basics and Benefits of User-Centered Design. The Glossary is also incredibly useful.
- 8 Guidelines for Exceptional Web Design, Usability, and User Experience: a simple beginner's guide on how to apply the basic standards of usability to web design.
- 9 Common Usability Mistakes In Web Design: this Smashing Magazine article was published in 2009 but all of these mistakes are still commonly encountered on the web.
- How Usability, Experience, and Content Affect Search Engine Rankings: this is chapter 6 in Moz's excellent Beginner's Guide to SEO.
- Website Forms Usability: Top 10 Recommendations: shows how to design website forms that your visitors will actually use.
- 6 Fundamentals of Usability Testing for WordPress Web Design Projects: a great-looking WordPress theme is no good if no one can use it. Brush up on these fundamentals before you start designing for WordPress.
For professional web designers and developers, these books dive deeper into the principles and practical applications of usability on the web.
- Designing Web Usability (1999) by Jakob Nielsen was the definitive guide to usability from the world's leading authority on the matter. Much has changed since he wrote this, but it is still required knowledge upon which you will build. A must have in the library of anyone who takes usability seriously.
- Prioritizing Web Usability (2006) by Loranger and Nielsen: this book uses decades of web usability research conducted by Nielsen Norman Group to identify the most important and enduring guidelines for making better websites.
- The Elements of User Experience: User-Centered Design for the Web (2010) by Jesse James Garrett: this book will help web designers to think more strategically about their designs, and be able to explain their choices to bosses and clients. A great introduction to usability for the web.
- 100 Things Every Designer Needs to Know About People (2011) by Susan Weinschenk: written by a behavioral scientist with a PhD in psychology, this book applies psychology to the design of communication and online interactions. Essential reading for web designers concerned about usability.
- Mobile Usability (2012) by Nielsen and Budiu: This book covers the basics of creating a great user experience on mobile devices. While the examples may be a bit outdated, the principles remain the same.
- The Design of Everyday Things: Revised and Expanded Edition (2013) by Don Norman: while not about website usability, this book is a fascinating overview of the principles of usability as related to psychology and our everyday lives.
- Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (2014) by Steve Krug: full of fundamental principles and practical tips for a user-centered approach to web design, this book is one of the most popular books on the subject of web usability.
Usability is a hot topic of research, so it's important to keep up with the latest developments:
- Nielsen Norman Group: the industry-leading blog on usability, Nielsen Norman Group covers everything related to usability, including lots of original research, for all skill levels from beginner to expert.
- UsabilityGeek: this blog covers a broad range of usability-related topics including user experience, conversion optimization, human-computer interaction, and information architecture. Some of their most popular posts include The Difference (And Relationship) Between Usability and User Experience, Requirements Gathering: A Step By Step Approach For A Better User Experience, and 15 Usability Guidelines for Designing Web Site Links.
- UX Design on Smashing Magazine: the industry-leading blog on web design has a section devoted just to UX design. Check out their guides on Designing A Dementia-Friendly Website, Better Interface Design: Logins, Menus, Toggles And Other Fancy Modules, and Improve User Experience With Real-Time Features.
- UX Magazine: includes in-depth articles as well as jobs and events for UX professionals. Check out Notes to a Young UX Designer, Is your Form Designed to Fail? and The User Experience of Good Content.
If you get stuck and need to ask for help, check out these forums and Q&A sites for expert advice.
- User Experience Stack Exchange: ask and answer questions on all aspects of UX and usability on Stack Exchange.
- UX Mastery Community: A friendly, welcoming (And lively!) forum to discuss everything related to UX and usability.
- UX Design Community on Slack: a Slack community for current or prospective UX designers and researchers.
Tools for Website Usability & User Experience Design
Automatic website usability testing is usually accomplished using one or more specialized tools. These tools usually resemble a survey: users are presented with graphics or UI mock-ups from a website, and are required to answer specific targeted questions about the UI.
User feedback is gathered and processed statistically, providing accurate results about the questions asked.
Website usability tools use different testing base approaches, some tools require you to recruit your own testers using integrated support for posting to social media, while other tools already have an established network of testers that will check out your website and provide you with feedback.
Many tools offer basic features as a time-limited free trial, while top-notch features are only available with a paid subscription.
Let’s take a look at a few usability and UX testing tools that are available:
- Helio is designed in a way that makes it easy to test your design screenshots with users. Helio provides you with 100,000 global testers ready to check out your work, and you can even select the demographics of the testers to suit your target audience. Using this tool you can get your test results in a couple of hours, speeding up your workflow. Helio offers a nice suite of reports, so presenting the test data is flexible and easier.
- UsabilityHub offers a rich suite of website usability tests. Some of the services are free, but if you use the free edition, you need to find your own testers. A paid membership provides you with the testers.
- CanvasFlip offers a basic free plan, and advanced paid plans as well. You can upload your designs and test them out with your own testers. Heatmap user videos are also supported.
- Preely seems to be perfectly tailored for mobile devices, with support for swipe tracking and click heat maps. You can use your own testers, or use the TestLab test panel where you can pick the demographics of the testers that will review your project.
- OptimalSort: use this card sorting software to learn the best way to organize and present your content.
- Usability Hub: a variety of remote user testing tools to find out how real live people use your website.
- Notable: get feedback during the design process to make sure your design is user-centered from the beginning.
Conclusion: Make Usability a Priority!
Keeping up on all the latest technology and trends in web design and development is no easy task, but usability should be at the top of your list. The best results come when design and coding are approached with the user in mind first, not with it as an afterthought. By investing time and effort in learning about usability, you'll find that the quality of your work as a whole will improve.
More Interesting Stuff
We have more guides, tutorials, and infographics related to coding and website development:
- CSS3 — Intro, Guides & Resources: this is a great place to start learning webpage layout.
HTML for Beginners
If you really want to learn HTML, we've created a book-length article, HTML for Beginners And it really is the ultimate guide; it will take you from the very beginning to mastery.