The ‘Client’ Template- illustrated!

Randy Carey

iCueProject.com

The “client” template is a new approach as to how the client maintains their website and web content

…and a new demand as to what we as website developers build and deliver to the client.

What is a client template?What does it look like?

What value does it add?Why should I care?

Note: This is a slightly modified version of the presentation given at the 2013 World Joomla Conference.

Tailored to make the slides more meaningful as a non-live presentation, I am including summary text to each slide.

A CMS, such as Joomla, provides to interfaces to the website: front-end and backend.

The front-end caters to the needs of one audience – the public who comes to interact with the client’s site.

The backend is an interface to manage the website and its content. This single interface servers two audiences: [1] The website integrator architects and builds the site. This user leverages his/her expertise of the CMS and website architecture.[2] The “client” and staff manage the site’s content over the lifetime of the site. This user-type leverages his/her domain expertise in the business.

The CMS community often challenges itself… to improve the admin template.

This challenge struggles with the natural tension: On one hand, by giving the site integrator a more powerful CMS the interface naturally grows more complex. Meanwhile, the needs of the client argue towards a simpler interface.

So what things do we make simpler (shift to the right)?…and what things do we enrich (shift to the left)? Can we rebalance this tension so as to make the admin template better?

If I had asked people what they wanted, they would have said faster horses.

Henry Ford, mass producer of the automobile, is rumored to have said…

This irony is that what his consumers thought they wanted was an improvement of the tool they had been using: horses. If they only had “faster horses.”But history proved that the consumer valued not the tool but what the tool delivered (transportation). The improvements that they really wanted was in that value (transportation) and most consumers would willingly discard the tool (horses).

Rephrase the question to what we really want “How can we improve our client’s ability to manage their website?”

That new perspective allows us to accept a new approach…

Returning to the challenge we tend to embrace “to improve the admin template”

… I think we will never be satisfied with our results. The quest is based upon a “faster horses” type assumption (focusing on the current tool as the only option).

I suggest we find a breakthrough with this different approach:Give the client their own interface to managing the website

(the ‘client’ template). Stop making one interface (the traditional admin template) try to serve two different user types (admins vs clients).

By providing the client with their own interface, we can deliver one that is simpler to user and tailored to the tasks that the client needs to perform.

It is true that this approach adds to the role of the site integrator: This role not only designs and builds the front-end user experience – now this role is responsible for installing/configuring the new client experience.

But this enables us to deliver to our clients a level of usability that adds significant value. This added value is something our clients want – and what our competitors are not offering.

Simplify and TailorWhat you are seeing is an example of the client interfaces that I have been delivering in Joomla 2.5. The two key words here are “simplify” and “tailor.” Because I deliver a ‘client’ version to the backend, I can tailor the interface to the each client’s needs. And that allows me to remove all the unneeded options and technical terms.

Now I’d like to show some backend interfaces that I have been delivering to my clients.

FIRST, I will focus on the situations where the site is managed by a single person (in contrast to a team with segmented roles).

This is for a Lawyer who provides services to businesses and non-profits. His main navigation is the “Quick Links” section near the top. Icons and short text provide a starting point to the common tasks he performs when logging in to his site: manage web content, newsletter content, newsletter campaign, and fee table.Because the single person is also the site owner, I provide admin modules that report site traffic as well as the MailChimp dashboard for his newsletter campaign results.

This is for a registration site for electrician training classes. Again, the common tasks have been identified, and their starting points are available as a quick link: access to the various types of classes, registrations, event locations, page content, and job listings. Because the user is the site owner, the site statistics are shown.

Notice that when the user clicks a link for a special type, she is brought to a particular listing pre-set to display only a particular category of classes. How do we do that? How do we create a link that sets filters on the resulting page?

We can preset filters through the URL parameters – shown above in red. At the HTML level, each filter is represented as a filter with a name or id. And each option in the dropdown has a value. We can preset the filter by declaring the name of the input to be set to the value we want to set. We can even pre-set ordering and the search box.

?option=com_modules&task=module.edit&id=17

And by using a pattern as shown above we can create a link that takes one directly to the edited screen for a particular module. This can be very helpful is there is one or a few modules that our client regularly wants to update directly.

Examples: …where the site is managed by a team of users, and their responsibilities are segmented.

Client is a theater production company.Here are two differing views, each displaying a different role. The upper-left is for the content manager who maintains page content. The lower-right is for the ticket manager who manages ticket sales/pricing as well as transaction data. Note that each role gets a simple view of what it needs to access, and nothing more (not even site reports).

Client: a county (government) with over 20 departments and divisions.Each department has its own role, and each role will see a set of quick links like you see here – each set tuned to give access to the resources just for that department.

Here are the user groups that represent a department. For each checked group, that user will be given that role’s set of quick links. Typically, each department has access just to its own set of quick links.

Of course, there are some within the organization that need access to other aspects of the site. In this example, the user has been assigned to the roles (user groups) of calendar management, employment section, and announcement.Notice that I chose not to give these users any menu item other than a link back to the dashboard. By returning to the dashboard, a user returns to all the options, grouped neatly as shown here.

In sites with segmented user roles, most roles include just a short set of quick links. However, I usually need to create a “webmaster” role that grants access to menu items and reporting.

And in reality, the person assigned to webmaster is often assigned to additional roles. So the webmaster role has access to menu and reporting items, and each additional role provides an additional set of quick links.

One large site had five languages, so I replicated all sets of quick links for each language. And as I showed earlier, each link that led to a list also preset the language filter. (Yes, this did take a lot of extra configuration work, but the client had the need to segment by language, and Joomla allowed me to provide that.)

3.x

The client interfaces that I’ve shown are using the Mission Control admin template. But this template reached its end-of-life in Joomla 2.5. I could not find a 3.x admin template that allowed me to provide as simple of a client view as I could in 2.5. So… I have built my own prototype.

Karen McGrane

This community is so well positioned to tackle this problem. You have a powerful, flexible framework. And you have access to real users so you can

prototype and test new interfaces. You are designing the user experience for the content creators.

Keynote at Drupalcon 2013

Start thinking like a UX designer, start thinking like a content strategist, and

invent the future.

Well-known information strategist, Karen McGrane, discussed this issue at a recent Drupalcon. Quoted here is her concluding paragraph, and I found it to resonate with the approach of the iCue Project…

Build prototypes and test to see what works.

By being forced to build from scratch, I found myself able to take the concept of ‘client’ template further. I no longer simply wished for a feature – I tried to build what I thought a client template should have.

What I’m showing next are screenshots of my 3.x prototypes. These are currently being reworked into installable extensions to be made available through iCueProject.com

First, let’s review the features found on Isis, the default admin template of 3.1.

It contains a menu bar of hard-coded menu items. The content area (outlined here in red) includes a sidebar menu that can’t be changed and a list of quick links that is set to always include about a dozen items. Additional admin modules are included by default, but can be removed through the module manager

This is not a blank screen. It is my client template out-of-the-box.

I took an extreme minimalist approach with my client template. When it is installed, it is like a black page awaiting for the site integrator to specify which admin templates are to be added to it. The only things provided initially are a link back to the dashboard, a link to view the front-end of the site, and a dropdown for the user to change his/her account or to log out.Those are the only things I felt were needed universally.

My client template does not include the 3.x set of assumptions and modules for the admin’s “home page.” In contrast, this version provides several module positions that can be used for arranging all sorts of admin modules: quicklinks, reports, campaign dashboards, etc.

Of course, we have to add navigation. The client template assumes that the site integrator will use a tool to create and assign these

But since we now have control of creating navigation, and since we have isolated the client’s interface, …we ought to tailor navigation to the client. [1] That means using terms that the client is familiar with. [2] It also means identifying the most common tasks for this user and organizing the navigation around those tasks and not according to the logical organization we developers have come to expect. For example, instead of articles and categories, we might use “page content,” “services,” “testimonials,” and ”announcements.” Don’t under value or overlook the IA (information architecture) that we should tailor to our clients.

I found myself needing to build the tool for creating dashboard icons. Again, the burden of having to build my own afforded me the ability to think about what more things I should be adding and then do so.

This is the current version of the edit screen for Client Links. I do recognize other ought-to-haves and plan to add them, such as a wizard that allows you to generate a URL that presets filters on a given form.

Last year I wrote this article for the Joomla magazine that suggested we give our clients their own menu in the backend using the IA and terms relevant to the client. Because the admin template is hard-coded, the solution then was to override the layout file. NOW, since my client template does not include the default admin menu bar, I created a tool for creating and tailoring a client menu bar.

Here you can see the client menu bar added to the dashboard.

Since we are now responsible for the client template’s navigation, we need to pay attention to IA and navigation issues. For instance, is it wise to use both a menu and quicklinks. If we use both, how can we vary the two so that the combination adds value without being redundant.

My preferred approach is to use just quick links and require a user to finish working within a component and hit the “dashboard” button before he/she can jump to another component or task. Of course, power users probably want both, and I do accommodate.

backendtemplates

Admintemplate

Clienttemplate

By this point it is obvious that my 3.x prototype is no longer an “admin” template. The result arguably is a new type of backend template - a “client” template that is distinct from the admin template in terms of its features and assumptions.

backendtemplates

Admintemplate

Clienttemplate

Up to this point I have been focusing on the admin “home” page, or “dashboard” page. The client template must also handle lists views and edit forms as supplied by the component.

List view

I modeled the layout after what I’ve been delivering in 2.5 with the Mission Control template.I did run into limitations in that 3.x delivers the ordering of parts (sub-navigation, filters, search, list) in a fixed bundle – so I had to work within some imposed coding.

Here is an edit screen for an article just as we get it from the component. Notice all fields are displayed whether they are needed or not.

simplify & tailor edit screens

Another article that I wrote last year was on simplifying and tailoring the edit screens to our client’s needs.

In this example we see the edit screen for a product in a store. The tailored version removes unused fields, shifts important fields to the main tab, and adds styling to the field labels to denote if a field is required, important, or ignorable.

Here is a tailored version of an article edit screen. The “title” field is red to denote required. Some fields are read only (category, status). Many fields are not needed, so they are not displayed.

I was able to create a tool that allows the site integrator to create multiple versions of admin edit screens – for any given field we can declare it to be hidden, read-only, of a certain importance level, and the default value. So instead of overriding a layout file, the changes are made through a configuration screen.

Here is the result of the “Article Options” tab when set to show only four fields of the twenty-some that are shown by default.

Here is an example of a minimized version of the Contact form. On the main tab the fields are Name, Linked User, Information and Tags. Category, Language, Published and other fields are preset to default values and not even shown.

The “Contact Details” fields is reduced to just those fields that are needed (the list tailored to the client’s needs).

The other tabs are all blank because we’ve tailored those fields to be hidden in this version.

I do plan to return to this to see if I can find a way to hide tabs that have no content.

Tailor JCE

Although technically not part of the template, I think the editing toolbar is an important feature that ought also be simplified and tailored as needed.

You might not have notice, but what is shown here is the result of some JCE buttons that I created and added. Originally my custom buttons were meant to be labels to help group the toolbar buttons. Note that “bold” is under the label “Font,” etc. But I was able to configure these to have menu-item-like actions…

Click on the “Font” label and the “bold” button is highlighted and a second row appears to offer all the font-related options.

In essence, these buttons function like menu items. Only the top row shows all the time, and clicking toggles the display of an extra row of related items.

When the “insert” button is clicked, all items on the top row that relate to “insert” are highlighted, and the second row appears, displaying the secondary “insert” buttons.

Even without these custom buttons, we should be tailoring the configuration of buttons, each configuration tuned to a JCE profile (which is tied to a Joomla user group). This allows us to show a limited number of buttons to casual users and a larger set to power user.

/images/a

/docs/a

/video/a

/images

/docs

/videoLikewise, we can leverage JCE so that different user groups have different root directories for managing their photos and other documents.Going back to the county departments that I discussed earlier…I leveraged this feature to give each department its own directory, isolating their images and documents from other departments, and giving each department a shorter list of items to navigate.

Are you aware that with JCE you can select a matrix of data cells and paste them through the JCE editor so that they automatically are converted into HTML tables? I created Word-like and Excel-like buttons that appear prominently in the toolbar. They simply call the clipboard function directly. The lesson: a custom button that replicates a common task can add usability for our client.

Simplify and Tailor

Client interface for SEO consultant

Example:

Let’s tailor a client interface for an example. This has happened to me more than once: The client calls and asks me to give their new SEO consultant access to the website.

I set up a new role: SEO Services. Then I create a admin module that contains the links needed by this role.

I grant this role access to articles, but show only the fields that are relevant to SEO.

Wow!Joomla rocks!

I expect my client to be happy because the consultant can do his/her job. I also expect the consultant to be happy with the simple interface (much simpler than what he has experienced in other CMSs).

The new approach I’m suggesting is to give the client an interface that is separate from what we use to build the website. It can be simpler than the default admin template, and it should be tailored to the client’s needs.

But to do so does demand more from the site itegrators. It demands assigning clients to a ‘client’ template, possibly segmenting client users, and using tools to configure the tailored experience.

Is the value worth the extra effort?Let me provide evidence justifying the extra effort.

Your potential clients have a lot of options spanning CMSs and other vendors that they can find on Google. They are comparing the options to their needs.

usability

features

A study showed that companies weight a CMS based upon features and usability. Companies that expect teams and/or non-technical users to use the CMS quickly shift their decision making toward usability over features. In short, the larger the client and their needs, the more likely they will choose the vendor based upon usability of the CMS.

During the client’s comparison stage, your competition will be showing screens like this as their touted “simple to edit” solution.

…or a screen like this…

…and maybe you will be competing against another vendor that says they can offer Joomla. But they are likely to demo the traditional one-size-fits-all solution. …

Meanwhile, you demo your easy-to-use solution. Tout it as tailored to the client’s needs so they will know to go back to the others to see how well the others can match this. (of course, with the traditional approach, they can’t )

Show them the intuitive dashboard and the streamlined workflow. Show them a simple edit toolbar.

usability

features

How do you plan to compete during evaluation? Are you really that much better at design? Is your support or other offerings head-and-shoulders above your competition? But you can stand out in the one area that has proven frequently to be a decisive factor –by delivering a very tailored interface in managing the website.

The notion of a client template demands we use new tools. But more than that, it calls for a new discipline. Now that we can configure a client experience, how do we do it well?

If you like this new approach… If you like the ideas I’m proposing… If you would like to get your early access to the tools I’m building…Please visit iCueProject.com. And sign up to receive updates.

The ‘Client’ Template- illustrated!

Randy Carey

iCueProject.com