PRIMARY NAVIGATION – UPPER RIBBONS
With the understanding that navigation could be tailored somewhat based on user type, we made changes to the main navigation menu, removing features most content editors don’t use and including the tools that they most commonly accessed. We also added a notifications alert to the upper ribbon.
We added a second ribbon that provided the user with clear information about the page, its status, type, name, and most recent edit history, as well as the two most important actions a user could do to this type of page – i.e., in the case of a “Draft” page, to edit it or submit it for review.
We removed the “Draft” overlay from the public page’s main navigation in part because we noticed users trying to click on the word draft and instead activating the live page’s menu. Making the status its own ribbon, and changing the colors used to indicate that status, also allowed us to meet basic accessibility standards.
SECONDARY NAVIGATION – SIDEBAR MENUS
D8 introduced two new secondary navigation tools: Tasks and Moderation. When a user was in preview mode, clicking on “Tasks” in the main menu opened a sidebar menu on the righthand side of the screen. When a user was editing a page, Moderation, was a static menu on the righthand side of the screen. Users appreciated the new tools, but had some issues using them.
We suggested tidying these panels up, moving some items from the Tasks menu into Moderation, and creating more context specific versions of the menus to make decision-making even simpler for users. We also recommended giving users the ability to discard a draft and to cancel a submission while it was still in “pending review” status.
USER HOME PAGE – MY WORKBENCH
After logging in users were taken to a page that showed them three pieces of information — how many years/months they had been users, their user code, and their language code. Otherwise this landing page had no actionable items. We observed users immediately clicking away from this page to the “My Workbench” page or to somewhere else in the workbench.
A number of users expressed frustration that the “My Workbench” page wasn’t more useful to them. Many just avoided “My Workbench” altogether by using their browser’s search function to find the page they wanted to edit on Boston.gov and then changing the URL’s prefix to take them into the editor’s version of that page.
We hypothesized that by replacing the landing page as well as “My Workbench” with a navigable Dashboard, we might limit the number of unnecessary pages users find themselves on, provide them with immediate access to key pages and frequently-used tools, and reduce their frustration.
LAYOUT & COMPONENT EXAMPLES
Whether they were frequent or infrequent users, all users expressed uncertainty when trying to choose which page layout or component type to use. Users told us that they often referred back to the admin guide for more illustrative descriptions and examples.
We recommended revising the descriptive text as well as adding an accordion that would drop down to reveal visual examples and spec requirements for the various layouts. We suggested that a similar format could be created for “Components” as well, to aid user decision-making when building new page sections.
ERRORS & ACCESSIBILITY
While text limits were indicated on some fields, they were not on all fields. Additionally, there was no warning to users when they had exceeded a text limit, leading to cut off text and user frustration when they got to previewing their page. We recommended that the workbench always clearly state the limit for any text field, show users a countdown as they type, and turn the box red if they have exceeded the limit.
The image upload process also presented some opportunities for improvement. In our task flows, we observed that once an image was uploaded, something about the layout of the subsequent screen seemed to encourage users to skip the required “Name” field. We rearranged the layout to prioritize completing the Image Name as well as Alternative Text fields before hitting that final “Upload” button.
Finally, we also made more general recommendations to improve color contrast, visibility of alerts, and recognizability of links to improve the accessibility of the Workbench itself.
USABILITY TEST FINDINGS
Consistent positive feedback
This is easier to navigate than what I am used to.
I would use “View Example” of the content layouts.
Moderation seems simpler and easier to get through.
Users quickly and easily navigating to where they needed to go.
User excitement — “ooo” and “ahs”, coupled with body language that suggested sudden positive interest, such as leaning into the screen or sitting up attentively.
Consistent “close, but not quite” feedback
I want to see examples of published pages as well as the mockup examples.
I like this dashboard.
I want more/different information in this dashboard.
I want the edit options in a center pop-up.
I want the edit options in a sidebar.