Designing for Dark Mode: Key Considerations and Best Practices

Dark mode has gained popularity among users due to its aesthetic look and potential benefits for reducing eye strain for certain users. However, designing for dark mode requires careful consideration to ensure readability, accessibility, and overall positive user experience. In this article, we will explore essential factors to keep in mind when designing for dark mode and provide practical tips for creating user-friendly interfaces.

  • Consider Accessibility: When designing for dark mode, accessibility should be one of the top priorities. Ensure that the contrast between text and background is sufficiently high, particularly for users with visual impairments. By using accessible color combinations and testing your design with color contrast checkers, you can guarantee that your content remains readable and legible for all users. The are several accessibility plugins available for Figma that make it easy to test the accessibility of your design as you go.
  • Maintain Consistency: Consistency is vital to providing a seamless user experience. Regardless of the mode (light or dark), your application or website should maintain a consistent design. This allows users to easily switch between modes without confusion, creating a cohesive and intuitive interface.
  • Test in Different Lighting Conditions: Dark mode appearances can vary on different devices and under various lighting conditions. To ensure optimal legibility and usability, testing your design in different environments is essential. By doing so, you can identify any potential issues and make necessary adjustments to enhance the user experience across all scenarios.
  • Use Dark Grays, Not Blacks: Instead of using pure black (#000000) as the background color, consider using dark grays (#222222 or #333333). Pure black can be harsh on the eyes and create a high contrast that strains the user’s vision. Opting for dark grays provides a more comfortable viewing experience while still maintaining a visually appealing dark mode.
  • Incorporate Accent Colors: To maintain visual hierarchy and guide user interaction, incorporate accent colors into your design. Highlight important elements such as buttons, links, or interactive components with subtle yet distinct colors. This not only enhances the overall aesthetics but also improves usability by drawing attention to key areas.
  • Diminish Brightness: Reducing the overall brightness of UI elements, including text, icons, and images, is crucial in dark mode design. By doing so, you can alleviate eye strain and create a more comfortable viewing experience. Be mindful of balancing the contrast between elements to ensure readability and avoid overly bright or harsh visuals.
  • Consider Depth and Shadows: Utilize shadows, gradients, and depth effects to create a sense of separation and hierarchy between different UI elements. These visual cues add depth to your design, enhancing usability and creating a visually engaging experience for users in dark mode.
  • User Preference: Respecting user preferences is paramount when designing for dark mode. Consider providing users with the option to choose their preferred mode (light or dark) within your application or website. Remember their chosen mode across sessions to provide a consistent and personalized experience.
  • Test with Real Content: Designing in dark mode requires testing with real content to ensure readability, legibility, and overall aesthetic appeal. Different types of content, such as long paragraphs, headings, or data tables, may require specific adjustments. By incorporating real content during the design process, you can get to a better design interface and deliver an optimal user experience.

Conclusion: Designing for dark mode involves careful attention to accessibility, consistency, and user preferences. By considering these key factors and implementing best practices, you can create visually appealing, user-friendly interfaces that provide an excellent experience for users in dark mode. Remember to always test the usability of your designs with real users and iterate as necessary to achieve optimal readability, legibility, and aesthetic appeal.

How [ChatGPT] Would Make It Better: Instagram

The following post was written entirely by ChatGPT when we asked it to “Write a blog post on why Instagram has a bad user experience. “


Instagram has become one of the most popular social media platforms in the world, with over 1 billion monthly active users. However, despite its popularity, many users have complained about the platform’s poor user experience. In this post, we will explore some of the reasons why Instagram’s user experience is lacking and what the platform can do to improve it.

One of the biggest issues with Instagram’s user experience is the algorithm that determines which posts users see in their feeds. Unlike other social media platforms, Instagram’s algorithm prioritizes posts from accounts that users interact with frequently, rather than displaying them in chronological order. This can lead to users missing out on content from accounts that they don’t frequently engage with, but would still like to see. Additionally, the algorithm can also lead to users seeing irrelevant or low-quality content, which can be frustrating.

Another issue with Instagram’s user experience is the way it handles notifications. The platform sends notifications for all types of interactions, such as likes, comments, and direct messages, which can quickly become overwhelming for users. Additionally, Instagram’s notification settings are not as customizable as other social media platforms, making it difficult for users to control which notifications they receive.

Instagram’s Explore page, which is supposed to help users discover new content and accounts, can also be a source of frustration. The page is often filled with irrelevant content, and users have complained that it’s difficult to find content that they’re actually interested in.

Lastly, Instagram’s Direct Messaging feature can also be a source of user frustration. The feature is cluttered, and the user interface is not very intuitive. Additionally, Instagram’s DM feature does not have end-to-end encryption, which can be a concern for users who value their privacy.

In conclusion, Instagram’s user experience has a lot of room for improvement. By addressing the issues with its algorithm, notifications, Explore page, and Direct Messaging feature, the platform could provide a better experience for its users. Additionally, providing more customization options and security features would also be beneficial for users.

Note: The above post is based on the user complaints about Instagram, but it is worth noting that Instagram is always working on improving its platform and user experience, it’s just a matter of time that these issues are addressed.

How We’d Make it Better: Hatch Baby Rest

The Hatch Baby Rest is a super sleek, minimalist device with a sound machine and nightlight features. However, it’s not so easy to use.

Top UX Trends That Need To End In 2022

This is usually the time of year when we start seeing lists that attempt to predict what User Experience (UX) design trends to expect in the coming year. However, we thought it would be more useful to call attention to the trends we hope will end. It turns out, there are so many that we could probably make this post into a series (and maybe we will) but, for now, here are the ones our team came up during one of our morning stand-ups.

These trends are in no particular order, and they are a mix of both software and website trends. And, you’ll also notice that most of them have nothing to do with User Interface (UI) Design — yet all of them impact the User Experience.

Not Involving UX During UAT

User Acceptance Testing (UAT) is typically the final stage of the software development lifecycle that occurs before a product release is deployed into production. Oddly enough, even though the word “User” is in the name, this testing method rarely involves actual end-users. More often, it involves the client and/or members of the product team that test and accept the software product as if they are the end-users. This needs to end.

Agile UX Methodology

It’s probably an exercise in futility to convince product teams to involve real end-users in UAT but, at the very least, they should involve members of the UX Team because they are the ones that designed the UX. When you hire an architect to design your house, the architect will make site visits during construction to make sure the house is being built they way they design it. The same goes with software. You involve UX during UAT because they are far more likely to catch flaws and issues related to their design than anyone else.

Too often, the UX Team is only involved in the beginning of the project and then a hand-off of their designs and (maybe) front-end assets are given to the development team — at which point the UX Team’s job is done. That is, until the product is released to actual end-users and the UX Team is brought back in to fix or enhance whatever issues are found by the users. A lot of times, the flaws found by users are not major usability flaws (because those would have been identified and resolved during usability testing, right?) — but they are typically things that would have been easily caught by the UX Team if they had been involved during UAT. Some of the most common UX issues we find during UAT (when we’re involved) include:

  1. Incorrect use of CSS classes
  2. Incorrect use of UI elements or components
  3. Incorrect use of colors
  4. Incorrect use of fonts
  5. Incorrect responsive breakpoint layouts
  6. Incorrect wording in messages
  7. Display/rendering issues
  8. Missing progress indicators
  9. Missing transitions or animations
  10. Missing table listing features

 


Auto-Playing Videos

You ever visit a website to read an article and all of a sudden a video at the top or in the sidebar starts automatically playing? And, if you have your volume up, you may also be startled by the loud audio. Yeah, that needs to end. We realize there are browser settings to prevent videos from automatically playing but users shouldn’t have to do that. Videos should only play when the user chooses to play them.

In addition, we’re seeing a trend where these auto-playing videos often have very little to do with the actual article content. So now the site is not only interrupting the user from reading their content, they are doing so with a video that isn’t even related to the article content.

For example, in this Fox Business article, the video portion at the top automatically starts playing an ad (unless your browser preferences are set to prevent it) and the article headline reads “‘World’s most expensive’ ugly Christmas sweater selling for nearly $40K” but the video is about “US inflation”.

This needs to end.

 


Video-Only Content

Sometimes you just want to skim the text of an article to get the gist or you are in a place where you are unable to watch and listen to a video but you can’t do this if the article page contains nothing but a video. This needs to end.

At the very least, a video should always contain a transcription of the words used in the videos. In this example of an article about “Instagram head testifies before Congress on app’s impact on kids“, it would have been nice to give the users the option of skimming parts of the transcript if they wanted to learn more about what the Instagram CEO said to Congress.

Sure, there may be times when a simple little blurb about the contents of a video is all you need, such as this video about a woman leading police on crazy car chase across Florida golf course – but more often a text transcript or written text describing the video would also be handy.


Subscription-Only Articles

We know how a lot of magazine and newspaper websites are hurting and need to generate revenue to survive but suddenly blocking your loyal readers from accessing your content can’t be the answer. We’ve spoken to several people about this trend and everyone has stopped visiting the websites they used to frequent once they started to require subscriptions.

The most valuable thing a website can do is build a loyal base of repeat visitors. So, to suddenly block those same visitors from reading your content is like hiring a bouncer to stand outside your place of business so they can stop loyal customers from entering. Keep in mind, these websites already fill every pixel of available screen real estate with ad banners, video ads, pop-ups, and they track your every movement, download cookies to your device, and sell your activity to advertisers. In other words, the loyal website visitors are already paying a price to read a website’s content (whether they know it or not). So these websites need to figure out a better model that rewards their loyal readers and puts an end to these traffic killing subscription-only articles.

YouTube PremiumIf websites insist on having a subscription, perhaps they need to consider including an added incentive for buying a paid subscription, such as having an “Ad-Free Experience”. This would be similar to what YouTube does with its YouTube Premium subscription. If you want to experience the website without a subscription, you pay with ads and your data. If you don’t want to see ads or have your data used, pay for a premium subscription.

We’re not sure if an “Ad-Free Premium Subscription” model is the answer – but we can’t think of a worse user experience than one that blocks your users from having any experience at all.

 


Enormous Memory and CPU Hog Websites

If you go to a website and it immediately kicks on your CPU fans and brings your laptop to a crawl, the site just might be an enormous memory and CPU hog. We don’t mean to pick on RollingStone.com but take a look at the 354 MB JS heap the site requires and, if that’s not bad enough, the site also utilizes over 94% of your CPU. This is completely unacceptable.

Rollingstone.com JS heap size and CPU usage.

Rollingstone.com JS heap size and CPU usage.

 

When we ran the GTMetrix Lighthouse tool on RollingStone.com, it literally errored out before the site could even load.

Lighthouse’s explanation for the error is that:

“The page took too long to load (No CPU idle period)
This usually happens because your page is repeatedly doing something and constantly utilizing the CPU.
Lighthouse requires a period of CPU idle, meaning we must observe a brief period of no CPU activity. This is required for a page to be considered “Fully Loaded” or finished loading.

You want to make a poor user experience, crash your user’s computers or make them come to a crawl when they visit your website.

This has to end.


Mobile Designs Used On Desktops

We don’t know if this is a purposeful design decision or a sign of laziness but too many websites are starting to display mobile-friendly designs to their desktop users, which negatively impacts the user experience. These websites take the whole idea of a mobile-first approach a few steps too far. While hamburger menus may be a good solution for small screens, why would you purposefully hide your website’s primary navigation and make your users work to navigate your website? In the example below, the site not only hides the main navigation menu in a hamburger menu but it also hides the full name of the company behind the icon. Sure, minimalist web design has its place and can be effective but requiring users to work extra hard to use your website has to end.


CAPTCHAUnusable CAPTCHAs

We’ve all run into these user-hating roadblocks where you’re trying to get something done online and all-of-a-sudden you’re asked to somehow figure out what a CAPTCHA prompt is asking you to do. Hopefully, you pass the test and move on to complete what you were trying to do. However, if you get the dreaded “Please try again.” message, you run the risk of acting out online rage on your device and start screaming profanities at the website you are using.

We get the need to prevent unwanted bots from inundating websites with false form submissions but why would a business place this burden on its users? That’s having a customer come to your place of business and then making them solve The Da Vinci Code before they can start doing business with you. It’s insane and it needs to end.

 


Not Involving Users Because You Are A User

We wrote a blog post about this one called “3 Reasons Why You Should Never Design Software As If You Are The User“. The topic for the post was born from a few clients that asked us to design their software but they didn’t think we needed to involve their users in the process because they told us “I’m a user – so if I like it and I can use it, my users will too”. While it may be true that you represent the typical user of your own product, there are at least three reasons why you should never exclude your actual users in the design process.

  1. You are too close to your own product
  2. You don’t know what you don’t know
  3. Your users will thank you

This needs to end.


UI Text Written For (and by) Developers Instead of Users

How many times have you used a software product or website and were scolded by rude, accusatory bold error messages, such as “Error 403 – Forbidden“! This needs to end.

Perhaps a nicer way to inform your valuable users that the page they were trying to access isn’t available to them would be something like this instead: “Oops! We are unable to give you access to this page or document. Please contact support at support@nicemessages.com for help.” A message like this does not scold or shout at the user and the tone of the text even places the blame on itself rather than the user while also providing the user with a way to get help if it is needed.”

Also, why does the words “HTTP Error 403” need to be biggest words on the screen? Not only is the website yelling at its user, it’s also confusing them with some meaningless error code. If these codes are needed for some technical debugging purpose, why not display it as the smallest text near the bottom of the page?

In addition, far too many message pop-ups contain verbose and confusing text that force the user to stop, read and attempt to figure out what their next action should be.

Sorry software developers – but it’s really not your fault. In fact, all the developers on our staff love it when our UX staff provides them with the exact text to be used in error messages and content throughout the UI because they’d rather be coding instead of copy writing.


Out of Context “Allow” Popups

How many times have you downloaded a mobile app to your phone and the first time you open it, you get bombarded with a series of “Allow” popups to things like your Camera app, Contacts, Microphone, etc. — even though you haven’t even used any part of the app that may or may not need access to those parts of your phone. This needs to end.

Rather than bombard your users before they even use your app, app makers should consider prompting these “Allow” popups only when the user needs to use a feature of the app that needs access to a part of the phone. For example, we designed an insurance app that enabled customers to upload photos of their damaged car when submitting a claim. So rather than prompt the user as soon as they launch the app, we prompted the user only when they needed to upload a photo from the photo app. This way the user has a better understanding of why they are being asked and are therefore more likely to “Allow” access to that part of their phone.



Got some more UX Trends that you’d like to end? Tweet us: @TheUXTeam

How We’d Make It Better: Amazon Fire TV

The Amazon Fire TV user experience is a classic example of where the Visual UX is clearly not centered on the user. We make the Visual UX distinction because the Voice UX is actually pretty darn good while the Visual UX (or what you see and interact with on your TV screen) focuses far more on promoting things than on what users may actually find useful. In this blog post, we will dissect the Amazon Fire TV Visual UX and recommend ways that we would make it better.

Current Home Screen Design

The current Home screen is segmented into the following main sections:

Amazon Fire TV Home Screen

  1. Hero Promotion
    This area is nothing more than an enormous billboard carousel for promoting new or popular releases from various streaming services.
  2. Profile
    This is where you can change “Who’s watching” to someone else. One seemingly useful feature that Fire TV recently introduced is different profiles for different people that may be watching TV. The feature does enable each unique profile to customize certain options – but the options are very limited. Our hope is that this future releases will include features that most users would expect when selecting a profile.
  3. Main Menu
    This is where you can navigate to different sections of the interface, such as Home, Find, Live, Library. The center of the screen seems to be an odd location for a main menu but what makes it worse is that its size and lack of color make it barely visible – yet, it may be one of the more useful sections on the screen.
  4. My Apps
    This is a customizable list of some of the apps you have installed along with an ellipses icon on the end that links to a screen containing all your installed apps and a feature to customize the order of apps.
  5. Settings
    This is where you can access various settings (as you would expect).
  6. More Promos
    This section contains a long list of other various movies and TV series. The problem is that there appears to be no rhyme or reason as to why those specific promos are there or what even determined the order that they are displayed.

How We’d Make It Better

Better Visual Hierarchy

We totally understand how the business needs to push revenue-generating promotions but this design takes it way too far. A great design takes into consideration the overall visual hierarchy of elements on the screen and assigns a visual weight to each element that should inform the user of what is very important, somewhat important, or not really important. In the graphic below on the left, you can see how the dark grey “PROMOS” rectangles in the current layout carries an enormous amount of visual weight while the small light grey “USEFUL STUFF” rectangle carries very little weight at all. We would strike a more appropriate balance between usefulness and revenue-generating promotions because if you don’t have a useful product, you won’t have users to promote things to.

Personalized Home Screen

Since the user selected their own profile before getting to the Home screen, the user’s expectation is likely to be that the Home screen is really a personalized “My Home” screen. Given this expectation, two features that would make the Home screen a lot more useful are:

  1. Last Watched
    Often times when a user turns the TV on, they want to return to the series they were just binge-watching. Right now, there is nothing on the Home screen that makes it easy for the user to return to what they “Last Watched”. Each individual streaming service typically provides a “Keep Watching” feature once the user launches the service – so it should be possible to surface whatever show or movie the user last watched from any streaming service onto the main Fire TV Home screen. If the user finished the series or movie they last watched, then this area could be used for promotion.
  2. My Watch List
    One of the most useful features within each streaming service is the ability to add shows and movies to a Watch List so that you can easily find things you may want to watch in the future. Since this feature already exists in each streaming service, it would be handy if each show and movie on their Watch Lists could be displayed on the main Home screen. This would enable the user to jump directly into a show from the Home screen without having to first select (and remember!) the streaming service that show or movie is on.

Labeled Promotions

As we mentioned above, the promotional section at the very bottom of the screen appears to have no rhyme or reason as to why those specific promos are there or what even determined the order that they are displayed. Therefore, it would be very helpful if they categorized the promos with different label names such as “New Releases”, “Trending”, “You May Also Like”, etc. This simple labeling of the promos may actual entice the users to explore the bottom section a lot more rather than view it as just a bunch of unorganized clutter.

Suggested Redesign

The mockup below represents a starting point for a design that we would want to test with real users and then make refinements based on the results of the tests. Overall, you will see the above referenced recommendations implemented in the redesign, such as:

  1. The main menu is moved to the top, the text is more visible, and we’ve clearly marked what screen you are on with a bright yellow underline.
  2. The enormous billboard carousel is replaced with a “Last Watched” feature that displays and highlights what the user last watched so that they can quickly return to it.
  3. A “My Watch List” section has been added to the right side that surfaces selection for each streaming services Watch List (or equivalent) and they are ordered by last activity – meaning, either last watched or last added, whichever is more recent.
  4. The promotional section at the bottom is now organized into labeled sections to help entice the user to explore each section.

These recommendation only scratch the surface for what could be done to make the Amazon Fire TV UX better. In fact, this is only the Home screen! However, we think these changes would have a dramatic impact on creating a much more positive user experience.

How To Make Long Online Web Forms Suck Less (For Your Users)

We’ve all been there. We open a screen in our web browser to refinance our home, get an insurance quote, file our taxes, or anything else and the form is overwhelmingly long. We take a deep breath, sigh and trudge forward. In our heads though, we’re cursing the screen in front of us with thoughts like “I don’t f#@kin’ have time for this?!” or “This s#%t is going to take forever!”. Clearly, none of these are thoughts you should ever want your users to have.

Sometimes the data that needs to be collected in all those form fields is truly necessary – but that doesn’t mean the user experience should suffer. Luckily, there are several different things you should consider to make long online web forms suck less.

Visually Segment Sections

When a screen is just one enormous form filled with tons of form fields, users can feel overwhelmed before they even begin. One way to help alleviate this initial negative reaction, is to visually segment the screen into smaller, logical groupings. This enables users to process the screen easier in their minds and quickly get the gist of what they’re going to need to do before they begin. Part of what overwhelms users is a feeling that they may not be able to complete the form once they begin. If your users can quickly understand what they’ve being asked to do, it will build their confidence and help make them think “I got this.”

Compare the screen mockups below. Even though the screen on the right is taller/longer, it appears more manageable because you quickly get the gist of what you’ll need to do to complete the form. In fact, the card headings alone can put the user at ease because they provide context for what type of information is needed in each section, which can help make a user think “Oh, I know all this info, this should be easy.” as opposed to “Oh boy, what are they asking me for now!”.

Dynamically Displayed Fields

Often times, a lengthy form will contain “parent” and “child” fields whereby certain “child” fields only need to be displayed if the “parent” field is completed a certain way. If this is the case with your form, consider developing the form so that it dynamically displays the “child” field if/when the “parent” field is completed. One of the simplest examples is a “Yes/No” checkbox. If the user clicks the “Yes” checkbox, only then should you display the “If yes,…” child fields associated with that parent checkbox. More complex examples may include developing logic whereby a combination of different answers drive the display of certain additional fields. Either way, by eliminating the initial display of the child fields, you greatly reduce the overall volume of fields and noise on the screen.

Dynamically Displayed Form Fields

Accordions

If certain fields in your form are only needed in certain cases, consider moving those fields into a collapsed accordion that can be expanded only if/when the users needs to complete those fields. By moving those fields into a collapsed accordion, you greatly reduce the initial clutter of the screen and make the form appear easier and faster to complete.

Modal and Fly-In Windows

Often times, a large form may contain form fields that are only needed when the user needs to add a new item or record to the form. Other times, there may be a need to display detailed data about something in a form. In these cases, it may make sense to implement modal popups or fly-in windows that are displayed only when the user takes an action. For example, if the user needs to add vehicle information to a form, consider displaying the vehicle information fields in a modal or fly-in rather than displaying all of the vehicle fields in the main form. In addition, the main form screen may contain a table listing of vehicles but only certain column headers are needed to help distinguish one vehicle from another while all other details can be displayed in the modal or fly-in.

Question Consolidation

Forms that contain a series of questions requiring a “Yes” or “No” answer don’t always need to be displayed as individual questions with their own “Yes” or “No” checkboxes. Instead, consider whether the question section can be consolidated into a single question with a single “Yes” or “No” checkbox or toggle. For example: “Are any of the following questions true?” This enables the user to quickly scan the questions and take a single action to answer all of them.

Wizards

Step-by-step wizards may seem like an old school method to break up a lengthy form field but they can still be an effective way to segment large chunks of related fields and create a positive sense of progress as the user moves through each step of the wizard. In addition, a good wizard will display the number of steps to inform the user of not only how many steps they will need to complete but also which step they are currently on and steps they’ve already completed. A huge factor in creating a positive user experience is to give the user a sense that they are making progress towards the finish line.

 

In Conclusion

Making long forms suck less is often about making a lot of micro design decisions and optimizations that add up to a much better user experience. So put the time in to “trim the fat” on your forms so that the result is a positive user experience — rather than a verbally abusive experience.

“Usability Testing” Continues To Be Confused With “User Feedback” and Other “Testing”

In 2013, I wrote a blog post called “Focus Groups Vs Usability Testing“. Eight years later, the confusion only seems to have gotten worse. Not only do people confuse Focus Groups with Usability Testing but many also confuse User Feedback and even QA Testing with Usability Testing.

In the early stages of a client engagement, we often ask if any usability tests have been performed on the software product we’re being asked to redesign. Sometimes we get responses such as “Sure, our tech support team gets feedback from our customers all the time.” or “Yes, our marketing agency tested the product with focus groups.” or “Our team of testers test every build before each product release.” Unfortunately, none of these are usability tests.

How User Feedback is not Usability Testing

Getting user feedback is great but it often comes in the form of a compliment or a complaint. While this is certainly useful, there may be many other opportunities for improvements that usability testing can reveal. In addition, we’ve also seen many instances where the users may be internal employees who are cautious about complaining about a product because they either don’t want to seem like a complainer or they’re afraid to insult someone in a higher position. This is why we encourage our clients to allow us to perform both user shadowing and usability tests without anyone else involved. Sure, we’ll record sessions so the client can playback a video of exactly what we observed but, when a user knows they’re being observed by an audience, they simply behave differently.

The other issue with getting user feedback is that it is often gathered by asking for the feedback, usually in the form of a survey or a user feedback form. Unfortunately, when you ask someone “What do you think of this?” you may as well be asking them to “Find something wrong with this.” In other words, the user feels they are being tested — not the product design — and they think have to find something wrong otherwise they’ll fail the test. In usability testing, we stress how we are testing the product’s design – not the users – so there is nothing they can do “wrong”. This simple statement that is said to the user prior to testing, helps the user relax, focus on the tasks they’re being asked to perform, and behave much more naturally.

How QA and UAT Testing is not Usability Testing

There have also been times when we’ve asked about usability testing and we’re told how the product has been thoroughly tested and is fully functional and bug-free. In other words, they hear the word “usability” and they think “functionality”. However, a product can be fully functional while also being nearly impossible to use. In Don Norman’s book, The Design of Everyday Things, he discusses how there’s an epidemic of poor door designs, which has now been coined as “Norman Doors” (see video below). In one example, the doors are fully functional but because of the poor design, numerous people were getting stuck between two sets of doorways. The point is, you can have a fully “functional” product that is nearly “unusable”.

How to overcome the confusion

The solution to the confusion we continue to see regarding usability testing is for those of us in the User Experience profession to do a better job at explaining and educating people on what it is, what it is not, and why it is so valuable. Much the way we UXers try not to blame the users for not understanding how to use a product, we shouldn’t blame non-UXers for not understanding what usability testing is. We need to do our best to get on our soapboxes and teach the masses. In fact, you do your part by sharing this post!

 

Why The Google Places API Search Failed Our Usability Tests

Whenever we perform usability tests, we inevitably discover something we didn’t expect — which is exactly why we test. In this case, we were designing a quoting system for insurance agents and the primary success criteria for the project was to “increase quote submissions by making the quoting process dramatically faster and easier for the agents”. When it comes to streamlining any complex process, it’s usually a lot of little tweaks that add up to significant time savings. For this quoting system, one of those things was the “Business Name” field. During our user shadowing sessions with the users, we observed how laborious and error-prone it was for users to enter the business name every time they created a quote. So, we suggested implementing the Google Places API Search, on the Google Maps Platform, which we’ve used on many other applications before with great success.

For this application, our stated hypothesis for using Places API was this:

“We believe that by replacing the text input field with the Google Places API search feature, we will optimize the overall efficiency of this required field for the following reasons:

  1. Redundant data entry will be reduced because the user can select a business from the results set after typing just a few characters
  2. User input errors will be reduced because the users will select a business from the search results
  3. Data quality and data mining capabilities will improve because businesses are motivated to keep their Google listings up-to-date because so many customers use Google
  4. Google’s Instant Autocomplete functionality is familiar to most users because of Google’s widespread usage and adoption”

Google’s ‘Familiar’ Instant Autocomplete Results

Since its official launch in 2008, most people have grown very familiar with how Google’s Instant Autocomplete search results work. You start typing something in and Google immediately starts to show you matching results that you can select. With Google’s Place’s API (shown to the right), a user begins to type a business name and Google immediately starts to display matching business names that are closest to the user’s location and they have the option of either selecting from the Instant Autocomplete results or selecting the option to create a new business listing.

The Surprise

In our initial usability tests, not a single agent selected a business from Google’s Instant Autocomplete results that displayed right in front of them as they typed. Instead, every one of them either typed the full business name or they copied and pasted the business name into the field from another data source. To be clear, we are not saying that Google’s Instant Autocomplete results are poorly designed, we are saying that when we implemented the feature in the redesign of an insurance quoting system, this ‘familiar’ feature was not used by agents as we expected it to be used. In fact, we were so baffled by the failed test results that we decided to test it again with non-agents just to see if we could narrow down the root cause of the failed test. As we suspected (and hoped), all non-agents selected from the search results rather than type the full business name or copy and paste it into the field. 

The Lessons Learned

So why did such as familiar feature fail our usability test? We believe the primary reason was “Learned Behavior”. The agents we tested all use many different insurance quoting systems and not one of them uses Instant Autocomplete results for the Business Name field. Instead, as flawed as it may seem, they all use a simple free-form text entry field that requires the users to type in the full business name. So, the users are simply used to typing the full business name instead of selecting it because within the context of an insurance quoting system, that’s what they’ve always done.

The Solution

So how do we change the way the agents see this Business Name field so that they use it more as a search box instead of a text entry field? We took a page from the CueActionRewards (CAR) Model in Behavioral Design, which is a proven design framework for inducing user habits.

How the Cue-Action-Reward (CAR) Model has been used to induce habits.

Source: The book “Human Behavior is Programmable”

In the case of this one Business Name field, we needed to make it visually obvious (Cues) that the results were ‘selectable’ so that it encouraged users to click (Action) a result because it would mean less typing, less errors, and it would provide an opportunity to pre-fill a lot of data within the quoting system based on the the unique ID of the selected business (Reward!).


Here’s what we did:

    • Added the word “Search” to the field label name and added a search icon as Cues to get agents to use this field as a search box rather than a text entry field.
    • Added the “Select a Matching Business” (Cue) to encourage a selection (Action) from the results set.
    • Added radio buttons (Cue) to the results to further encourage a selection (Action).
    • Colored the business names in the results set blue (Cue) to help indicate that they are clickable.
    • The Reward is then fulfilled by typing less and on the next screen a message informs the user that data was automatically pre-filled for the selected business, which we hope will encourage a repeat of the same use then next time the agents uses the Business Name field.

All This For a Single Form Field?

Yes. In order to “increase quote submissions by making the quoting process dramatically faster and easier for the agents” we needed to get this first form field right.

But First, Prototype – Correcting Mistakes Before They’re Made

Source: quotesondesign.com

Sometimes ideas sound great in theory, but don’t work well in practice. That’s why prototyping with actual users is essential. We usually think of prototyping in terms of software, but it has real world applications, too.

Read more

Sometimes, To See “The Big Picture”, You Need To Draw A Big Picture

To truly understand and design the best possible information architecture for an application or website, find the biggest whiteboard in your office and start drawing.

Read more