Design scan results page

[ststimac]

This will have a few different iterations depending on what point in time we're at:

• MVP Scan results page, probably just the current state of the site that was scanned, no compare option, no charts

• Will need to slightly modify current design

• 2nd iteration, add compare to previous scan option

• Probably a 3rd iteration where we have enough data to start calculating average scores for the different rule categories like shown in the visual comps

[ststimac]

@molant @sarvaje @qzhou1607 @alrra

Here is my proposal for the scan results page for the MVP. The compare/double column was kept in mind and this is scalable when we add that feature.

The icons at the top will be links to the category on the page if you have errors in that rule. Also as we add more rule categories it would fill out the top w/more icons.

[qzhou1607-zz]

@ststimac Will errors/warnings from different resources grouped under the same rule? The result page can run pretty long, maybe we can make the errors/warnings under the same rule collapsible for easier navigation?

Also how about we use the same design here for the html report (webhintio/hint#411)? @molant @alrra

[ststimac]

@qzhou1607 I want to make sure I'm understanding correctly. So (using my mock-up above), everything under 'html-checker' would be collapsible? We can definitely do that.

[qzhou1607-zz]

@ststimac Yep, that way the user won't need to scroll all the way down if looking for a specific rule, just my two cents :).

[ststimac]

@qzhou1607 is the scan-result.hbs file the one I should used to build the scan results page?

(just checking before I start editing it)

[qzhou1607-zz]

@ststimac Yes.

[molant]

Good start!

I have some minor requests and questions I hope you can help with:

General:

• I'm sure you already thought about this but this page is going to load the results asynchronously, I'd like to have Nellie waiting while they arrive :)
• Also results might not arrive all at the same time, maybe we get the a11y and performance first, then interop and security, etc. How would that look like?
• Missing pieces of info: final url scanned, permalink to this page so people can review the results again in the future, version of the scanner used, total time of scan, total warnings and/or errors (maybe by category? see later for more about this)
• In this version there is only one rule that doesn't pass. If there were more, would they be one after another?

Categories section:

• I think we should just list the number of errors/warnings in the categories instead of the total rules passed:
  • The results document doesn't have the list of rules run, only the issues found
  • The total number of rules run can become pretty large and it will change over time
  • How does the page looks like when the results are ready? Does it open automatically the first category? Having the warnings and errors by category could make a good summary
• The interop logo makes me think about intersections rather than "works everywhere". If we want to continue down that path then I'd use something similar to the logo in API catalog where three circles intersect.

Results section:

• Is there a link to the documentation of the rule? The icon on the right looks more like a link to that header similar to what is proposed in here.
• As @qzhou1607 says, the output of a rule can become pretty long. I think it will be good to have the results collapsed with a small summary in the title and let the user drill down. E.g: html-checker: 1 error, 2 warnings.
• I'd like a way to pivot the results between resources <--> rules. Currently results are grouped by rules but I'd like to see those also by resource. This will allow users to know which resource has the most issues and know more easily what needs to be done with each one. E.g.:
  • https://sonarwhal.com
    • html-checker: 6 issues
    • manifest-exists: 1 issue
  • https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css
    • disallowed-headers: 3 issues

[ststimac]

Here some updated comps. I'm going to do a separate post answering some of the questions about how these appear on the page. Going to share with Melanie for design feedback. Everyone else feel free to chime in as well.

[melanierichards]

This is so exciting!! It's looking so good, @ststimac.

1. In the first row of the results tiles, the scan time/version are the largest numbers, when it seems like they're probably less important than the total # of errors/warnings. Maybe try inverting those type sizes? There's probably a few different ways to lay those out.
2. When there's errors/warnings in a category, I'm thinking maybe the icon should be shades of red? OR instead of making that title red, you could make the non-error-y tiles a non-100% opacity.
3. For PWAs, let's use something other than the lightning bolt, which might get confused with Google's AMP. There's an officially unofficial logo: https://github.com/webmaxru/progressive-web-apps-logo
4. Perf logo looks a bit like an orange slice :P Maybe try taking out the segments, or having them be shorter and not reach the edge of the "wedge".
5. What do the little page icons do?
6. For the inline snippets of code (inside a sentence), might be worth making the font size a little bit smaller so it visually looks the same size as the surrounding text. This is a personal preference thing though.
7. I think the border radius on those little inline code snippets could be a little less rounded and/or more padding around the words.

[ststimac]

Excellent, thank you @melanierichards :)

5. the page icons are links to the documentation.

[ststimac]

Does anyone have a preference on either of the tile designs? Would like some input on that.