Improving the CMS User Experience

Improving
the CMS User Experience
Randy Carey
CAREYTECH STUDIOS, LLC – CAREYTECH.COM
iCue Project – an intelligent approach to website management –
iCueProject.com

Slides with annotation
iCueProject.com -> presentations
This presentation includes slides plus my comments.
The format of many slides have been slightly altered to accommodate the yellow boxes (like this
one) that includes the annotations, i.e., the comments I provide when giving this live.
Links to other iCue presentations can be found at…

Improving
the CMS User Experience
Multiple studies have revealed that most users
are not satisfied with the usability of their CMS.
Although the CMS is essential for managing
their website and its content, they expect better
usability. This is true for all CMSs.
This presentation looks at how we can improve
the CMS user experience (UX) for those
managing the website and its content.

Some discussion and work
authors, thought leaders
This is a relatively new top – certainly one that is under-developed and under-discussed.
A good book discussing
the issues and suggesting
how they might be
solved.
Author of “Content
Strategy for Mobile,”
Karen has shown wisdom
and advice for CMSs.
Two CMSs that have
shown some discussion
and work in this area.
I focus on this area and prototype
in Joomla. …sharing ideas and tools
through the iCue Project.

Agenda
philosophical
 talking points about improving CMS UX
applied
 streamline workflows
 segmentation of users/roles
 resources

1. People choose to create their content
outside of the CMS
Let’s be honest. Most users created sizable content
elsewhere (MS Word, Google Docs, etc.) , then they
load it into the CMS. These apps have more
features and are ones people already feel
comfortable with.
Further, when it comes to collaboration, many
organizations stick to the old way. Docs are passed
or shared. Discussions, edits, and approvals are
managed via conversations. THEN, the content is
put into the CMS.

2. There are two models of web development
DIY (do-it-yourself) client - professional
The do-it-yourself model (DIY) does not
distinguish between site building and
content management. The same person
or team needs to be competent in both.
In contrast is the model where a client hires a
professional to provide the competency and
consultation of website development. This
allows the client to focus on the business side.

DIY dentistry
DIY appeals to many because they
don’t have to pay a professional, and
they think they have more control.
But on important and sizable projects,
DIY can cause pain.
The bigger companies show us by
example – hire a professional.
• get professional care and results
• focus on business instead of DIY.

the client-professional model
Ignore the DIY.
They will not
be your client.
The client is hiring you because they want a professional to handle the hard
parts and to provide added value. Focus on your client and delivering that
added value. CMS UX is an important value to add.

site builder & site builder business user
3. client-based projects are quite different
from DIY
content creator
Within the DIY, customizing UX doesn’t
add much value since the site builder is
the same person who manages content.
Tools for DIY projects use the same
interface for managing content as it does
for building the site.
In the contrasting model, the site builder
and business user are different persons.
There is significant value in the
professional delivering a tailored UX to
the business user.

site builder & site builder business user
3. client-based projects are quite different
from DIY
content creator
Too often I hear suggestions of making a professional tool more like some DIY tool. This is
not a model to pursue. A professional tool should accommodate the realities of two
different types of users – it should allow the professional to build a UX for the client’s use.

4. The tension between
simplicity-vs-full-featured can be broken
There is a natural tension
between feature-rich and
ease-of-use. Shift toward
features and they system
becomes complex. Shift
toward ease-of-use and
features need to be
dumbed down or sacrificed.

The DIY mentality
has us thinking we
need to pick the
CMS based upon
some compromised
level, balance
needed features
and ease-of-use.

But the client-
professional model
allows us to break
the tension
between features
and ease-of-use.

use a feature-rich CMS
deliver ease-of-use

The white arrows
reflects the work
you must do…
Create a separate UX
Develop streamlined
workflows, hide
complexity, tailor to
user groups, etc.
…to drive UX toward
what the end users
want and expect

5. It’s time to stop accepting CMS UX as it
comes out-of-the-box.
we can do better

What CMS lies behind this page?
Try this exercise for me…

What CMS lies behind this page?

We can tell the CMS behind the page if the page is an admin page. But we accept that
front-end pages are designed for its users, and if done well, one would not know which
CMS runs it.
The point I’m making…
We have come to accept that the UX for the content managers are not tailored to
these users and to their needs. We have accepted a one-size-fits-all UX.
But we are professionals, not DIYers. We can deliver better…

Create a different UX for our clients than the one we use for building the site.
While we use the “admin” template
to build the site…
…configure a “client” template and
deliver a tailored UX for our client to
manage the site and its content

Here is an example of a client
template and UX for the ticket
manger of a local theater.
implemented in the Joomla! CMS

Here is an example of a client
template and UX for the a local
brewery to manage the list of store
locations that will be displayed and
searched on their site.

Here is an example of a client template
and UX for the events manager of the
NBA team Timberwolves.
Note that nothing about this screen tells you that it is
implemented in Joomla.
It has been built to the end-user’s needs.

6. UX first
…don’t start with CMS limitations or developer’s perspective.
Don’t gloss over this one… When planning the UX, think first about the most ideal UX.
If you think about implementation too early you will build a compromised UX.
…example…

Front-end editing of modules.
Although it is a step in the right
direction, I feel this feature considered
implementation over UX.
The first version took the user to the
backend to login and then to the full
form in the backend.

The latest version allows one to edit via the front-
end, but it still throws virtually all fields at the
front-end user.
[a] If we restrict this user to front-end editing, do
we have confidence that the user understands this
whole set of fields?
[b] Six of the fields here can be set so that upon
saving the module disappears from the front-end –
preventing the user from recovering.

I think that if one were to start by planning
out the ideal UX for editing a module, they
would sketch something different.
I suspect that CMS implementation details
(instead of UX planning) drove these
design decisions

Restaurant:
Needs to announce holiday hours
Two years ago I dreamed of
what front-end editing of
modules should be like. I built
and demoed a prototype.
Let me share a few slides
here to illustrate a UX-first
approach.

Restaurant:
A restaurant manager wants to update the
“hours” module. She logs in, sees/clicks the
button, and is presented with the one field
she needs to edit. Save updates via AJAX.
Isn’t that what the client expects and wants?

Restaurant:

Another user can edit some
list display features.

Fields can be segmented by type (e.g., filters,
display, links, advanced). Then different users can
have front-end access to different fields based
upon membership in usergroups.

Isn’t this what user’s want?

UX first
When planning the UX, start by thinking of the user and
what the user needs to accomplish. What is the best UX
and workflow for the user to accomplish his/her task?
Then… ask yourself how you would implement it.

7. CMS UX adds value
This illustrates importance of features vs
usability by those evaluating a CMS.
As a project moves from simple (left) to
large/complex (right), the importance of
usability rises faster than the importance of
features.
LESSON: The bigger the project, the more that usability
adds value in the eyes of the client.
I recommend that when you pitch a prospective client that
you demonstrate the usability that we are showing here.
You will gain a competitive advantage.

8. CMS UX is only partially solved by the CMS –
…it is primarily solved by the site developer
Developing a UX for each client is, well, developing. The
CMS and tools can be enabling in this area, but delivering
tailored UX takes skill and the willingness to implement it.
In this illustration, the blue arrow represents
this skill and work that it takes to develop
and deliver a quality UX for managing the
site and its content.
The CMS enable us. It is up to the site
developer to conceive, build, and deliver UX.

You have clients
…they expect you to deliver more

Application of UX/AX
Identify and streamline workflows
Segment users into roles. Deliver UX/AX appropriate to each.
Resources for further thought and dialog
Moving on from the talking points…
…let’s look at some application principles

• templates
• MVC & overrides
• extensible
• modules
• ACL / segmentation of users
A CMS provides features for building a
website.
I use Joomla. It offers these features

• templates
• MVC & overrides
• extensible
• modules
• ACL / segmentation of users
Joomla is “reflexive” : It is built with the same
technology used to build a website’s front-end.
That means its admin/editing side can be built
with the same features available to the front-
end:
highly extensible, can be modified with
overrides, can be configures with modules, and
client roles can be established with usergroups And that leads us to craft client-specific UX
building upon a client template.

Streamline the Workflows
I can provide only an overview here.
I have a full presentation on workflows
with annotations, of course

A few years ago we got my mom the simplest phone
we could for calling incase of an emergency. I
programmed in the relevant contacts/numbers. But
she had to remember a non-intuitive sequence of
steps just to get to the list of contact.
In the scenario of an emergency, I was skeptical that
she would be able to navigate the options without
making a mistake. The multiple steps was a problem.
We found a surprisingly simple
solution – a device with one
button. In case of an emergency,
just push the button and
someone will respond who knows
who she is, what her contacts are,
and can act on her behalf through
this voice conversation.
ONE button – image that!

Workflow1 – sequence of steps
Workflow2 – dependencies among users
To be clear, when I say “workflows” I am
using the first definitions.
I am not talking about the enforced flow of content
such as author->editor->publisher.

Identifying tasks
This is important, but no one seems to be talking about it… How do you identify the
tasks that the client will need to perform with the CMS? We need to identify these
before we can think-through the workflows. And we need to know the workflows if
we are to train users and provide adequate documentation…
…and we need to know the workflows if we are to streamline them.

start task  manage list  create/edit item
So Joomla provides us with this efficient pattern.
It is typically a two- or three-step pattern.

 nothing that is not needed
 tuck-away options that are advanced or less frequently used
 reduce number of steps
 sequence of step – sequence is obvious and intuitive
 consolidate steps and tasks
 client-centric labeling
 segment users −> tailor to each user group
 intuitive – reduce need for training and expertise
 tips and help
First principle…
Waldo is much easier to find if he is
more prominent and among only the
few characters we need to consider.

Your client has a task to start.
She asks herself: Where do I start?

It is much easier to know where to start when the
starting points are more prominently displayed and the
competing noise is removed.
If a user comes to the CMS to start a task, show only
those starting points that are relevant to this user.

We know the user’s role and what
button he clicked. Let’s lead to a list
page that has the filters preset, so the
user sees only the items he needs to
see.
...do-able in Joomla with the right tools

…the Contacts form contains a lot of field types. If we remove all those fields that a
company decides it does not need, we get a shorter form, and the user does not
have to guess as to which fields she should consider and complete.
…doing that streamlines her workflow.
before after

Are they able to find the button they need?
I know that even I struggle with that.

I think we do better to reduce the list to just
the few items they absolutely need…
It is easier to find the thing you want when it
is set prominently among just a few items.

Microsoft applies this principle for setting up email accounts.
Just the fields that are always needed are on the opening pane.
The fields that are advanced or rarely needed are accessible – but
it is assumed that the person with the need and capability to set
them is also motivated and capable to drill to them, as needed.

To accommodate the users of this ecommerce site, I provided
icon-based quick links for the common tasks. The menu contains
dropdown items (thus tucked out-of-sight) for the more advanced
functions that they rarely need.

I think our forms ought to contain all required fields on the first tab.
All other fields can be organized on categorized tabs – to be out-of-
sight, easily ignored but recalled only when needed.
We might not get this out-of-the-box from the components we use, but Joomla allows us to
override the template files for these forms, and that enables us to re-organize fields and tabs.

 sequence of step – sequence is obvious and intuitive
client-centric labeling
 tips and help
We might not always get to a single step,
but look for ways to eliminate or combine
steps.

– Starting a Task –
1. Replace multiple steps with a
single one (less for the user to
remember and fewer chances for
user to make mistake)
2. The starting point is obvious,
and the next step will appear
after clicking…
1
2 3
1

 sequence of steps is obvious and intuitive
client-centric labeling
 tips and help
Wherever one is, the next step
should be obvious and in plain
sight.

1. The “single” step here is to
work down the list of fields.
2. That flow is obvious. Because
we already removed
unneeded fields, the user
does not have to guess which
fields to user or ignore.
3. The initial tab contains all the
needed fields – and a second
tab is opened only for
advanced or rare needs.
List fields in a logical, sequential order that
makes sense to the user and workflow.

 task-centric labeling
 tips, help
 task-specific extensions instead of generic solutions
In this old example: Joomla’s language files were used to override
the labels. The new versions include help tips where needed and
style them with HTML/CSS (that can be used within an overriding
translation string)
Also, note that the color of the labels denote required, important,
and safe-to-ignore.

 tips, help, documentation

Task-specific extensions
eventsRestaurant menustestimonials
specialized
inventory
listing
By “task-specific” I am referring to extensions that
use task-specific data.
I feel these specialized extensions lead to better and more-
streamlined workflows than we get by forcing the solution
through generalized extensions such as Articles.

I will illustrate with a client
example: A pet store
owner wanted to display
what puppies he has in
stock at any given time.
The information for each
puppy is specific, such as
gender, breed, color, date-
of-birth, AKA papers, etc.

1
Step 1:
Provide a simple starting
point on the dashboard.

2 Step 2:
Being that this extension is based upon
task-specific data, the list view provides
the appropriate summary data,
including a photo tied to each record.

3
Step 3 :
The user walks through the sequence of
fields on this simple form. Each field is
tuned to the options and other specifics
for that field type.
Just three simple steps, all flowing in an
intuitive sequence. Can’t really get much
more streamlined than that. And we owe
much of it to being task-specific.

CCK example.
I knew I could create this with a
CCK, but I felt the result would
lead to a poorer user experience.
To illustrate it, I built the same
application in K2.
Steps 1-2-3:
Not only does this require extra
navigation steps, but the user
had to know to select “K2”
(which has no meaning to him) and
then select “Items” among the
many options.

5
Step 4:
Select the category, which
effectively gets us the
“puppy” application.
Step 5:
Select/Create the item –
Not the list has no photos or other task-
specific data that would be helpful in finding
and selecting the desired item to edit.

5
…user needs to know which fields to
use,
and which to avoid (shown here in yellow).
Step 6:
The page opens on the first tab, which is
not used. User has to know which tab to
switch to.
Step 7:
Switch to “image” tab.

3
CCK led to 7 steps with pitfalls along the way.
In contrast…
As easy as 1-2-3:
The task-specific extension can provide
a workflow that is about as simple and
as streamlined as one can image.
2
1

task-specific &
custom-developed
CCKs &
generic solutions
In my eyes, the UX-1st
approach prompts for an
application that is task-
specific or custom-built.
The CCKs or user of generic apps (such as
Articles) is typically chosen by the
developer for a quicker turn-around. this
benefits the developer at some UX (and
even performance) loss to the client.
If we are serving clients and “racing to the top,” UX-1st
Recognize budget and time constraints, but always consider UX-1st

Component-Creator.com
Fortunately for me, I am a developer.
So I am able to leverage a tool like
this as I build custom extensions.
These custom extensions allow me to
build some very simple and intuitive
workflows for very specific client
needs.

 tips, help
 segment users into roles −> tailor to each role
This final principle is important and powerful.
It allows us to create UX tailored to different
roles within an organization.

Identify Roles and Segment UX
Again, I can only summarize here.
Go to iCueProject.com -> presentations
for a link to my full presentation on
Joomla’s ACL and roles. (annotated)

The idea is that for each user
group we assign a user to, that
adds to what the user can see
on his/her dashboard.
How is this implemented? We
assign each role-based
usergroup to a custom access
level that includes only that
user group. We create an admin
module that contains the set of
tasks needed by members of
this role-based group. And we
assign that module to the
access level for this group. So
each module of tasks displays
only to members of that
usergroup.

County department example
I will illustrate…
I built a site for a county that had a
segmentation of over 20 departments
and sub-departments. Each
department was represented as a
usergroup, and the backend
experience of any given staff member
was affected by that user’s group
membership.

County Auditor’s dashboard Here is a typical dashboard for one of
the departments. Dept Home leads
directly to the item view for that
department. The other links lead to
list pages auto-filtered to just those
the items belonging to this
department.

Auditor’s department pages
…so on the auditor’s dashboard the
link for Dept Pages leads to this auto-
filtered list. The Auditor can create,
re-order, edit, and delete any/all
articles – and just those for her
department.

Auditor’s JCE settings
And the department-specific
settings are applied to the JCE
toolbar as well. A user who clicks
on the image or document buttons
are led to the department-specific
directory for that department.
So a department can add, manage,
and delete its own assets – without
affecting assets of other
departments or “polluting” a
shared directory.

County Sheriff’s dashboard And here is a view of the Sheriff’s
dashboard. The Sheriff’s department
contains two sub-departments, so he
can see all three sets of tasks, but
anyone belonging to a sub-department
will have access only to the dashboard
tasks for that sub-department.

County Webmaster’s dashboard Most multi-segmented sites will
have special roles for a webmaster
and other administrative tasks.
In addition to containing modules
of tasks, their dashboard often
includes reporting modules as well.

because you are a professional serving clients
I’d like to close by re-emphasizing three slides…
Because you are serving clients
• you need to deliver added value.
Developing tailored UX for your
clients is a huge competitive
advantage
• don’t model the UX after that of DIY
tools. You client-professional model
is different, enabling you to do much
better than out-of-the-box.

UX first
Improving your client’s UX should
start with thinking about UX first:
• lean workflows
• different UX based upon user roles

race to the top
It does take extra work. But you are serving clients.
If you choose to “race to the top” (competing on
added-value instead of competing on price), then this is a
huge opportunity.
How much longer do you think you can ignore it?

Resources
This and related presentations, as
well as articles, are available here.

Resources
iCueProject.com -> products
The tools I use to craft the examples
you saw are discussed and available
here:

Resources
email subscriptioniCueProject.com
Please subscribe to the iCue email list
for advance notices and information
you can contact me here

Randy Carey
CAREYTECH.COM
taking on new clients
or outsourced projects
I take on clients through
Careytech Studios, LLC

Improving the CMS User Experience

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Improving the CMS User Experience

Similar to Improving the CMS User Experience (20)

Recently uploaded

Recently uploaded (20)

Improving the CMS User Experience

Editor's Notes