20+ Tips For Good UI/UX Design

DRKMTTR Creative > Design  > User Experience  > 20+ Tips For Good UI/UX Design

20+ Tips For Good UI/UX Design

During the design process, design flaws in your product can (and will) go unnoticed — especially if you have developers that are doing the design work instead of, you know, actual designers. Those little (or sometimes big) things can do a lot to hurt the experience that the user has while using your product, whether that is a website, app, or other piece of software. If this sounds like your team, you should pay attention to this list of checkpoints before signing off on the design.

Please note that not all of these points apply to all products, but generally these are the ones that are most relevant. User Experience is an entire field of study in and of itself, and this guide should only act as a cursory overview of some of the key points relevant to software design.

If you have questions about your product and are seeking a User Experience or Interface consultation, don’t hesitate to pick up the phone and give us a call at (239) 314-6596 or drop us a line at contact@drkmttr.net.

Interaction Design

01 – Repetitive actions or frequent activities should be effortless

Why it matters: Repetitive actions for the same input or output (for example, filling different forms with the same information) is a strenuous task that doesn’t help the user achieve his or her goals faster or better. The user is likely to also try to find a way around it, the worst case scenario being that they simply start looking for competitors who can help them do it faster or better.

How to test it: You should start by analyzing all of your product’s flows and observing your user’s behavior. You want to make sure that, if repetitive actions are present, there is a way of facilitating them: for example, an option to use previously entered information. This is  commonly seen in ecommerce when selecting your shipping address; most stores will allow you to check a box to copy your billing address fields into your shipping address fields, saving you the hassle of retyping everything a second time.

02 – Users can easily recover from errors

Why it matters: Oftentimes users perform unintended actions or actions that didn’t lead to desired results. Allowing them to go back and try again means they won’t be frustrated and will recover easily and keep moving on with the matural flow of their experience.

How to test it: First, make sure that your navigation system allows for going back and that actions are.able to be undone. Then, when conducting usability testing, create scenarios where the user will most likely perform the wrong action and check if s/he can easily recover.

03 – Users are adequately supported according to their level of expertise

Why it matters: It’s important to make sure that novice users in your product have a smooth learning experience. However, once they are already familiar with the product, that should give place to tools that help him/her move faster through the flows. Both scenarios improve usability and retention, and ideally there should be a mechanism in place to help familiar users quickly receive help or tips on how to use a specific tool or complete a specific task (see the next point in this list). For example, shortcuts for expert users, tool tips for novice users, etc.

How to test it: First, check if you have tools for both audiences. Then, conduct usability tests with novice and expert users to see if these tools are being used properly.

04 – Accessing help does not impede user progress

Why it matters: Users ask for help whenever they are stuck in a certain part of your product. It is important for help – online or offline – to be as unobtrusive as possible and allow the user to resume work where they left off. Remember, even users that are familiar with a certain process or workflow may need reminders from time to time, so it’s important to allow them to return to their flow at the same speed they were working at before hitting their roadblock.

How to test it: Create test scenarios where users will ask for help, and see whether their work flows and progress are interrupted.

Visual Design

05 – No more than three primary colors

Why it matters: This isn’t a fixed rule – and sometimes, for specific cases, more than three primary colors can be used. Keep in mind, though, that combining three colors is typically already difficult enough as it is, so for most cases any more than that should definitely be avoided.

How to test it: Make sure that the color palette you used when designing the product has no more than three primary colors.

06 – Color alone is not used to convey hierarchy, content or functionality

Why it matters: Having a product that is accessible is not a plus – it’s a must. For people with visual disabilities, such as color blindness, relying solely on color to convey hierarchy, content or functionality means they will not be able to use your product and will be an excluded demographic.

How to test it: colorfilter.wickline.org will let you put a color filter on top of your webpage and test it for different kinds of color blindnesses. You can also screen-capture your product and convert that to grayscale on an image editor and see if you can tell colors apart easily.

07 – Visual hierarchy directs the user to the required action

Why it matters: Users rely on the product’s hierarchy and clues to know what to do and where to go – it is essential to understand this and properly guide them using that hierarchy.

How to test it: Understand how the flows inside your product work and whether its key actions are being incentivized by visual hierarchy.

08 – Items on top of the visual hierarchy are the most important

Why it matters: Visual hierarchy allows users to quickly scan information, prioritizing content based on their immediate needs. Items near the top of the visual hierarchy must be most important to the business and most relevant for users.

How to test it: Screen-capture your digital product, then Gaussian blurring that screenshot to a radius of around 5px. When looking at the result, you’ll instantly visualize the hierarchy and notice which elements stand out. Are those the most important for the business and user?

09 – Primary action is visually distinct from secondary actions

Why it matters: Having distinct primary and secondary actions means the user won’t be confused when interacting with your product and will be less prone to making mistakes. For example, “Submit” and “Cancel” must be clearly distinct.

How to test it: When conducting usability testing, observe for common errors that result not from the user’s intent, but from poorly distinct primary and secondary actions. Also, when reviewing the design, make sure that color, size, positioning and other elements differentiate the actions.

10 – Interactive elements are not abstracted

Why it matters: When using a new product, users come with a set of expectations built from his/her previous experience using other digital products – for example, what buttons should look like and and how they should work. Fulfilling those expectations means you aren’t creating unnecessary friction.

How to test it: First, review your product looking for areas where common patterns are not used. For example, links that don’t look like links.

11 – Form submission is confirmed in a visually distinct manner

Why it matters: It is essential to give the user confirmation of whether an action was successfully performed or not. For example, after submitting a form, a clear confirmation message in the form of a color banner will mean that the user can move on to the next task.

How to test it: Check all areas of your product where the user inputs information. After user input is complete, trigger a confirmation regarding whether that action was successful or not. Make sure the feedback is crystal clear regarding the end status.

12 – Alert messages are consistent

What it is: Alert messages have the same visual style and appear in the same location in the same manner.

Why it matters: Having consistent alert messages means the user will always understand what immediately deserves attention. Not being consistent with the alerts would mean extra mental load every time a new alert pops up.

How to test it: Ensure alert messages have the same visual style and their positioning is similar or identical.

13 – Alert messages are visually distinct

Why it matters: By making sure that alert messages are clearly differentiated from other screen elements, the user can actually notice and/or act on them.

How to test it: After checking for visual differentiation yourself, see how users react to the alert messages in usability testing.

Information Architecture

14 – Navigation is consistent

Why it matters: The way users orient and then navigate through your product directly influences whether they can complete his/her goals regardless of their current page.

How to test it: Check your information architecture documentation and make sure that navigation is reachable on every page and that it doesn’t change or disappear. Before diving into visual design, try card sorting or tree testing to ensure your information architecture pathways are as intuitive as possible.

15 – Room for growth

Why it matters: You can’t redesign a product’s navigation and information system every time new features or content arises. Navigation menus and the overall layout needs to support more categories/topics without breaking. Designing with room for growth means that major design and development efforts scale easily across the interface.

How to test it: Ask all stakeholders about how content might grow over time in the product. Will you support more static content? Will the architecture need to support videos?

Typography

16 – No more than two distinct type families are used

Why it matters: This isn’t a fixed rule: sometimes it’s possible to pull off more than two. But generally speaking, matching more than two is not an easy job. For usability and visual purposes, sticking to two simplifies your typographic hierarchy, which improves comprehension.

How to test it: Just make sure that your design isn’t mixing more than two type families. You should also make sure that the families you chose are properly matched (learn more here).

17 – Fonts used for text content are at least 12px in size

Why it matters: Again, it’s not a fixed rule – you could in theory use smaller sizes for very specific purposes – but generally speaking readability is severely reduced for sizes below 12 pixels.

How to test it: Check all your content and make sure that the fonts used for them are sized at at least 12 pixels.

18 – Reserve uppercase words for labels, headers, or acronyms

Why it matters: Limiting the use of uppercase words is known to facilitate understanding – it is less visually heavy and easier for the user to digest. It should be used specifically for emphasis or very restricted cases – acronyms, for example.

How to test it: Run a thorough content check and make sure that uppercase words are limited to either only headers, labels, or acronyms.

19 – Different font styles or families are used to separate content from controls

Why it matters: There needs to be clear indicators as to what is content and what are controls – that is, what the user can interact with. Those indicators can be size, color, positioning, font, etc. Font is an important one: using different styles or families means that the user won’t be confused and will easily identify what can be interacted with.

How to test it: Identify all controls in your product and make sure that they are standing out from the content. When running usability tests, pay attention to whether users are having difficulties interacting with controls.

20 – Font size/weight differentiates between content types

Why it matters: It heavily impacts readability and comprehension. Making a clear distinction between headings, subheadings and from paragraphs reduces the mental overload in digesting that content. It also has got visual benefits – it looks and feels better.

How to test it: When reviewing the content inside your product, make sure that headings, subheadings and paragraphs are using different font sizes and weights.

User Interface

21 – Proximity and alignment

Why it matters: The user has a tendency to group – functionally or contextually – items that are close to each other. A navigation bar is a good example of this. Following this pattern and grouping items that are connected means the user instantly understands your interface.

How to test it: Look for items that are similar in functionality and check if (when possible) they are grouped together.

22 – Progress indicator for multi -step workflows

Why it matters: Specially for multi-step workflows, the user can easily feel overwhelmed or wonder how long until it is finally done. A progress indicator helps him/her to locate his/herself, but more importantly it creates a sense of accomplishment and reduces drop rates.

How to test it: Check all the flows inside your product where there are different steps in order to accomplish something, then make sure that progress is being indicated through an indicator.

23 – Foreground elements (like content and controls) are easily distinguished from the background

Why it matters: Important for people with visual disabilities. It also improves a user’s learning curve and comprehension. Clear distinction facilitates navigation, brings more attention to buttons and increases usability in general.

How to test it: Screen-capture your product and Gaussian blur that screenshot to a Radius of around 3px to 5px. When looking at the result, can you easily tell what’s in the foreground and what’s in the background?

In Conclusion

This is by no means an exhaustive checklist of UI/UX tips.

DRKMTTR Creative

DRKMTTR provides global design services to help companies solve increasingly complicated problems.

No Comments

Post a Comment

Comment
Name
Email
Website