Along with working on Widgets, I’m also working on some ideas for the theme experience in WordPress. Working with Matías Ventura, I’ve come up with the following wireframe:

Theme Browser Wireframe

The big idea here is to merge the two pages, Manage Themes and Install Themes. We ran a user test, which you should totally watch, and quickly discovered that the user got completely lost looking for a way to add/browse themes. The label “Install Themes” didn’t convey that they could search and browse. The above wireframe aims to make searching and browsing the main focus of the themes page. Your installed themes are displayed at the top, with your active theme highlighted. The rest of the page is dedicated to browsing and searching themes. Its a quick idea, but something I think could make the overall experience better. What do you think?

  1. In general I like where you’re going but I think you could simplify it even further.

    In this wireframe there are two separate but related processes “Add Theme” and (assumedly) “Switch to a Theme”. I don’t think that’s particularly intuitive. And why should the user have to manage what is and isn’t installed for themes? Why don’t you just abstract that all away.

    Current Theme —– [Button for Switch Theme]
    Recent Themes (a row of Themes that are either installed, or have been used recently and uninstalled)
    Popular, New, etc.

    To switch themes you either a) click on “Switch Theme” or click on any theme on the page and confirm. If it’s an already installed theme, the switch is quick. If you chose one that hasn’t been installed yet, you get a warning that this may take some time.

    Maybe for a power user there might be some utility in cueing up multiple themes before switching between them, but I very much doubt that the average user does this.
    ————-

    As someone who was only introduced to WP last year, I’d say that the entire concept of a “Theme” is powerfully unintuitive. It’s not just how you add them.

    The most commonly understood similar concept is templates in something like MS Word. But the difference there is that a template doesn’t restrict functionality or tweak your editing surface. Themes BOTH effect content styling/layout AND change the edit surface. That’s just plain user-hostile. So one of the things that would be really really useful would be a way to diff a new theme versus your current theme in terms of the changes it makes to the edit surface.

    Click on a Theme and you get a pop up box with a bullet list:
    This theme will delete the custom X widget that your current theme uses
    This theme will remove the second footer
    This theme will add a horizontal menu bar, etc. etc.

    Additionally, since theme is such an unintuitive concept, this is one of those places where I think it would help novice users immensely to have a short 1 paragraph explanation of what a theme is pinned to the top of the page – maybe with a small x in the top right so that a power user could dismiss it.

%d bloggers like this: