Revamping The Content Creation Experience In WordPress

In one of the slides for Matt Mullenweg’s state of the WordPress Presentation at WordCamp San Francisco, there was a concept screenshot of the post writing panel. Some of those concepts can be viewed here with the discussion surrounding those designs found on the WordPress UI blog.

ContentEditingProposal
Proposal To Revamp The Post Writing/Editing Interface

There are a number of reasons I’m excited to see all of this transpire. For starters, the WordPress community is finally getting the chance to reshape the direction of the User Interface. That’s not to say that developers couldn’t do that before but by using the P2 site, the commenting section along with being its own separate team, it just seems more inviting to participate versus everything transpiring on core and trac. Also, as far as I can tell, WordPress 2.7 “Coltrane” was the last time the post writing/editing panel received any attention.

The post writing screen is my home away from home. It’s where I spend the majority of my day writing, editing, and managing content. WordPress 2.7 was neat because it added widget functionality all across the board from the dashboard to the post writing screen. Just drag and drop boxes, arranging them in the places that made the most sense for my workflow. I’m a huge fan of things being modular but the more time I spend within the Add New Post screen, the more I want to see widgets disappear and have everything be either 0 or 1 click away. I use a 20 inch monitor and I’m wearing out my scroll wheel to view the categories widget in the sidebar or one of the widgets I have below the editor. This had me thinking about whether anyone had developed a plugin or alternative editing interface that combined the most used widgets into tabs. For example, the editor already has the Visual and Text tabs. How hard would it be to add the Categories as well as the Tags widgets as tabs? I thought it would be a good idea but then I came across the proposed editor by Mel Choyce and hers is so much better than I imagined.

TagsAndCategories

The most exciting change for me in her redesign is placing the Categories and Tags widget to the bottom border of the post editor. No more having to scroll around. They’re also in a position that matches my work flow. I generally write Post Title, Content, Tag it, then Categorize it. Considering those things are at the bottom of the editor, as well as the Publish button, I’m loving the looks of this interface already. I’m also a big fan of the publish button having its own spot versus being tied in with a widget or hidden in a box of options. While it’s being discussed, I would love to see the need for a Visual/Text tab to disappear. Instead, create the best of both worlds. Not sure if split-screen would be the best approach but I’d like to add code to one side and see the results as they’ll be seen by the public on the other while being able to use keyboard shortcuts in the live preview area as I can in the visual editor. Unfortunately, I think I’ll have to use a plugin to achieve this as I’m pretty sure this won’t be coming down the pike any time soon.

As for the content blocks, I’m not sure I can form an opinion on their use until after I’ve had a chance to use them in practice. In theory, it sounds like a good idea where each piece of content is a lego block and these content blocks are just other legos you can build on top of one another.

Content Blocks

The idea to format text after it’s been highlighted is excellent. The text needs to be highlighted anyways in order to apply formatting so this process enables the formatting bar to get out-of-the-way. Less buttons to see as I’m writing content.

Editing Highlighted Text

Get Involved:

You are highly encouraged to participate in the conversation on the P2 site where these mockups are located. Overall, I wish I could use Mel’s first concept image as my Add New Post Screen right now! What do you think about the proposed changes to the content creation screen in WordPress?

7

7 responses to “Revamping The Content Creation Experience In WordPress”

  1. @jeffro – Tabs aren’t really the answer. The last thing we need is to encourage plugin authors to go tab crazy by increasing the frequency of tabs in the admin UI. Like the fullscreen experience, tabs at some point gets cumbersome.

    (With a 20″ screen, you’re probably tired of reviewing drafts via the post editor due to WordPress’s fullscreen approach.)

    The best scenario is stripping down the post editor screen to establish new content creation habits, but we know that isn’t going to happen unless WordPress wants to stop supporting custom meta boxes.

    I think the next best thing everyone can be happy with is putting the editor and all meta boxes in one column and add a new shortcut menu in the second column. You’d then use the shortcut menu to move up and down the page instead of scrolling.

  2. That UI does look great.

    I too really like the cats/tags at the bottom of the editor, but I wonder what happens when a couple custom taxonomies get added? A few metaboxes? Edit Flow? etc…

    I’m not a fan at all of the giant post format icons. Too much space for a one time selection. Those should be in a drop down just like categories.

    While I applaud all efforts to imporve the Post Editor UI I think it needs a mobile first design that includes all the complexity of a CMS or multi-author magazine. Can the UI handle metaboxes/cusom fields, multiple taxnomies, post format changes. Make all that work on mobile and then stretch it out and strip it down to what it’d look like on a site that is “just a s single author blog”.

  3. @Bharath – I also like MP6 and have been using it ever since I discovered it.

    @Tung – I didn’t think tabs were the answer but it’s the first things I thought of when trying to improve my own experience with the Post creation screen. I like the UI concepts much better than tabs. You may be right about establishing new, better content creation habits but I think the new Post Creation screen UI addresses this a little bit by rearranging things.

    @Jon Brown – It wasn’t clear to me on whether those big icons were actually dedicated to Post Formats or were merely used as a way to put a certain type of content into a post. If it’s for Post Formats, that’s a large chunk of real estate wasted for me. If it’s for building content, then maybe not so bad.

    Wouldn’t just making everything in the back-end of WordPress responsive address your mobile concerns?

  4. >> It wasn’t clear to me on whether those big icons were actually dedicated to Post Formats or were merely used as a way to put a certain type of content into a post.

    Matt seemed to imply in the State of the Word that he thought post formats should be reworked into content blocks that could be added to posts… so posts would possibly be a collection of post formats.

  5. @Jason Coleman – Well now, that sure does sound simple doesn’t it? lol. The question I have then is how would multiple post formats look like in a theme. Has anyone actually tried assigning more than one post format per post? Last I checked, which was just now, you can only select one post format per post. So, that would need to change if they wanted to use the blocks as post formats. The more I talk about it, the more confused I make myself.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.