Error pages

Error screens for a missing page, a server failure and a lost connection. The preview shows all three as tabs; in a product each is its own page.

Consumer provides: the code, a heading in plain words, what happened, and one to three ways forward.

• Keep the app header so people are not stranded.
• Headings say what happened from the person’s side: “We can’t find that page”, “Something went wrong on our side”, “You’re offline”. The code goes in a small label above.
• Say what was not lost, and give a reference number for support when you have one.
• Set the page <title> to the heading too, so the error is clear in tabs and history.