w3c/wai/you panels

[brewerj]

Good to see the design stabilizing nicely. As it has evolved, I note that the w3c/wai/you panels are reduced in size, but for some viewers still take up the majority of initial visual real estate; but that they don't seem to have a commensurate functional value, especially given that they are not interactive. The messages in these panels seem informative in a way that would be most useful for first time visitors, but would reduce in value for repeat visitors. Also, they are confusing because (visually) they appear clickable, but aren't. There is lots of useful information below them, but visual viewers may need to scroll down to discover that, and they might not be tempted to do so.

My understanding is that the plan is to shrink these further by combining the three panels/boxes into one panel/box to give less of an appearance of clickable areas. This may not solve the problem and it could create a new one. A combined horizontal box spanning the page could, for visual viewers, block the visual flow down the page, making it less likely for those viewers to explore "below the fold." And the apparent "clickability" of the panels may be driven more by the borders of the boxes than by the number of the boxes.

Here are a few suggested minimalist tweaks towards finalizing the centerpiece of the home page, given that the site is nearly done:

• Currently each of the panels has padding that could be tightened up, including white space inside of the borders around the embedded images and text, plus white space outside of each panel. Reducing the padding would allow us to reduce the depth of these panels -- potentially by as much as half -- and could encourage more people to explore below the panels.
• The apparent "clickability" of the panels may be due to the borders for each panel. What about simply removing the border around each of those three panels? For people who are perceiving the website visually, their eye can more easily pass through these areas and flow down to the information below.

[yatil]

I try to recall what we did at the F2F that pleased us, @slhenry…

• We played with the alignment of the “headings” in that area and didn’t like it left aligned.
• I think we agreed to try out to remove the thick borders, I think, and replace them with finer lines or just have a box around all three items.

I don’t think we came to a conclusion, hence the lack of notes on my end, as far as I recall.

I played a bit with the elements section, as a start, so we have something to look at:

[yatil]

Some iterations on this:

[brewerj]

The first two iterations that I'm seeing above I think are much better than what is in the current beta. Putting the icon beside the w3c/wai/you mini-header appears to work well; the panel doesn't occupy so much space and risk blocking the visual flow down the page; and especially, not having it boxed up with borders helps by giving the area a more flexible visual flow.

Between these first two, I think that the font size for the panel detailed text is better on the first iteration because it is smaller and wouldn't have unnecessary prominence; but that the font size of the subhead text "W3C WAI provides you strategies..." under "Making the Web Accessibility" is better on the 2nd iteration."

[By the way, grammatically, in this usage of "provides," a "with" is needed, e.g. "W3C WAI provides you with strategies..."]

I think that the 3rd iteration is a mobile view... this is rendering oddly (even for a mobile view on a desktop) so I'd need to see an update to be able to comment.

The fourth iteration, with the partial dividers between w3c/wai/you, I think could work fine from the perspective of a solitary design element; but in the context of the full page, I think that these dividers introduce an unnecessary visual element that might hang up viewers' attention and be counterproductive to inviting them into the rest of the page.

Thanks for the view of the iterations and the work to address these concerns.

[yatil]

@brewerj Ha, I was just dropping them in here as a reminder for me and Shawn. I hope to get to implementation tomorrow and thwn I’ll post the preview here :-) Good that you like the iteration.

[yatil]

[By the way, grammatically, in this usage of "provides," a "with" is needed, e.g. "W3C WAI provides you with strategies..."]

I added the “with” for now, but I wonder if we can wordsmith that sentence in the future. Currently, I read the sentence and think “who provides what to whom to do what exactly” :-) It reads more complicated than it probably needs to be.

[yatil]

The preview is now available here: https://w3c.github.io/wai-website/

[shawna-slh]

(Agree "provides you with" made it even more awkward. I deleted that part of the phrase all together. I think it's clear enough form the text underneath.)

Redesign addressed other issues. Closing this issue. Re-open if needed.

[brewerj]

Commenting on the updated panels, the appearance-of-clickability issue seems pretty well resolved with the tweaked design in the preview noted above. Thanks.

I think that there is still an issue of excess non-interactive vertical space due to the w3c/wai/you panel, even given the tweaks. It would be great to keep the panel, given the nice icons and useful text for first-time visitors, while getting people to the interactive content below that a little quicker, visually.

The simplest and most effective way to do this might be to shrink the padding inside the bottom of that panel just a little bit, and to shrink the padding above the "News" and "Get Resources For" by a corresponding little bit. Right now there's a double dose of non-interactive vertical padding between the panel and the next round of interactive content.

And by the way, I think that the beta version hangs together better overall with the consolidation of font treatments on the page since I last viewed it, even within a single font family. Thanks.

[yatil]

I’d rather not remove more padding from the component as it means we have different paddings in different sections and also means that the initial impression is even denser.

We had a design where we had “interactive content” == resources front and center at the top and couldn’t get sign off because we needed to explain what WAI and W3C are first. Now we seem to be swinging the pendulum into the other direction.

I’d say keep as is and see what changes we want to make once we have the site up and running.

[yatil]

• [x] remove bottom margin from p elements
• [x] remove top margin from h2 elements in teasers

[shawna-slh]

and that gives us 32 pixels :)

[brewerj]

With regard to consistency of paddings in different sections, I doubt that that matters as much when one is scrolling vertically through the current page design, as does amount of non-interactive space before one gets to interactive content. But if you want to keep the padding consistent, you could reduce the padding currently around the "see all news" button (particularly after) -- as it currently seems to float un-anchored, and not be at any risk of appearing "dense."

To be clear though, my concern is more functional than aesthetic -- that we may lose some readers due to the screen space taken by non-interactive panels, before they get themselves to the interactive content.

I don't believe that this is a case of swinging the pendulum back in the other direction, as you suggest above, because I think that the W3C/WAI/You panel info is good and I've specifically suggested above that we be sure to keep it. I am however suggesting that we refine how we present it, so as not to introduce a second problem while resolving the first one. How about giving that a try and seeing how it works?

[yatil]

@brewerj Shawn and I already agreed on an approach, see above.

[brewerj]

Non-urgent follow-up thought:

• The margin tweaks for p and h2 work well to tighten up the w3c/wai/you panel;
• There is a similar issue of extended vertical space lower down on the page, after the end of the News and before the "See all News" button; then again after the "See all News" button and before the "Sponsors & Funders." Could you apply a similar approach to tighten up the empty vertical space at those transitions, to tie that content in with the rest of the page more?

[yatil]

@brewerj I have created a new issue (#58) with your feedback. Please note that no-one will be pinged when you comment on closed issues, so comments are likely overlooked. It’s always better to open a new issue.