Toolbar Prototype Usability Testing Phase 2

Created on 4 September 2023, about 1 year ago
Updated 20 November 2023, about 1 year ago

Problem/Motivation

After the initial 🌱 Toolbar Prototype Usability Testing Phase I Fixed where we validated the initial hypothesis, this 2nd round of tests has given us further insights of what needs to be improved or changed from the existing prototype.
This round of testing has been run by David Rosen of the University of Minnesota, with the help of @lauriii, @dead_arm, @Gábor Hojtsy, @cosmicdreams and @ckrina. During the same tests also Project Browser was reviewed, with @leslieg and @chrisfromredfin' help, and other parts of the administration UI were tested.
Some of the questions we were looking to answer were:

  • What are the main challenges users who are less-familiar with Drupal face?
  • How effectively can they find their way around the administrative UI of Drupal?
  • How do experienced users perceive the new features available to them?
  • Have they used or noticed them before?

This phase included 4 experienced Drupal developers and 3 experienced content editors as testers. Each test consisted of a 1h online video-call where each participant shared their screen.

Results

The following is a list of several observations that had some level of impact (1 as minimum impact and 5 as high impact), on the testing session and were worth discussing afterwards.

They expected an icon to collapse the sidebar, but weren’t expecting words.
This impacted 5 users with a severity between 1 and 2, so we could say this a Major priority.
All of the users were asked to collapse the sidebar, and for a few of them it took some time to find the sidebar’s collapse toggle. Ideas to solve this were to reconsider the icon, words, and the placement of the collapse function, plus testing different variations.

The sidebar was not visually distinct enough from the body of the page.
This impacted 1 user with a severity of 3, so we could consider this a Normal priority.
While this was observed in one of the tests only, this is something that requires action. We're already redesigning the whole admin interface (link), and it will have a gray background. Because the sidebar is visible on the front-end as well, we need to make sure that the difference between sections is clear with several different color schemes that custom themes may be using.

They thought the breadcrumbs were a secondary layer of navigation similar to how the top navigation currently operates, which was confusing.
This impacted 1 user with a severity of 4, so we could consider this a Normal priority.
While only one of the testers had this issue, it had quite a significant impact in the ability to succeed on the given task. An idea raised is that it needs to be clearer visually how the left navigation is connected to where you are in the system, and also iteration on the breadcrumb design is possible.

Didn't see the value in having the breadcrumbs while working on content, would expect the sidebar navigation to more clearly identify where they are in the system.
This impacted 1 user with a severity of 3. In this specific case, the user was editing content and thought the breadcrumbs weren’t useful. We are not sure yet on the diagnosis: it could be related to the current styles or to the breadcrumb usefulness in a more general sense. So we’ll consider this a Minor priority for now.

They thought the “Back to site” link didn't make sense in the breadcrumbs, and expected it at the top of the left navigation.
This impacted 1 user with a severity of 2, so we could consider this a Normal priority.
Only one participant brought this up explicitly but most participants apparently did not notice this link (they did not use it). As an idea to follow-up on this, we’ll consider iterating how this feature looks or where it is placed.

The toolbar wasn't quite as useful when collapsed, because there is so much complexity in Drupal and it is hard to remember what every icon means.
This impacted 1 user with a severity of 3, so we could consider this a Normal priority.
This had somewhat of an impact in just a few of the tests, so the conclusion was to default to the open state. We didn’t conclude to make any changes here because some positive feedback came from the sidebar collapse interaction with most of the users, especially the fact that it gives a more true view of the page. A few mentioned that they use Drupal all the time and don’t need to see the words, so it’s good that it collapses down to icons, and another one highlighted they liked the icons and the hover behavior on the collapsed sidebar.

Expected an option to have the navigation at the top if they were on a computer that has a smaller screen.
This impacted 1 user with a severity of 2, so we could consider this a Minor priority.
We agreed on this not needing immediate further action until we have the mobile designs implemented, that might solve this issue completely.

Wondered why the content types wouldn't expand in the sidebar navigation.
This impacted 1 user with a severity of 3, so we could consider this a Minor priority.
While it only affected one user, it might be worth considering if this is a feature we should have in core. Maybe we could find a way to have some content types listed while others aren't (e.g. main vs secondary), or set an upper limit on the number of content types shown.

Preferred the top navigation because they're used to it.
This impacted 4 users, so we could consider this a Major priority even if it is not strictly related to code.
This is something that came up with all users after specifically asking them which solution they would prefer. They all noted that the main reason was being used to their current setup, where all of them are long term users of the current Toolbar + Admin Toolbar customizations. Some of them were initially disoriented by the left side placement, but adjusted very quickly. A general agreement among participants though was it might help in on boarding new users.
The conclusion is that we’d have to deal with this in change management: how we talk to users about the navigation changes and prepare them to find what they use and need in the new arrangement.

The opening/closing interaction of the sub-trees was also mentioned as positive.

Overall, the users were able to accomplish all the tasks without the interference of the changes from the new Content Creation menu (more Content-related links on top of the classic Administration).

Next steps

Design improvements to work on:

  • The collapse-expand icon and its placement.
  • A more prominent distinction between the sidebar and the content or page.
  • Better breadcrumb integration.
  • Back to site link placement and design.
🌱 Plan
Status

Fixed

Version

1.0

Component

Code

Created by

🇪🇸Spain ckrina Barcelona

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024