// you’re reading...

Best practice

RedDot and Usability: How to make your RedDot CMS projects easier to use for authors


Regardless of which CMS application you use to manage a site or how well you optimise it from a performance perspective, the project will be deemed a failure by end users authors if they are unable create and edit content quickly and easily.

CMS projects that are simple and easy to use not only reduce the amount of time required for content changes, they will also minimize possibilities of content entry mistakes and/or inconsistencies across site pages.

The key to making a project ‘useable’ for all authors, is to strike a balance between catering for beginners with limited or no web content management experience and power users – who many want as many bells and whistles as possible.

I recently came across a quote by a developer from the RedDot community along the lines of “…If an author has to ask me twice how to perform a task, then I have failed as a developer”. (apologies for not being able to quote that person directly.. I can’t seem to relocate the source at the time I posted this blog entry!) The beauty of the SmartEdit interface within RedDot CMS in particular, is that users are provided with instant feedback as to which elements on the page they can edit and the type of content of that can be displayed on the page. Very little training (or in some cases none) is required since the RedDot’s on the page act as a ‘map’ or a ‘guide’ as to how to create and or edit the page.

Having also run training sessions for authors using other CMS applications (in particular Drupal and Umbraco), I’ve found that those applications that require users to edit content via forms take some time getting used since there is a disconnect between how the content entered into the forms will eventually be displayed and positioned on the page. Even though there are plenty of powerful CMS/ECMS applications out on the market – my feeling is that RedDot’s main selling point is its ease of use and ability for authors to start editing content straight away with minimal training. This is extremely important within a large distributed content management setup where tens to hundreds of users are responsible for site content.

On the flipside, a poorly constructed SmartEdit page can be a nightmare for users – not knowing what each and every ‘RedDot’ does (due to poor labelling, layout issues), too many ‘open/close’ RedDots etc which can make the editing experience very frustrating, confusing and time consuming – no matter how much of a RedDot CMS guru you think you are!

Below are some simple techniques, hints/tips that I use regularly to help improve the content entry process for RedDot CMS authors.

SmartEdit features

Label all RedDot’s clearly and consistently.
Never just stick a RedDot in the middle of the page and assume the user will know what it is for. Come up with a labelling standard/convention for content placeholders – as well as containers, lists, dynamic anchors and open/close RedDots. I tend to use the word ‘maintain’ for linking items, ‘edit’ for open/close RedDots and very brief description/purpose for all other RedDots.

Reduce amount of RedDots displayed on page at a given time.
Too many RedDots on the page can be a bad thing since authors become overwhelmed and don’t know where to start. Consider using the ‘child’ element feature which will enable you to group related RedDots together to enable the user to edit all items via a single form, or perhaps split your template into individual ‘page parts’ – enabling content to group together into individual managed items.

Configure Editable Areas
The Editable Areas feature provides users with feedback as to which areas of the page are editable (by hovering over a RedDot) or which page item is currently open for editing.

Configure editable areas

Add Edit via form RedDots
Once users become proficient with the layout and purpose of the RedDots on the page, they generally prefer to edit all content via one big long form without having to click on individual RedDots. Another time saving measure…

Provide the user with page feedback
Consider displaying the ID and or GUID of each page and page part on the page. Searching for pages using the ID or GUID can be a lot quicker in some cases – especially using the ‘Connect to Existing’ page option when linking page parts across multiple foundation pages.

Provide the user with page feedback

Consider use of ‘not applicable for workflow’ for ‘cosmetic’ content items
Having to submit small content changes through the workflow before they can be published can become a major pain for most users. Major content changes (such as page titles, page content etc) may only be appropriate to go through the workflow. Cosmetic items – such as images – don’t necessarily need approval prior to publication. Use the ‘Not applicable for workflow’ option within the placeholder settings to bypass workflow.

Not relevant for worflow option

Where possible, don’t use target containers
By far, the most confusing and cumbersome feature of RedDot CMS projects are target containers. Having two ‘open and close’ RedDots on the page to manage the bare necessities (title, page content, meta information) is totally unnecessary…

Automatic resizing options for image
For all image placeholders, make sure you utilise the ‘Scaling and Conversion’ features which will automatically scale images down to the correct size for display within the page. Not only will this ensure that images don’t affect the layout of the page (especially if they are too large) – but also saves the user a huge headache having to have to crop images down to an appropriate size using Photoshop or other image editor.

Image scaling and conversion

Always provide detailed decriptions
In addition to clearly labelling your RedDots, ensure you provide detailed descriptions for all placeholders (which is displayed to the user when the item has been clicked for editing.) These descriptions act as a ‘contextual’ help for the user, so provide as much information as possible.

Detailed descriptions

Enable direct edit features
For Text and Standard Text field placeholders, activate DirectEdit features to enable authors to make quick and simple changes directly within the page (by holding down the CTRL key while clicking on the RedDot). This feature is particularly helpful for fixing up spelling and grammatical errors without having to open up the text editor.

Text Editor

Make sure that you enable/disabled any unwanted settings under the Text Editor Settings option. In order to ensure consistency across site pages in terms of layout and content and styles, users should be never be able to change font colours, insert HTML markup etc. Providing a predefined set of text formatting options will ensure that no ‘unwanted’ HTML code and styling information makes its way onto site pages.

RedDot CMS text editor options

Ensure that system folders (which contain background images, styles, javascript etc) are not accessible via the text editor (using the ‘folder not available in the text editor’ option – otherwise users will end up uploading images and files into these folder repositories. I’ve seen this happen too many times, which makes it impossible to find uploaded files if they are not stored in the correct folder structure.

Content Class Pre-Assignment

For all link elements (lists, containers, anchors) make sure that users can only create and connect up new pages based on a predefined set of content class templates. Overwhelming users with too many options when creating a new page can be very confusing and may cause the user to connect up unsuitable objects (such as headers, footers, javascript, css) – that may ‘break’ the layout of the page.

It’s also an added benefit to give your content classes’ detailed descriptions that provide information as to each content classes’ intended purpose. There is also a new option in v10 which enables you to assign icons against content classes during selection.. just another little touch which can make all the difference!

Custom Plugins

I’m all for creating custom plugins wherever possible to reduce the amount of clicks required for a content entry task. Try and keep the look and feel of all your plugins consistent, so users will be able to gasp how to use the plugin straight away.

Training

Whilst working on a number of RedDot CMS projects for overseas clients, I found creating ‘tutorial’ videos invaluable for training up users that I wasn’t able to connect with face to face. It is much easier for users to watch and learn how to perform a task from example – rather than reading through a formal step-by-step training manual or guide. This is particularly true when it comes to learning how to use the wysiwyg text editor – which tends to be a source of frustration for most users due to its complexity and countless features. You can even incorporate these videos into a ‘main menu’ page in the project making it easy for all users to view when needed.

Feel free to share some of your hints/tips that you use to make your RedDot CMS projects easier to use!

Check out my blog for more RedDot CMS and usability articles

Share and Enjoy:
  • Print
  • email
  • Twitter
  • Digg
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • del.icio.us
  • MisterWong
  • Facebook
  • LinkedIn

No related posts.

About the author:

Kim Dezen Kim Dezen is a Senior RedDot CMS (Open Text Web Solutions) CMS Consultant, Developer and Freelancer. Part time DJ and obsessed music / vinyl junkie. Follow me on Twitter: @kimdezen                  Check out my blog: http://www.kimdezen.com for all things related to Red Dot, SEO/SEM and Web Development.

Discussion

5 comments for “RedDot and Usability: How to make your RedDot CMS projects easier to use for authors”

  1. Hi,
    thanks for your very good Ideas on how to improve our projects.

    What we did some months ago and our Users very like it, was to have a “Project Help”-Link on top of every RedDot page.

    Clicking on this Link opens a new window with screenshots of content classes with instructions, video instructions, How To Do’s, etc.

    So I think the big improvement for Editors in this case is, that they do not have to move away from their RedDot Page… They notice that they need help on this page, they click on help and have a look at this template and how to use it.

    Best regards
    Simon

    Posted by Simon Töfferl | January 13, 2011, 9:30 am
  2. nice on Simon – definatetly recommend custom help buttons and links within your projects..

    ive found added custom tutorial videos into this kind of thing helps users our big time!

    cheers,
    kim

    Posted by Kim Dezen | January 13, 2011, 1:08 pm
  3. Thank’s for this hints. I use some of them, but other not…yet.

    Because I often have a lot of elements within Smart Edit, I didn’t color the labels in red, because this looks like an error.

    I introduced a different color style:
    - green for all labels, before the red dot itself
    - element data in olive
    - links to plug-ins (if on page) in purple (not shown on sample)
    - grouping of elements

    Here a sample: http://jrql.files.wordpress.com/2011/01/hlag_authoring_style.png

    Would share the styles, if of interest.

    Posted by Frank Leja | January 17, 2011, 10:01 am
  4. Frank, I would place the red dots on the left. It’s a lot easier to read in my opinion. I like the fieldset separation, though!

    Posted by Markus Giesen | February 1, 2011, 2:52 pm
  5. Markus, I see your point. Right, the red dots itself are flattered, what could be improved.
    I use my red dots in a little different style: , therefore I put the red dot directly before the value not the label.
    But I should improve it. I would use a fixed width for the “label column”, which makes the red dots better aligned. The authors usage experience would be definitely benefit from it. Thank you for learning this. Good to talk about!

    Posted by Frank Leja | February 2, 2011, 10:49 am

Post a comment



Stay up to date! - Get notified about followup comments

If you don't feel the urge to comment but wish to stay in the loop:
Just enter your email and subscribe to new comments.

Subscribe without commenting

Recent Tweets

  • RT @AirKraft: Transport Canada breakout: they manage 80K pages and 300K assets with WSM(RedDot). Wow! #OTCW 2010-11-11
  • The RedDot usergroup session 'Future of WCM' is in National Harbor 7, now. See you there! #otcw 2010-11-11
  • RT @yttergren: @AirKraft: Calling all WSM(RedDot) devs: share your solutions on http://bit.ly/bgPIof EVERY solution can win an iPad #OTCW 2010-11-10
  • Come to the Solution Exchange session. Enhance your (#reddot) CMS project! Chesapeake 12, 3:20pm #otcw Looking forward to see you there! 2010-11-10
  • More updates...