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.
Post 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.
note the customized interface just for uploading photos
Tumblr
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
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.
Basically in this iteration, we make the choice in the menu and then the post screen will have just what you need.
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.
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.
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)
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/
holy crap girl, this is awesome. well-done exercise!
thanks John!
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 WordPress.com 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!
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 🙂
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.
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.
Awesome post. I also had some thoughts about it and converted this one http://wordpress.org/extend/plugins/custom-content-types-by-pixelpillow/screenshots/ to use post formats instead: https://github.com/markoheijnen/post-format-ui.
The dialog is an interesting choose. Specially if you have the ability to change the from post format on an existing post. It gives the ability to change the UI behind the dialog without the need of animation
Nice! Love how you addressed quick post in the plugin by showing the icons. That could totally work.
Yeah, that modal is rad. Would obviously need a fallback for users directly going to /wp-admin/post-new.php
yes, and a way to kill it and be passive poster
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.
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.
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.
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.
Modal causes all sorts of workflow issues if you are not using Post Formats – which I’d dare to say is a majority of “non-blogs”.
The designs though are exquisite.
Thanks for the comment! My thought were that if the theme doesn’t have it registered, the modal wont show up. Also, if we went with the modal, I’d want an option to turn it off.
But, modal aside, it looks like we’re going with the greyed out approach. see: http://make.wordpress.org/ui/2013/04/11/saracannon-has-posted-her-take-on-a-new/#comment-22948
http://core.trac.wordpress.org/ticket/24046
Thanks for thinking about this Sara. I’m sure I’ll think of you every time I select a post format in WP3.6+ 🙂
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.
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!
Love the UI Sara. Great work.
Thanks Sayed
Awesome stuff Sara! Fell in love with the UI, keep up the good work.
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….