Archive News

18 January 2011

The Essential Guide to Usability in Web Design: Part 2

For newcomers to the blog, back in Part 1 I introduced the series and defined usability. In this post, I shall be offering some of the examples of how we improved usability within the admin panel of our content management system, River CMS.

But where do you start?

With our usability enhancement program for River CMS, the cycle is on-going with enhancements happening regularly. There is no start or end to improving the system. But obviously the ideas for the improvements have to come from somewhere. The River CMS usability improvements come from various sources, as shown below:

    • Our own dedicated River CMS usability team

 

  • Client feedback *
  • Training sessions
  • Analysing journeys through the admin panel (analytics)

* Our clients regularly use the system and so provide great feedback. The usability team take the clients’ problems and decide whether a usability tweak will improve the CMS for the majority of users.

The life of an update

Although every studio has its own development cycle, the River usability update cycle goes like this. The following is nothing to do with system bugs, rather purely usability.

  1. Identify usability problem (or “Roadblock”)
  2. Form a realistic solution…
    • that has the greatest positive affect for all users
    • that is progressive (an improvement that does not confuse the user-base)
  3. Implement the solution considering…
    • the design of the UI if changed
    • the user journey if changed
    • the tone of voice of the system if changed
  4. Testing the solution internally
  5. Partial rollout and feedback. Possibly back to #1 here. (Optional depending on the size of the update)
  6. Making the solution live on the system
  7. Announcing update and informing of changes
  8. Obtaining feedback and addressing of feedback
  9. Measuring effectiveness of new solution via analytics

Some examples of our recent updates in River CMS

Sometimes it is best to learn by example. I’ll introduce some of the recent usability updates in River below:

Media Manager – Editing of Images

Problem

Many clients did not have a skillset in their team that included the ability to crop/resize images. This lead to problems with large images (think photos from modern digital cameras) being uploaded to the media manager (and hence slow download speeds for users).

Solution

The media manager now has the ability for the user to simply crop and resize images once media has been uploaded to the site. Images are now loading faster and clients have more power with their media without the need for knowing graphic design skills. The media manager also automatically optimises images so they are reduced in file size (by three quarters in some cases) without a noticeable loss in quality. A winner for clients and visitors to their websites.

Using the system on smaller resolution screens

Problem

The system has always supported screen sizes of 1024 x 768 or above, but users with widescreen laptops could have argued that the screen “real estate” wasn’t as efficient as it could be.

Solution

The top admin bar was trimmed (although not so it became cluttered) to be approximately 30 pixels smaller to allow for more of the system to show on short screens at all times. Those with larger screens would also notice a small benefit. When creating new pages, the whole process can be seen on the page at once. Some of the key buttons (save etc) was also brought to the top to allow users to easily see the key features of the system.

Searching module items

Problem

The search box used to allow users to search all kinds of fields within modules by default, with the downside being that sometimes the items themselves were pushed further down the screen, like so:

Solution

The options were left in the system for those wanting to find items by specific parameters, but they are hidden by default. Instead, the search box searches by title only unless the bar is expanded, thus saving on space, as shown below:

Conclusion

We’ve now looked at how we make usability changes and some brief examples. By all means chime in and let us know what you think.

Next time we’ll look at how to effectively make usability decisions and how we arrive from the problem to the solution.

Tweets