Skip to main content
broken pastels for drawing broken pastels for drawing

Beautiful Design, Frustrating Digital Experience

By Elevate

March 30, 2016

Design

It’s a scene seemingly ripped from a Kafka novel — you are completely focused on trying a new app and all that’s left to do is create a password. You enter one in, click “Submit,” and …

“Sorry, password must be at least six characters long.”

You try again …

“Sorry, password must include an uppercase letter.”

Within the digital world, surprises such as unknown password requirements can quickly lead to a user feeling frustrated and less likely to continue his/her journey on your site or app. Most commonly, many unpleasant surprises lurk within the realms of password creation/log in, unexpected back button navigation and the classic 404 “Not Found” pages. New innovations with interaction design have created beautiful new patterns and options for digital spaces. Unfortunately, these same innovations can lead to bad user experiences if not enough care and forethought is taken. Now especially, it is important to review your site or app from the perspective of a user to truly understand what issues they may face and to identify any experience problems that new elements may have caused. Luckily, with a little extra attention and creativity, the annoyance of these surprises can be mitigated if not eradicated.

1. Passwords and Accounts

Accounts and passwords are a necessary evil within the digital realm. No one likes to fill out forms, but the perks of having an account often outweigh the hassle of signing up. Still, there are small tweaks that can be implemented to ensure the process is as efficient and painless as possible.

First off, when asking users to create a password, make sure to have the password requirements readily available. As the Nielsen Norman Group states:

When a system doesn’t show the requirements beforehand, users are essentially being asked to play a game where the rulebook is hidden.

When the password field is selected, the password requirements should automatically show up to the side of the field. An alternative solution is to include the password requirements within the content of the page. If the user still does not meet the stated requirements upon submission, make sure that the error messaging is explicit on what he or she was missing or had entered incorrectly. It is important that the system validates all requirements concurrently so that the user has all the feedback they need to have a successful next attempt.

As account security is of the utmost importance, the need for complex password requirements arises. Sadly, the more complex the password, the more users are likely to make a typo or forget what they wrote. One way to help alleviate this issue is by allowing the user to toggle password masking on and off. By allowing the user to view what he or she is writing, they can quickly recognize errors. This is even more important as mobile devices become more ubiquitous. In a research study completed by the Media Informatics Group at the University of Munich, 69.3 percent of test participants had already used mobile devices to create alphanumeric passwords. This is significant to note as the study also found that input errors are more common on smartphones than other devices.

Example of an enter password form.

Make it easy for users to create passwords by allowing them to unmask their password and by clearly stating password requirements from the start.

Unfortunately, once a user has finally completed making an account, they may still experience issues when they attempt to access it later. In a study analyzing a popular e‑commerce site, 45 percent of all customers had multiple registrations in the system because they had forgotten they signed up or could not remember the email address they had signed up with. Some had as many as ten accounts. There were about 160,000 forgotten passwords requested each day, and 75 percent of the people who requested their password never tried to complete a purchase once requested. This is a problem that desperately needs to be addressed.

Recently, sites have avoided this problem by allowing users to log in with their Facebook or Google accounts, but another simple fix is to quickly let users know if their username or email already has an account within the error messaging. Instead of saying, “Your username and/or password does not exist,” accept the username if it is correct, and perhaps show their profile picture to let them know that only their password is wrong. Nearly all websites allow a user to create only one account per email address, so the system will automatically notify anyone trying to register when an email address already has an associated account. Hence, there are alternative, more user-friendly ways of protecting users than vague validation messaging.

2. Browser Back Buttons

Digital design trends are becoming more beautiful and interactive every day, it seems. Trends such as lazy loading (a design pattern where content only loads as it is needed) and lightboxes (a type of overlay that darkens the background content) allow users to view content in more subtle and unobtrusive ways. On the flip side, the simplicity of these elements create opportunities for the user to navigate to a place they did not expect upon clicking the browser back button.

For example, imagine a typical user on an e‑commerce site. She is looking for a new dress to wear and wants to quickly view all products. She clicks “View All,” and scrolls until she finds a dress she is interested in. The user clicks to be taken to the product page, but realizes that product is not to her liking. She then clicks on the browser back button, imagining she will be taken back to the same area of the product listing page she had previously been viewing. Unless extra care has been taken to anticipate the back button behavior, the user may end up back at the top of the product-listing page, inevitably forcing her to keep scrolling until she finds her previous spot. User expectations such as this one must be noted and carefully addressed to avoid user frustration and, consequently, lower conversion rates.

Google Image results for bulldog.

Google Images recently changed the format of their search results. Now, when a user clicks on an image, that image expands. Unfortunately, when a user clicks the back browser button from this screen, they lose all their search results.

Back buttons can also be pesky within checkout flows, especially as more and more e‑commerce checkouts begin to implement single-page checkouts with accordion functionality. Make sure, if you do wish to implement a one-page checkout, that clicking the back button will not completely erase all information the user has input, and will initially take them to the previous checkout step that they were on. Filling out checkout forms is always a pain, but having to fill the same forms out twice is extremely aggravating. While improvements to many e‑commerce checkout flows is paramount to decreasing cart abandonment rates, unintentional mistakes can also deter a user from making their purchase.

Overall, back button use is still very common, especially among mobile device users. Next time you are designing a page, take a moment to understand if the addition of a certain element or page view would make your user believe that they are on a new page. If so, investigate the browser back button behavior and see if any additional development is necessary so that the interaction aligns with what the user expects.

3. 404 “Not Found” Pages

No one enjoys finding what seems to be the perfect match in a search engine, only to be taken to a dreaded 404 “Not Found” page. In fact, about 74 percent of users who reach a 404 page will leave the website and not return. As more and more sites boost the number of blog posts and featured articles they contain, the need to actively maintain content becomes more critical.

First, conduct a content audit to see what pages you already have. Then, begin the process of cleaning out old content. Next, monitor your site’s analytics to keep track of how many users are landing on a 404 page daily. You can do this by setting up a custom report in Google Analytics to inform you which pages are returning errors, as well as by creating a custom alert. This way, you will immediately receive an email when a certain URL leads a set amount of users to a 404 page. Remember, sometimes even links from outside sources can lead users to the wrong page. By monitoring your site’s analytics, you will observe any sudden spikes in 404 page visits and know exactly which URL is leading users astray.

Still, 404s happen, so it is in your company’s best interest to develop a helpful 404 page that guides users quickly and easily to the correct page or an alternative page, as well as alleviating any frustration they may be experiencing. Make sure that you include links to return to main pages and suggest popular categories. Use copy and design to apologize for the inconvenience. A 404 page also provides an excellent opportunity to show off your brand’s meticulously cultivated wit and personality. Landing on a 404 page will happen every now and then; the best we can do is minimize the occurrence of these pages and to design them to better help our users regain their motivation.

Airbnb

Airbnb, a travel accommodations company, offers disgruntled 404 page visitors a fun animation and quick links to popular site pages.

Websites and apps allow for users to have a reasonable amount of flexibility and freedom when it comes to reaching their goals, which is a wonderful thing. It is a designer’s duty to carefully aid the user within this environment and to provide supportive feedback and expected behavior. By giving just a little extra attention to certain common elements such as form requirements, browser back button behavior, and 404 pages, you can keep your users happily cruising toward their goal without any unpleasant surprises.

Related Posts

a Chicago CTA train

Designing a Better Digital CTA

One of the quickest ways to reach your conversion goals is to improve your site’s calls to actions. From buttons to links to checkboxes, we cover five simple techniques that can quickly improve your CTAs.

a detail from Takashi Murakami

Designing the Details

Our Project Manager emphasizes the importance of paying attention to details and how to communicate them clearly in order to achieve success.