Meeting user needs with redesign

[shawna-slh]

Hey @SteveALee

I spent a lot of time going over analysis, user flows, and UI considerations. And going over user feedback from EOWG and COGA TF. I basically went back to the drawing board. I know that's annoying at this stage; however, none of the prototpyes from the last year were meeting user needs.

Here's a draft different approach that I think better meets user needs:

Let's talk Tuesday about getting user feedback on this before you spend much effort on re-coding.

Thanks for your patience and perseverance!!!

[SteveALee]

My initial (printable) reactions are

• Yes to breadcrumbs as:
  • provide better integration to the rest of the site
  • are a coga design pattern
• having interpage nav all together at top and not with intra page nav is a good thing. But uses unfamiliar terms?
• those arrows really stand out for me, in a bad way. A good idea just need some stylistic attention?
• can we use the side bar for more than page nave. Just a thought, I prefer the simplicity as it is.

[shawna-slh]

Thanks for the discussion earlier, @SteveALee. Here are the things that are different from previous version:

• [x] Banner/header adds explanatory blurb “Additional ways to improve accessibility (not required to meet WCAG)” italicized and not bold. {tie-in: main WAI site has tagline in banner/header also italic and not bold.}
• [ ] Add faux breadcrumb in nav bar. {tie-in: main WAI site has breadcrumbs. And users really wanted them!}
  • Note the different view icons after the first three.
  • For now, this can be the same on all pages. (When there is low vision stuff, then we’ll need to tweak a bit.)
  • Ideally when on one of the latter two pages, then it’s not a link. I think OK to leave that for an enhancement later and not spend time on it now.
• [ ] put objective & design pattern navigation in the main top nav bar.
  • Those icons are from here and are used in the previous next "pager" at the bottom of some resources on the WAI website. Maybe just making them smaller will be enough for now? We could put as low priority to redesign them to be thinner, at least for use at the top.
• [ ] Page Contents box
  • [ ] same style as main site https://wai-website-theme.netlify.app/components/boxes/#default-box for the overall box
  • [ ] then the new CSS with separator lines instead of bullets
  • [ ] Page Contents box in DOM after the h1

optional

• [x] Try the cognitive icon top right of h1 like the media resource I think we want this lighter one

Let me know if you have other idea or questions or I missed anything.

THANKS, Steve!!!

[SteveALee]

Page Contents box in DOM after the h1

difficult due to CSS grid - needs significant layout rework

The About page should link to the All page to agree with the breadcrumbs

[shawna-slh]

Hey @SteveALee Thanks for trying the true breadcrumb and other options after input from COGA folks. The approach below:

• puts what newbies need in the main header and has some similarities to the main WAI website header
• puts the in-resource navigation in the light blue area, similar to the tools design

Perhaps that will be good for Phase 1 and fairly easy to implement !?!

[shawna-slh]

• COGA TF minutes 3 Feb 2022
• EOWG minutes 4 Feb 2022
• COGA TF minutes 10 Feb 2022
• EOWG minutes 11 Feb 2022

[SteveALee]

@shawna-slh Yes, I like it as it gets round the previous Coga TF feedback. Also clearly separates the Nav from the paging controls. Provides background info without being confused as a breadcrums.

• maybe have a darker blue under the nav. to separate it form the header like the Main site does. But some how make it a little different to indicate in a different area?
• All -> "All Cognitive Patterns"?

• It does lose a breadcrumbs which is a shame - but with these long titles it became unusable really.

[SteveALee]

@shawna-slh

please see https://wai-wcag-supplemental.netlify.app/wcag-supplemental/about

Note I have a slight concern that the two boxes here look too similar

[shawna-slh]

Note I have a slight concern that the two boxes here look too similar

just for the record, we changed that to match how they're used elsewhere on the WAI site -- based on different situation for these pages versus lower down pages