What is UX Debt? Like technical debt, UX debt piles up over time. Each design decision that you make can affect the user experience. Do you create a great user experience or ship your product? If you’re on a tight deadline, shipping wins.
What are the types of UX Debt?
There are two types of UX Debt — Intentional and Unintentional. Intentional debt occurs when you don’t have time or the resources to build your product right. Unintentional debt occurs over time. Design decisions that worked yesterday may not work today. Your users have changed and your UI hasn’t.
How do you manage it?
User Experience debt becomes a problem when you ignore it. Like technical debt, you need to manage how you handle it.
1. Determine where UX debt exists.
You need to figure out what issues you need to fix. Common places to look for problems are:
User Interface. Your buttons, links and visual styles may be hard to understand.
Content or copy. Check your written text, labels and headlines. They may be using confusing or hard to understand language.
Interaction Design. Is it easy to move from one page to the next?
Consistency. Does your UI look the same? Your elements should look and behave the same way.
How do you identify it?
Ask your users.
Use and analyze your analytics.
Perform regular user testing.
2. Focus on fixing debt
Not all issues are the same. Some need to be fixed right way. Others can wait until you have time. Rank the issues so you know which ones need to be handled first.
3. Build time into your schedule
Plan to tackle the UX issues that you have identified. If you don’t add them to your development schedule, you’ll forget to address them.
Semantic HTML is using specific tags when writing HTML. These tags convey meaning about their intended purpose. Both humans and computers can understand the meaning of your code when you use them. Browsers, search engines and assistive technologies use these tags to create a better user experience.
Why should I use it?
It makes your code easy to read. You’ll be able to scan quickly through the code to understand how it is structured. Semantic tags also make it faster to write code. You don’t have as many decisions to make when you use the semantic tags.
How to get started?
HTML5 introduced new tags – semantic tags. Tags like <header>, <main> and <footer>. With these tags, you create a web page structure that is readable to both search engines and people.
Your main content lives inside <main>. You can use tags like <p> and heading tags like <h1> to provide some structure. To provide further meaning to the content, use tags like <article> and <section>. The <article> tag contains content that can be removed and put on another page. You can use the <section> tag when you need to wrap groups of related content. Use the HTML semantics cheat sheet to learn when to use which tags for the right job.
What about the <div> tag?
HTML has non-semantic tags like <div>. Its generic nature allows you to define its purpose through code. You can use the <div> and <span> tags in your code. Use them to group elements that don’t have any specific meaning. When you need more specific meaning, choose semantic tags over non-semantic ones.
What are empty states? These are spaces on your app or web page which can be empty or blank. Screens or panels where no data or content displays. Why? Your users haven’t entered anything or data can’t be displayed.
You might be familiar with empty states. Some typical scenarios are:
When a search returns no results
You have downloaded a new app and haven’t entered any data or content
An error has occurred
When you have deleted all of your data
What can you do? You could leave it empty. Or display information to the user. What kind of information would you put here? You want to use this space to communicate the app’s status. Teach new users how to get started or discover new features.
Communicate status to the user
When you use an app, sometimes you may wonder if it is working. This can occur when you run a search and get no results back. Or an error has occurred.
Teach users how to get started
A blank or empty space can be intimidating to first time users. Use the space to teach your users what to do next, you help them to get started using your
Show your users how to create new content with examples. Use starter content to give them an idea on how to fill the space. If you sharing photos, you may put a couple of photos in to demonstrate how that works.
Don’t leave your users guessing what the app is doing. By using empty states, you help your users to get started using your app quickly. Learn how it works and be confident they can get what they want to do done. Refer to Designing Empty Spaces in Complex Applications to learn more.
What is accessibility? It is making your website as usable for as many people as possible. You want to make sure it works on different devices and slow networks. People with changing abilities due to aging, physical issues or situations.
To make your website or app usable to as many people as possible, you’ll need to use different accessiblity resources and tools.
Color is one tool that can make or break a design. Choosing the right colors can be hard. Radix Colors helps you to select colors to design beautiful and usable websites and apps.
Many web development teams use style guides or a design system. These tools help to make your website or apps consistent. A11Y Style Guide gives you tips, tools and WCAG guidelines for developing. It includes a pattern library focused on accessibility. You can use their guide as a reference for your own style guide.
You want to build things that people want to use. What do you need to know? You need to understand how people use websites and what you need to know to optimize it. The Accessibility Developer Guide explains what to look for and how to fix it. Many problems can be fixed by looking at how you write HTML.
As a developer, you need to test your code. You also want to test how use to easy your UI is as well. There are different tools to choose when you test the accessibility of your website or app. Here are a couple to start with:
Your keyboard. Many blind users navigate a website using their keyboard. Use the WebAim guide to Keyboard Accessibility.
Font sizes are tricky to get right. If you choose a size that is too small, you text becomes too hard to read. Make it too large and users can’t won’t read it as well. What looks good with one font won’t work for another. CSS-Tricks explains how to resize your fonts.
Use color and contrast to help guide your users
Color and contrast can help user perform tasks, keep track of where they are and pick out links from text. Choosing the right colors for you users can be challenging. Some color combinations are difficult for users with vision problems. The Web Accessibility Guidelines v1.0 explains Contrast and Color. Plus, it gives you a sample color palette to choose from.
Make things easy to click
Older users can have trouble clicking on buttons and links. You want to make the big enough so they can click on them.
Use UI patterns that are easy to remember
Establish a design style that is consistent and easy to use. Use icons, fonts, text, photos and other design patterns to help reduce the learning curve. Include breadcrumbs to help users keep track of where they are.