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.
How do you make your website more engaging? A website that engages people means they spend more time on it. They read, search, interact or buy products from you. People come back for more and share with others.
Use these steps to help make your website more engaging.
1. Mix up the layout
Are you using the same layout for every page? If you are, you may want to use different designs. One design for your blog and another one for your store. By mixing it up, your visitors don’t feel like they are visiting the same page over and over again.
2. Use White Space
White Space or “negative space” is the space that surrounds elements. Add extra space between different elements. It helps users scan your design. White Space can increase readability and legibility. Too much stuff on a page can make it feel cluttered. It helps to guide users and gives the content breathing room.
Fonts have personality. Some are simple. Others are very decorative. Some fonts work better for print. Pick fonts that work well with your brand. Make sure it works well on mobile devices.
5. Make your site easy to navigate
If your users can’t find what they are looking for, they’ll leave your website. Your navigation structure helps people to learn how to use your website. It describes how web pages are organized and connected to one another. By combining different types of web navigation, you can make your site easier to navigate. Learn how to improve your website with navigation.
6. Use clear Call To Actions
Make your Call To Action stand out from the rest of the page. Use copy that is clear and distinct. You want your visitors to understand what you want them to do.
7. Make your content easy to read
Most people scan your content before reading it. They are deciding if they should spend the time to read. Use the following techniques to improve readability of your content:
Consider Accessible Font Sizing. Not all font sizes are readable to everyone. You want the user to choose the font size that works for them.
Use headings, bullet points, short paragraphs and white space to break up the copy. You don’t want your visitors to be overwhelmed by a wall of text.
Use a mix of short and longer paragraphs. You can use paragraphs that are one sentence long.
By using these techniques, you can improve how your visitors respond to your website.
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.
You can use a CSS library to design a large scale website. What do you do if your needs are simpler? A CSS library like Bootstrap may be too much for your project. Smaller projects may need a simple CSS solution.
FlexBox or flexible box can be for design small-scale layouts or applications. For larger projects, you can use it with your favorite CSS library. FlexBox provides you with tools to create layouts that grow and shrink as you need them to.
When would you use FlexBox for layout?
If you are creating navigation menus, web forms, media items or card layouts. Even simple basic grid layouts can be done with FlexBox.
You can tackle some problems with FlexBox that were difficult using CSS alone. Problems like Vertical Center, Sticky Footers, Input Add-ons and more. Solved By FlexBox shows you 6 different UI solutions that you can do. It includes solutions like vertical centering.