To supplement my article 5 ways to improve your customer’s experience, here are 4 more ways to improve the customer experience.

1. Check color contrast.

Color contrast is how one color stands out from another color and whether or not people will be able to read the information. Having high color contrast is important for two reasons:

  1. High contrast supports those with low vision and,
  2. High contrast lets users scan quickly and find the information they need.

The following are design changes you can make to color contrast that will have a significant impact on your users.

High contrast text is easier to read.

Make sure that your text has a high contrast level. For example, on a solid white background, your text should be no lighter than a “dark grey” (hexadecimal value of #595959) in order to be readable and to pass accessibility guidelines. If you must use a font size below 14px, consider making the font bold to increase the visual contrast.

Text on a screen demonstrating good and bad contrast
The difference may appear minimal, however, when tested with a contrast checker the text on the left fails to pass the test.

Background colors create readability issues.

While background colors help to visually divide content, give focus, and emphasize the importance, they can also create readability problems. When using background colors keep your contrast levels high and avoid using similar colored fonts. For example, if you have a grey background you should avoid using a grey font.

Two different text colors on the same color background of grey. One did not pass color contrast.
Using the same background color, the text on the left did not pass a contrast check for accessibility.

An important note on background colors: Be careful when using light colored backgrounds to create visual separation on a page. It’s common for people to have blue light filtering active on their phones or monitors. In these cases, blue light filtering will make the subtle color differences almost invisible.

Buttons need contrast too.

Buttons are how we interact with almost everything so it’s especially important that contrast be considered. Keep it simple by using solid-colored buttons with larger, higher contrast text. The results will not only be visually attractive, it’ll be clear to understand and more inclusive.

Two sample sets of buttons with one failing a contrast check for accessibility.
Two sample sets of buttons. The set on the left failed a contrast check for accessibility.


Don’t rely only by what you “see” on the screen to judge contrast. The color settings on your monitor or phone will be different from the person next to you. There are several free tools and browser plug-ins available to check color and contrast on your site. Here are a few Color Contrast tools get you going in the right direction:

Designing with contrast in mind can be challenging but, with the right mindset and tools, you’ll quickly find places to improve the experience.

2. Structured forms are effective.

Forms can be visually and cognitively complex and if designed poorly can cause confusion and make a challenging situation even worse. With forms being such an important step in so many user interactions (e.g., email subscriptions, payments, etc.) it’s critical that you get it right – or as close to right as possible. Like many other elements (e.g., buttons), when forms are designed with consistency, you begin to create patterns for your users.

A poorly design input form.
This form could benefit from a few simple design changes that will make it easier to use.

And as I’ve stated before, patterns help users remember your system and help them to move through it quickly and easily. A well-designed form begins with a solid structure of prioritizing the fields and grouping any related items together. For example, shipping address information.

The goal of structuring a form is to:

  1. Guide the user down a specific path and,
  2. Create easy-to-digest sections.

Users always benefit when forms are broken down into more manageable sections. A good rule of thumb is if you have more than 10 fields you should consider breaking them into smaller groups.

Breaking this form into 2 parts makes it easier to scan, understand, and complete.


Proper spacing and alignment of fields and labels also play a vital role. Make sure all of your input fields are aligned properly and are the same width. So far as label text, place it above the input field and have it left-aligned. Arranging your forms in this way allows for scanning and helps reduce missed fields and oversight.

A longer input form with a design that allows users to scan.
Extra spacing, equally sized inputs, and correctly placed labels make this form easier to understand and complete.


Lastly, be sure to provide help text for individual fields or instruction for an entire form. Field labels should be clear and understandable, however, you may need to provide additional information to clarify what you are asking. For example, add the help text of ‘Must have at least 10 characters’ to your Password field to guide users and avoid errors. 

Instructional text for a form
Instruction on a form can provide additional clarity of what the user needs to do.

3. Make error messages meaningful.

The guidelines for creating good error messaging can be broken out into the following:

Notification – communicating to the user an error has occurred.
Identification – what object has caused the error.
Instruction – how can you fix the error.

Any time an error has occurred, a highly visible message should appear on the page. Error messages shouldn’t be designed to be purposefully obnoxious however, smaller more discrete error messages may go unnoticed and leave the user confused, wondering what went wrong. Place the notification as close as possible to space where the error has occurred. Many times this is directly above the object where the error has occurred or at the top of the page. Keep in mind if the notification is too far away, users may not notice the message.

An error message appearing at the top of a blog article page.
A large error message on the page indicating something has gone wrong.

In addition to the message, the object that is causing the error should be made obvious to the user. Identifying the object (e.g., a missing input field) can be done in a number of ways. In some cases, the label field will turn red, and the input field will have an exclamation icon (!) displayed next to it. Or the border of the input field doubles in thickness and changes color to red. However, you bring attention to the object it’s important that you never rely on color alone to indicate an error.

A form is showing 2 error messages and the locations of where those errors are located.
Error messages should communicate what has gone wrong and how to fix it.

A note on accessibility

The World Wide Web Consortium (W3C) recognizes that a successful error message, “…does not mean that color or text styles cannot be used to indicate errors.” What W3C recommends is that you label your errors with a unique character, such as an exclamation point or other visual means, to make it easy for persons using screen assisted technology to search and find the location of the error.

Be instructional with your errors

Make sure that any error messages you display are instructional. Rather than stating “An error has occurred” or “Missing field required”, be specific and instructional in your language. Tell the user exactly how to fix the problem. For example, instead of the error for a missing email address saying “Please check your details and try again.”, tell the user which field is incorrect or missing. Also, be sure to keep your error messages short, to the point, and use them as an opportunity to educate the user.

4. Prevent errors with confirmation.

Confirming an action is an important design element for preventing errors. It’s especially critical when you are about to make a serious decision like deleting files or permanently removing information. Many confirmations happen in pop-up windows or through on-screen dialogues. This design approach creates a delay and forces the user to pause before making a decision.

An overlay of a confirmation window to confirm you want to delete a set of files.
Confirmation windows interrupt the user’s workflow and force them to confirm important actions like permanently removing files.

While this delay helps prevent errors, there are additional changes you can make that will create an even better user experience.

Rather than using generic labels for your buttons with titles like ‘Yes’, ‘No’, or ‘Confirm’, be explicit. Tell users what will happen. For example, phrases like “Delete file” or “Cancel Subscription” are specific and inform the user what action will occur when they click the button.

Enforce the action by making the primary button visually distinct from any others. Use color for the main button (preferably from your brand colors) and make buttons like ‘Close’ or ‘Cancel’ less visually prominent.

Close up view of the options inside a confirmation modal window
This design forces the user to type the word ‘DELETE’ before they can permanently remove the files.

Language should be used to help the user recognize and decide if the action they are about to commit to is something they want to do. Users may not be completely aware of the consequences of their actions. So be sure to explain clearly what is going to happen. Be succinct in phrasing and keep the message as specific as possible. If an action cannot be undone, use language to clearly explain the situation.

WordPress displays a confirmation screen after you press the Publish button, confirming you want to take this action.

One last note: Don’t use confirmation dialogues for routine actions. Using them too much can reduce their importance and over time will cause users to overlook or even outright ignore the warnings.

Want more ideas on how to improve your customer’s experience?

Start from the beginning with 5 ways to improve your customer’s experience and learn how small UX changes can make a huge difference.