UX Do’s and Don’ts

Make Repetitive or Frequent Activities Feel Effortless

Repetitive actions – like having to fill out the same information twice on a form or forms that aren’t submitting properly – can discourage a user or incentivize them to seek out a competitor. For the sake of UX, keep all signup flow or checkout steps to a minimum and as straightforward as possible. Reducing these hurdles will prevent drop off from users who are less committed to the process, and won’t do it twice to complete the checkout.

Users Must Easily Be Able to Recover from Errors

Oftentimes, we as users click the wrong thing or make a mistake. The worst thing that can happen is that we have to start from scratch without the ability to easily correct course. Have forms store information from different steps so information can be changed along the way without losing progress.

Build for All Users

All users – novice to expert – should have a smooth onboarding/learning experience with an app or site. If users are new, provide tool tips or a welcome walk-through. However, if users are more familiar with a product, they should have tools available to make their experience faster (ie.hotkeys/shortcuts)

Limit Your Palette

Combining too many colours makes it difficult for any single colour to be prominent. Without clear contrast or prominence, it’s difficult to make your main CTAs (calls to action) visually distinct from everything else. Limit your palette to and make your accent colour a contrasting hue and value that is bright enough to be eye catching. Users can only do what you show them to, so be sure that you are leading the way effectively.

Colour Should Not Be the Sole Conveyor of Information or Functionality

Colour blindness (colour vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. http://www.colourblindawareness.org/colour-blindness/
As such, having certain colours denoting functionality without any other indicator could leave 4.5% of the population unable to use your site or services.

Using services like colorfilter.wickline.org can help you test your colour scheme for those with colour blindness. But be sure to add other indicators for the sake of clarity. For example, use value contrast for buttons instead of only hue and use text to indicate status instead of solely colour.

Visual Hierarchy Directs Users to the Required Action

Clear hierarchy within a page creates an easily scannable, digestible page. By organizing your pages in ways that are easily absorbed, you user can better determine the next required action. Try a squint test (literally sit back and squint your eyes) to see if your most important elements are prominent when the screen is blurry/out of focus.

Typography

Like palette, limit your fonts. Sometimes it’s possible to pull off several different fonts, but it can also make a mess of your hierarchy. Use caution and stick with 1 or 2 fonts for the sake of comprehension, scanning and usability. Keep font size 12, or close to it for the sake of legibility. Generally, readability is greatly reduced in sizes below 12. For blogs, increase font size considerably more.

Ensure That UI Elements Follow Conventions and Patterns

Users come with a set of expectations from previous experiences using other digital products – what buttons look like, what icons generally mean, how links behave, etc – be versed in these patterns and read up on UI guidelines to ensure you aren’t needlessly complicating matters by trying to speak to your users in a different visual language than they are used to. For more on this subject, see User Interface Best Practices.

Feedback

Feedback mechanisms that confirm gestures were successful or not are one of the most important things to consider for a user’s experience. For example, after submitting a form a confirmation message must appear to confirm that the action was completed successfully, or progress bars or indicators must be provided to inform the user that they can expect a result. Otherwise, users can get lost, be confused or unsure and abort the task.

Alert Messages Should Be Consistent And Visually Distinct

Make sure alerts are clearly differentiated from other screen elements, so a user can notice and act on alerts. Without proper notification, users can miss important information or be unable to perform tasks properly. This problem can, in extreme cases and particularly in the medical or aviation industries be extremely dangerous. Bad UI has even claimed lives. For more on this see: How bad UX killed Jenny, How to Kill Patients Through Bad Design, and how Poor UI Design Can Kill.

Consistent Navigation

The way users orient themselves and navigate through your product directly impacts a user’s ability to complete desired tasks and goals. Make sure that navigation is reachable and consistent on every page. Well organized websites mean your product is intuitive and effortless to navigate, but also may be seen as more credible too.

Progress Indication for Multi-Step Workflows

Users can easily start to feel overwhelmed or scared off by processes unless they know how long they can expect it to be. A progress indicator can help the user locate themselves in the process and reduce drop off rates.