Problem: Preservation action tasks are difficult to find in the Enduro UI

[fiver-watson]

Describe the bug

Based on user observation during Talk-Aloud tests conducted with members of SFA during PoC#2, many users did not initially realize that the Preservation actions could be expanded to show tasks. Consequently, they had difficulty in using Enduro to learn more about the tasks being performed as part of a preservation workflow, such as SIP identification outcomes, or finding errors during failed ingests.

To Reproduce

Steps to reproduce the behavior:

Notes about this testing are captured in the following document:

• SFA PoC#2 - Talk-Aloud Testing: Tasks and observation notes (2024-07-02/03)

Essentially, participants were asked to ingest a SIP, and then use the Enduro UI to determine the SIP type. One group took a long time to find that the Preservation actions could be expanded, finding it almost by accident. The other group did not find it at first, until participants switched. In both cases, had participants not been motivated by the artificial nature of the test to continue looking, they likely would have given up before finding the information they needed.

Expected behavior

It should be more apparent to users that the Preservation actions can be expanded, and that potentially useful task information can be found below.

Additional context

After some internal analysis and discussion, our team has decided to try implementing 2 different UI changes to address this.

First, is to make it more obvious that the preservation actions are expandable. At present, users must click directly on the caret to expand. The caret does not change on hover, and the rest of the area is not clickable.

Our proposal is to:

• Make the entire preservation actions area clickable
• Give the entire area hover effects:
  • Outline the clickable area in purple
  • Lightly grey the enitre clickable area
  • Change the caret icon to a solid fill (or similar)

Mockup:

Second, we propose adding more help information to the UI. At present, the Enduro UI uses a mix of domain-specific and application-specific language, such as "Preservation actions," "Tasks," "Workflows" etc. Users will have varying levels of familiarity with domain terminology, and new users will definitiely not know Enduro-specific terminology on first use.

To improve this, we will follow a similar approach as the Statuses legend available on the Packages browse page. Next to the "Preservation actions" header on the Package details page, we propose adding a round blue ℹ️ info icon, identical to the one used for the Statuses legend on the Packages browse page.

When hovered, this icon should slightly darken in color, and it should show a tooltip just like the Package browse version, saying "Toggle help text."

When clicked, it should expand a grey box below the Preservation actions header and above the horizontal rule. Again, this should be similar/identical to the dropdown box used for the statuses legend, and users should be able to close it either by clicking an X icon in the top right corner of the box, or by re-clicking the info icon.

Inside the text box the text should read:

A preservation action is a workflow composed of one or more tasks performed on a package to support preservation.

Click on a preservation action listed below to expand it and see more information on individual tasks run as part of the workflow.
Learn more

The "Learn more" should be a hyperlink to this section of the Enduro documentation:

• https://github.com/artefactual-sdps/enduro/blob/main/docs/src/user-manual/usage.md#view-tasks-in-enduro

Wireframe: