Consistency isn’t just good for users; it’s good for us, too

As a Theme Wrangler, I’m a member of the team here at Automattic that builds, maintains and reviews the themes on WordPress.com. Right now we have over 380 themes available for folks to pick from.

Each theme is its own little microcosm, a standalone bundle of files and functions. The differences between these themes can extend beyond their designs — the functionality, user experience and code can vary wildly from theme to theme.

With many different authors producing themes over time, it’s natural that we all bring our preferences and unique approaches to the table. Even when following best practices, those standards change — like design trends, what’s considered good code and UX evolves. Consequently, our library of themes contains a lot of different user experiences and code, sometimes with little overlap.

This, of course, causes issues for our users. It’s confusing and frustrating when seemingly identical features behave differently, and require you to do different things to set them up.

It also causes problems for us.

When something changes on WordPress.com that affects themes in any way, we need to check for adverse effects. This can mean testing and potentially editing hundreds of themes. This can happen with the launch of a new feature, or the discovery of a security issue.

Because our themes can be so different, it’s sometimes necessary to make adjustments to the solution on a theme-by-theme basis, to fit what’s there.

A recent example of this is the widget changes in WordPress 4.8. This version added new Video and Audio widgets, and improved the existing Text and Image widgets. All four were great additions for WordPress users – Mel goes into more details about them in her post here.

The Theme Team needed to make sure these new widgets looked and behaved as expected in all of our themes. It was similar to the fixes the WordPress community was making to the default themes, but on a much larger scale.

Common problems we ran into were HTML elements that weren’t styled as expected, or overflowed the available space. Button and link styles were often applied to elements they shouldn’t be, like the audio player.

Some themes with a widget areas you could open and close wouldn’t display the video widget at all. They also displayed the audio widget incorrectly (for example, by wrapping the volume control to a new line).

To find these issues, members of the Theme Team manually reviewed hundreds of themes. Different theme structures and styles made it impossible to find one fix that would work for all themes.

In the end, we had the help of several members of Automattic across different teams, to test, put together styles that would work globally, and make fixes to individual themes. It was a big undertaking, but helped us make sure users encountering one of these widgets for the very first time would have a good experience.

The good news is that, because we’re aware of these pain points, we’re always striving to improve. The Theme Team tries to make the user experience and code as consistent as possible in any new themes we build. Consequently, many of the issues we ran into with the new widgets were in older themes.

One way we’ve been improving consistency is through our Theme User Experience Requirements (part of the larger Theme Guide). It uses what we’ve learned from user testing, feedback from our Happiness Engineers (AKA Automattic’s amazing support team), and our own hard-earned experiences to inform how we build themes. Another is the starter theme Underscores. Underscores is a place where we can define and reuse best practices in theme building, helping create a similar base across all new themes. It’s also open to a wider theming community, so we can learn from people outside the company who make themes.

We’re also not afraid to revisit existing themes and improve them based on user feedback, and release them as a sequel of sorts.

I’m excited to see how these and other initiatives will continue to improve the experience of using our themes, both for our users and for our team!

💡Light Bulb icon by art shop from the Noun Project.