Theme Directory Mockups

This week I’ve been working with @obenland to mock up improvements to the new theme directory, focusing primarily on the single theme view.

(Note: you’ll want to zoom out to 50%)

Layout-wise, the mockups are pretty similar to this modal — sans-tabs (currently) — but use the overall style of the existing theme browser modal.

I have to admit that while it’s really slick and nice to quickly browse through, I do have some concerns about displaying the single theme view inside of a modal.

First of all, I’m worried that linking directly to a modal can be disorienting for users. Often when you load a new page and a modal pops up, your first impulse is to close it because it’s likely some sort of annoying notification or newsletter signup form.

Secondly, since themes have additional views (most importantly reviews and the support forums), having that kind of forwards/backwards navigation breaks the modal paradigm — modals are generally (though we do break this in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.) one-screen views. Additionally, unless we *do* add tabs, it makes quickly navigating to reviews and support more difficult, since now instead of being able to quickly flip over to a new tab, you need to scroll down and locate the button that brings you into the appropriate view. As a theme designer, I check these two tabs pretty frequently to check in on my themes. As a theme user, I often use those tabs when I’m browsing around for good themes to use or play with.

Lastly, I’m not sure if there’s a good way to open a whole bunch of themes at once to compare, since trying to open up the single theme view in a new tab opens it up in the current tab instead. This might be a technical issue we can overcome, I’m just not knowledgeable enough to know for sure. 🙂

If we decided against putting the single theme view in the modal, I think we could still make some good functionality and style improvements to the existing theme pages. The ability to flip back and forth between themes in the repo is particularly helpful. (Though maybe doesn’t work as well as a concept when you’re not coming in from a filterFilter Filters are one of the two types of Hooks They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. such as popular or new, but instead are being linked directly to the theme itself — something for us to think about.) I think this is worth discussing either way and would be interested to hear what others think.

I also took some time to check out the theme list and have some thoughts there. Here’s a quick pass at an updated theme card design:


Instead of having “download” appear when you hover over the theme, I’ve replaced it with a persistent star rating. This is more consistent with comparable services, in which the act of downloading or purchasing is usually obscured behind one click. Since the theme repo is pretty fast, I don’t think this additional click causes much harm, especially since users will often want to preview the theme before downloading.

Additionally, I’d personally recommend against infinite scroll. In the case of theme searching, I think infinite scroll has the potential to hinder someone’s ability to find and compare themes. My thoughts on the topic are summed up pretty well by this NNG article:

Endless scrolling is not recommended for goal-oriented finding tasks, such as those requiring people to locate specific content or compare options. …Finding products by feature might be difficult to accomplish quickly if all of the products are presented linearly on a never-ending page, without sorting or other filtering or navigation techniques to help isolate the intended item. …In addition, locating a previously found item on an extremely long page is inefficient, especially if that item is placed many scrolling segments down. It’s much easier for people to remember that the item is on page 3 than it is to gauge where the item is positioned on an extremely long page. [Source]

I have some additional thoughts on making tweaks to the available filters in the theme directory, but I’ll save those for another time. 🙂