Drupal Camp London 2015: Improving the CMS user experience
I gave a talk at Drupal Camp London this year, focusing on the UX of CMS users a.k.a the forgottten Drupal user. Below are the slides and a few notes to accompany them.
Things to consider
When creating a new site user experience is usually focused on the end users, their goals and tasks. This is evident from the vast popularity of the topic as well as the number of software and tools available to aid this purpose (such as eye tracking software, user testing labs etc). Often CMS users are left with only the basic tools to manage their site. A few simple modifications and modules can be used to make their job quicker and easier.
The first thing to consider is who will be using the site. Are they a single user, a group of people, do they work alone or as part of a team. This will affect how the site is used and interactions should be accounted for.
The next step is what. What do they need to achieve on a daily, weekly or monthly basis? What do they want to get out of the site? Tasks that need to be performed frequently should be the easiest or else they simply won’t be done as often as they should, or even worse, at all.
The third thing to consider is the priority of the site to the user(s). If managing or using the site is only a small part of their role it’s more likely to be neglected if tasks are difficult to accomplish. On the other hand if the website is their only task and it’s difficult to use they’ll dread each time they’ll need to log in.
Theme and navigation
My personal go-to theme is Adminimal, giving users a cleaner, clearer experience with subtle changes across the site such as colouring buttons, highlighting tables and making important text stand out more. Check out the theme for yourself here: http://adminimal.netsite.gr
Replacing Drupals core toolbar with Navbar is an infinite improvement. Responsive out of the box it allows navigation on tablets and mobiles to be a breeze meaning that updating configuration or content whilst away from a desk is more likely to be done.
The most basic need to CMS users is to manage their content overview page. Admin views makes use of views and vbo to override the default overview to allow filtering/searching and retain the mass action functionality. Being a view it’s easily configured to suit the needs of the person/company. As a bonus it also overrides the overview pages of comments and people.
Another option is Workbench. A better (imo) version of the core dashboard screen it provides configurable views on a summary page. The views can be modified or removed/added to using the available workbench hooks.
With the addition of Workbench Moderation content can be revisioned and placed in various states before being published. States and transitions can be modified and it’s all based on permissions and roles meaning you can have as much or as little power as you need. The CMS user will be able to see clearly what state content is at and modify it easily by viewing the content itself or the overview page.
Webform is a widely used module and there’s a few additional modules that allow you to extend it further.
Default fields allows you to set up default fields per webform enabled content type, meaning that a CMS user doesn’t need to create needed fields each time – perfect for event or other sign up forms.
Options element makes creating select lists easier, stripping the need to enter keys and separating out each option into its own text field.
A spam filter, such as honeypot, saves the user time having to delete any results that would otherwise clog up the system. There are of course other options for helping with spam, honeypot is simply my preferred choice.
Using hook_webform_select_options_info the default select lists available can be added to, including any taxonomies on the site.
This is one area Drupal has always struggled with. Adding the media module means you can reuse files that have been uploaded elsewhere around the site. An overview page is added allowing users to mass delete media as needed as well as bulk upload files. It's by no means perfect, but it's a great step forward for file management in Drupal.
Entering content can be a time consuming task, a few tips to help users out.
With select lists there are a wide range of options, I've written about a few of my favourites before, below is a short summary of each.
Multiselect changes the standard dropdown into two boxes, with selected options appearing on the right. Options can be moved by double clicking or by selecting and clicking the arrow button(s).
Term reference tree has a butt load of options, including being able to force the user to only select child elements, select parents automatically when child terms are selected. This works fantastically for nested trees.
Select with style gives a visual edge to select lists, and can include custom images and css.
Simple hierarchical select There are fewer options available, but allows users the option to create new terms as well as force selection of only child terms.
As well as using media a couple of additional ways of helping users is allowing them to crop images after they’ve been uploaded. A good comparison list can be seen online. Focal point provides a way for you to change the automatic focus of Drupals core cropping. Uploading multiple images at once is also a great time saver and can be done with an imagefield widget.
A few additional options including setting up conditional fields. This allows the user to only see the fields they need to, making forms look cleaner.
Gmap allows the user to pick co-ords from a map, using for geo-location modules.
Linkit is great for linking to internal content, allowing the user to search for content on the site.
One of the most basic things you can do is include help text! Clearly informing the user what content you expect them to enter and how can save a great deal of headaches later on.
Additional modules and tips
A few others shared modules and tips they had for improving the experience of CMS users.
Paragraphs allows users to create blocks of content, selecting types of content along the way.
Beautytips moves help descriptions into mouse overs helping to make forms look cleaner.
Field groups allows you to place forms in collapsible groups that can be hidden and shown as needed, meaning you can initially hide fields that are infrequently changed.
The end bit
I'd like to thank those that came and the people that tweeted nice things. If you have any experience, help or advice to share please do! Until next time.