Prevent UX fails with smart design

January 20, 2016

One thing that not enough designers focus on when designing websites is cutting down on user errors. That’s a pity because user errors have a direct impact on a site’s user experience…which has a direct impact on a site’s conversions…which has a direct impact on how much money your client stands to lose. Put another way: If there’s one thing you can do immediately to ensure your client stays happy and keeps throwing design work your way, it’s to preemptively prevent user errors right from the get go. Designing with this proactive philosophy won’t just drastically improve the user experience, but it’ll also make you look really good to your clients. Preventing user errors comes down to one principle that should always be first in every designer’s value system: designing for the end user at all costs.

Design patterns

Design patterns are layouts and interfaces that will strike a familiar chord with users because they’ve seen them countless times in all their years of surfing the Web. Therefore, it only makes sense to present your users with designs that they’ve already seen before to reduce user errors. After all, when a user has had experience navigating through a certain design, then it’s a good bet that he won’t make errors related to getting lost on your site, failing to understand what the page goal is, or not understanding how to perform a specific action. Stats say that approximately 40% of the Earth’s population currently enjoys Internet access. These users have seen your basic navigation menu (horizontal, vertical, etc.), know how to scroll below the fold, understand that calls to action should be clickable — and much more. They’re also familiar with various design trends, everything from parallax scrolling and flat design to minimalism and the long-scrolling page. Work within these well-understood patterns to drastically cut down on the possibility of user errors!

Dillard’s department stores exemplifies this basic-yet-familiar approach to web design. On its homepage, you can clearly see how many elements it does right:

horizontal navigation menu offering clear and easy access to different departments;
single-column design;
white space to focus attention on the content;
search bar to facilitate good UX that lets shoppers quickly find what they want;
big images that show products sharply and attractively.

With this layout, people navigating Dillard’s for the first time will immediately move through the e‑commerce conversion funnel due to the familiar interface of the site.

Rely on affordances

Affordances are those indications that tell your users how they can interact with your client’s site. They’re absolutely essential to a great user experience and, therefore, reducing user errors. Affordances come in all shapes and sizes:

physical;
language;
pattern;
symbolic or iconic.

Without clear affordances or any at all, even the most seasoned user will have a putrid user experience on your site. Take, for instance, language affordances, which are the most explicit ways of communicating to your users how they can interact with your site. One of the most common places where you can find these are in web forms to help guide users on what they should input into the various fields. While some forms can be relatively short, every user will be lost without language affordances to tell them what they should input into every field.

On Dropbox’s homepage, you can see the sign-up form prominently displayed right in the middle of the screen. The form only has four fields, but to help the user experience, Dropbox has included language affordances in every field, so that all users know that they’re expected to type in their first and last names, email addresses and passwords to sign up. Now that users are 100% sure on what to enter into these fields, they won’t make any mistakes, and as a result, sign up will be extremely smooth because there won’t be any friction in the process.

Use a deletion failsafe

One of the most common user errors is based on accidental deletions of created works, whether those works are very time-consuming, such as written reports, or just shared media like photographs that take but a second to shoot. It stands to reason, then, that creating effective safeguards against accidental deletions is one of the best ways to cut down on user errors. Most everyone has, at one point or another, experienced a situation where he accidentally deleted a valuable or necessary piece of content. The cost of such a user error can oftentimes be more than just the frustration of having pressed the wrong button or failed to read the pop up-window messages more carefully. Accidental deletions can permanently erase precious memories and work-related documents that cost real money. The confirmation dialog box, asking users if they really meant to delete an item, is still a vital failsafe that has to be part of every well-functioning design. The beauty of this failsafe is that, in keeping with the rule about using design conventions, all users will be instantly familiar with it, thereby upping its effectiveness as a loss-prevention system.

Google Drive’s interface uses confirmation dialog boxes that immediately grab the user’s attention, ensuring they can’t be ignored. Note how the box features the confirmation question in bigger font than all the other text in the box, almost as if it was its own headline? In addition, action-oriented words like “delete” begin the question, further making it likely that users will take notice. The line containing the warning is in bold as well, contributing to the urgency behind the question. Finally, note how the call to action button of “cancel” is the one that’s highlighted in blue, indicating a desire by the designers to have users err on the side of caution in cases of accidental deletions. All told, such a use of confirmation dialog boxes acts as a failsafe against rash users who may not have intended to press a certain button.

Conclusion

One thing that we constantly say in web design is how important it is to design with the user in mind at all times. The user experience should be put first and foremost in all design decisions. However, the interesting aspect of design is how designers usually associate the user experience in the context of what they can add to a design to improve the users’ experience. They rarely approach designing with the user in mind first from the standpoint of eliminating potential errors the user can get wrapped up in. That’s why it’s essential that designers always try to put themselves in the user’s shoes and try to anticipate how he’ll behave as he’s navigating their design. Only then can user errors truly be minimized. Featured image, confirm image via Shutterstock.