The Action Panel

After a series of blog posts introducing our new website, the mega menu and action navigation bar, we can now show you the ‘Action Panel’.

The Action Panel is located on  the right hand side of the page and displays transactions relevant to the category or section of the webpage.

Action Panel

This video shows the Action Panel in action.

Closeness of Actions and Objects in GUI Design

According to leading usability expert, Jakob Nielsen in this insightful article

One of the oldest principles of human-computer interaction is that things that are close together on the screen are seen as related. (Similarly, users view as related those things that are the same color or shape, that move or change together, or that reside within an enclosure, such as a box.)

The Action Panel sits close to the content on the screen so it is seen as related.  And since the Action Panel is the same colour as the related category on the page, it will give users a better idea that they are acting on the right transaction.

Jakob Nielsen also mentions in this article

Users overlook features if the GUI elements — such as buttons and checkboxes — are too far away from the objects they act on.

Even though it’s an ancient insight and is covered in countless books and courses, we frequently see users overlook features because layouts violate the closeness rule. When buttons, drop-downs, checkboxes, or other actionable GUI elements are too far away from the objects they act on, people don’t see them. Often, users don’t realize what they’re missing and simply assume the features aren’t available.

In e-commerce studies, for example, users often overlook the availability of products in additional colors or sizes.

Some usability testing feedbacks on our new website

What do you like the most about the new Camden Council home page (participants’ responses)?

  1. Colourful, dynamic, modern, magazine format, easy to read
  2. Modern feel, colour scheme
  3. Simple to understand, nice colours and text.  Easy to use
  4. Slightly simpler than the previous.  Rationalised headings.
  5. General look and feel, more images, a bit more of a ‘human’ touch
  6. The tabs at the top provide a lot of useful info when you click on them
  7. The information is broken up into clear blocks and separated by images.
  8. It has pictures – which makes it more appealing/friendly for the user.  It has information on the icon tabs giving you an overview without having to search what you are looking for.

Find out more about our new website from previous blog posts

The Webteam