After having purchased Balsamiq I’ve apparently gone totally wireframe crazy… So here’s a take on the themes page.
- Abstract away the concept of “Installed” versus “Uninstalled”
- Get rid of the concept of filters
- Make the themes you want access to the most accessible.
- The App Store
So here’s the landing page:
You have the theme you’re currently sporting at the top so you know where you are. Tucked in the top right corner are Upload and Search. The majority of the page is taken up with a netflix-like series of categories.
- The top category, “Recently Viewed” is a chronological list of all Themes you’ve ever looked at or installed.
- The next is Popular
- Then New
- Then some autogenerated categories based on what types of Themes you’ve looked at (from the Recently Viewed section). So if you look at a lot of three column themes, you get a category full of three column themes. The more detailed the tagging of themes, the better this will work.
When you hover over a theme you get two choices, More Info, and the impulsive “Switch to Theme”. If you’re looking for a new theme chances are you’ll go with More Info. If you have been looking at a couple different Themes trying to decide between them and finally came to your decision, you might hit Switch to Theme right on the main page.
Note that Switch to Theme doesn’t care whether the theme is installed or not. It totally abstracts away that concept. Click Switch to Theme and the theme installs AND switches.
More Info, rather than taking you to a different page like the current preview, takes you to a modal with a slider where the themes get to show off their different aspects. At the bottom are buttons for close (you can also just click outside of the modal), Preview (which opens a live preview in another window), and Switch to Theme.
Again, Switch to Theme doesn’t care whether it’s installed or not.
Preview takes the user to another window with their content in the new Theme. Choices are Close or Switch to Theme.
Any time you look at a theme it goes in your Recently Viewed Themes. That means if you click on More Info and go to the Modal Info box, that Theme is now in Recently Viewed.
Click Upload a Theme in the top right corner and you’re taken to a modal that is the same size and positioning as the Info Box Modal. You can upload .zip files here. Preview and Switch to Theme are disabled until the zip loads.
No more ugly lists of files on Theme Upload. Instead you get a visual progress indicator.
And when it’s done loading, surprise, surprise, you have the standard Info Box Modal.
Uploaded Themes are treated just like wp.com themes for the purpose of placing them in your Recently Viewed Themes.
Type a search term into the top right and you get a drop down of themes.
Hover over the search results and you get a bump out with a one-picture preview of the theme. Click on the search results or the preview window and it takes you to the Info Box.
But what about people who have so little space on their hosting that it’s worth their time to delete old themes? If you abstract away the concept of installation, themes will just keep piling up in people’s installs, right?
Firstly I think that that is unlikely. At this point the amount of space taken up by a theme is so miniscule and its impact on performance and storage so minute that I don’t see any reason to ask people to manage the deletion of old installs. Let them keep piling up. Who cares. The number of people who will have a significant number of themes pile up in their installs will be pretty small, so essentially I think it’s a non-issue. Additionally, since they’ll always be able to access wp.com Themes, the system could autodelete any wp.com themes after say 10 and the user would be none the wiser.
For power users who simply demand that level of OCD control you could add the ability to option(alt) click on the Theme in Recently Viewed Themes to delete it from your install.
Why modal instead of a new page?
Because I like it? And because it makes the Themes area a single page. Much cleaner and simpler. It also follows an “App Store” UI that should be familiar to most.