Documentation changes

re-write of documentation and the example
hmrc · Oct 23, 2017 · c7296df · c7296df
1 parent b5106fe
commit c7296df
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 29 deletions.
diff --git a/assets/patterns/404-page/404-page.html b/assets/patterns/404-page/404-page.html
@@ -1,47 +1,66 @@
+<!-- COOKIE MESSAGE -->
+<div id="global-cookie-message">
+  <p>GOV.UK uses cookies to make the site simpler. <a href="https://www.gov.uk/help/cookies">Find out more about
+    cookies</a></p>
+</div>
+<!-- END COOKIE MESSAGE -->
+
+<!-- GOV.UK HEADER -->
 <header role="banner" id="global-header" class="with-proposition">
   <div class="header-wrapper">
     <div class="header-global">
       <div class="header-logo">
-        <a href="https://www.gov.uk" title="Go to the GOV.UK homepage"
-           id="logo" class="content">
-          <img src="images/gov.uk_logotype_crown_invert_trans.png?0.19.2" width="36" height="32" alt="">GOV.UK
-        </a>
+        <a href="https://www.gov.uk" title="Go to the GOV.UK homepage" id="logo" class="content">
+          <img src="images/gov.uk_logotype_crown_invert_trans.png?0.19.2" width="36" height="32" alt="">GOV.UK</a>
       </div>
     </div>
     <div class="header-proposition">
       <div class="content">
-        <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
         <nav id="proposition-menu">
-          <ul>
-            <li><a href="/" id="proposition-name">Service name</a></li>
-          </ul>
+          <a href="#" id="proposition-name">Service name</a>
         </nav>
       </div>
     </div>
   </div>
 </header>
 <div id="global-header-bar"></div>
+<!-- END GOV.UK HEADER -->
+
 <main id="content" role="main">
+  <!-- PHASE BANNER -->
+  <div class="phase-banner">
+    <p>
+      <strong class="phase-tag">BETA</strong>
+      <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
+    </p>
+  </div>
+  <!-- END PHASE BANNER -->
+
+  <!-- PAGE CONTENT -->
   <div class="grid-row">
     <div class="column-two-thirds">
       <h1 class="heading-large">This page cannot be found</h1>
-      <p>Everything you have done up until now has been saved.</p>
-      <p>The link you clicked on the previous page is broken. This has been reported to the people who manage this service and
-        will be fixed as soon as possible.</p>
+      <p>There was a problem with the link you followed.</p>
+      <p>If you typed or copied the link please check the link and try again.</p>
       <p><a href="#">Go back to the previous page.</a></p>
     </div>
   </div>
+  <!-- END PAGE CONTENT -->
 </main>
+
+<!-- FOOTER   -->
 <footer class="group js-footer" id="footer" role="contentinfo">
   <div class="footer-wrapper">
     <div class="footer-meta">
       <div class="footer-meta-inner">
+
         <ul class="platform-help-links">
           <li><a href="/help/cookies" target="_blank" data-sso="false" data-journey-click="footer:Click:Cookies">Cookies</a></li>
           <li><a href="/help/privacy" target="_blank" data-sso="false" data-journey-click="footer:Click:Privacy policy">Privacy policy</a></li>
           <li><a href="/help/terms-and-conditions" target="_blank" data-sso="false" data-journey-click="footer:Click:Terms and conditions">Terms and conditions</a></li>
           <li><a href="https://www.gov.uk/help" target="_blank" data-sso="false" data-journey-click="footer:Click:Help">Help using GOV.UK</a></li>
         </ul>
+
         <div class="open-government-licence">
           <p class="logo"><a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a></p>
           <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
@@ -53,3 +72,4 @@ <h1 class="heading-large">This page cannot be found</h1>
     </div>
   </div>
 </footer>
+<!-- END FOOTER -->
diff --git a/assets/patterns/404-page/README.md b/assets/patterns/404-page/README.md
@@ -2,35 +2,52 @@
 
 404 pages (usually described as a 'page not found') tell users that the page they were trying to access is not there.
 
-Processes and systems should be put in place to prevent users encountering 404 pages in the first place.
+{{ example("404-page.html", scaled=true) }}
 
-## Why users see 404 pages
+## When to use a 404 page
 
-There are three main reasons users encounter a 404 page:
+There is a chance in all services that people will encounter a 404 page. 
+Processes and systems should be put in place to prevent users encountering 404 pages in the first place.
 
-1. they followed a link (URL) that is broken or pointing to the wrong location
-2. they followed an old link or a link that has expired
-3. they typed or copied a link incorrectly
-4. 404 page design
+The main reasons you would need to show users a 404 page:
 
-As with all error messages, we should reassure users that their progress has been saved and then help them to fix the error.
+1. if they followed a link (URL) that is broken or pointing to the wrong location
+3. if they typed or copied a link incorrectly
 
-## Broken links or moved pages
+When you design the 404 page for your service you need to consider:
 
-There are a few possible reasons why this may happen:
+- the best way for people to solve the problem
+- if there is anything spesific your service can do to help users
 
-- if a user clicked a broken link
-- if a user bookmarked a page and the page has been moved or removed
+## How 404 pages work
 
-## Broken links
+When you design the 404 page for your service you need to consider:
 
-Testing should catch errors like this but because of the often disjointed nature of the services we build 100% coverage may not always be possible.
+- the best way for people to solve the problem
+- if there is anything spesific your service can do to help users
 
-If a user has clicked a broken link, we will - in most cases - know this because the referring URL of the page will be from within a GOV.UK domain or other domain that we control. 404 errors should be logged and fixed as soon as possible.
+{{ example("404-page.html", scaled=true) }}
 
-In this situation, we can tell users that we are aware of the problem and are working to resolve it.
+A 404 page should contain:
 
-### Example 404 page telling users that we know about the problem
+- a heading
+- an explination of the problem 
+- anything the user can do to resolve the problem
+- a link to the most appropriate place in your service 
 
-{{ example("404-page.html", scaled=true) }}
+### HTML
 {{ markup("404-page.html") }}
+
+## Research on 404 pages
+
+We need more user research on 404 pages. 
+
+We want to know:
+
+- if people are able to resolve the problem on their own
+- if people understand what caused the page
+- if people understand the content 
+- if anything is missing from the content
+
+Contribute your research via this [GitHub issue](https://github.com/hmrc/design-patterns/issues/104).
+