If you prefer to read instead of watch the video, here you go:

UX, UI and Usability

These terms are all used in user experience. It can get confusing, and it's murky for people who are new to this area.

I want to give a shout-out to Jennifer Aldrich of Invision because she came up with this analogy first. And I'm extending it a little bit here because it's an awesome way to understand the difference between these three things. Let's think about a bicycle.

User Experience (UX) of a Bike

I have a cute bicycle that I love. When you go bike riding, you're having some kind of experience, and you're affected not just by the bike itself.

You're going to be affected by the context in which you're using the bike. For example, if:

you're going straight uphill
you're going downhill too fast
the road is bumpy or smooth

You're going to be affected even by how you feel that day when you got on the bike in the first place! All those things are going to affect your user experience.

The User Interface (UI) of the Bike

Other things are going to affect it as well. The user interface, which is the UI, are the actual things that you touch on the bike. Things like the seat, handlebars, pedals, kickstand, those sorts of things are the UI. That's going to affect your experience as well as is usability.

Usability of the Bike

Usability is how easy something is to use. If the gears are easy to shift, that's going to be a better experience, right? You want items like a kickstand you can easily put down. You want to make sure the bike is the right size for you in general because that's going to affect your experience. We have the overall user experience that affected by UI and usability.

Translate the Bike to Your Website

Take this analogy to a website. UX is a person's total interaction with the website (or the company, really) - the whole experience. Let's simply think about a website for ease. A person's experience is influenced by what happened right before they found your website. There's a lot of things they're bringing to the table. They might be looking at your website on a phone in a grocery store with kids hanging off their arm. That's going to affect their experience of your website, too.

Now, you can't control that, but you can control things like the user interface. Those are the things that somebody would be tapping, clicking, scrolling, swiping. UI elements are the items somebody can interact with. This includes things like navigation buttons or links in the text.

Usability is, of course, how easy to use your website is. And of course, we want people to be able to use our websites with ease. We want them to be able to find things quickly, to come to the website and do exactly what they want to do. Focusing on usability and UI is going to point you in the right direction towards a great user experience. You know now those are necessary components. But let's not forget how important content is.

Example of Great UI Design but Bad UX

For example, I have tested an app that was all about civic engagement in the United States. Through the app, you could learn about your government representatives and potential candidates. This would help you to be an informed voter when you are at the ballot box. It's a great idea, right? The app was beautifully designed. It had wonderful visual design. The functionality was solid.

But when I tested it, the app didn't fulfill the needs of the users. It didn't provide enough information about local candidates - only the statewide and national ones. This state and national information was easier to get - that's why it was provided in the app. But the information people really wanted was about the local candidates.

Even though this app had great design in some ways, it still wasn't a positive experience. It wouldn't actually be used. It didn't solve the problem of people wanting to be informed about local candidates.

So don't forget about your content! Don't forget about the main reasons people are coming to your website and what they want to do. You want to make sure that those things can be done. The UI and the usability should support those things.

I hope this helps you remember the difference between UX, UI, and usability. If in doubt, think about the bike riding experience!

Learn More

Want to learn more? Join Birdcall’s learning community, UX for Nonprofits, on Facebook. Keep learning how great UX can support your nonprofit’s mission!

You can also get 3 FREE UX Lessons to Dramatically Improve Your Nonprofit Website. The lessons are completely free. They offer tips I don’t hear often in the nonprofit community. Happy learning!