Improving the CMS User Experience

Improving the CMS User Experience

Randy CareyCAREYTECH STUDIOS, LLC – CAREYTECH.COMiCue Project – an intel l igent approach to webs ite 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…

http://icueproject.com/presentations

http://icueproject.com/presentations

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 discussingthe issues and suggestinghow 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.

Agendaphilosophical 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 dentistryDIY 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 differentfrom 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 differentfrom 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…








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.

implemented in the Joomla! CMS

Here is an example of a client template and UX for the events manager of the NBA team Timberwolves.

implemented in the Joomla! CMSNote 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.


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?


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 firstWhen 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 valueThis 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

Streamline the Workflows

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 itemSo 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.

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 client-centric labeling segment users −> tailor to each user group intuitive – reduce need for training and expertise 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…

12 3

1

nothing that is not needed tuck-away options that are advanced or less frequently used reduce number of steps sequence of steps is obvious and intuitive client-centric labeling segment users −> tailor to each user group intuitive – reduce need for training and expertise tips and help

Wherever one is, the next step should be obvious and in plain sight.

– Item View – 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.

nothing that is not needed tuck-away options that are advanced or less frequently used reduce number of steps sequence of steps is obvious and intuitive task-centric labeling tips, help task-specific extensions instead of generic solutions

segment users −> tailor to each user group

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.

nothing that is not needed tuck-away options that are advanced or less frequently used reduce number of steps sequence of steps is obvious and intuitive task-centric labeling tips, help, documentation task-specific extensions instead of generic solutions

segment users −> tailor to each user group

Task-specific extensions

eventsRestaurant menustestimonials

specializedinventory

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.

1Step 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.

3CCK 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.

21

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.comFortunately 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.

nothing that is not needed tuck-away options that are advanced or less frequently used reduce number of steps sequence of steps is obvious and intuitive task-centric labeling tips, help task-specific extensions instead of generic solutions

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 firstImproving your client’s UX should start with thinking about UX first:• lean workflows• different UX based upon user roles

race to the topIt 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

iCueProject.com -> presentationsThis 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

contact me

Please subscribe to the iCue email list for advance notices and information

you can contact me here

Randy CareyCAREYTECH.COM

contact me

taking on new clientsor outsourced projects

I take on clients through Careytech Studios, LLC

Improving the CMS User Experience

Technology