Toolbar Prototype Usability Testing Phase 4

Created on 23 October 2023, about 1 year ago
Updated 7 December 2023, 12 months ago

Problem/Motivation

Previous user tests:

  1. 🌱 Toolbar Prototype Usability Testing Phase I Fixed
  2. 🌱 Toolbar Prototype Usability Testing Phase 2 Fixed
  3. 📌 Toolbar Prototype Usability Testing Phase 3 Fixed

We wanted to test the usability of the following elements:

Top bar

Overall we wanted to find out if the top bar (comprising a ‘More actions’ dropdrown menu on the right, Save and Preview buttons on the node edit page, breadcrumbs and a ‘go back’ option on the left-hand side and the option to collapse the right-hand side panel) was useful, and therefore worth including. Tests focused on tasks requiring users (with different levels of experience) interacting with these top bar elements.
Top bar ‘More actions’ menu (top bar right): We wanted to find out: did users identify the ‘More actions’ dropdown, did they interact with it to find the local tasks, which would previously have been displayed on the page?
Breadcrumbs and go back: Did users notice these options and were they useful to them?
Tablet left toolbar behavior: Were users able to collapse the vertical side bars and was this useful to them?

Content creation menu

The prototype ( 📌 Create a functional prototype of the new top contextual bar Needs work ) contained a left-hand menu option ‘Create’. Did users find this useful? Did participants go to use it when given tasks to create content in a usability test?

We devised 3 scenarios to test these aspects. 6 usability tests were carried out with 3 content users, one developer, and 2 content user/site builders. All tests were done on desktop devices.

The tests were conducted by @AaronMcHale, @ckrina, @Emma Horrell and @NikMis.

Results

We found the following findings/results to the tests:

  • Participants did find ‘More options’, but only the experienced developer found it quickly. The others took a while to find it.
    Most participants said they felt the actions in this dropdown were important and they wanted to be able to them more easily (e.g. in one click)
    Participants’ ability to find the ‘More actions’ dropdown was impaired by the presence of other UI aspects:
    • A ‘Back to edit’ option (positioned by the breadcrumbs on the top left) - several opted for this instead of ‘More actions’
    • Option to ‘Turn On In Place Editing’ (accompanied by the ‘edit’ icon) in the top bar to the left of the ‘More actions’ dropdown - several clicked on this expecting it to take them to an editing menu
  • All participants opted to use the ‘create’ menu option instead of the ‘content’ menu option when asked to create content
  • All participants took some time to notice how to open/close sidebar on the right, but all did find it.
    • Collapsing the sidebar was especially useful when the participant had a small screen
    • Several participants expected the text area to expand when the sidebar was closed
    • One participant expected the sidebar to be draggable

Other observations

  • Participants were confused by the ‘Back to edit’ and ‘Back to site’ options presented in the top area on the left of the breadcrumbs.
    • They weren’t clear if this would take them back to a previous page, and if it was a link or not
    • They didn’t associate ‘editing’ with ‘going back’
    • Use of ‘Back to edit’ and ‘Back to site’ in this area was inconsistent - participants were unsure if they would go to the site or the administration area
  • Several participants questioned the order of items in ‘More actions’ - they felt more frequently-used actions like ‘Edit and View’ should be more prominent
  • All 6 participants felt the left sidebar was intuitive
  • Some participants said they wanted a solution for +3 level deep items in left sidebar

Recommended actions

  • Acknowledging that breadcrumbs might be useful to contextualize in the complex administration, run an A/B/control test with and without breadcrumbs to test their usefulness
  • Remove ‘Back to edit’ positioned next to the breadcrumb - adopt a consistent approach to include ‘Back to (...)’ in this position
  • Review use of the left top bar as a way to go back to parent items
  • Make ‘More actions’ more prominent, so it’s more obvious to users what it is for. Options:
    • Review placement and design of the ‘Turn On In Place Editing’ option (remove editing icon?)
    • Take ‘Edit’ and ‘View’ out of the ‘More actions’ and put these in the toolbar with ‘More actions’ alongside and test again to see if efficiency of the task completion improves
  • Consider a solution for +3 items as a ‘nice to have’
📌 Task
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

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Issue created by @ckrina
  • Assigned to AaronMcHale
  • 🇬🇧United Kingdom AaronMcHale Edinburgh, Scotland
  • 🇬🇧United Kingdom Emma Horrell

    Summary:
    We wanted to test the usability of the following elements:

    Top bar
    Overall we wanted to find out if the top bar (comprising a ‘More actions’ dropdrown menu on the right, Save and Preview buttons on the node edit page, breadcrumbs and a ‘go back’ option on the left-hand side and the option to collapse the right-hand side panel) was useful, and therefore worth including. Tests focused on tasks requiring users (with different levels of experience) interacting with these top bar elements.
    Top bar ‘More actions’ menu (top bar right): We wanted to find out: did users identify the ‘More actions’ dropdown, did they interact with it to find the local tasks, which would previously have been displayed on the page?
    Breadcrumbs and go back: Did users notice these options and were they useful to them?
    Tablet left toolbar behavior: Were users able to collapse the vertical side bars and was this useful to them?

    Content creation menu
    The prototype contained a left-hand menu option ‘Create’. Did users find this useful? Did participants go to use it when given tasks to create content in a usability test?

    We devised 3 scenarios to test these aspects. 6 usability tests were carried out with 3 content users, one developer, and 2 content user/site builders. All tests were done on desktop devices.

    We found the following findings/results to the tests:
    Participants did find ‘More options’, but only the experienced developer found it quickly. The others took a while to find it.
    Most participants said they felt the actions in this dropdown were important and they wanted to be able to them more easily (e.g. in one click)

    Participants’ ability to find the ‘More actions’ dropdown was impaired by the presence of other UI aspects:
    A ‘Back to edit’ option (positioned by the breadcrumbs on the top left) - several opted for this instead of ‘More actions’
    Option to ‘Turn On In Place Editing’ (accompanied by the ‘edit’ icon) in the top bar to the left of the ‘More actions’ dropdown - several clicked on this expecting it to take them to an editing menu

    All participants opted to use the ‘create’ menu option instead of the ‘content’ menu option when asked to create content

    All participants took some time to notice how to open/close sidebar on the right, but all did find it
    Collapsing the sidebar was especially useful when the participant had a small screen
    Several participants expected the text area to expand when the sidebar was closed
    One participant expected the sidebar to be draggable

    Other observations

    Participants were confused by the ‘Back to edit’ and ‘Back to site’ options presented in the top area on the left of the breadcrumbs.
    They weren’t clear if this would take them back to a previous page, and if it was a link or not
    They didn’t associate ‘editing’ with ‘going back’
    Use of ‘Back to edit’ and ‘Back to site’ in this area was inconsistent - participants were unsure if they would go to the site or the administration area

    Several participants questioned the order of items in ‘More actions’ - they felt more frequently-used actions like ‘Edit and View’ should be more prominent

    All 6 participants felt the left sidebar was intuitive

    Some participants said they wanted a solution for +3 level deep items in left sidebar

    Recommended actions:

    Acknowledging that breadcrumbs might be useful to contextualize in the complex administration, run an A/B/control test with and without breadcrumbs to test their usefulness

    Remove ‘Back to edit’ positioned next to the breadcrumb - adopt a consistent approach to include ‘Back to site’ in this position

    Review use of the left top bar as a way to go back to parent items

    Make ‘More actions’ more prominent, so it’s more obvious to users what it is for. Options:
    Review placement and design of the ‘Turn On In Place Editing’ option (remove editing icon?)
    Take ‘Edit’ and ‘View’ out of the ‘More actions’ and put these in the toolbar with ‘More actions’ alongside and test again to see if efficiency of the task completion improves

    Consider a solution for +3 items as a ‘nice to have’

  • Issue was unassigned.
  • Status changed to Fixed 12 months ago
  • 🇪🇸Spain ckrina Barcelona

    Moving @Emma Horrell's comments into the IS.

  • 🇪🇸Spain ckrina Barcelona
  • 🇪🇸Spain ckrina Barcelona
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024