Redesign - October Revisions

prototype
Usability Testing Notes from October 2017, includes:
- Observations

Revisions Agreed Upon

Search

A top priority is good search - both search from within the site and SEO for external search engines
- site search using duck-duck-go on *new* site [✅ Implemented in Prototype 2017-10-12 – Eric] {not working well, yet, maybe just because GitHub pages not well indexed?- Shawn}
  - We haven't yet added the SEO stuff because I didn’t have time to look into that. Also, DDG indexes w3c.github.io/*, not only the website it seems. Also, I did not want to use the standard DDG way of adding DDG to the website as it is not fitting our style and needs an iframe. Best I can do. – Eric

Nav, titles, locations

[done] (top nav) Plan & Manage -> Planning & Policies (fyi, other brainstorms: Strategy & Policies, Programs & Policies, Projects & Policies) [✅ Implemented in Prototype 2017-10-12 – Eric]
[done] (doc in nav) Accessible Video & Audio -> Make Audio & Video Accessible [✅ Implemented in Prototype 2017-10-12 – Eric]
[done] (doc in nav) Accessibility Laws & Policies -> International Laws & Policies [✅ Implemented in Prototype 2017-10-12 – Eric]
[done] (doc in nav) Standards Harmonization — move under "Standards/Guidelines" after EARL [✅ Implemented in Prototype 2017-10-12 – Eric]
[done] (new doc) Standards/Guidelines — first link is an overview page
- 🚨 The Components of Web Accessibility page? Or the link Standards/Guidelines? If that got an overview page, shouldn’t the other main nav items get their own overview pages, too? – Eric
- I think we need a new pages that is titled Accessibility Standards/Guidelines Overview, and can be in the nav probably just "Overview". I don't think we need to have that for all of the other nav items. ~Shawn

Visual design

[done] [Action: Alicia] Headings/Sections — make heading levels and sections more clear (Alicia, Brent, Shawn ideas - more space above h2, heavier-weight &/or darker underline, probably bold h2) [✅ Eric made h2s bold and added more spacing around headings in general]
[done] Current page — stronger indication of the current page in left nav (e.g., current nav has background of menu item matching page background) [✅ Implemented in Prototype 2017-10-12 – Eric]
No right column.
- [done] [eric to propose] What about Tutorials content previously in right column? Eric will mock-up proposal that puts them in-line float-right. [✅ We now have floating boxes, so this use case should be covered.]

Back to top

[done] go to real top, not just h1 [✅ Implemented in Prototype 2017-10-11 – Eric]
[done] when already at top, "back to top" is not visible [✅ Implemented in Prototype 2017-10-12 – Eric – Added functionality to only show back to top after scrolling a bit, hiding the button once the user scrolls all the way to the top again]
[done] think about where in markup - probably after content (possibly after footer?) [✅ Implemented in Prototype 2017-10-11 – Eric – Keep after content as discussed with Brent/Shawn, and preferred by James]

Proposals Under Consideration

Main Navigation Design

✅ top nav items text are too small (from UT participants and EO chairs).
- Maybe tweaks from Eric will be enough? [✅ Implemented in Prototype 2017-10-12 – Eric – Bigger clickable area and bigger font on medium/large screens]
  - [Action: Brent & Sharron & Others] -- What do you think? Is the nav font big enough now?
- if Eric's tweaks not enough: [visual design] possibly move Web Accessibility Initiative to the right of W3C logo, then have main nav go full width?
  - Note that if we do that we would have a departure from the current eight columns into a six column design. – Eric
✅ [ready for Eric] Consider one-level drop-down with headings (which Alicia originally designed). Question: will it be clear enough which are documents to click on?
- Did we decide to do it? Because I need to throw away the current (then old implementation), and I won’t put in work if we are not committed to it. – Eric
  - We need to see it before confirming. Please do mock ups. (In any case, hopefully a way to save the old/current way for future reference anyway.)

Left Nav - In-Suite Nav

[done] Users not grok left nav is "suite" nav.
- note: breadbrumb currently breaks up the nav areas
- need stronger affordance with visual design that this is in-suite navigation - e.g., maybe make it dark blue like the main nav - all or just the top box [✅ Implemented in Prototype 2017-10-12 – Eric]
- stronger indication of the current page (e.g., current nav has background of menu item matching page background) [✅ Implemented in Prototype 2017-10-12 – Eric]
- not put the nav category in that box (it's already in the breadcrumb) [✅ Implemented in Prototype 2017-10-12 – Eric]
- ~~one idea: put suite nav below main nav. (Two models on current site: report tool (except we don't want to convey that they need to be done in order), use web (ugly, we know :-))~~

🕑 LATER [visual design] Consider icons -- if not used throughout, then limited usefulness, and so not use? If used, need attention...

Page contents

Put all page contents inline and the first thing on each page
- If page has overview or summary (like contacting orgs), then put that and page contents in box; otherwise, not in box, just a plain h2
"Page contents" for now (late could consider "On this page" or other)

Other

[done] Shawn to add to GitHub issues about what happens when they click on a top-level nav item....

Things to Address

Home page

Revised goals of the home page:
- W3C — people need to know what W3C (and WAI) is - in order to have good context for the whole site and content. That might need to be *the* major goal of the home page.
- Range of resources — One major goal is communicating the breadth of and wide range of different WAI resources. This has been a known issue for ages, and still played out in usability testing.
- Regular users not likely to go to home page no matter what the content. (especially since we won't have new content very often)
- ACTION: Shawn check with Judy on News priority
  - Shawn talked to Judy and got some good input (including some positive aspects of the I18N page), but still trying to process ideas into suggestions...
[visual design] Brainstorm: home page content is:
- W3C WAI is...
- Nav categories in big boxes with a little explanatory text &/or Eric's idea below (pros: pretty closely matches audiences/roles/tasks; communicates breadth of resources; explains nav sections)
- Perspectives Videos
- News and announcements
- Sponsors/Funders
[visual design] Brainstorm: (Okay, this is a bit out there…) Could we not “just” list all pages in the home page and use that as the main navigation paradigm? So, remove the top navigation, have all pages linked on the home page (the areas could be expand collapse). When clicking on the nav item on the home page, you get to that resource (w/ subnavigation as is). Navigating to other pages/sections would mean a round trip to the home page, but we could have a back button or could replicate the home page navigation on the bottom of the page for quick access. – Eric rough sketch https://sketch.cloud/s/v8k14/all/page-1/page-1 ...a 2 column/3 row layout might also work in the same way... If we want to include News/About WAI 4 rows.
- or, do that and still leave the nav at top
Audiences - think about a section that helps identify audiences and the resources available for the various audiences - a secondary path to get to the information they need - possibly instead of featured resources {Norah}
- Here is some info on Audiences and Personas
- I wonder if the nav categories adequately address audiences and we don't need both?
Sharron & Brent like some aspects of W3C Developers home page

Misc

Tag line — Revisit tagline near top of masthead (current one "WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities" is in the footer of current prototype)

Content

Tips — try adding "handles" for tips, as described in GitHub 339
- Note that WCAG is currently struggling with their handles now that they introduce new SCs. – Eric
Summaries — For many pages, consider a summary at the top (Brent). This would also serve to answer "what can I get from this page" (Sydney). Possible model for visual design: Contacting and content: Mobile
- I think one line/paragraph summaries were part of the content rework effort… – Eric
Laws & Policies — policy link more clear and ministry less, as described in GitHub 313
cross-links — look for where we need to add them -- especially to the Perspectives video pages!

Recommendations from Liz and Team

[with added notes in brackets]

Content

In Test & Evaluate, provide content related to automated testing [will be in Tips for Evaluating, added to Easy Checks GitHub 85. Consider if we want to add an Evaluation Overview page (e.g., old one)]
Abbreviate the amount of copy in articles [in progress]
Provide a link to Easy Checks - A First Review in Introduction to Web Accessibility [provided in https://w3c.github.io/accessibility-intro/ and identified in issue1]
Tips For Designing, Developing, Writing: Page Contents should not be verbatim from the guidelines, but rather a short and straightforward re-wording [captured in GitHub issue 339]
Provide examples, links to tools, ratios, etc. when appropriate (e.g. in Tips for Designing, in Easy Checks, in Accessible Audio and Video Guide) [mostly for later revisions]
Revise the content in Accessible Audio and Video Guide in order to meet users’ needs [some pending in GitHub issues, others welcome]
Provide a higher-level checklist for evaluation [out of scope for now, maybe later]
In Standards/Guidelines, adjust the content to accommodate for different levels of accessibility knowledge [planning new Overview page, per note above]
Cross-pollinate and feature perspectives videos on relevant pages (e.g. Introduction to Accessibility, Business Case, How People with Disabilities Use the Web) [action: add GitHub issues where needed]

Other

Communicate the full scope of the intended audience on the homepage [agreed per Home page above]
Prioritize implementing the search function [agreed per above]
Reconsider how to handle pages with a need for additional navigation [draft in progress]
Maintain cross-pollination of caption-related information in Teach & Advocate [no action needed]
Address IA issues which may cause site visitors to over-emphasize “Standards & Guidelines”
Return to a hover fly-out menu with a delay on closing the submenu when the mouse leaves the navigation, or include a caret by the main navigation links to indicate the existence of a secondary navigation

Naming

Consider renaming these sections [& pages]
- [nav category] Plan & Manage [changed to Planning & Policies]
- [nav category] Teach & Advocate
- [page] Standards Harmonization is Essential [might make more sense since moved to Standards section?]
- [page] Using Combined Expertise
- [page] Conformance Evaluation
- [page] Diverse Abilities and Barriers

Prototype issues

The purpose of this section is to inform usability test analysis — that is, to let us know what we don't need to focus on in results reporting.

Business Case — Content: in first page, missing links from content into sub-pages. GitHub 11
implement Highlight boxes and misc visual designs
breadcrumbs for some pages missing or incomplete ?
In-page links — markup section and heading
Tips — Examples and such
Tutorials — Examples and such
Easy Checks — fix in-page contents
accessibility (for screen reader and others):
- ...

done:

[done] Home page - Tutorials link in big box at top went to Easy Checks instead of Tutorials
Business Case — Nav: sub-pages missing from main nav.