notch-blue

Improve Your User Experience Without Blowing It up and Starting Over

By:
March 2, 2016

Sometimes when a website is performing poorly, it’s easy conclude that it needs to be completely redesigned. But the idea of starting over can be overwhelming, and in some cases, unnecessary. Instead of blowing it up and starting from scratch, consider that many issues can be addressed by making small changes to the existing system.

Consider revisiting these 5 common user experience pitfalls before starting over.

1. Content Updates

No matter how awesome your website or application looks, if the content is unclear or outdated, your users will find it frustrating. If your content is made up of densely written paragraphs, it can be challenging for users to read and understand. You can make content easier to read by using bulleted lists and a well-defined hierarchy of headers with short, scannable paragraphs.

While updating content is not a simple task, it is much easier and more efficient than starting over with a blank page. If you decide to update your content, be thoughtful with this process so you don’t just recreate the same issues.

Having a comprehensive content strategy in place will help ensure you have accounted for everything needed to help keep your team in sync. It will also enable you to develop meaningful and concise content for your users by establishing a framework for what is needed.

Content strategy helps you prioritize and identify the content that should be included on the site now, as well as plan what content could be added in the future. This will lower the risk that your content becomes outdated, inaccurate, or perceived as unreliable.

2. System Error Messaging and Resolution

Speaking from personal experience, there is almost nothing more irritating than trying to complete a task, only to be faced with an error message that doesn’t indicate what went wrong or how to fix it.

Error messaging is a necessary evil. No one likes to see an error message because it means something didn’t work, however these messages are critical to helping users get back on the right path.

WindowsError

Bad: This Microsoft error message doesn’t provide a summary of the error or suggestions for resolution. The only option is to view error details (which are often written for developers and are highly technical) or close the window

Error messaging should always be written using simple language, provide a summary of what went wrong and include suggestions on how to fix the error. It is also helpful to provide a key contact if the user wants to talk to someone directly. If there are issues with an in-line form, like when a user forgets to provide required information, the system should highlight the required field and provide a summary of the problem.

Mint-Signup-page

Good: This form gives feedback after each field is filled out and a clear explanation when something is wrong. It also uses multiple visual indicators that don’t rely solely on color to draw attention to the error.

Depending on the context, some humor may help to distract from the momentary inconvenience. Humor should be used thoughtfully and sparingly because some situations are not laughing matters.

firefox-error-embarrassing

Good: When pages fail to load on Firefox, a little humor helps take the edge off. The message includes suggestions for what the cause may be, as well as how to resolve the issue.

3. Visual Indicators and Behavior Patterns

Consistency is a detail that is often neglected on websites or applications, especially as the site evolves and different administrators make changes to content and functionality.

Primary actions that work one way on the home page but another way in a deeper level page can cause confusion for users. They should be clear and easy to find on all pages throughout the site.

Since it is common for users to scan content on websites instead of reading it closely, especially when they’re completing a task, it’s possible that they may not read the labels on primary action buttons. This means that sometimes the size, location, and formatting of a button is more important than the label. Make primary actions stand out and use consistent formatting so users can see where they need to go right away.

Dominos-Primary-Action

Bad: In this example, once the user has chosen the size and crust option for their pizza, they are supposed to click “Next Step” button to choose their cheese and sauce options. However the “Add to Order” button is much larger and above the “Next Step” button. This could lead to users ordering crust only pizzas by mistake, and no one wants that! No one.

As a user makes their way through a website or application, they learn how to accomplish tasks. Each interaction sets the user’s expectation for how the system behaves and influences how they execute the next action. This is why we recommend designing a series of patterns that can be used consistently across your website.

Examples of behavior patterns you should consider:

  • Set a user’s expectations for what components can be selected. If the colors that are used in the navigation are also used consistently for in-page navigation (links, buttons, etc.) it will create a more intuitive system for users to differentiate between interactive and static elements.
  • Use well-defined primary and secondary calls-to-action to guide users through stepped processes. These should be consistently formatted from page to page so it is more intuitive for users to understand throughout your site or application.

Clear visual indicators and patterns make it easier for users to navigate through your site and complete tasks, which can lead to a more positive perception of your brand and the services you offer. When you are associated with good user experience, your business is more likely to be seen as helpful and user-friendly — which encourages users to keep coming back.

4. Navigation Labels

Navigation may well be the only thing a visitor directly interacts with on your website. Users want to know where to find what they’re looking for quickly. If they have to hunt around, you may lose their attention.

We suggest using clear navigation labels to indicate what can be found on each page. Avoid using vague terms, such as “General” or “Other”, and internal language or abbreviations. Such terms are often open to interpretation and may confuse users who are unfamiliar with your jargon.

If you choose to revise your website’s navigation, be aware of anything that may be impacted by changing the navigation or URL structure. Capture any broken links and be sure to redirect them to the most relevant page in the new set up.

5. Stepped Processes and Forms

When designing stepped processes and forms, you should manage users’ expectations. Let them know where they are in the process by using a progress bar or display the number of steps remaining. This helps users be more aware of what their time investment will be. Whether they are filling out an application, registering for an event, or shopping online — knowing how long something will take will enable them to plan for it and can increase the likelihood that they will complete the process.

Slack-Stepped-Process

Good: Slack uses subtle dots at the bottom of the page to let the user know they have 4 steps before the process is complete. The form includes helpful suggestions and explains what can be changed later if needed. Once a question is answered, the “Next” button becomes active and selectable.

After a process is completed, we recommend telling the user what to expect next.

Here are some things to consider letting the user know when they complete a process on your site:

  • Provide a summary of next steps (if any).
  • Tell the user when they can expect a follow-up email or phone call from you.
    • This is a great chance to remind them to check their Spam folder or have them add you to their contact list so they don’t miss messages in the future.

Some inline forms can benefit from minor layout changes that have minimal impact to the rest of the page or site. For example, consider aligning the label text so it is close to the input so users can quickly see that the label applies to the field. Making the form fields the same length can reduce the clutter on the page, minimizing eyestrain and making it easier for the user to scan the form quickly. You want your visitors to complete the form as badly as they do (if not more), so make it as clear and easy as possible.

Facebook-Signup

Good: The labels on Facebook’s sign up page are clearly associated with input fields and the form fields have a uniform length. The primary action is differentiated from the other actions on the page.

Before making any changes, we often recommend conducting a usability study on the existing website or application to better understand where users may be struggling. This will help you better prioritize the changes that will have the biggest impact on the user experience. Usability studies also give you the opportunity to hear exactly what users want or expect to see, which will in turn inform the content and functionality you may want to integrate in the future.

Contact us to learn more about how we can help improve your website’s user experience.

By Katherine Block
Project Coordinator

Katherine is a jack of all trades with nearly every aspect of the UX process. Her broad approach enables her to fill gaps between the different phases of interactive design including Information Architecture, Development, and Project Management.

View Katherine's Bio

notch-white

Let us know your name and email address and we’ll send you our newsletter.


First Name

Last Name

Email Address

 

 

Thank you!