1

This is my first post here, and what I am searching for have not been found yet so I must be very innovative (jokes aside). I have gotten a mission at my current company from the C-level to test through all of the components and patterns of our design system. This is everything from input components, badges, tables, cards, panels etc. Our design system is structured based on atomic design.

I am however not familiar with testing on specific components alone, I have always done it through scenarios and cases where we have whole layouts with components that will support our users in their work. Is there any way of performing smaller usability tests without specific cases?

Here's what I was thinking:

  1. I could test each component against certain criterias.
  2. I could perform the 5-second test (identify how it is being percieved after 5 seconds)
  3. The break-it-method, where users and test participants try to find errors and problems in the functionality and usability
  4. Test participants will compare our components one by one with those of material design or lightning
  5. Evaluate the components through CBUQ (Component-Based Usability Questionnaire)
  6. Have small tasks for each component to see how easy they are to use and navigate, e.g. Task1 - enter data, Task2 - remove entered data, Task3 - Navigate using keyboard etc.

Are any of these ideas good? Are there any others? Please help! Any input in valuable! :)

  • 2
    I think you might also need to communicate that testing elements and components without context has limited value and can even cause problems when context is added in pages and user flows. – Andrew Martin Sep 18 '19 at 15:59
  • if you have implemented these various tests, do you have any feedbacks and best practices ? I have to work on this topic too :) . – Leo Revel Jan 14 at 15:50
0

The best way to test these components is where they are intended to be interacted with. Create tasks for testing participants to interact with for specific components. For example, to test your input components, have a

0

If you think about the equivalent in coding, where a snippet of code can be reviewed, a module of code can be unit tested, and a program can be integration tested, and finally a suite of applications can be system tested, it is possible to apply the same concept to UI design.

You should test a component for its atomicity (since it is based on Atomic Design), and perhaps for the fluency and usability of its micro-interactions (and micro-copy). Then you can test a component for its combination with other components (either as a molecule or as part of a design pattern).

Depending on the depth and breadth of your design system, you may choose to do this manually as a expert review/test, or you can apply some of the more advanced concepts of data-driven testing whereby you match the analytics available showing potential friction in a page or component's usage and try to break it down to where the issue might be.

I would however consider what the actual objective of this test/review is by clarifying it with the person who is asking for this, because in a typical continuous integration/continuous delivery way of working, you are always undergoing this process. Also, if you need to provide an output for this task, then you should make sure that what you report on meets the expectation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.