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!

Take 3 Free Lesson to improve your nonprofit website! Get Lessons button.

Defining UX

User experience (UX) refers to the holistic experience that someone has with your nonprofit organization. It’s already happening - people are having SOME kind of experience with your nonprofit. What kind of experience do you want them to have? How do you want them to feel?

User experience includes all interactions an individual has with an organization.

This is everything from first learning about an organization to being in a relationship with it. This relationship could be as a participant, donor, applicant, student, etc.

Explaining UX Designers

UX designers tend to focus on your tech, for example, your website, app, or other digital tool. But service design is also part of UX. It includes both non-tech interactions and whatever processes are happening "behind the scenes."

A UX designer helps craft experiences to be positive ones. Marketing, operations, and other parts of a nonprofit organization all affect UX too. In that sense, UX is a part of everyone’s job. (I know, did you really need one more thing on your plate to do?)

Before you think this is beyond you or overwhelming, know that most of us have done UX work in the past. Have you ever thrown any type of party? A birthday party for a friend or family member? A housewarming? Then you were a UX designer for that event. You might have:

Chosen the tasty refreshments and set them up on tables
Organized furniture so people could have comfortable seats
Helped people find the bathrooms or trash/recycle bins
Made introductions of people and topics that you thought would be appreciated
Watched whether people were having a good time
Moved around items during the party to make them easier to find

UX designers do the same sorts of things for your website and beyond. Great UX is about including everyone in the party and helping people to…

do what they want to do

while using your tech successfully

and having a good time!

Sometimes, that can be a challenging order. That’s why there’s a field focused on UX. Thinking about a website, a UX designer might do things like:

Choose the content to resonate with the target audiences
Organize the site structure and search so people can find items quickly
Help with wayfinding through crosslinking and great navigation
Introduce related content that might add value
Watch various people use the website to see how easy it is
Make design changes based on observations, analytics, and other research

UX design vs website design

What distinguishes UX designers from traditional web designers? UX designers conduct research with real users. This is the distinguishing factor with UX people. It’s not UX design without research involved. You have to see what people do on a website and adjust. Just like at a party, if someone was having trouble finding the drinks, you wouldn't tell them, "Good luck with that." Would you? No way. I know you would be helpful. Too often we let people suffer online though. We need to treat visitors kindly, just like we would in person.

Cat hissing with quote “When someone tells me to do UX with no research”

Research is REALLY important to make informed design decisions. It’s easy to make assumptions because we are biased and self-focused. But there is lots of public research available to help us. There are free and low-cost tools out there to see how people use our website. With some mindfulness, we can affect people’s experience positively. Small changes, for example, making text-user friendly, do make a difference. There’s no excuse for bad user experience on nonprofit websites anymore.

UX Design for Nonprofits

Nonprofits need to really focus on particular areas of user experience that might be less important for a traditional company selling widgets. For example,

Trust is #1 for nonprofits. Nonprofits need a trustworthy and professional presence for people to engage with them and/or give them money. We can design for trust - there’s research available on this and more coming out all the time.

Transparency is also critical for nonprofit organizations. Some people may be ok purchasing products without exactly knowing who or how they are made. But when it comes to giving money or receiving services, most people want more information. Being as transparent as possible builds trust, familiarity, and comfort with people. This means “About” pages and access to information are critical.

How Do I Get Started?

What kind of experience do YOU want people who visit your nonprofit website to have? One approach is to, pick one website area that you know is problematic and start there. It’s ok to start small. For example, fix your broken links.

If you haven’t already, get your 3 FREE UX Lessons to Dramatically Improve Your Nonprofit Website.

Next, join our Facebook learning community, UX for Nonprofits, to keep learning. It’s a worthwhile effort to improve the UX of your nonprofit organization. If you have any questions, don’t hesitate to contact me.