How to measure your website or app’s design

It may seem obvious that the design of your product has a great impact on the user experience. Unfortunately, many products fail to connect these two in the practical world. Companies carefully test, measure and review the usability of their website or application but hardly give the aesthetic side the same attention.

However, usability and aesthetics go hand in hand. It’s important to give both the same rigorous evaluation for your product to be well-designed, usable and therefore successful.

In this article, we will present two methods to measure your designs: The first one is a systematic gathering of elements from your interface; the second one is generated by user testing. We will briefly go through the workings and benefits of both methods.

Method 1 – Interface inventories

This method was written by Brad Frost in his book Atomic Design (page 98 and following). It makes it possible to evaluate the graphic language and especially its consistency, which is key to a positive design for the user.

Example of an interface inventory

Basically, the idea is to gather all your graphic content in one place and organise it in different categories. This way, you have a clear overview of your product’s visual identity, which will in turn help you with general design and consistency.

Conducting an inventory of your interface

Making your design inventory is simple but time-consuming, just as it would be with a content inventory.
Don’t let this deter you, because once it’s done, keeping it up will be much easier.

Start by making screenshots of all your website or app’s pages, then split them up per element (buttons, forms, hyperlinks, text fields,…) and group them together in a simple document. Name them and decide on a specific appearance for each single group, consistent with all the rest.

Benefits of an interface inventory

Having an overview of all the different elements, their appearance and inconsistencies.

Validating the need to intervene on the overall design.

Knowing the level of work, the amount time and the tools required to make improvements.

Method 2 – Visual Aesthetics of Websites Inventory (VisAWI)

This method consist of a questionnaire with 18 questions. It evaluates the design of a website through four aspects : Simplicity, Diversity, Colourfulness and Craftsmanship.

The VisAWI questionnaire

How to use a VisAWI questionnaire to evaluate your design

To use the ViwAWI questionnaire, it is recommended to find at least 20 participants to perform a few tasks on your website or app. Obtain their profile information in a pre-test form, then have them perform the tasks and integrate the VisAWI questionnaire in your post-test interview.

Once you have your questionnaires, calculate the scores and the average of each aspect and there you go! Now, you have an actual user-generated score to give your design.

Benefits of this method

Having an objective view on the effectiveness of your design, while basing it on subjective data from users.

Using an empirical method that allows score comparisons with competitor’s products.

Being able to keep track of the score and see an evolution after adaptations and corrections.

Conclusion

Today, we have tools to prove that design and aesthetics are not only subjective but measurable. It’s important to evaluate your designs just as much as your usabilty, and to create clear design KPI’s, such as amount of visitors, error rate, etc.
These two methods can help you achieve these goals by evaluating your website or app’s designs.

☛ Follow us on Facebook to get notifications from our blog, news and other great content !