Re-thinking WordPress Post Format UI

Post Format Modal
Post Format Modal

Post Formats are slated to drop in 3.6 and are currently in Beta. I love how WordPress is standardizing formats so that when you change your theme, the content format and metadata associated with that format is preserved. This opens up new doors and possibilities for bloggers who want a unique look without having to customize a category display.

3.5 post formats enabledPost formats are currently in WordPress 3.5 but are just in a tiny modal box to you right (if your theme has them enabled)

They don’t change the metaboxes for use with the content (aka make a “Video URL” field when selecting) but in 3.6 they will – which is exciting.

There has been lots of discussion and wireframes about the Post Formats UI and user testing… I decided to do an exercise that might address some of the pain points of the current UI’s iteration.

Researching Other similar tools New Dash

Taking a look at the simplified blogging tool for – they deal with Post Formats right away. New Dash - Screen right after you hit "New Post" New Dash – Screen right after you hit “New Post” New Dash - Post Page New Dash – Post Page :: a simplified version of the one in the admin New Dash - Screen New Dash – Video Post Selected
note the customized interface just for uploading photos

Tumblr Dashboard - choose the format from the icons across before posting Dashboard – choose the format from the icons across before posting Post a Video Screen Post a Video Screen

The glaring similarities between New Dash and Tumblr is that they are 1) making a post format decision  before they get to the editor and 2) the editor is only giving them the modals and upload buttons that they need. If we think about #1 philosophically from a UX point of view – the formats are action-centric. They are not passively opening up the post editor then wondering what they are going to post – they are forced to make a decision, an action, and therefore the UI they are given is tailored to this decision making for a better UX.

Neither Tumblr or New Dash have a way of changing the post formats – which I think is good because they would lose all the data that they put in there to the custom modals. (more on this later)

Current 3.6 Iteration in Beta 3.6 Beta 3.6 Beta

The current iteration of the new Post-Formats UI that is now in 3.6 Beta has icons for each of the 10 formats spread across the top of the post editor. They are currently passive button-like selectors with a label to the right. Dave Martin ran some user tests on the current UI and the results were not good.

I decided to do some action-centric decision-first based UI exercises to explore some options.

Decision Based Approach – Working Within the Current Menu System

The first exercise is one based on just using the current menu system. It turns out that it *could* in theory work – but in reality there are just way too many post formats.

Action-Centric Dashboard Menu
Action-Centric Dashboard Menu
Post Page - Sub Menu
Post Page – Sub Menu

Basically in this iteration, we make the choice in the menu and then the post screen will have just what you need.

Video Post Format - note the simplified interface, the title changes to include the word "video" in it , and the labels are inside the boxes
Video Post Format – note the simplified interface, the title changes to include the word “video” in it , and the labels are inside the boxes

Changing Formats

In the above screenshot – there is a way to change formats (unlike new dash or tumblr.) It is in the publish meta box. This is a more passive-switch than an in-your-face one which is important, as someone would have to completely change their mind to use it. It also falls under the same importance as the other items in the publish meta box.

Post Format Switching
Post Format Switching
Post Format Switching - drop down option
Post Format Switching – drop down option
Post Format Switching - radio button option
Post Format Switching – radio button option

Exploring both radio buttons for switching or a drop-down – That meta box currently uses both as a standard, but I think I prefer the radio simply because the icons are visual cues.

Explorations outside of the current navigation pattern

So, seeing that the navigation above is a bit cramped – I decided to explore in-page and modal decision patterns.

In Page decision with post editor greyed out. Icons will go away and the "switching" will be in the siidebar like above
In Page decision with post editor greyed out. Icons will go away and the “switching” will be in the sidebar like above
not greyed out but post editor fades in after decision
not greyed out but post editor fades in after decision
without labels - cursor rollover changes page title
without labels – cursor rollover changes page title

While all this is interesting – I’m not sure if it feels quite right as it is outside of the typical WordPress interface, but could be explored further.

Modal Window

So our natural progression here is to try out a modal. Usually I’m not-a-fan of modals at all. They tend to be disruptive. After the new media editor launched last release, its made me re-think modals. Lightbox was so terrible and slow – but using a modal for this action kind of makes sense as you can be on any page and receive it before hitting the post editor, without another page load or coming from any add post action. (think top nav bar add new)

Post Format Modal
Post Format Modal

At this point, I am leaning towards a fast modal with a few caveats. 1) you can turn the modal off if you don’t use other formats as much and just want to use the passive switcher. 2) you can turn all post formats off from within core settings to override what your theme set. 3) you can filter list tables by format (like you do categories.) The last two I think this should be an option regardless of the approach.

However, that being said, I know we are in Beta for 3.6 and the modal window approach might be a bit out of reach for this release. If I were to have a #2 I would say the greyed out post edit UI with the larger icons. approach might be viable (after the decision is made, the icons go away, post editor fades in, and the format switching is in the publish meta box.)

In conclusion, I hope to get some conversation going and hear what everyone else thinks so that we can make WordPress amazing together.

update: if anyone else wants to tinker, here are my thrown together photoshop files etc

Update 2: Mark Jaquith is asking for feedback on the Make UI Blog

Authored By

Managing Partner / Creative Director

Sara loves design, typography, user experience, and art. She gives talks around the globe on web design, user experience, typography, and more. A seasoned designer, Sara has done work for clients such as Disney Publishing and Flickr. She loves open source, her pets, traveling, and WordPress.

28 thoughts on “Re-thinking WordPress Post Format UI

  1. Nice work Sara! I really like the idea of a modal and that it could be accessed before hitting the post editor which cuts out that extra step. I also didn’t mind the drop down list that was put to the left of the post title in a previous version.

    It’s strange to see that both and Tumblr went with the ‘choose your format first’ where .org went with being able to change after the fact, but I’m sure there were many discussions around this.

    It’s going to be interesting to see what the final version is!

    1. Dang… really nice work Sara!!!

      I mostly agree with Lachlan. I like the modal but I think that people will want a good way to switch if they made the wrong choice.

      I also feel like #2 with the icons is the best option until all the modal issues are resolved. Love your work 🙂

  2. When I read about this on the make blog, I immediately thought it should go in the regular menu system. There may be too many items in the flyout right now, but look at how they redesigned the custom menus screen.
    Why couldn’t the main navigation also use an accordion? That would solve the issue of the flyout.

    1. Part of the issue with accordions is either you have to rely on an internal hover on an already hover-ed flyout or add in a second click to expand… this gets even more complex when you think of mobile where hover turns to touch.

      Expanding makes sense in a tool/builder like the menus page but is probably too complex for adding a new post.

      that being said, I would love to see if anyone can mock up post format decision in the main nav and have it make sense / work – as it was my first inclination also.

  3. While I like the fast modal idea (and look) as well, I do think it jumps a little far outside of the typical post creation flow. That’s not necessarily a bad thing but I don’t think a step should be added between clicking to add a new post and when the edit post screen actually appears.

    With that being said, I love the 2nd idea. Sure, it’s pretty much the same flow that I discarded above but the idea that you are actually IN the edit post screen when you make your selection, to me, makes the process smoother and more familiar.

    Great write-up here.

    1. Thanks for the thoughts – you’re right about the 2nd idea being the same amount of clicks, and making a decision just like the modal – but I also agree that it seems more of a normal WP workflow as we don’t use modal windows often.

  4. Ditto. This is amazing. Really great alternative to what we’re seeing in 3.6 especially like the modal idea.

    Not only does the upcoming refresh of Post Formats need a refresh so does the way we handle post formats on WordPress mobile apps. It needs to be more like Tumblr’s app which puts them front and center.

    1. Thanks! Regarding mobile: “quick photo” is almost like a post format dialogue in a way that a decision is initially made to post an image from your phone – which follows the decision first based approach. I’m excited to see how mobile will address formats if this approach gets picked up.

  5. I’m pretty psyched about this and the post formats feature coming in 3.6. I think the idea of posts having different formats is a GREAT borrow from tumblr. I experimented with tumblr, but I really prefer a real blog’s comment system to the tumblr usage of what is essentially a retweet with a comment. It’s great for sharing, but sucks for starting a conversation.

    1. Exactly! One of Tumblr’s strengths is an intuitive posting UI that is decision-based, making it very easy for people to know how to post. We’re going to have that strength plus the rest of amazing WordPress goodness!

  6. The standard metabox with radio buttons should always be preserved. We are using pf and wodpress for other stuff then simulate a facebook blog. For example, project management and quotes, statuses transform into an article or product. Without dealing with post types and new tax. Simple solution. The post fm shuld deal with presentations, and the proper tamplate render call. We dont need Posted in lines on quotes….

Leave a Reply

Your email address will not be published. Required fields are marked *