Merge pull request #360 from w3c/MH_Proposals

Mh proposals

Author: lseeman

content-usable/index.html

@@ -949,6 +949,7 @@ Design Guide
 		  <section data-include="../design-guide/o2p04-page-important.html">section>
 		  <section data-include="../design-guide/o2p05-chunked-media.html">section>
 		  <section data-include="../design-guide/o2p06-search.html">section>
+		 <section data-include="../design-guide/o1p08-clear-start.html">section>	
 		section>
 
 		<section class="objective-3">

design-guide/o1p05-clear-controls.html

@@ -55,7 +55,7 @@ What to Do
     <li>
       Ensuring items that are not clickable do not look like links or controls.
     li>
-  ul>
+     ul>
   <p>
     When this is not possible, provide instructions that explain how to use the
     control. Instructions should be on the same page or one click away and
@@ -110,6 +110,7 @@ How it Helps
     the controls, regardless of how a user uses the page (vision, auditory,
     voice input).
   p>
+ 
 section>
 <section>
   <h5 class="coga-5">Getting Startedh5>
@@ -126,7 +127,6 @@ Getting Started
     <a>cognitive and learning disabilitiesa>.
   p>
 section>
-
 <section>
   <h5 class="coga-5">Examplesh5>
   <p><span class="use">span><strong>Use:strong>p>
@@ -141,7 +141,7 @@ Examples
       standard user actions and make it clear when they are pressed.
     li>
     <li>Tabs that look like tabs and make it clear when they are selected.li>
-  ol>
+   ol>
 
   <p><span class="avoid">span><strong>Avoid:strong>p>
 

design-guide/o1p08-clear-start.html

@@ -0,0 +1,97 @@
+<h3>Make it easy to go directly to the home page (Pattern)h3>
+<pre class="yaml remove">
+title: Make it easy to go directly to the home page
+ref: ${{ FILENAME_REF }}
+github: ${{ GITHUB_INFO }}
+sidebar:
+  sections: 
+    - name: User Story
+      items: "Placeholder"
+    - name: Personas
+      items: "Placeholder"
+pre>
+<p class="ednote">This pattern is new, editorial review is needed.p>
+<section>
+  <h5 class="coga-5">User Needh5>
+  <blockquote>
+    <p>
+      I need it to be easy to go to the home page when I get lost or disoriented.
+     p>
+  blockquote>
+  <p>
+    Related User Story:
+    <a href="#Placeholder" aria-label="Placeholder"
+      >Placeholdera>.
+  p>
+  <p class="ednote">"Placeholder" needs to be replaced by real content in the section Related User Story [and also in corresponding 
+	  Code/Include].p>
+ section>
+<section class="wtd">
+  <h5 class="coga-5">What to Doh5>
+  <p>
+    Make it easy to go directly to the home page of a site, subsite or app.
+   To help users find the links to home page(s) on each screen, use: 
+  p>
+   <ul>
+    <li>a predictable location,li>
+    <li>large sizes fonts and icons,li>
+    <li>strong color contrast, andli>
+    <li>appealing icons or logos.li>
+    ul>
+<p>
+Note the home page is sometimes referred to as the main screen (in an app) or
+landing page of a set of screens or Web pages.
+p>
+<p>
+This guidance also applies to home pages for subsites and sections of the site. 
+For example, each department of a university may have its own home page. 
+In such a case, make it easy to go to the homepage of both the site and the subsite that the user is currently on. 
+p>
+section>
+<section>
+  <h5 class="coga-5">How it Helpsh5>
+  <p>
+   People who have cognitive and learning disabilities often get lost and disoriented when using apps and websites. 
+ This is often aggravated by stress, mental health and/or cognitive overload. 
+Providing an easily identifiable starting point helps users know that they
+ can always restart if they become disoriented or lost. 
+p>
+<p>
+Making links to home page(s) more visible and recognizable provides a more efficient
+way for people with cognitive disabilities to reorient themselves
+ and complete their intended tasks.
+p>
+<p>
+  For example, a user with a cognitive and learning disabilities navigates a wrong path during a search attempt 
+  or gets lost while exploring a website. If a home page link and logo are easily identifiable,
+  the user can directly go to the home page. It assures them that they can restart anytime if lost.
+  They don't need to press the back button multiple times. This helps them restart their browsing task quickly.
+  It prevents the negative impact on their efficiency that may be caused by reading 
+  every page on the way back to the home page.
+p>
+section>
+<section>
+  <h5 class="coga-5">Examplesh5>
+  <p><span class="use">span><strong>Use:strong>p>
+  <ul>
+      <li>
+      Clearly visible link to the home page with
+      <ul>
+        <li>recognizable icon,li>
+        <li>strong color contrast,li>
+        <li>large font and icons andli>
+	      <li>predictable location, such as the top left corner for a link to the home page.li>
+      ul>
+    li>
+    <li>
+     Breadcrumb that includes the link to the home page.
+    li>
+  ul>
+  <p><span class="avoid">span><strong>Avoid:strong>p>
+   <ul>
+        <li>Not providing a link to the home page of the site or app.li>
+        <li>Not providing a link to the subsite that the user is now on.li>
+        <li>Placing home page links in an inconsistent location, making it difficult for users to find.li>
+        <li>Using small, low-contrast, or unclear icons or text labels that are hard for users to recognize as a home link.li>
+    ul>
+section>

design-guide/o2p03-page-structure.html

@@ -10,7 +10,7 @@ Use a Clear and Understandable Page Structure (Pattern)
     - name: Personas
       items: "Alison, Amy, Gopal, Kwame, Maria, Sam"
 pre>
-
+<p class="ednote">This pattern has been changed, editorial review is needed.p>
 <section>
   <h5 class="coga-5">User Needh5>
   <blockquote>
@@ -36,7 +36,13 @@ What to Do
   p>
   <p>This can be achieved by:p>
   <ul>
+    <li>
+      having a single purpose on the page and limit the number of topics per page,
+    li>
     <li>organizing the page content into logical sections,li>
+    <li>
+      limiting the number of navigation areas that group links related to a specific topic (such as related resources),
+    li>
     <li>
       clearly differentiating regions using dividing lines, whitespace, and
       background colors,
@@ -60,9 +66,9 @@ What to Do
   <h5 class="coga-5">How it Helpsh5>
 
   <p>
-    People with <a>cognitive and learning disabilitiesa> may not be able to
-    use content and applications when the page structure and relationships are
-    unclear. The user may not complete tasks and miss key information. The user
+    People with <a>cognitive and learning disabilitiesa> and/or SMI (Severe Mental Illness)
+    may not be able to use content and applications when the page structure and relationships are
+    unclear or overwhelming. The user may not complete tasks and miss key information. The user
     may not return to pages that are complicated to use and understand.
   p>
 
@@ -112,6 +118,11 @@ How it Helps
       speech bubbles.
     li>
   ul>
+  <p><strong>Navigation areas: strong>Ensure each page has navigation areas that are easy to find.
+    Ensure that users know what to expect in each area. It is also important that users know what to ignore.
+    Using fewer navigational areas can improve simplicity. 
+    If you have many navigation regions, ensure they are clear and accessible, so that users are not overwhelmed.
+  p>
 section>
 <section>
   <h5 class="coga-5">More Detailsh5>
@@ -130,6 +141,14 @@ More Details
       The heading structure should create an outline of the document that could
       serve as an abstract of the whole document.
     li>
+    <li>
+      If you have five or more landmarks, check if they are all needed.
+      Ensure the landmark names are clear and describe their purpose. 
+      It helps all users, including screen reader users, know what to expect in each section.
+      Make sure the accessible labels for landmarks are easy to understand. 
+      They can be non-visible, but they still need to be clear
+      (for example, names like "primary," "secondary," and "tertiary" may not make sense).
+    li>
   ul>
   <p>
     Icons should be used consistently. It is also important the graphical
@@ -158,6 +177,8 @@ Examples
   <ol>
     <li>Dense text, with little white space.li>
     <li>Unclear page structure and hierarchy.li>
+    <li>Too many navigational areas that feel confusing and overwhelming.li>
+    <li>Unclear relationship between links in navigational areas.li>
     <li>Lack of visually differentiated sections.li>
     <li>
       Sections without headings or icons that define sections. For example: A
@@ -169,3 +190,7 @@ Examples
     <li>Groups and page sections that are not logical.li>
   ol>
 section>
+<section>
+<p class="ednote">This needs further review (By John K). p>
+section>
+

design-guide/o2p06-search.html

@@ -10,7 +10,7 @@ Provide Search (Pattern)
     - name: Personas
       items: "Kwame"
 pre>
-
+<p class="ednote">This pattern has been changed, editorial review is needed.p>
 <section>
   <h5 class="coga-5">User Needh5>
   <blockquote>
@@ -25,49 +25,77 @@ User Need
 section>
 <section class="wtd">
   <h5 class="coga-5">What to Doh5>
-  <p>Provide a friendly search capability. Ideally search should include:p>
+  <p>Provide user friendly search to your app or website. Ideally, search should include:p>
   <ul>
+  <li>Assistance to start a search, such as:
+    <ul>
     <li>autocomplete,li>
-    <li>grouping of results when appropriate with headings for each group,li>
-    <li>ability to easily find previous searches, andli>
-    <li>spell-checking.li>
+    <li>ability to easily find previous searches,li>
+    <li>spell-check, andli>
+    <li>allowing variations of search terms. For example: Caps or no caps, singular or plural forms, acronyms, or similar terms.li>
+    ul>
+   li>
+    <li>Support for finding useful results (findability), such as: 
+     <ul>
+      <li>grouping results when appropriate, with headings for each group,li>
+      <li>useful labels and descriptions for each result,li>
+      <li>filters to refine users’ search queries, when appropriate, li>
+      <li>Boolean search operators and modifiers, and explain how to use them, andli>
+      <li>ability to customize the number and presentation of links in search results.li>
+     ul>
+    li>
+    <li>Reliable search
+      <ul>
+        <li>Test the search function with real users. Make sure the search works reliably,
+          and finds results that match users' intent for common searches.li>
+      ul>
+    li>
   ul>
 section>
 <section>
   <h5 class="coga-5">How it Helpsh5>
   <p>
-    Having a search capability allows users to find the content they need even
-    if they cannot use the site menus. A user can learn how to use search and
-    reuse that skill on many sites.
+    Having a search capability allows users to find the content they need, even if
+    they cannot use the site menus. Many users can not manage menu systems for a 
+    variety of reasons. For example, menu systems and most site navigation require 
+    the user to understand the menu categories. Some users may be unable to 
+    identify the correct categories. However, many users learn how to use search and reuse 
+    that skill on many sites.
   p>
   <p>
-    Menu systems and most site navigation require the user to understand the
-    menu categories. Users with impaired <a>executive functiona> may be unable
-    to identify the correct categories.
+   Search is most useful when it makes it easier for users to find what they are looking for.
+   At the input level, this includes correcting misspellings or suggesting auto-corrected versions
+   of the search terms. Accepting variations of search terms benefits many people, 
+   including people with language impairments, dyslexia, or a memory impairment. 
   p>
   <p>
-    In some cases, users know the correct category via memory, rather than
-    logic. For example, most users remember that the print function is often
-    found under the file menu. Users with impaired memory may not be able to
-    find these menu items based on recall.
+    Allowing users to narrow their search prevents them from getting inundated with irrelevant results. 
+    This is especially important for slow readers with impaired memory or users who get easily overwhelmed.
   p>
   <p>
-    Users with impaired short-term memory, <a>age related forgetfulnessa>, or
-    who are easily distracted may also find navigating a site and going to many
-    pages to look for content difficult. If it takes too long they may lose
-    focus and forget what they are looking for.
+    The next step is helping users easily find useful results. Users with impaired short-term memory, <a>age related forgetfulnessa>,
+    or who are easily distracted may find it difficult to navigate a site and look through many results. 
+    If it takes too long, they may lose focus and forget what they are looking for.
+    A busy page of search results containing long lists of links can also be overwhelming. 
+    For example, people with obsessive-compulsive disorder (OCD) sometimes feel a need to open and check every result,
+    even when most of them are not useful.
   p>
   <p>
-    Search is most useful when it corrects misspellings, finds appropriate or
-    related content, and provides suggested auto-corrected versions of the
-    search terms.
+    It helps if search results are presented under headings and categories. Advanced search options and
+    search filters also offer users greater control over search queries, making it easier to find 
+    the right information. Customization can also make it easier for users to recognize the correct 
+    search result and avoid becoming overwhelmed. For example, it may allow the user to set the 
+    number of links and modify their presentation in search results. 
   p>
+  Finally, make sure that search options function reliably, consistently, and as expected. 
+  <p>
   <p>
-    If there are many results from related topics, it helps if search results
-    are presented under the appropriate heading and categories. This helps the
-    user find the search results they are looking for.
+    Errors and frustration can worsen anxiety, which in turn reduces overall cognitive function. 
+    This means that by the time the user finds the page or task they are looking for, 
+    they are less likely to be able to complete it. Making the process of finding the right content
+    easier will help them complete the task.  
   p>
-section>
+  section>
 <section>
   <h5 class="coga-5">More Detailsh5>
   <p>
@@ -79,13 +107,40 @@ More Details
   <h5 class="coga-5">Examplesh5>
   <p><span class="use">span><strong>Use:strong>p>
   <ol>
-    <li>Search with spell check or suggested terms.li>
+    <li>Search that forgives or corrects spelling mistakes and allows similar terms such as acronyms or related terms. 
+      For example: 
+      <ul>
+        <li>The user asks for information about “adhd” but uses lowercase. 
+          Information about ADHD, ADD, AD(H)D, and attention-related disabilities were also included in the results. li>
+      ul>
+    li>
+    <li>Search that helps the user narrow the results to the most useful. For example: 
+      <ul>
+        <li>A supermarket supports searching for chocolate by providing filters to reduce 
+          the search results such as vegan, gluten-free, sugar-free, etc. li>
+        <li>The supermarket allows users to add Boolean terms, such as “chocolate and syrup.”
+          The site makes it easy to find instructions on how to use these terms to narrow your search.li>
+            <li>Search results are presented under specific headings that make it easier to find the relevant results. li>
+      ul>
+    li>
+    <li>Personalization so that the users can customize the number and presentation of links in search results.li>
+    <li>Search that has successful user testing with people with learning and cognitive disabilities find it easy to find the correct content.
+li>
   ol>
   <p><span class="avoid">span><strong>Avoid:strong>p>
   <ol>
-    <li>
-      Search that presents many results that are not grouped or ordered by their
-      relationship to the original request.
+    <li>Search that overwhelms the user with results that are not what they are looking for. For example:
+      <ul>
+        <li>A search has lots of results but the user has no way to filter them.li>
+      ul>
+     li>
+    <li>Search that is not flexible and does not correct mistakes. For example: 
+    <ul>
+      <li>The search does not support similar terms or incorrect spelling li>
+    ul>
+     li>
+    <li>Search that does not have useful labels or descriptions for each search result.
+    The user has to open the results to know if they are relevant. 
     li>
   ol>
 section>