Streamlining the Client's Workflows (in Joomla)

Streamlining the Client’s
Workflows
Randy Carey
iCue Project – an intelligent 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

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
Workflow2
What 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 ask
1. How will the data be collected & entered
2. How will the data be manage within the site
3. 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.

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

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

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…

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

 client-centric labeling
 segment users −> tailor to each user group
 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?
 tips and help
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).

segment users −> tailor to each user group
 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.

client-centric labeling
 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!

 sequence of steps is obvious and intuitive
 tips and helpWherever one is, the next step
should be obvious and in plain
sight.

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

1
2 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 away
3. 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.

 task-centric labeling
 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 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.

 task-centric labeling
 task-specific extensions instead of generic solutions
 tips and help

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

 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
 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?

 tips and help
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 Carey
iCue Project – an intelligent 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

Streamlining the Client's Workflows (in Joomla)

More Related Content

Viewers also liked (20)

Similar to Streamlining the Client's Workflows (in Joomla) (20)

More from Randy Carey (6)

Recently uploaded (20)

Streamlining the Client's Workflows (in Joomla)