Designing for usability in the WordPress Customizer

Hands with paint brushes

We have mixed feelings about the WordPress Customizer in the office. The intention to provide a common customization workflow for themes is nice, but the lack of attention for the customizer over the years has generated a lot of bad usability. So how do we design for usability in the WordPress customizer?

Guessing best practices

One of the roots of this problem is the distinctive lack of a written down best practices guide on how to style UI for WordPress in general. Caspar Hübinger has written and talked extensively about the problem, but not much has been done over the years.

One attempted solution is the WordPress Admin Style Plugin by Frank Bültge, which is a tremendous help, but not really a solution for the problem. The issue is, that there is not really an agreed upon consensus on how to design UI for WordPress users.

The lack of such a document affects the WordPress Customizer as well. Theme developers are offering a vast scope of solutions. From senselessly arranged standard setting controllers to huge page builders, that are crammed into the WordPress Customizer. And barely anyone thinks about usability.

How we do it

Screenshot of the Customizer UI Kit

When we design elements in our themes, that are customizable, one of the first things we think about is how the user actually uses the customizations. The process has to be more or less intuitive and fast.

Our rule of thumb here is “A backend is like a joke. If you have to explain it, it is probably not very good”. So we constantly ask ourselves, if the user understands the range of possibilities without reading any help text.

One thing we like to do is to draft the customizer with a graphic design program and create a click dummy in programs like “Invision” and test that with family and friends. But the process of designing the same things over and over lead to us creating a template in Sketch. This enables us to create quick mockups, where we can experiment with different solutions and test them.

WordPress Customizer Mockup

We spent some time recently to clean up the mess inside of this template and make it available to all the theme designers in the WordPress ecosystem. The mockup is free for everyone to use and is licensed under the GPL v2 license.

If you like the mockup we would like you to mention us and link back to this post. If you have a good idea to make the mockup better, please leave a comment below.

Download .sketch now (3 MB)