UX/UI for Bulk Audit/Checkout for easier readability

[MWR-Napavine]

Snipe-IT Version

5.3.2

Operating System

Hosted

Web Server

Hosted

PHP Version

7.3.23

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

The Bulk Audit/Checkout screens have a live updating interface. As you scan items, a list appears showing that each item was either successfully or unsuccessfully audited/checked out.

The problem is this interface can be difficult to be read for several reasons:

• When scanning multiple items quickly with a barcode scanner, it is difficult to see what was scanned. (i.e.: Did all 12 of these items scan, or only 11?)
• Scanning Errors look very similar to scanning successes. The UI feedback is very similar.
• Successes are color coded with a pale green, and errors have a pale red. These colors are not diffirential enough on some dim monitors.
• Also, Green and Red are colors that look similar to those who are colorblind.

These two pictures show a series of successes and one failure. This is using a Chromebook, so the screen is not that bright nor color accurate. This is to help demonstrate the problem. The problem is further exaggerated when the screen is tilted, which is often the case when performing audits of devices in hard to reach places.

Describe the solution you'd like A clear and concise description of what you want to happen.

I would recommend the following to improve this UI/UX:

• Higher contrast differences between successful and unsuccessful scans. Perhaps keep the successes the pale green, but the failures should be a higher-contrast color. Maybe invert the colors?
• Have the option for audio feedback. Success beeps and failure buzzes can allow scanning without visually confirming each scan in bulk situations.
• Each successful barcode should be a link to that inventoried item. (This should be universally true across all of Snipe-IT)

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

No response

Additional context Add any other context or screenshots about the feature request here.

No response

[adagioajanes]

Higher contrast differences between successful and unsuccessful scans. Perhaps keep the successes the pale green, but the failures should be a higher-contrast color. Maybe invert the colors?

So, increasing the contrast of the colors could make the text harder to read on other monitors. How about a high contrast green check or red X next to each item to indicate the status?

Have the option for audio feedback. Success beeps and failure buzzes can allow scanning without visually confirming each scan in bulk situations.

Audio is outside my wheelhouse. Someone else will need to take a look. Also, it may be difficult because Chrome restricts auto playing audio. So, we will have to ensure that we can bypass that.

Each successful barcode should be a link to that inventoried item. (This should be universally true across all of Snipe-IT)

I like this idea. On this particular screen, I think the link should open a new tab because you don't want to lose your status list by navigating away.

[snipe]

Higher contrast differences between successful and unsuccessful scans. Perhaps keep the successes the pale green, but the failures should be a higher-contrast color. Maybe invert the colors?

That’s what the X and checkmarks are for. We never just rely on colors to give feedback, and as @adagioajanes stated, the success rate on that will vary based on monitor settings. The paleness is intentional so that it meets accessibility standards of background to text contrast ratios.

Audio feedback is interesting. I’ll look into that.

Each successful barcode should be a link to that inventoried item. (This should be universally true across all of Snipe-IT)

Except if you accidentally click on it, you’re now taken off of the screen you were just on. This was a deliberate design choice.

[MWR-Napavine]

That’s what the X and checkmarks are for. We never just rely on colors to give feedback, and as @adagioajanes stated, the success rate on that will vary based on monitor settings. The paleness is intentional so that it meets accessibility standards of background to text contrast ratios.

Perhaps the text itself can be made a different color help it stand out? Failure to have red text? Hopefully keeping within the accessibility standards for contrast ratios. Or if not, a easier to see icon.

The small green checkmark and red x are similar from a distance from my monitor. (They are both angular, small, thin, and dark. Maybe I'm just getting old.) Another option could be an exclamation mark (!). Whatever the case, it should be apparent at a glance without being familiar with the interface.

Audio feedback is interesting. I’ll look into that.

I am exited for this. Audio feedback would greatly improve Bulk action usability. This kind of audio feedback has help with other similar software.

[snipe]

Thanks for your feedback :) In looking into audio, I’ll also be checking out haptic solutions that may help with non-sighted users’ accessibility. I’m pretty jazzed about that myself.

[snipe]

I can't find a way to override the browser's built-in blocking for auto-playing audio. Not using the HTML5 audio tags, the old style embed, iframes, or JS.

Damn advertisers with their crappy auto-play had to ruin it for everyone.

[MWR-Napavine]

I know that other open source projects have methods to do this, but I do believe the user must allow the audio from the page. I know the Koha project (open source library software) has audio beeps working, you might see how they are accomplishing it. Some Koha documentation on the browser side: https://aspen.bywatersolutions.com/education/setting-up-sounds-in-koha They do keep a mirror if their source code on GitHub... You might see exactly how they do it there.

…

On Fri, Mar 4, 2022, 2:59 AM snipe ***@***.***> wrote: I can't find a way to override the browser's built-in blocking for auto-playing audio. Not using the HTML5 audio tags, the old style embed, iframes, or JS. Damn advertisers with their crappy auto-play had to ruin it for everyone. — Reply to this email directly, view it on GitHub <#10560 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALQYX5AFUB37XOEXABDYYV3U6HUJLANCNFSM5MY7L7JQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[MWR-Napavine]

Checking in on this. Looks like the colors on the successful/unsuccessful audits are a little higher contrast now... which resolves the original issue. If the Audio portion of this is still desired, it should be created as it's own feature request. But for my original issue, this has been resolved.

Thanks everyone.

[snipe]

#15244 - still testing this, but this might do the trick.