Managing User Experience Debit

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.

Managing User Experience Debt
Photo by Sarah Pflug from Burst

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.

Learn more about UX Debt

Writing Semantic HTML

What is semantic HTML?

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.

Matrix Binary Code
Photo By PixxlTeufel on Pixabay

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.

Basic HTML 5 Code

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.

Find out more about Semantic HTML

Filling Up Empty States

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.

empty room with wall wall and plant
Photo by: Darkmoon_Art on Pixabay

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.

Silver Sneaker Location Search Error

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 BMI Setup Guide

Starter Content

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.

Todo App with Starter Content

Summary

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.

Accessibility Resources and Tools for Developers

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.

Accessiblity Resources and Tools for Developers
Photo by Sarah Pflug from Burst

To make your website or app usable to as many people as possible, you’ll need to use different accessiblity resources and tools.

Design

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.

When you need to check if two colors and the font work well with each, you can use Accessible Colors. Not sure how to choose the right colors? Stephanie Walter has a list of resources, tools and tips on color accessibility.

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.

Development

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.

Testing

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.
  • WAVE – a free web accessibility checker
  • Lighthouse – an open source tool for helping you improve the quality of your website.

Where to find more accessiblity resources and tools

Use this short list to learn more about how you can add accessibility to your workflow.

UX for Senior Users

Accessibility helps makes your apps usable to users with different abilities. When you have older users, accessibility matters. You want their user experience with your app to be easy and memorable.

Two seniors using a tablet
Photo by Nicole De Khors from Burst

Many senior users have difficulty using apps and websites. The fonts may be too small, the colors make it hard to read and navigation isn’t obvious. How do you make the UX for older users better?

Make it readable

Start by choosing fonts that are easy to read. Descriptive fonts can be challenging to read. Use them sparingly.

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.

Learn more about UX for Seniors