8 Ways to Improve the User Experience of Your WordPress Admin

   Agnes Bury

How to

June 10, 2015
9

He says he gets drunk to test your website, and he will charge you 500 bucks for it. Does this sound like a joke? No, this is how an experienced UX professional advertises himself to attract more customers. “Your website should be so simple, even a drunk person could use it,” he explains. We do not know how successful he is, but judging by the feedback that we are receiving from our case study interviewees, UX is a hot topic these days and your customers are willing to pay for improving it!

So why not simplify your customer’s life and earn more money? Both sides will be happy. Today, we show how you can do this by improving the UX of your WordPress dashboard. Stay with us to see real life examples coming from our customers’ sites!

Great UX of your site: not only your front-end matters

8_ways_to_improve_UX-0010User Experience (UX) involves a person’s behaviors, attitudes, and emotions about using a particular product. This is what Wikipedia says.

In real life, great UX comes down to the “Don’t make me think” rule. The more user friendly your interface, the more positive emotions it triggers, and that is the point!

If you are a web developer, you have probably heard hundreds of golden rules on how to improve your site’s front-end to make the visitors of your site happy.

However, a WordPress-based site is not only the front-end. The WordPress user is not only the site’s visitor. In most cases, your project initiator will become the end user of your WordPress site. In most cases, they are all non-techies. That is why they came to you instead of developing the sites themselves.

If you forget to please this particular user, there are two possible outcomes:

  • Your site’s carefully crafted front-end will turn into a disaster sooner or later.
  • You will be harassed by emails and calls with hundreds of questions from the poor user, who is quaking in terror for fear of damaging something when changing the contents.

To avoid such problems, build your site keeping in mind that UX applies also to your WordPress admin. Here, we share some simple but effective practices regarding how to improve the UX of your Dashboard.

Tip 1: Separate your contents using Custom Post Types

Example 1: Separating your content using Custom Post Types.
Example 1: Separating your content using Custom Post Types. Source: Doing business in luxury cottage accommodation.

A basic thing that you can do to improve the UX of your WordPress admin is to organize the contents well. Fortunately, the times when WordPress posts were organized only by categories and tags are gone.

Launching Custom Post Types was like a revolution for WordPress. Indeed, it is a much smarter way to separate your contents, especially if you deal with different kinds of data.

Custom Post Types provided a strong basis for Darren Stevens’ site, one of our first case study interviewees. He created Cottages and Places as Custom Post Types to sort out the real estate data (see Example 1). It has been over a year now since he built the site, and it is still doing fine.
How it improves UX

  • You will reach appropriate groups of posts faster. Simply a glance on the left menu in your WordPress and you know where to click to find a particular group of posts.
  • You will be able to add more than one category level. In Darren’s site, cottages have been categorized by Cottage Regions and Cottage Styles. However, you can assign more taxonomies for your Custom Post Types.
  • You will be able to adjust the edit screen for each group of posts individually. Look at the following examples. They come from our OnTheGoSystems.com site, and show two totally different Custom Post edit screens. The first picture shows the Team Custom Post Type in action. It contains two custom fields and no classic WordPress editor, whereas the other one, Open positions, uses the standard WordPress editor only.

Example 2: Separating your posts with Custom Post Types allows you to adjust a post edit screen for each group of posts individually.
Example 2: Separating your posts with Custom Post Types allows you to adjust a post edit screen for each group of posts individually.

Source: WordPress back-end of our OnTheGoSystems.com site

How to

To separate your posts, use the Types plugin (a free component of Toolset) and create appropriate Custom Post Types. You can bind it with some taxonomies (to categorize) and a group of custom fields.

8_ways_to_improve_UX-0005Hint. If you fall in love with CPTs, there is a danger that you will create new ones for every new object that appears on your site. That is not good. Keep related objects together. If they share the same behavior, it is better to put them all under one Custom Post Type and categorize further using a taxonomy.

Example

  • Bad: “Fantasy,” “Thrillers,” and “Criminals”—three separate Custom Post Types were created to store books of each type. However, they all look the same.
  • Good: “Books”—only one Custom Post Type was created and associated with a taxonomy called Book type with the following taxonomy terms: “Fantasy,” “Thrillers,” and “Criminals.”

Tip 2: Add relevant icons

Example 3: Using Icons for Custom Post Types
Example 3: Using Icons for Custom Post Types.
Source: How to use Toolset and Easy Digital Download plugin to build an e-commerce site

All new Custom Post Types are registered with a default icon, a pin, which is the same as that used for regular WordPress posts.

However, you can assign a custom icon for each Custom Post Type. See Example 3. Michael Seminatore used the Music Note Icon to represent Performances and a User Icon for the Artists.

How it improves UX

  • Looking at icons helps to locate the specific group faster than reading its title.
  • Looking at icons helps your mind to create some associations with the visual image and allows you to guess the purpose of a given post. This way a user will quickly remember what is what.

How to

In the Types plugin go to Types > Types and Taxonomies > Edit your Custom Post Type and use the Icon field.

Example 4: Choosing an icon for a Custom Post Types with the Types plugin
Example 4: Choosing an icon for a Custom Post Types with the Types plugin

8_ways_to_improve_UX-0005Hint. Do not use random icons. The list of icons available in Types is huge. Spend a few minutes to select the one that corresponds to the purpose of the Custom Post Type. This investment will pay off.

Tip 3: Organize your data details using custom fields

Example 5: Organizing your post data using custom fields.
Example 5: Organizing your post data using custom fields. Source: How to create a news site with WordPress if you are not a PHP developer

To enter your Custom Post details, you can, of course, use the big edit field (Editor) under your post title, but why not take advantage of using custom fields?

This is what Natalia Casado did, for her site “La Agenda Cultural.” In the picture on the left, you can see that movie information consists of movie details, such as duration and director. The picture on the right shows how the data are sorted out in the WordPress Dashboard, using custom fields.

How it improves UX

  • Your user won’t care about the formatting (such as bolding and proper margins) when it comes to displaying the fields on the front-end; you will handle it with CSS.
  • Your user does not have to memorize the order of the information posted. Users simply fill in the needed values.
  • Your user will not miss anything important. Each field indicates what value is needed. Additionally, you can make some fields mandatory. Types also allows that.

How to

In the Types plugin go to Types > Custom Fields and create a new group of fields. Associate it with a desired Custom Post Type and add fields.

Example 6: Creating custom fields with the Types plugin and associating them with a CPT (here: Movies).
Example 6: Creating custom fields with the Types plugin and associating them with a CPT (here: Movies).

Tip 4: Get rid of unnecessary stuff

Less is more. If you do not need to use the Editor, hide it, as did Neil Curtis, the author of turbotrainer.com. Look at Example 7: there is no Editor field. It wasn’t needed, so why keep it?

Example 7: Hiding the Editor for Custom Post Edit Screen.
Example 7: Hiding the Editor for Custom Post Edit Screen.
Source: How to use Types and Views plugins to build a site that earns money

How this improves UX

  • You or your customer will not waste time thinking what to put in this field. Its contents are not displayed anyway.
  • You will reach your custom fields faster without scrolling.

How to

In Types plugin go to Types > Custom Post Types and in the add/edit Custom Post Types screen scroll down to the Display Section. Clear the Editor field.

Example 8: The Types plugin—Switching off the Editor field for Custom Post Types.

Example 8: The Types plugin—Switching off the Editor field for Custom Post Types.

Tip 5: Take advantage of using multiple WYSIWYG Editors

Look at Example 9. It comes from the crunchynotes.com site for a music theatre composer. The owner needed to present a lot of information about each show but did not want to overwhelm visitors. David Zack used tabs to improve the front-end UX. Sure, that is smart and nice, but how about the back-end?

Example 9: Organizing post details when there is a lot to present.
Example 9: Organizing post details when there is a lot to present. Source: How to build a functional and easy-to-maintain site for a musical theater composer

Take a look at the following examples. You will see that the information presented in the back‑end fully reflects the structure presented to the front-end visitor. In addition, the back-end user can use a separate WYSIWYG Editor to edit each tab.

Example 10: Organizing massive post details in your WP Dashboard with WYSIWYG editors.
Example 10: Organizing massive post details in your WP Dashboard with WYSIWYG editors. Source: How to build a functional and easy-to-maintain site for a musical theater composer

Example 10: Organizing massive post details in your WP Dashboard with WYSIWYG editors.
Example 10: Organizing massive post details in your WP Dashboard with WYSIWYG editors. Source: How to build a functional and easy-to-maintain site for a musical theater composer

How it improves UX

  • End users can easily edit the descriptions in the way to which they are accustomed, as in office editors.
  • The name of each field corresponds to the name of a tab so the user will not mix the data containers.

How to

The Types plugin allows you to add customer fields of the WYSIWYG type:

Example 11: Defining a custom field as WYSIWYG with the Types plugin.
Example 11: Defining a custom field as WYSIWYG with the Types plugin.

Tip 6. Add meaningful descriptions

Editors of the larimerworkforce.org site must fill out some information for the homepage slider:

Example 12: Adding meaningful descriptions (front-end).
Example 12: Adding meaningful descriptions (front-end). Source: How to use the Types and Views parent-child relationship feature to build a multi-level slider

This is how a single slide looks from the editor’s perspective:

Example 13: Adding meaningful descriptions (back-end).
Example 13: Adding meaningful descriptions (back-end). Source: How to use Types and Views parent-child relationship feature to build a multi-level slider

As you can see, the back-end contains prompting hints so that the editor will know exactly which fields correspond to which values displayed on the front-end. Zach Swinehart, the author of the site, proved that he knows how to make the end user’s life simple.

How it improves UX

  • The user does not have to guess the purpose of each field. The prompting hints explain everything.
  • The leading prompt indicates the purpose of the whole section. If there are more sections, the user will quickly understand the aim of each one.

How to

Go to Types > Custom Fields and fill out the description fields, both for the whole Edit Group, as well for the individual fields. See the following screenshot.

Example 14: Adding description for a group of fields with the Types plugin.
Example 14: Adding description for a group of fields with the Types plugin.

Tip 7: Use parent-child relations

If you are using Custom Posts that are related to each other, think about making one of them a parent of the other, as Jasper Galvin did in his site. Jasper’s projects consist of project parts, each of which was added as a separate post, but the data were linked. See Example 15.

Example 15: Using Parent-Child relations. Project posts are parents of Project part posts.
Example 15: Using Parent-Child relations. Project posts are parents of Project part posts. Source: Design first: How a non-programmer can build a portfolio site using Toolset

How it improves UX

  • If you are adding a new parent post, you can add its child posts using the same edit screen.
  • When visiting your parent post, you can see all the posts that are related to it.
  • You can manage (edit, delete) related data from one place.

How to

Go to Types > Add New Custom Post Type and scroll down to the Post Relationship section. Use the Parent or Child section (depends what CPT you are editing) and select the desired Custom Post Type.

Example 16: How to create parent-post relationships with the Types plugin.
Example 16: How to create parent-post relationships with the Types plugin.

Tip 8: Show custom fields as columns

This is a brand new feature of our Types plugin so we do not have any real life evidence to show it in action (be the first to share and apply to our case studies). However, this is something that definitely makes your customer’s life easier.

Look at the example. The page of your WP Dashboard that lists all your Listing Custom Posts displays some custom fields as columns.

Example 17: Using custom fields in columns.
Example 17: Using custom fields in columns.

How it improves UX

  • You do not have to look inside each post individually to check the values of its fields.
  • If you include a picture as a column, you will find the desired post faster.

How to

Go to Types > Custom Post Types. Provided that you have already associated a Group of Fields with this Custom Post Type, locate the section entitled Custom Fields on the right side. Select the fields you want to show as columns. That’s it!

Example 18: The Types plugin. Choosing custom fields to be displayed as columns.
Example 18: The Types plugin. Choosing custom fields to be displayed as columns.

8_ways_to_improve_UX-0005Hint. Do not include every custom field as a column. Too much information will overwhelm your end-user instead of helping him or her. Choose only those fields that hold values that you will be frequently checking.

For example, if you used a custom field to include a post in a slider, displaying it as a column will help your user to find all featured posts faster and will eliminate the need to go inside each one to see whether it was featured.

What is your way to improve the UX of the WordPress Dashboard?

Our set of tips and hints is fairly large, but it is by no means exhaustive and we are eager to see more examples.

How do you improve the UX of your WordPress admin? Please help us to enrich this list with your case. Share your experience with us and with other WordPress users.

 

Comments 9 Responses

  1. Excellent post!

    I love the features that allow me to put custom fields on the backend list pages for my custom types, and the ability to add the quantity of these custom types to the “At a Glance” section of the WP Dashboard. These would be good additions to a post like this.

  2. As you guys stated above, “The list of icons available in Types is huge.“. So… I would love for you guys to have a reference page on your site showing the icons in big grid like http://genericons.com does. That way I can easily find the icon I want to apply w/o hunting and pecking through your lengthy list in the admin.

    I also can’t state how much Toolset has changed my development with WordPress. I’m able to offer so much more to my clients and take on new jobs I was never comfortable with in the past. Thank you!

    • Good point! I will add it for our Types todo list. Thanks for your comment David!

  4. Wow! The Toolset just keeps on giving. 🙂

    Thank you so much for such a thorough overview of possibilities.

  5. Great article. I just started using Toolset and am very pleased with what I can do with it so far. Keep up the great work.

  6. Thank you for all your comments. Nice to read you like the article. Comments helps us to understand what stuff you find useful. Any feedback always appreciated.