Re-thinking WordPress Post Format UI An Exercise

post-formats-classic-modal-approach-1024x698
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

WordPress.com New Dash

Taking a look at the simplified blogging tool for WordPress.com – they deal with Post Formats right away.

WordPress.com New Dash - Screen right after you hit "New Post"

WordPress.com New Dash – Screen right after you hit “New Post”

WordPress.com New Dash - Post Page

WordPress.com New Dash – Post Page :: a simplified version of the one in the admin

WordPress.com New Dash - Screen

WordPress.com New Dash – Video Post Selected
note the customized interface just for uploading photos

Tumblr

Tumblr.com Dashboard - choose the format from the icons across before posting

Tumblr.com Dashboard – choose the format from the icons across before posting

tumblr.com Post a Video Screen

tumblr.com Post a Video Screen

The glaring similarities between WordPress.com 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

WordPress.com 3.6 Beta

WordPress.com 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 s.sar.ac/071P0S3r2H2Q

Update 2: Mark Jaquith is asking for feedback on the Make UI Blog http://make.wordpress.org/ui/2013/04/11/saracannon-has-posted-her-take-on-a-new/