If you’re using a bright and saturated color for your background, you’re making it hard for users to keep their eyes on your page. Bright, saturated colors attract the most user attention. Too much of it in a large area overstimulates the retinas which can strain the eyes.

For example, stare at the color swatches in the image above. The left column consists of colors with maximum brightness and saturation. The right column consists of colors with 80% brightness and saturation. Your tolerance for staring at the left column will be lower than the right because the bright, saturated colors are harsh on your eyes.

Brightness Vs. Saturation

Brightness and saturation are different color properties. The former refers to how much white or black is mixed in a color while the latter refers to the amount of gray in a color.

Increasing brightness is not the same as decreasing saturation. When you decrease saturation, you turn the color into a shade of gray. When you increase brightness you turn the color lighter but without making it gray (source).

Effect of Color on Attention and Arousal

A study, “Effects of hue, saturation and brightness”, discovered that colors with high saturation and brightness attract the most attention. It concluded that these color properties are more important in attracting attention than hue.

Reserve Bright, Saturated Colors for Buttons

A bright, saturated background color will draw user attention, but it won’t hold it. Using them is like screaming at users when they’re in front of you. You’ll get their attention, but they’ll soon look away because you’re jarring them.

You should only use them on interface elements that demand user action such as buttons. The color will draw attention to those elements and make them easy to find when users are ready to act.

Use Darker, Less Saturated Colors for Backgrounds

It’s better to make your background color darker and less saturated. Darkening the color decreases the white in it while desaturating the color increases the gray in it. This tempers the color intensity it has on the eyes.

Not only that, but it won’t compete with page text or content for attention. This allows the user to read the page easier without visual distraction.

Finding Optimal Background Colors

There are many brightness to saturation ratios you can use for your background. Creating a color properties grid can help you find an optimal background color for your interface.

Start by creating a square swatch with your design tool. Pick a hue using the color picker and set it to the maximum brightness and saturation level. This hue will remain a constant as you adjust its brightness and saturation levels.

Create four new swatches with lower levels of saturation and brightness using the same hue. Reduce the saturation for two swatches and the brightness for the other two. Use multiples of 10 and spread out the levels so you have a wide range. Label each swatch with its saturation/brightness ratio.

Place the saturation swatches to the left of the hue swatch and order it from lowest to highest saturation. Then place the brightness swatches to the right of the hue swatch and order it from highest to lowest brightness.

These colors are not optimal yet because they still have a 100% brightness or saturation level. Instead, they’ll serve as the baseline for finding more optimal colors.

Create a second tier of swatches by reducing the brightness and saturation of the swatches in the first tier. Reduce the levels the same amount for each set of swatches so that none of the second tier colors have a 100% saturation or brightness level.

You can explore even more colors if you’re not satisfied with the second tier. Reduce the levels again to create a third tier of colors. Now you have a palette of eight optimal colors with different brightness and saturation ratios to choose from.

Examples of Good Vs. Bad Backgrounds

Below are examples of homepage backgrounds that strain the eyes compared with ones that soothe the eyes. Notice how long you’re able to fixate on the good pages versus the bad ones.

Aesthetics & Usability

Next time, before you settle on a background color, think about how that color will feel on the user’s eyes. Are your brightness and saturation levels optimized? Are users able to read the text with ease?

Color influences the aesthetics of a design, but it also influences the usability of it. Designers need to pay attention to both and make them work in tandem to please the eyes. You don’t have to sacrifice usability for aesthetics when you can have both to create a great interface.

]]>http://uxmovement.com/content/why-you-shouldnt-use-bright-saturated-colors-for-backgrounds/feed/0http://uxmovement.com/content/why-you-shouldnt-use-bright-saturated-colors-for-backgrounds/Why You Should Never Use Pure Black for Text or Backgroundshttp://feedproxy.google.com/~r/uxmovement/~3/MJElhmEPQRA/
http://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/#commentsTue, 08 May 2018 16:05:25 +0000http://uxmovement.com/?p=9121Did you know you’re committing a sin of readability if you use pure black on your designs?

A survey found “58 percent of adults in the U.S.” have experienced eye strain from working on computers. Designers can do their part to reduce the likelihood of eye strain on their designs by paying attention to the color of black they use.

Pure Black Text & Backgrounds

Pure black text and backgrounds with white can cause discomfort for the eye when users read the text over an extended period of time, leading to eye strain.

White has 100% color brightness and black has 0% color brightness. Such a big contrast in color brightness leads to a disparity in the light levels users see. This causes their eyes to work harder to adapt to the brightness when they read.

An example that illustrates this concept is when we turn on a bright light in a dark room. Such a drastic change in light conditions is harsh to our eyes. But if we turn on a dim light in a dark room, our eyes adapt to the change easier because our retina isn’t overstimulated by such a sharp increase in contrast.

Instead of black, use dark gray text on a white background so the change in brightness will not be as drastic. This prevents overstimulating the retina and allows users to be able to read for a longer period of time.

Dark gray can have different brightnesses. To find the brightness that works for your text, survey your users to see which one they most prefer.

High Contrast for Accessibility

Black isn’t bad for all users. Low vision users, who are sight impaired but not blind, tend to read text better on high contrast modes. When designing for them, you may need to use black for accessibility settings on your interface. Dark gray should still be used for normal users.

Balanced Contrast for Readability

High color contrast is good for readability. Too high of a color contrast, however, creates a great disparity in light levels that affect the user’s eyes when they read. A balance of contrast between the text and the background color is a good way to make your text safe for the user’s eyes.

If you’re unsure about your color contrast, you can use a color contrast checker to find an optimal range that works for you. It indicates when your color contrast is too low based on the WCAG 2.0 industry standards. However, it doesn’t indicate when your color contrast is too high. That decision is left for the designer’s careful eye to decide.

Text color isn’t limited to black and white, but it’s the most common color combination for text. Before designers use it they need to think about how it affects the user’s eyes. Designing to reduce the pain of eye strain means users can spend more time reading and enjoying the text on your interface.

]]>http://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/feed/12http://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/Why You Should Never Center or Right Align Your Logohttp://feedproxy.google.com/~r/uxmovement/~3/X-eA6K-nhZg/
http://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo/#commentsTue, 01 May 2018 15:18:17 +0000http://uxmovement.com/?p=10925Many designers assume that center or right aligning their website logo will make their brand more memorable. Research has shown this assumption is not true at all.

In fact, straying from a left aligned logo can make your brand less memorable and even your site harder to navigate.

Right Aligned Logos Weaken Brand Recall

A study conducted by the Nielsen Norman group concluded that more users remember brands when their logos are placed on the left rather than on the right. They found the “average lift in brand recall was 89%” when the logo is on the left.

When users scan sites, their visual gaze leans toward the left. A logo placed on the right will get fewer visual gazes, which results in weaker brand recall. Placing your logo on the left gives it more visual gazes, which allows more users to remember your brand.

Centered Logos Impede Navigation to Homepage

The Nielson Norman group also did a study on center aligned logos. They did not find a stronger brand recall with center aligned logos more than left aligned logos. Other design factors such as logo contrast and legibility have more of an affect on brand recall.

Not only that, but they also impede the user’s ability to navigate to the homepage. The results showed users are “six times as likely” to fail to navigate to the homepage in a single click when the logo is centered compared to left aligned.

Users have a conditioned habit of clicking the leftmost element to get to the homepage. If that element is not the logo, they’ll click whatever link is there. This navigation error can send users on a journey through several wrong pages before they find their way home.

One way to prevent this navigation error is to place a “Home” link on the far left side of your navigation bar. When users gaze left to navigate to the homepage they’ll spot the link, and click correctly on the first try.

Left Aligned Logos Work Best

If brand recall and homepage navigation are important to you, follow the convention of left aligning your logo. Users scan pages starting from the top left corner going left to right down the page. This means users will gaze more on a left aligned logo than a centered or right aligned one.

The more visual gazes your logo gets, the easier it is for users to recall your brand. Placing your logo on the left also reinforces the user’s habit for clicking the leftmost element to get to the homepage.

Cultural Differences

Most languages in the world use left to right scripts, but there are a few that use right to left scripts. This could mean right aligned logos on sites with right to left scripts (e.g. Hebrew, Arabic, Persian, Urdu) may be better for brand recall and homepage navigation.

The research presented did not test this theory, but future studies should. Regardless, it’s a good practice to align your logo on the side where user gaze leans.

Following Conventions

Your logo has a major impact on a user’s first impression. If it isn’t memorable, users are less likely to revisit your site. The logo alignment on your header plays a key role in determining brand recall.

Left alignment for logos is a convention users expect and are most familiar with. Straying away from it won’t make your brand more memorable.

User gazing and navigation habits should dictate where you place your logo. Following this logo convention, not violating it, is the best way for a brand to stand out.

]]>http://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo/feed/11http://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo/The Best Place for Error Messages on Formshttp://feedproxy.google.com/~r/uxmovement/~3/DClFCn2AQlw/
http://uxmovement.com/forms/the-best-place-for-error-messages-on-forms/#commentsTue, 24 Apr 2018 14:35:08 +0000http://uxmovement.com/?p=10902Where are you placing the error messages on your form? If they’re not placed where users expect to see them, you could jeopardize their capability to complete your form.

When users make mistakes, they need to understand what those mistakes are so they can correct them and re-submit the form. They want to complete your form, but if doing so takes too much effort they’ll change their minds.

Top of Form Validation Vs. Inline Validation

The two most common placements for error messages are at the top of the form and inline with erroneous fields. Which placement is more intuitive for users?

A research study discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. This forces users to recall each error message for each erroneous field.

The approach that reduced the user’s cognitive load was displaying error messages inline with erroneous fields. Inline validation relies on recognition instead of recall so users can correct their mistakes faster and easier.

Another study found that “the distance between the erroneous field and error message influences the efficiency of error correction”. Top of form and bottom of form validation resulted in the longest amount of time to initiate correction, while inline validation resulted in the shortest.

Top of form and bottom of form validation also resulted in the highest error rates, longest completion times, and the least user satisfaction. Bottom of form validation had the lowest error correction success rate compared to top of form and all inline validation locations.

User Preference of Error Message Locations

The study proved placing error messages inline with the erroneous fields lead to the best performance. It also showed which location next to the field was the most intuitive.

Users rated which error message location they found most satisfying. There was a strong user preference and expectation for right of the field placement.

Error messages placed to the left of the field were rated the worst. Error messages placed above the field caused the highest cognitive load followed by error messages below the field.

Why Right of the Field Is Best

It’s important to understand why placing error messages to the right of field is preferred and expected. This way designers can better educate others about how users behave when making design decisions.

The western reading system goes from left to right. When users move their eyes from the input to the error message, it feels like a natural progression that requires little mental and visual effort. Moving their eyes from the error message back to input for correction also follows the natural flow for rereading text.

Why Left of the Field Is Worst

Placing error messages to the left of the field goes against the western reading system. Users move their eyes in the opposite direction of their natural reading flow when the error message appears. Instead of a natural progression, it feels unnatural and is suboptimal when users want to complete the form.

It also feels counter-intuitive because users expect higher priority elements to be on the left side. Placing the error message on the left makes it more important than the field. But the field is more important because users need to focus on it to correct their input.

Why Above the Field Increases Cognitive Load

Users experience a higher cognitive load with error messages above the field (i.e. forms with top aligned labels). This is caused by a combination of the error message and field label text that confuses users.

The close proximity of the two texts creates visual noise that distracts users when they’re trying to read the error message or the label. Seeing both texts in their field of vision makes it difficult to concentrate on just one of them and can confuse them.

Best Error Message Location for Mobile Forms

Mobile screens lack the horizontal space to display an error message and field side by side. This means error messages to the right of the field is not the best location on mobile forms.

Instead, place your error messages below the field. This was users second most preferred location in the study. Although it doesn’t correspond with the user’s natural left to right reading flow, it does correspond with their natural top to bottom reading flow.

When users read text, they move their eyes left to right going down a page. Error messages below the field feel less awkward than above the field because it follows their vertical reading progression.

Placing the error message too close to the field label below it can increase cognitive load when users read the text. You can prevent this by separating them with enough spacing.

Right of Field Vs. Below Field: Which Is Best?

Both to the right of the field and below the field are optimal locations for error messages. But which placement should you use? This depends on how much work you’re able to do.

If you want the placement that takes less time to implement for desktop and mobile devices, opt for error messages below the field. Implementing them for desktops will make them usable for mobile devices as well.

If you have time to implement error messages for both devices, opt for placing them to the right of the field on desktop and below the field for mobile devices. Not only will error messages to the right aid user scanning better, but it also results in a shorter form length.

Intuitive Error Message Placement

Follow these practices and place your error messages where users expect to see them. Error messages should correspond with user reading flow, so errors take less cognitive effort to correct.

When users work and think less, they’re able to complete your form faster. No one enjoys filling out forms. The faster you help users get through it, the sooner they can move on to what they really want to do.

]]>http://uxmovement.com/forms/the-best-place-for-error-messages-on-forms/feed/10http://uxmovement.com/forms/the-best-place-for-error-messages-on-forms/Why Users Make More Errors with Instant Inline Validationhttp://feedproxy.google.com/~r/uxmovement/~3/dhrBZdqM4Gw/
http://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/#commentsMon, 16 Apr 2018 19:51:42 +0000http://uxmovement.com/?p=10881Designers who use instant inline validation are slowing users down from completing the form.

Inline validation displays error messages inline with its offending field. When this is done before users submit the form, it causes them to make more errors and takes them longer to complete the form.

Validating Fields Before Submission

Two research studies, one with 77 participants and the other with 90 participants, concluded that users made significantly more errors completing a form if error messages were presented the moment a user filled out and left an erroneous field.

Even though users had the chance to correct their errors immediately, they ignored the error messages. Users continued to fill out the form and encountered more error messages when they submitted the form. Error messages presented pre-submission frustrated users in the study.

This finding proves that validating fields before submission causes users to make more errors, and more errors leads to user frustration. It’s more favorable to have a low error rate on your form, so users don’t spend a long time to complete it. The slower it takes to complete the form the more frustrated they’ll get, which can lead them to abandon the form.

Validating Fields After Submission

In contrast, the study discovered that users made fewer errors when error messages were presented after they pressed the submit button.

This finding can be explained by understanding the different modes users enter when completing a form. Users enter completion mode when they initiate a form. They’re focused on filling out each field regardless of making mistakes. After filling out each field, they switch to revision mode and are then focused on correcting errors.

Switching attention back and forth from completion to revision mode interrupts and splits the user’s focus of attention. A split and interrupted focus cause users to think more and make more errors leading to longer completion times.

Users prefer to focus on one task mode at a time because it allows them to complete the form faster. Attention to one task mode impairs their attention to the other task mode. When their full attention is focused only on completion or revision, they have more mental resources they can commit to that task mode.

Change Blindness

Validation pre-submission can cause change blindness in users. Users tend to ignore error messages when they’re in completion mode. When they do this and press the submit button, any new error messages that appear will likely be missed. It’s harder for users to detect a visual change to the form when it’s already populated with error messages.

Validation post submission prevents change blindness because users progress from an errorless form to a form with errors. This gives users a prominent visual change that indicates their submission attempt was performed.

Exceptional Fields to the Rule

Inline validation post submission isn’t suitable for every type of field. Username and password fields need to be validated pre-submission because they have the strictest input requirements. If these fields were validated post submission, it would take users an excessive amount of submissions to enter a valid input.

Users often choose usernames that are already claimed by other users. Finding an available username would require multiple input attempts.

Password fields have many character rules for user security. Meeting each character rule would also require multiple input attempts.

Inline validation pre-submission is not only for the username and password field, but any field with the strictest input requirements.

Validate Fields After Users Submit the Form

Inline validation post submission minimizes completion times, form errors, and user frustration. Designers need to stop validating fields before the user submits the form if they want to improve these metrics.

Validating fields after form submission matches the mental model of how users fill out forms. Users want to complete the form as quick as possible and will behave in ways that allow them to do so. Make sure you’re validating your fields when users are in revision mode, not completion mode, otherwise you’ll slow them down.