/
Possible UX improvements

Possible UX improvements

A page for capturing potential UX related improvements to the Admin App.

General

Issue / Suggestion

Notes

Jira ticket

Issue / Suggestion

Notes

Jira ticket

In light mode, when viewing a page in a sub-section, e.g. Libraries > Calvary University, the parent menu option in the sidebar is active. On hover the background colour becomes a washed out blue #DDE7ED.

image-20250114-132803.png

According to the openRS.ts theme file this style should be applied: hoverOnSelectedPage: "#A9A9A9", which would look like this:

image-20250114-135229.png

This became an issue several months ago.

 

On the logged out landing page, increase the left and right margin on smaller widths for the logged out home page.

 

 

Would display of the date created and updated be useful for pages/records?

Patron requests show this info in key-value pairs.

 

Use a badge for counts in place of text e.g. (5)

 

 

Ensure a consistent link style is applied. In the Mapping import modal on-click/select is red

 

 

 

Consider alternative patterns for linking to documentation from within the app.

 

Referenced on DCB-1789

Grids

Issue / Suggestion

Notes

Jira ticket

“New” button, used to open the form for creating a new entity.

  • Align them right as per the Actions button instead of left.

  • Name them “New <entity>” e.g. “New functional setting” in place of “Add new functional setting”.

This would be a global change to our grid components.

 

Add a hit count to the top of data grids. Currently the user has to scroll to the bottom of the grid to see the hit count.

Many grids have a default setting of 200 rows.

 

As the column width is controlled by the data present some headings are clipped significantly. In the example below the Polling count field was so narrow that the tooltip would not display.

Consider:

  • setting a minimum width on some fields.

  • wrapping column headings when they don't fully display (would also need min width).

Mitigated currently through offering master views, tooltips on the labels and the ability to change the column width to see the field name.

 

Consider introducing multi-column sorting.

 

 

User choice persistence, e.g. for column selection, and number of rows per page, remains for the session within a single browser tab. Closing the tab loses the user’s choices. Consider persisting choices over a login session or using cookies to save choices on a device.

 

 

Do users need to be able to copy the content of a cell using the keyboard and mouse? Highlighting content via mouse opens the record view. Copying from the grid via keyboard is possible but clunky.

 

 

When the right mouse button is selected on a linked row, the browser’s native option to “Open link in new tab”, “Open link in new window”, are not available.

The fix for this could be to drop the row selector and add links to content in cells. Would improve accessibility as well but create a problem where there is no obvious field on which to add the link.

 

Export - the options for exporting Mappings are different to other export options.

What is needed to make the exports consistent?

Related ticket: DCB-1022

Search and Filters

Issue / Suggestion

Notes

Jira ticket

Bib records. The “equals” filter on “Time in state” does not work.

Is it needed or should it be disabled?

DCB-1082

Consider whether quick filtering via grid searches might be useful. Entering “this, that” will search for “this OR that”.

 

 

Review the ghost text in each search. Some are incorrect. In the below example it should read “Search by full name”

 

 

Forms

Issue / Suggestion

Notes

Jira ticket

Consistency of “Save” button label. All buttons should say “Save <entity>”

E.g. New group. Relabel “Submit” as “Save group”

E.g. New functional setting. Relabel as “Save functional setting”

The button label would be the same for both New and Edit actions. If preferred we could have “Create <entity>” for new and “Save <entity>” for edit.

 

Display field labels above fields in all modals and style as per inline fields. Instead of this:

Display this. This helps to differentiate better between labels and values.

 

 

All boolean/status fields.

  • Avoid column heading as questions.

  • Avoid true/false and Yes/No values.

  • Ensure the options displayed in drop downs represent the value displayed to the user.

E.g. Instead of the below (from the Functional settings grid). Have a column labelled “Status” or “Availability” with Disabled and Enabled in the drop-down.

 

 

When the user edits a page and does not save before moving to another page the standard “unsaved changes” message should be displayed, as per the one displayed for a Library page.

The app needs a full review to see where the issue is present. Known to be missing from Consortium > Profile, and all pages which have editable grid rows.

 

From Casey: If we want to bring the add contact form in line with the data grid and have a single “name” field, that’ll just require a bit of work to bring the logic from the data grid over.

 

 

Modals

Issue / Suggestion

Notes

Jira ticket

Add modal component

 

DCB-614

Add a paragraph style for modals which has the correct top and bottom spacing and then apply paragraphs to text in modals.

 

 

Tab groups

Issue / Suggestion

Notes

Jira ticket

Remove the pulsating animation displayed when navigating via keyboard. The blue area in the screen snip.

 

 

 

Breadcrumb

Issue / Suggestion

Notes

Jira ticket

The Audit log breadcrumb:

  • doesn't indicate the Patron Request it relates to

  • contains what appears to be a link to “Audit log” but is just blue text.image-20241204-160753.png

Replace: Home > Patron requests > Audit log > a1c13a6b-7381-4a24-be61-230ba8c56813

With: Home > Patron requests > request title > a1c13a6b-7381-4a24-be61-230ba8c56813

*

 

Accessibility

Issue / Suggestion

Notes

Jira ticket

Focus is not being managed when the user interacts with some elements in DCB Admin. This is an issue for users who navigate using the keyboard rather than mouse. A full review of the app is needed.

Known issues:

Focus reverts to the top of the page when:

  • An item is selected in the Sidebar menu.

  • A row is selected in the data grid to open a new page

 

DCB-860

Review to check that any links which open a new window are marked up with the appropriate ARIA.

 

DCB-1655

Toast alerts: The close “x” icon is not focusable and aria-hidden=true. Generally need to check whether alerts are given focus when they appear and are voiced by a screen reader.

 

DCB-860

Sidebar options are being voiced in a very convoluted way in NVDA see video

 

DCB-860

 

Operated as a Community Resource by the Open Library Foundation