In one of my previous posts, I talked about how your clients will value the sites you build for them if they can contribute directly to them.
In another post, I talked about how to make sure the client couldn’t break the site through the dashboard.
Now that the dashboard is safe, let’s make it easy to use!
Why isn’t it useable out of the box?
WordPress is actually very useable out of the box. The community has made it a point from day one to prioritize user-friendliness over developer-friendliness. Which, as a developer, I’m just fine with. My sites don’t thrive because they are useful to me, they thrive because they are useful to clients.
That being said, WordPress can’t be tailored to every client’s needs. It’s impossible to cater to so many solution domains. So, for the best results web designers and developers should take extra care to do that final bit of tailoring and customization.
The most important component to customize: the post editing screen.
After the site is built and handed over, the client will be spending the most time on the post editing screen. They will be writing content, editing and publishing it all from this screen.
If you only customize one thing, customize this screen.
What needs to improve about the post editing screen?
The post editing screen has some of the same issues that American tax forms have. (This is probably why people hate filing taxes).
[T]he IRS 1040, is indicative of the lack of user-centered design forced upon the public… The form violates many principles of usability:
- no clear path toward completion
- a lack of hierarchy
- a plethora of alignments and inputs
- and a dearth of plain language.
Having a giant amorphous editor box might work for a simple ‘blog’ post type but it’s definitely not a good choice for a domain oriented post types such as ‘event’ or ‘product’.
For these domain-oriented post types, it’s crucial that the post editing screen provides what Gregg Bernstein mentions:
- Simplified User interfaces for Inputs
- A clear hierarchy
- Just in time cues in plain, or domain specific, language.
- A clear path towards completion
Luckily there are many plugins that make this very easy to do. I’m going to show you how to use Advanced Custom Fields (ACF) for this since that’s the one I like best.
Simplified User interfaces for Inputs
In a nutshell, ACF is a plugin that skins Custom Field inputs on post editing screens with several different kinds of Meta-Boxes.
Basically, instead of this:
ACF gives you these:
Having different UIs for different kinds of input is a lot more intuitive than the custom fields area. The client doesn’t need training or instructions to know what is expected. The UIs are self-explanatory.
Not only are these UIs gorgeous, they also handle input validation and sanitization. This means that the client will receive immediate feedback if they enter an incorrect input. Sanitization means that you don’t have to worry about something dangerous being saved to the database.
You can also add custom validation on many field types. For example, you can specify character counts for text, and acceptable size ranges for images.
I use these features to enforce the design decisions that my designer colleague makes on the site design. This makes sure that the site looks good long after the handoff.
A clear hierarchy
It’s always frustrating when forms are non-intuitive. We expect important fields to precede unimportant one. We expect the fields to be logically ordered. With the generic post editing screen, we have no way globally set the logical order for the fields. Individuals can move around the fields for themselves, but new users will have the default positioning.
ACF allows you to choose where the field group is positioned relative to the other items on a post edit screen. If the ACF fields are the most important parts of the screen you can choose to put them right below the title.
Hierarchy is also important inside a form. The fields should follow logic as well. ACF allows you full control of the field order within the field group using a drag and drop interface.
The pro version also comes with a lot of features to organize the input section such as repeaters for nested fields, and tabs for grouping fields.
Just in time cues in plain, or domain specific, language.
If the most important thing in usability is “don’t make me think” then the second most important thing is “don’t make me remember”.
Using custom fields requires the client to remember which labels go with what and which they need to skip.
With ACF you can add a descriptive label, description and other helpful cues to each field. With this, you can add labels that are domain specific to the client such as ‘Price’ or ‘Event Address’.
The above example also has placeholder text, prepended text and appended text. These help in the same way. For example, you could tell your client to submit a price in USD by prepending a ‘$’ or you could tell them to submit a price in Euros with a ‘€’.
A clear path towards completion
No matter what form I’m filling out, I always keep track of where I’m at and how much more I need to do to finish. This is no different for clients who are creating content. Knowing that they have a finite amount of fields to fill will make it much easier for them to generate content.
Unlike custom fields, ACF allows you to set rules for where to show which fields. This way your clients won’t need to remember that they should only use the ‘price’ field for products. With ACF you can set it up so that the ‘price’ field shows only in products.
You can add rules for a variety of conditionals such as show if ‘Category’ is equal to ‘Mission Critical’. Or show if ‘Gender’ is not equal to ‘Female’.
ACF also allows you to show and hide individual fields with conditionals. This makes the dependencies between fields very clear. It does this with conditionals such as:
“If the field ‘Offer Availability’ is set to ‘Limited Time Only’, show the ‘Offer End Date’ field”.
“If the field ‘Status’ is set to ‘Awaiting Input’ show the ‘Required Input Description’ field”.
Additionally, if there are default boxes like the Editor or Excerpt box that are irrelevant, ACF give an easy one-click check box to hide them.
By only displaying relevant data on the post edit screen you give the client a clear goal for every kind of content: just fill out the form.
- Gregg Bernstein had another criticism: “[the 1040] has no discernible starting point”. We actually do have a clear starting point on post editing screens, namely the title field. It is possible to replace the placeholder ‘Enter Title Here’ with something more fitting like ‘Enter Product Name Here’. I will show you how to do that in another post.
- ACF has a free version and a pro version. The pro version has more field types than the free version. I wouldn’t spend too much time debating on which one to use. It’s really easy to upgrade. And it’ll be a no-brainer when you actually need it.