Making improvements that impact the customer experience on your site or application can seem like a daunting task. Where do you begin? What problems should you tackle? Before you go too far down any roads here are 5 places to start looking where small changes can make a big difference for your user’s experience.

1. Welcome your new users

First-time visitors to your application should always be presented with some type of welcome or onboarding experience that:

  • welcomes the user as they enter your system and,
  • highlights key features so they can explore.

The goal is to make the user feel comfortable in the new environment and to give them enough tools necessary to feel confident exploring the app. They are using your service because it solves a need for them and a good onboarding experience adds immediate value to their experience. It gets them using the app with as little friction as possible.

Onboarding can be as simple as a single screen with a welcome message.

Onboarding experiences can be a single window or a short series of educational screens and shouldn’t be overly complex. The longer the onboarding the more likely users will abandon the process. Additionally, give users the option to skip the onboarding experience altogether. Give users the option to go through the onboarding experience again, at any time, even if they do skip it.

This onboarding experience uses several screens to highlight key features of the application.

Onboarding is known to improve product adoption and should be viewed as an opportunity to start a conversation with your user and show them the value of your product.

2. Make your language instructional

The text you use in your application is just as important as its functionality. Don’t assume your user will understand your system through the process of discovery alone. While we’d like to believe that a good design system will give users clear directions, this is simply not the case. Well written and properly placed copy can guide users, provide direction, and explain what they can or cannot do.

Dropbox uses instructional language to help users customize their space.

For example, on the page of your application where users can view the file information, provide more detail about what they can do with a statement like, “Select a file to see more details”. Or supplement an empty input box labeled ‘Description’ with the phrase “Add a more detailed description”. Be concise and use as few words as possible without sacrificing necessary instruction.

Trello clarifies what you can do by providing instruction within the input boxes.

Above all, write in a way that shows empathy, provides clarity, is genuine, and speaks to your customers’ in a familiar way.

3. Large(r) text is easier to read

Not all users have equal vision. A 2018 National Health Interview Survey (NHIS) stated an estimated 32.2 million adult Americans reported they have trouble seeing, even when wearing glasses or contact lenses. This being the case, your site’s font size must cover for a wide range of disability conditions. Plus, larger font sizes increase any users’ ability to scan which in turn increases their ability to quickly find information.

Here you can see how different font sizes and spacing can affect someones ability to scan and read information.

As a good rule of thumb, any fonts should be no less than 14 points (18.67px = 1.2em = 120% of the base font, to be specific). Also limit the use of font variations such as bold, italic, and ALL CAPS throughout your application. While font variations do place emphasis on certain words for the user, they can also confuse if used inconsistently or placed on the wrong word.

Using properly sized fonts can make a big difference to your users. And this approach makes it easier for your text to be effectively displayed on all devices, including mobile, desktop, and tablets.

4. Button designs should be consistent

A quick way to win over your users is to make sure that all your buttons are designed the same. People gravitate towards the familiar and they appreciate consistency. It’s this consistency that creates patterns and these patterns help users to remember your system.

A button should communicate an action. And it’s important to make sure buttons appear interactive without requiring the user to think twice. Therefore make sure that your button designs are consistent throughout your system. This includes things like shape, size, color, and placement.

One application used 6 buttons styles (left) while another application used only 2 (right).

While button shapes can vary (e.g., square vs. rounded) the size of your buttons should be no smaller than 44×44 pixels (tall and wide). And when it comes to the shapes, rounded button, or square, maintain consistency throughout the site so users can quickly recognize and identify the buttons.

As for color and placement of your buttons, these go hand in hand. For example, the primary button on a page (e.g., Publish) should carry more visual weight and set itself apart from the rest of the interface. It’s recommended that your primary button has a distinct color from the rest of the buttons on the page. Also, if possible place the primary button in the same place/space across the entire application. This way you create a repeatable, recognizable, memorable pattern.

Notice how visible the ‘Publish’ button (primary action) is within the WordPress interface.

People love a design when they can immediately locate the features they need. By being consistent with your button design and placement, your users won’t have to think twice before they click.

5. Let users know where they are (and where they came from)

Breadcrumbs are often an underrated design element in helping users learn your system. Breadcrumbs support way-finding which clearly identifies to a user where they are and provides structured and consistent paths to and from these locations. While well-structured menus provide direction, when you have a more complex system with multiple layers below a page, you should not force users to rely on the menu structure alone.

Dropbox breadcrumbs make it clear where you are within the system.

Displayed at the top of the page near the page title, breadcrumbs are a simple and effective means to supplement your main navigation. They highlight where a user is and provides them with a hierarchy of how they got there. It also gives them the ability to backtrack versus using the browsers ‘back’ button. In turn, helping to teach the user the structure of your system.

The breadcrumbs are divided by an arrow pointing to the left, directing users back to their previous destination. 

The design of a breadcrumb should be straightforward; a horizontal line with the text. They should provide one step at a time with each step being a link and a type of divider between each step. Though the concept of breadcrumbs may seem simple, by providing them you’ll reduce user frustration by definitively answering questions like where am I and how do I get back to where I came from.

Conclusion

The areas mentioned above are by no means a complete list of where you can make improvements to the user experience, rather, they are areas where small design changes can make a huge difference. So before investing a lot of time and effort into other areas, make sure you take advantage of ‘low-hanging fruit’ opportunities 🍎