Skip to content

Latest commit

 

History

History
242 lines (119 loc) · 10.7 KB

clgm1bkwe02c005nvber61xl2.md

File metadata and controls

242 lines (119 loc) · 10.7 KB
Raw
title seoTitle seoDescription datePublished cuid slug cover tags
UI Design Principles and the Importance of Usability Testing
UI Design Principles and Usability Testing
What is Usability Testing? Why is it important? And how should Usability Testing be done?
Tue Apr 18 2023 09:00:39 GMT+0000 (Coordinated Universal Time)
clgm1bkwe02c005nvber61xl2
ui-design-principles-and-the-importance-of-usability-testing
testing, usability-testing, testing-guide, principles-of-uiux-design, website-usability

It's so common to see applications--on the web and mobile devices alike--with colorful pages and awesome animations nowadays. But at some point, these designs get too much that instead of helping the users, they get too much to interact with.

Herein lies the importance of Usability Testing, which aims to check if how the application looks can guide the users to take the "Happy Path" (i.e. the desirable path to get the most out of the application) or reveal which interactions are more than likely to cause them confusion.

What Differentiates Usability Testing from Other Tests?

Simply put, Usability Testing is testing how easy it is for users to interact with your application.

Some key points to determine if your application is "Usable" include the following factors:

  1. Can both old and new users easily navigate around the application?

  2. Can new users learn how to use the application quickly?

  3. Can users easily do the actions that they want to do on the application?

  4. Are users happy with how the application looks like? Or are there any points they think the application could improve on?

  5. Is the application catering to the user's needs?

  6. When making a mistake or encountering errors, can the user backtrack or troubleshoot easily?

How is Usability Testing Done?

Based on this article from Browserstack, there are three common ways to execute Usability Testing:

  1. Comparative - multiple versions of the same application are compared and evaluated to weigh the pros and cons of each. In some cases, there might even be tradeoffs that need to be considered when choosing one version over the other. The important thing is choosing what works best for the users.

  2. Explorative - When designing the early versions of the application, consider the target user base's needs, preferences, inclinations, etc., and explore the application as if you were a first-time user yourself.

  3. Assessment - Assessing the application's overall usability at specific points during development should help the usability of the application to improve.

Why is Usability Testing Important?

Not only does Usability Testing uncover user pain points that could help developers improve how users could interact with the application, but it could also validate that the application meets the expected requirements.

Moreover, Usability Testing could also help catch minor errors that can't be caught with other types of tests to provide a better user experience overall.

UI Design Principles to Remember

Here are some ways to give you an idea of how to write your Usability Test Cases:

Simple

  1. Do not bombard the user with too much information as it could give them Memory or Cognitive Overload. Some ways to prevent this is by doing the following:

    • Chunking - break content into smaller chunks to help the user understand the process better

    • As much as possible, avoid using jargon and industry-specific terminology

    • Minimize long sentences

    • Avoid capitalizing all letters if the text is not an acronym or part of the logo

    • Do not use flashy and over-the-top designs as they could be distracting to the user

  2. The best interfaces are the ones that are familiar to the user. This means that users prefer your site to work the same way as all the other sites they already know.

  3. Make use of established UI design principles and rules

  4. Aim for the minimum number of steps and screens possible at all times.

    • Use overlays like modals, popups, and side panels instead of redirecting to a new page.

    • According to the Three Click Rule: “A user should be able to achieve any action or access any information they require by clicking no more than three times from anywhere within the app.”

  5. The Layout format should make sense and work as what the user expects Help the user follow the “Happy Path"

    • Provide visual markings for new updates/notifications

    • Mark links that have already been opened

    • Open internal links on the same page and external links on a different page

  6. The icons to be used are tied to familiar functionalities or brands (e.g. a magnifying glass icon for the search functionality)

Brand Identity

  1. The UI must reflect the goals and branding of the company (e.g. use the brand assets, color scheme, logo, etc)

  2. Seeing the UI would make the user instantly recognize what the application is

Consistent

  1. Consistency of the elements throughout the application (e.g. buttons, links, colors, etc)

  2. Similar layout patterns should be used on varying pages

  3. There should be homogenous menus and screens

  4. There should be a consistent implementation of commands and shortcuts throughout the application

Clear

  1. Gradually implement changes on the application instead of in a drastic way, especially if the functionalities are being used by the users often.

  2. Inform users of expected changes to help them navigate the application easier

  3. There should be clear labeling of Components (e.g. buttons) and Information throughout the application

Navigable

  1. Provide Visual Clues for Navigation and make it permanently visible

    • Using Pagination when there are multiple pages to navigate (e.g. for search results)

    • Using Breadcrumbs as a secondary navigation scheme when there’s a hierarchical process that the users have to go through (e.g. payment processing, request submission)

    • Adding the common user tasks (based on priority and frequency) to the main navigation bar/main menu

    • Marking where the user is currently on the page (e.g. highlight or emphasize the current tab on the navigation bar)

    • Adding buttons or guides for:

      • Forward (i.e. going to the next page),

      • Reverse (i.e. going to the previous page)

      • Latent (i.e. jumping to a different part on the current page) Navigation

  2. Use a sticky menu so that the users can still easily find where they are on the page and/or quickly jump to another page

  3. Enabling scrolling where it would make sense to do so (i.e vertical scrolling, horizontal scrolling)

  4. Using a Search bar so that the users can easily look for the content that they want to see and put it where the user is expecting to find it (i.e top right part of the page)

  5. Remove barriers for conversion and reduce the complexity for the user by reducing the learning curve

  6. Don’t ask users to re-enter information that they have already entered somewhere else

  7. Enable undo/redo functionalities so that users can easily make changes Inform the user why they’re not getting their desired results (e.g. via error messages)

  8. Make it easy for users to retrieve necessary information (e.g. all user information is in “Account Settings”)

Highlight calls to action and drive business goals

  1. Important Actions and Functionalities should be visually prioritized

  2. Clearly show the hierarchy of actions by adjusting the:

    • Color - bright colors vs. muted, contrasting colors vs. blended

    • Size - bigger size vs. smaller

    • Font face - different font faces to distinguish different groups of text

    • Font style - Bold, Italicized, Underlined

    • Law of Proximity (Negative Spaces) - buttons that are spaced apart can draw attention to them better compared to buttons that are grouped together

Functionality

  1. Each action should serve a purpose related to the requirements

  2. If a part of the UI does not serve a purpose for the user, then it might be better to not include it on the page

Practicality

  1. Only ask what is required from the user when filling up forms (e.g. signup, contact, etc) to make it easier for the user

  2. Group related input fields and buttons together

  3. Display the input fields in a logical order

Status Information

  1. Provide visual feedback for loading new content (e.g. using looped animation, loading spinners, or skeleton screens)

  2. Show visible progress when doing a task (e.g. progress bars)

  3. Provide responses to actions (e.g. success or failure messages)

  4. Add visual signifiers of interactivity (e.g. drop shadows or highlights when the mouse hovers over a button, highlighted focus on input field when information is being entered)

Accessible

  1. Common Keyboard Shortcuts should be usable for navigating throughout the page

  2. Use Tooltips to serve as a guide when interacting with the pages

  3. Use Color Contrast to distinguish between the elements on the page

  4. Provide An easy-to-find help page or FAQ page

  5. Make it possible to use Dark Mode extensions on the application

  6. Provide Text Alternatives for images

  7. Provide Aria Labels for buttons and input fields

Flexible

  1. The application should work on older and newer devices

  2. The application should be Responsive, i.e. it is viewable in varying viewport sizes and is optimized for viewing on mobile devices

  3. Must be easy to use for both new and experienced users

  4. Provide Advanced Search Features, if applicable

  5. Provide Filter Bars for searching, if applicable

  6. Provide Single-click shortcuts/Bulk processing of data (e.g. Delete All, Select All) where it is needed

References:

Website Usability Testing - BrowserStack

Usability Testing - Hotjar

What Defines Good UI Design - Dribbble

UI Design Principles - Dribbble

UI Design Principles - Maze

Web Page Design - Adobe XD