Content Blocks

This is in response to Mel’s mockup of a new WordPress editing based on “content blocks and content formatting”. There are a couple of issues I have have with that mockup here: http://melchoyce.com/wpadmin-ui/content-editing.html

1) It hides extremely common functionality like bolding, underlines, etc. in a highlight hover.

2) In order to allow for insertion of the content blocks she creates a hit target that is a) replaces the cursor when you stop typing  b) isn’t clear (does a little circle with a plus say “insert media” to you? and c) hides all visual indication that the various insertable blocks exist – if I didn’t know that “forms” or “quotes” were a possible choice it would be non-obvious.

3) You’re still dealing with multiple edit surfaces for things like inserting FB Like bottons and similar plugin-driven elements into your page.

————————————–

So I started from this premise – what is the most common editing that the user is likely to do? What does that UI look like? How can that be adapted and further simplified so it’s not just simple, it’s familiar.

From that came a few design considerations:

1) A single edit surface. All changes to the post should be visible on that edit surface.

Obviously since the theme may (should) be responsive, the intention isn’t to create a WYSIWYG, but everything that will appear in the post should have some visual indication on the singular edit surface.

2) All the things that you want to do to that edit surface should be in one easy to navigate toolbar at the top.

3) Insertions always happen at the cursor (just like in a document editor)

New Post

Here you have a new post. Rather than announce that you’re editing a new post by having the heading “New Post” above the edit surface, you simply have placeholder text in the title. Saves space, equally clear.

Titled Post

Just as you imagine would happen, click on the “Untitled” and start typing and it overwrites, also creating the new permalink.

Lorum Ipsum

Click in the body of the text and you start writing. When you’re writing in the body of the post, the header and permalink is greyed out. Again this is common behavior from most word processors. Note the grey bars that separate the header from the body from the footer. They’re not full separation so the user still sees it as one unified edit surface even though there are three sections.

Media

Click Insert Media, and you get a dropdown with various types of media that you can insert at the cursor. Plugins are free to populate this dropdown. If you have a plugin that does crazy 3-d models, that can appear as a choice in the insert media dropdown. Next to it you have Social Media and Comments. In that dropdown you can chose to put a comment area in your post, put in FB like buttons, Twitter, etc. Again it is plugin-loving, so your various plugins can put their own icons there.

Other

The high level categories really don’t matter to the meat of this idea. It could be “Media”, “Social Media” “Other” or you could have a specific dropdown for “Interactivity”, or “Tables” or whatever. For the purpose of this mockup I threw Forms and Maps in “Other”.

Publish

Lastly there’s the publish area. The button with the vertical bar and an arrow after it is a pretty commonly understood UI element. Click the left side where it says “Publish” and the post gets published automatically. Click the down arrow to the right and you get options in a drop down.

—————-

Yes this mockup is missing a bunch of stuff. Yes the typography will make your eyes bleed. It’s an illustration of a concept, and I’m not that great with Pixelmator yet… Comments welcome.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s