Add a scan "score" or "grade" visualization to the results page

[carlcamera]

🚀 Feature request

Description

Add a scan "score" or "grade" to the results page. The current scan results UX is uninspiring. Everyone wants to get a good grade when they test themselves -- a score (or series of scores for each section) prominently displayed at the top of the results page would provide good user feedback and quick confirmation of improvement.

What scenarios will this solve?

1. I run the scan.
2. I make improvements based on feedback.
3. I run the scan again.

-- there is no quick, glance-able visualization of improvement.

Why do you want/need this?

The current UI is more cumbersome than other built-in accessibility checkers to use. I have to scroll and expand sections rather than having the problem areas quickly highlighted.

[molant]

The current scan results UX is uninspiring.

What scan results UX are you talking about exactly? I believe you talk about the website, but it could also be the browser extension, CLI, or even VS Code (which we can not modify).
We added different severity level defaults to different issues, but the website is not taking advantage of them.

Knowing what things are more critical should help developers see progress when they make changes and motivate them.

[carlcamera]

Here is a perfect score with webhint

Now another in-browser checker

Perfect results from webhint are meh.

Web developers are people and not robots. We like to receive positive feedback when we put our work up to a test. There's a lot of work put into creating a site. I'd like some acknowledgement that my work is recognized by the webhint checker. The truth is webhint only points out my failures while the other checker acknowledges my work - and ways to improve my score. This is a psychological distinction. Webhint is a downer. The other checker is inspirational.

[molant]

I see our approach similar to that of a linter. ESLint does not give you a grade. Your "grade" is when there aren't any issues detected. That said, I know not everyone has the same type of motivations, not everything works for everybody, and our goal is to help web developers create better websites.

I think we can find a balance between what we have and what Lighthouse (or other tools) have, is just that we haven't figured it out so thanks for bringing this subject back.

Have you thought about what type of score you would like to see and how it could be calculated? I think there were some conversations in the past about replacing the 0 with something more visual like a ✔.

To give you a bit more background about my opinion, the rest of @webhintio/core might disagree with me, my biggest concern with scores is people believing they are "done" with a category or focusing too much in getting a perfect one when it might not relevant to them. And I'm worried because I've seen it: Developers adding service workers because a tool told them, management pushing to have a PWA to have a perfect score even though it didn't make any sense to them, etc.

[molant]

I'm adding this to today's agenda so we can talk about it.

[carlcamera]

thanks for considering this. since you asked for a suggestion, here's mine. I think a balance between a score/grade while also acknowledging improvement would be to provide a donut for each severity level. In this case four concentric donuts. The outermost would be error since it would be the most obvious if errors exist. The donuts continue inward with the percentage exposed being number-of-errors/number-of-tests per severity of course. With each run, the donut gets greener and greener as improvements are made. Please DON'T use my palette here -- it's just something I threw together as an example. I'm sure we could find a more pleasing palette of colors.

[hxlnt]

Thanks for the feedback, @carlcamera. I'm going to schedule some UX/design research in this area to help us investigate this further.

[hxlnt]

Here is a proposed update for visualizing the results in the browser extension. This new version displays green checkmarks to indicate which areas have passed.

Happy to hear feedback and thoughts on this.

[antross]

@hxlnt This proposal looks good to me. I like the addition of the green checkmark to call out a positive state.

@carlcamera Do you think this helps address your feedback?