Design and Development

WordPress Reimagined in a More User-Friendly Way

By

Filed under: Wordpress.

WordPress is the most popular Content Management System to date. But is it really up to the task of managing your website? Over the last several articles we have looked at several main problems of WordPress including WYSIWYG Editors, Not enough control over document structure, and a somewhat confusing admin panel.

Wordpress Reimagined

In this article we are going to look at some ways we can improve WordPress to make it way more user-friendly for content editors and business owners.

So let’s jump right in and look at 6 ways that we can improve the editing experience of this awesome Content Management System known as WordPress.

 1. Allow designers to create more than one ‘post-box’

WordPress still has features from its early days of being a blogging tool. When you are writing a blog post, you are mostly dealing with text and a few photos. That’s why WordPress only has one post box, because it was designed for blogging type layouts. However, today we use WordPress more as a CMS, rather than strictly a blogging tool.

“Ultimately a big textarea to fill in page content is just a really terrible user experience. Remember content editors are our users as well.  We shouldn’t be happy providing this to people when there are much better ways to do this.” – Rachel Andrews

What we need is the ability to easily add multiple ‘post boxes’ which can be controlled and styled by developers.

With only one Post block, this means things like 3-Column Layouts, One Page Websites, Responsive Designs, and especially Parallax Designs are difficult to accomplish without a bit of “hacking”.

This functionality would also include the ability to include different types of editors for different post boxes.

So if we wanted them to only be able to edit text on the sidebar, that option could be hard-coded into the theme. Or if we wanted our Client to be able to add some simple headings and images in another section, that could be setup as well.

This all goes back to making things easy for Clients and “un-breakable” once we deliver the CMS to them.

One thing to remember when working with content blocks is that depending on your user, you will need to adjust the level of control over the content. You would want to provide a much more minimal set of controls for the average business owner versus if a content strategist was logged-in.

2. Improving the Editing Experience: Inline-Editing

While we can create advanced layouts using widgets, The Loop and custom post types, these are not very user friendly for our Clients.  It’s not very clear from the admin panel which feature manages what page section on the site.

How are our Clients supposed to remember whether they should be editing a widget, a post, or a custom field?

One answer to this problem is: Inline-Editing

What really got me thinking about this feature was the WordPress plugin Front End Editor or WP Inline Edit.  Both of these plugins give Clients the ability to edit different section blocks of the site from the front end of their website, if they are logged into WordPress.

Having an inline editor really solves a lot of the needless complexity when you need to make a few quick changes. No more jumping around back and forth from the admin panel and your website to change a few sentences.

A front end editor shines for simple changes, but when you need to add pages or do some major changes to the website, this is best left to an admin panel. Albeit an admin panel that is simple and breaktakingly easy to use.

We need to get creative here and design a front end editor that is easy to use, and can be customized depending on which section block they are editing. If the Client clicks on the title we don’t want a WYSIWYG editor with image embedding functionality to popup!

Having an inline editor like this would solve 4 problems we previously mentioned:

  1. WYSIWYG Editors give our Clients the potential to break things.
  2. Big Textarea content editors are difficult to use and allow for bad html to be injected.
  3. Designers don’t have enough control over document structure and semantics.
  4. Clients are confused because it’s difficult to remember where in the admin panel they should go to edit content.

A Good Example of Inline Editing

A new CMS on the scene that really looks promising is Barley. Barley allows you to inline edit your entire site, with the ability as a developer to control which editing fields are available for a block of content.

Barley CMS

According to the draft documentation:

“Barley reads HTML attributes on all elements to decide two main things: 1) Is the element able to be edited? and 2) What tools can the author use to edit those elements? Here is the HTML we use to determine that showing an example H1 tag.”

 <h1 data-barley="main_title" data-barley-editor="mini">

 – Plainmade Blog

What flexibility this would give to us as developers! Instead of providing our Clients with a huge textarea and WYSIWYG editor, we can allow them to inline edit their website while still controlling their ability to enter HTML.

Outlining the Inline-Editing User-Experience

A truly great inline editing experience will solve most of the difficulty and frustration with modern CMS’s.

If you think about it, there are really two main types of websites – content heavy ‘blog-style’ websites and ‘multi-column business layout’ websites. Both of these situations call for different editor implementations.

Using a big textarea WYSIWYG editor actually works okay for the ‘blog-style’ layouts. That’s why WordPress uses this approach, because it was originally created for this purpose.

The place where inline editing really shines is when you have ‘multi-column business layouts’.

Instead of asking our clients to login to an admin panel and then find the page and section they wish to edit, we can let them click on the content and start typing. What an innovation!

This is where CMS’s like Barley or Webpop get content editing right. They let clients edit their content right from a live page, while giving developers the power to choose what type of editing access the client has.

For a simple 3-Column layout like Kippt’s, Clients should be able to click on a column and type away.

Kippt - 3 Column layout

Arguably, in a situation where you are dealing with articles or little snippets – the content would be better managed with some form of a dashboard.

Even if you are working with a news site, the editing experience needs to be re-imagined in a more user-friendly way.

Here’s what the new editing experience look’s like:

New User-Friendly Content-Editing Workflow

This means that if you are on the homepage of a complex news site, and you click on the summary of an article to edit, it should either popup with a ‘quick access dashboard’ with the ability to change the photo and add text.

This is just one simple idea on how to make the editing experience easier overall.

3. Dashboard with Useful Stats and Feeds

The out-of-the-box WordPress dashboard is not very useful to most business owners. The power and flexibility of WordPress is that it allows developers to create their own plugins that can display info and feeds on the dashboard.

This means that we as a web community have failed in this area to create something that is useful for our Clients.

Let’s think about it: What are the things that most small businesses want to monitor on their website? Here are some things that come to mind:

  • Analytics
  • Revenue
  • Search Engine Traffic
  • Security Updates Needed
  • New Comments

This is where developers/designers need to rise to the challenge to create a plugin that turns the somewhat un-useful Dashboard page into something that is truly useful and beautiful.

There are plenty of Dashboard mockups on Dribbble to draw inspiration from. Here is one interesting example that shows sales information.

WordPress Dashboard Stats

 4. Create a Custom Welcome Page

Another super helpful dashboard feature is to create a page reminding your Client how to edit various parts of their website. This will require you to think through the most performed actions and outline the steps needed to accomplish those actions.

For our most recent project, www.sar847.com, we created a dashboard page for our Client that gave step-by-step info for the most commonly performed actions:

  • Edit a pages content
  • How to add images to the homepage slider
  • Modify a custom Sign Gallery
  • Add a testimonial

This page really made the difference for Sign-A-Rama, and they raved about how simple the backend was to use. All because we incorporated simple features that streamlined their editing experience.

Remi Corson has a great tutorial over at WPExplorer on how to create a Custom Welcome page.

How to Create a Custom WordPress Welcome Page

This could even be transformed into a guided tour through the admin panel if necessary. The possibilities are endless!

5. Simple, Beautiful, Responsive Dashboard Admin Themes

Remember, the admin panel of a website should only be used if major changes need to be made to the site – things like adding pages or posts, changing forms, uploading galleries or approving new users.

One of the core functionalities of WordPress is that it allows us to create custom themes for our projects. We need to be given the same power with the admin panel – custom admin themes here we come!

Right now, building an admin theme is somewhat difficult and is not very future friendly. This needs to change in future updates. By giving designers a well-documented modular system to work with, we won’t be dependent on the WordPress core to determine what the back end of our system looks and feels like.

Some may argue that this will destroy the “ease of use” of WordPress because horrible things could be hacked up, but it’s the same with WordPress themes. There are some horrible WordPress themes that people have designed, but there are also lots and lots of amazing designs that people have created.

Many designers have been reimagining what WordPress should look like on Dribble. One design that really stands out is this one by Saxon Fletcher:

Wordpress Reimagined_Saxon Fletcher

You can see how he has greatly simplified the whole editing experience into something more minimal and user-friendly.

Wordpress Reimagined_Saxon Fletcher2

Here are several others on Dribble:

Many designers on Themeforest have created admin themes for custom CMS’s. But many of these could conceivably be applied as a skin to the WordPress admin.

On Themeforest:

WordPress Admin themes are beginning to achieve some tractions around the developer community. Justin Tadlock wrote a great article about the need for WordPress admin themes. Also over at WP Realm, Brian Krogsgard wrote a great article about how the WordPress admin needs to be simplified.

It was super interesting to discover that the folks at DevPress actually created a WordPress admin theme that is installable as a plugin. Be sure to check it out.

So what are you waiting for? Let’s raise some support in the WordPress community for admin themes and get busy designing!

6. Improved Media Galleries

One huge problem with Media Galleries is that there is no way to categorize photos by categories or tags. One example of this would be to create a category of “Slider” that would grab any photos and display them on the home page slider.

Another problem with Media Galleries is that if you delete them from a page, they are gone forever. There needs to be a way to Manage Galleries in the Media section, rather than in each individual page or post.

The new media gallery in WordPress 3.5 is much, much better than previous versions, but it still has a ways to go before it is truly user-friendly for most business websites.

Conclusion

I hope you have enjoyed learning about different ways to make the WordPress editing experience more user-friendly for our clients. There is a lot of work to be done, so don’t just read and then forget. Challenge yourself to see how you can help to improve the CMS we all use and love.

Before we finish, I’d like to draw your attention to a new WordPress editing app by Tom Witkin. Tom has designed a greatly simplified editing experience that really shines for creating simple blog posts.

Poster: WordPress iPad App

 

Another designer that has been speaking out for a greatly simplified WordPress editing experience is John O’Nolan. John is supposedly working on creating a fork of WordPress that will be focused on blogging only. You can learn more about it here.

Ghost - WordPress Fork

Well that’s it for now. I’m super excited about the future of WordPress, and I’m looking forward to many great more great advances made in the CMS world that will make our lives and the lives of our Clients easier.

Until next time,

-Caleb

Join the discussion below, we'd love to hear from you!

  1. Dave Linabury

    When was this written? Great post, but all but one of these suggestions have been addressed and taken care of. #4 is the outlier. Good suggestion, too!

    1. Allow designers to create more than one ‘post-box’
    They can. It’s called Custom Post Types. You can add as many as you need.

    2. Improving the Editing Experience: Inline-Editing
    This was recently added (bugged me, too as wikis have had this for years).

    3. Dashboard with Useful Stats and Feeds
    Add WordPress’ JetPack plugin and you will have this.

    4. Create a Custom Welcome Page
    Not without a plugin and there are several that can handle this.

    5. Simple, Beautiful, Responsive Dashboard Admin Themes
    Part of all of WP 4x

    6. Improved Media Galleries
    Again, WordPress’ JetPack plugin solves this. Better galleries, including Carousels.

    Reply

Leave a comment

  • (will not be published)