Think about the last lousy online experience you had with a website or an app. What was wrong? Was it hard to find what you wanted? Were the graphics terrible, or was it too cumbersome to scroll through all the options? Was the "cool" feature too hard to use? Did you get the help you needed?

Companies dread these roadblocks because they reduce the amount of time customers spend on their sites, decrease the volume that they purchase or, worse yet, drive customers to abandon their shopping carts altogether. The underlying problem, however, is oftentimes poor UI and UX design. If your company is an offender, watch out. Here’s what you need to know.

What Are UI and UX, Anyway?

UI stands for "User Interface." A user interface is a set of digital tools that your customers use to make selections, input data and manipulate information on your website or other digital products. More specifically, UI includes the toolbars, menus, buttons, windows and other controls that your customers can use to navigate your website, app and/or other digital product.

UX, on the other hand, stands for "User Experience." It refers to how well people interact with your online presence, which includes but is not limited to your UI. The term can apply to a wide range of situations: how effectively employees use machinery to build cars, how easily customers use airport kiosks to print boarding passes, or how properly pilots use navigation systems to fly planes. But oftentimes, UX refers to how well your customers interact with your business's website, apps or other digital experiences.

UI isn’t the only component of UX. That is, you can’t create a good UX simply by having menus or buttons on your website. Good UX happens when you integrate the language, shapes, sounds, motions, task flow, physical interactions, controls and the code that makes your site, app or other digital product flow intuitively. After all, people—your customers—don't look at each menu, button or product description separately; they only see how the whole system rises to their expectations, meets their needs and tests their nerves.

What Bad UX and UI Can Do to Your Business

The goal of optimizing UI and UX is to get customers to spend more time on your website, buy more and become more loyal to you. So when your UI and UX are bad, guess what happens? It costs you in traffic, sales and repeat business.

Probably the best example of the power of bad UI and UX is the HealthCare.gov website. Launched on October 1, 2013, the website was heralded as the primary gateway for millions of uninsured Americans to buy health insurance in accordance with the federal government's mandate that all Americans have insurance policies by March 31, 2014.

For weeks after the launch, the site's user experience fell under serious criticism. The news was flooded with stories about the site malfunctioning; it froze up and was offline for weeks. When they could access the site, users first had to register for an account—a step that required providing personal information—just to browse the available products. This in itself is generally a big user experience no-no; most users want to browse and understand their options before they commit to giving up their information.

When users selected the Spanish option, the links were often broken or directed users to a phone number. When the Spanish version of the site finally came online two months late, it was so poorly written that some people speculated a computer had translated it.

Frustrated customers flooded government and insurer phone lines looking for help. A poll in December found that about half of the people who turned to the site said they couldn't get the information they needed. Another survey found that only 10% of people who put a plan in their shopping carts actually followed through and bought the product.

Mapping Out Your UI and UX

Clearly, good UI and UX should be part of your competitive strategy, and that means you have to map out your UI and UX very carefully. There are a couple ways to do this.

First is scenario mapping, which involves creating various stories about how a user would carry out a task on your website or app. For example, you might map out how a customer could find all the products on your website that are under $25. This very visual exercise gets you thinking about what the "perfect" experience should be for this task and how it plays out, step by step. What should emerge is a list of everything that your team needs to implement in order to create a great UI and UX.

Second is mind mapping, which is a less linear form of scenario mapping. With this method, you write down a keyword or phrase that summarizes an important aspect of your UI or UX, and then you attach "branches" to the keyword or phrase. All the related subtopics and ideas go at the ends of those branches. For example, a mind map of your $25-and-under project might start with the words "sort by price" in a circle; you might attach "drop-down menu location," "what price categories?" and "how to display results" on branches radiating from that circle.

Once you have an idea of how things should work, you need to build a prototype. This process is called wireframing. Wireframing is a way to build a skeletal version of your site or digital product so that you can play with the placement of menus, buttons and other elements. The advantage is that you can see how your site will look and feel without having to insert all the text and graphics. When done well, wireframing reduces the number of revisions you'll have to make after your site is fully built.

Where to Get Help

UI and UX can be intimidating concepts to businesspeople who are technophobic or who are just plain busy working on other areas of their enterprises. But that doesn't make them less important. There are plenty of places to go for help.

First, consider paying for usability testing. Usability testing is similar to market research with focus groups: a moderator observes a person using your digital product, records the interaction, and asks for feedback and other data. This can provide important insight from the customers' point of view.

Second, realize that there is a whole industry out there devoted to UI and UX. If you want help understanding and applying the concepts of UX, check out these blogs and publications:

Conclusion

You expect things to work in a certain way, and so do your customers. That's why UI and UX are part of your strategic advantage, not just a time-suck. The right investments in UI and UX make your digital products beneficial to your customers and thus beneficial to you.