Streamlining the Client's Workflows (in Joomla)

Streamlining the Client’s WorkflowsRandy CareyiCue Project – an intel l igent approach to website management

iCueProject .com

How to read this presentation…

This presentation was first presented at Joomla Day Boston, March 15, 2014. This sequence of slides is basically identical, but each slide has been annotated – graphics adjusted with a summary of my commentary added as text.

Enjoy, and I hope you find this discussion valuable. Resources referenced

in this presentation

• iCueProject.com • Lab of plugins (such as fix for the 3.2 filter bug):

http://iCueProject.com/downloads/lab

• ‘Client’ template and linking tools: http://iCueProject.com/products

http://icueproject.com/

http://icueproject.com/downloads/lab

http://icueproject.com/downloads/lab

http://icueproject.com/products

http://icueproject.com/products

Agenda

“workflow” identifying tasks streamlining tools and a workable approach

Workflow1

Workflow2

I have come to realize that when I refer to “workflow” in the area of web management, the other person often thinks of something else.

It dawned upon me that the one word “workflow” bears two meanings. We need to recognize this…

Workflow1 – sequence of steps

Workflow2What I’m calling “workflow1” refers to a sequence of steps to accomplish a task. Much like the steps to follow in driving from one location to another.

Workflow1

Photoshop is notorious for complex “workflows.”

In the context of Photoshop, the term “workflow” bears this meaning – steps that one follows to accomplish a task.

Workflow1

1

2

3

4

5

6

7

8

9

For instance, the Web holds many tutorials on the “workflow” used to adjust an imperfect photo into something better. A Photoshop “workflow” stresses a series of steps or actions one should take, the order of those actions, and how to do each.

For most software applications, “workflow” refers to a sequence of steps to preform a task or reach some end result.


Workflow2 – dependencies among users

However, you can google for “CMS workflow” and you see the meaning often is different. It usually refers the sequence of exchanges between multiple individuals with an emphasis on dependencies, handing off control, and permissions.

In Joomla we have an example of that: author -> editor ->publisher


Workflow2 – dependencies among users

Unfortunately, the second meaning of workflow interrupts the discussion about how to improve workflow in the terms that are more relevant to CMS users. These users often struggle with cumbersome steps that are not intuitive.

It is this first meaning, a sequence of steps, that I’m referring to: How do we make this sequence of steps intuitive, shorter, and less error-prone?

Whose Workflow1?I feel the real need is in improving the workflow for the client who manages the site.(in contrast to those who build the site)

The traditional approach is to use the same CMS interface for the client to manage the site as what the web developer uses to build the site.

I feel that this sharing is the initial cause of our CMS pains.

I believe we deliver added value when we deliver a CMS experience that is tailored to the needs and capabilities of those who will be maintaining the site and its content.

I realize that for some this is an unconventional approach. But I believe it is the right thing to do.

This introduces a new discipline into the field of web development.

The first part is what is discovering what is the appropriate user experience for any given client and the staff managing the site.

The second part is developing the skill and toolset for building this tailored experience.

Of course, this “new discipline” in web development requires extra work and resources from us. But I feel it is worth it…

1. It provides added value to the client. Clients are happier, referrals will go up.

2. If you do it right, it will cut down on your support calls. (I’ve already received reports of someone using a client template who is seeing the decrease in custom support tickets.)

3. It is a competitive advantage. When you compete against other web firms, demo the usability and workflows that you deliver. This area is major when a company chooses a vendor. You competitors will not be able to compete, and you will win business.

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.

Look at site – what content is likely to change?

• Collection• Management• Publishing

First we look at content. Every placehoder of content on the site. We ask if it is likely to change. If so, we ask1. How will the data be collected & entered2. How will the data be manage within the site3. How will data be published

Thinking about these will expose many of the tasks that someone will need to do.

Look at site – interactive features

Then look at any interactive features on the site: submission forms, ecommerce, even comments section. • How will these be created,

published, expired?• How will the incoming data be

monitored and responded to?

Look at site – admin and maintenance

• Upgrades• Backups• User management• Asset management• Managing expired content• SEO• Redirects• Creating new pages/modules

boundaries

site integrator client’s admin content creators

Then consider the spectrum of people who will be involved: the web firm who can provide maintenance, the client’s admin who can be trusted with more technical duties, and the content contributors.How will these tasks be divvied up? What is the skill level of those involved? This information should guide our decisions when selecting tasks to be streamlined within the CMS

the Joomla workflow

I assume you know this part, but it is worth stating so we focus on the fact that there are three common parts to the typical Joomla workflow.

starting a task or workflow

list view

item view

start task manage list create/edit item

So Joomla provides us with this efficient pattern. It is typically a two- or three-step pattern.

PrinciplesEach client is different. Each project is different. A one-size-fits-all approach will fall quite short of an approach that considers the specific of a client, the project, and the staff available. To guide us, to help us navigate new situations, we benefit by using principles to guide us – sort of as a usability compass.

I think principles are important. “Usability” is really a “soft” concept, and it can run amok due to everyone having his or her own idea as to what it means. Principles have great value in guiding us past untested opinions.

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 taskssegment users −> tailor to each user group intuitive – reduce need for training and expertise tips and help

Where’s Waldo?

He’s much easier to find when is is more prominent and apart from the unneeded noise

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.

It is not uncommon for a list view to contain pages of content, much of it irrelevant to the user’s current task.

Of course, the user can use filter to reduce the list to just those items that are relevant to the current task. …Of course we are asking the user to remember which filters to set, and how to set them for each task.

Here is list of modules filtered to “site” modules, a given position, and a particular module type. It produces a short list, but we are adding steps and details for the user to remember. We can do better…

?option=com_modules&view=modules&filter_client_id=0&filter_position=sidebar-a&filter_module=mod_articles_category

An under-used practice is auto-setting the filters by declaring them in the URL. Since we have created task icons that lead straight to this page for a given task, we can leverage this opportunity to add the filter settings as part of the link

Such filter parameters not only auto-set the current page’s filters, but they also store these as the current state within the user’s session. If the user edits an item and comes back to the list, the list remains filtered as before.


3.2.x dropped filter param behavior

…but there is a fix!

The bad news is that this behavior, found in Joomla since at least 1.5, was dropped in 3.2.0 for the core components.

The good news is that I was able to write a plugin that restores this behavior. You can get this plugin from the “lab” at iCueProject.com.

Back to “nothing that is not needed”…On the item view there can be several tabs and several fields per tab…

…tab 2…

…tab 3…

…tab 4…

Do you suspect that our users ever struggle finding the field they need among all that we show them?

…but if we remove all the fields that this particular user does not need…

…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

before after

HikaShop product page

HikaShop offers so many options that its products page is challenging.

I overrode the layout template and hid all the unused fields. The form is shoter, and the user does not have to remember which fields are used and which are not – if a field is on the form, they are to be considered.

Then there is the editing toolbar. So many appealing and powerful buttons. But by giving our users everything, are we doing them a service?

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.

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

How do we change what we get out-of-the-box?

I think you get the message. But how do we implement these changes?

How do we streamline what we get out-of-the-box?


Almost everything that I am showing can be done by overriding the layout template files. Most of these changes are relatively easy.

When I first presented on client usability, I showed how to make the changes in code. After talking with site integrators I realized that they want solutions that are installable and configurable….

Tools• client template• Client Links• Client Menu• Form Fields Manager• JCE menu-item buttons• misc plugins

So I have refocused my work. When I find something that “ought to be,” I try to build a solution in code, and then I try to encapsulate the solution into installable tools that can be shared. After I finish my presentation, I will demo these tools…

So what I show are things for which I have tools (available either now or a bit later).

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 taskssegment users −> tailor to each user group intuitive – reduce need for training and expertise tips and help

MS Outlook config

Second principle

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.

I really like the new menu feature on TinyMCE. It allows the editing menu to bury lesser used options down into the menu structure.

The button list can be lean without removing functionality from the user.

So I asked myself if I could do something similar with JCE.

I started by creating buttons that server as labels. Note how these labels group the buttons that I show.

Then I coded in menu-like behavior…

Click on one of the labels and it emulates a hide/show behavior. The related buttons are highlighted in red, and the lesser used buttons appear in the second row.

[1] Each button is a separate JCE plugin. Each plugin needs to be configured correctly to work. Each of the secondary buttons need to be ordered on their own row. …So it takes 20-30 minutes to configure this manually, and if someone doesn’t get it right, the user will be frustrated or blame the tool for not working. I don’t’ want to release it until I have a streamlined installation that auto configures the needed setting. So the project remains on the “drawing board.”

I’d like to make this available. Here are the current challenges…

[2] JCE is slated to migrate to the new TinyMCE foundation. I assume that version will have menus. If so, the buttons I just demoed might be short-lived in usefulness.

I will be looking for a long-term solution in this area. iCue will not be ignoring the toolbar.

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

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!

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.

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

Let’s look at the various screen types in Joomla and apply these three new principles where we can…

12 3

1

– 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…


– List View – 1. Remove the steps of filtering, reducing

the steps on this screen to just one.2. Filters are tucked away3. The list is the prominent focus. If the

task is to select an item from the list, it is obvious. And taking that step leads to a new page – the obvious next step.

Note that we succeed here much because we are using a task-specific extension. That principle is coming up.

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

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

This is an important principle. …and one for which Joomla is well suited.

Joomla’s ACL is not just to impose permissions or rules… It allows us to segment users so that we can deliver a user experience that is tailored to those users and the tasks they need to do.

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

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 segment users −> tailor to each user group task-specific extensions instead of generic solutions

tips and help

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 fairly quickly with a CCK, but I felt that 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 the item – and from a list that has no photos or other task-specific data that would be helpful in finding and selecting the desired puppy.

5

…user needs to know which fields to use, and which to avoid (shown here in yellow).

Step 6: The page opens on a tab that is not used. User has to know which tab to switch to.

Step 7: Switch to “image” tab.

5

Consequence of a generic extension:More steps, less-intuitive steps, generic labeling, need to know what to select and what to avoid.

My observations: Decisions that save time/effort for the developer usually lead to • a degraded user experience for our client, as well as • some hit on performance or a loss of behavior

…so often a choice of a generic solution is often more for our benefit without regard for the client.

3

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.

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 segment users −> tailor to each user group task-specific extensions instead of generic solutions

tips and help

Two things here: [1] the fields are visually emphasized at three levels: required, important, normal.[2] important settings notes are added in the labels of some fields (so user does not have to recall some technical details)

Principles 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 segment users −> tailor to each user group intuitive – reduce need for training and expertise tips and help

I’ve illustrated some important principles that guide us toward streamlining workflows…

Implementing streamlined workflows

The blue arrow represents the effort and skill in building the UX for our client.

How do we do this?


As stated earlier, most of this can be done by overriding the layout templates that display the forms. Fields can be moved between tabs, added css can hide unneeded fields, etc.

But I understand… Most site integrators do not want to struggle with coding – they want tools that automate this process. So much of my work at the iCue Project is to package solutions into installable extensions…

Tools• client template• Client Links• Client Menu• Form Fields Manager• JCE menu-item buttons• misc plugins

…at this point I demoed such tools…

In the presentation I conducted a live demo. The plan is to record such demos and make them accessible through iCueProject.com

For this SlideShare presentation, I will provide a few screen shots with brief annotation.

‘client’ template The client template is a backend template designed for the client.

This is the “home” page, or the client’s “dashboard.” Every page has a prominent “Dashboard” button for a direct link back to this page.

Only the super admin sees the default admin menu. Site integrators create quick links as icons or a list and place them in module positions. The top row can handle a client-specific menu bar.

Client Links Client Links allows you to create and manage the quick links that we place in the dashboard.

For each link item you must enter a backend link plus a display title.

You can also add icons, tool tips, and rules as to who can see/access the link item.

Note the special toolbar button. Clicking this opens up a link generation tool…

link generator

If you have Client Links installed, a button creates a client link item for this page and setting.Likewise, if you have Client Menu installed, a button appears that will create a menu option.

Let’s click one to see how this works.

While the plugin is enabled, the link generator displays at the top of each page, allowing you to capture the full URL that leads to the displayed page and with the filters being auto-set as you have them set here.

Client Links – new item The link generator takes us to the page for creating a new link – and it auto-populates the link field with the URL it generated.

Just add a title, and optionally an icon.

Leverage additional options to add a tooltip or to narrow down who should be able to see this link.

Client Menu

The current version looks like this.

It allows you to drag and drop menu items and to dynamically add levels to the menu.

You can create multiple client menus so that a different menu can be shown based upon the user’s usergroups.

Client Menu is similar to Client Links, except it created menu items for a ‘client’ menu to be used in the client template.

Form Fields Manager This tool allows you to change field information on forms that use JForm. (This includes all core components, for example.)

You create one or more profiles to segment your users. You choose a form/profile combination, then you reach this screen to manage the field declarations.

This tool allows you to hide fields, based upon a user’s profile. It has additional options that can be applied per field, and more options will be added in future upgrades.

More information on these tools and future solutions being developed by the iCue Project can be found at iCueProject.com

To recap... This slide illustrates a new discipline in web development. I believe we deliver more value by giving our client their own user experience. At the iCue Project I’m working to articulate what this user experience should be like, and how we as site integrators can build it.

If you like the ideas I’ve shared…

To recap…

Streamlining the Client’s WorkflowsRandy CareyiCue Project – an intel l igent approach to website management

iCueProject .com

If you like the thoughts that I’ve been sharing and would like to follow along as solutions are being prototyped and developed by the iCue Project• visit iCueProject.com• browse• subscribe to the newsletter

http://icueproject.com/

Technology

Streamlining the Client's Workflows (in Joomla)