error-message-brainstorming: Difference between revisions
(Brainstorming kickoff) |
AndyMabbett (talk | contribs) (→Brainstorming examples: accessibility-issues#abbr-design-pattern) |
||
(4 intermediate revisions by 2 users not shown) | |||
Line 13: | Line 13: | ||
* A class that marks an element as being an error message. "error", "errormsg" and similar names are used already in [[error-message-examples|examples]]. | * A class that marks an element as being an error message. "error", "errormsg" and similar names are used already in [[error-message-examples|examples]]. | ||
* An error ID or number. Many systems have unique identifiers for errors, but don't share them with users (for whom they'd be mostly meaningless). This may be a potential use of the [[abbr-design-pattern]], like <nowiki><abbr class="error" title="E5405">Database index error.</abbr></nowiki>". | * An error ID or number. Many systems have unique identifiers for errors, but don't share them with users (for whom they'd be mostly meaningless). This may be a potential use of the [[abbr-design-pattern]], like <nowiki><abbr class="error" title="E5405">Database index error.</abbr></nowiki>". | ||
* Instructions for workarounds or correcting user behavior. Possible implementations are an unordered list ("Try this, OR that, OR the other") and an ordered list ("Step one: do this. Step two: do that. Step three: do the other."). Paypal uses an unordered list. | * Text describing the error situation. | ||
* Instructions for workarounds or correcting user behavior. Possible implementations are an unordered list ("Try this, OR that, OR the other") and an ordered list ("Step one: do this. Step two: do that. Step three: do the other."). They could also be mixed in a hierarchical way. (Note: idea comes from Paypal, which uses an unordered list.) | |||
== Brainstorming examples == | |||
Below are some brainstorming examples based on the above proposed fields, in roughly increasing order of complexity. Note that they all use "user login" errors, but that this specification is for any kind of error. | |||
Just a text error message: | |||
<pre><nowiki> | |||
<div class="error">Login failed. User name and password not found.</div> | |||
</nowiki></pre> | |||
A text error message with a uniquely identifying error code: | |||
<pre><nowiki> | |||
<div class="error"><abbr title="E3316">Login failed. User name and password not found.</abbr></div> | |||
</nowiki></pre> | |||
*Please see [[accessibility-issues#abbr-design-pattern]]. [[User:AndyMabbett|Andy Mabbett]] 10:15, 28 Jun 2007 (PDT) | |||
An error with some options for correcting the situation: | |||
<pre><nowiki> | |||
<div class="error"><p>Login failed. User name and password not found.</p> | |||
<ul class="instructions"> | |||
<li>Check your spelling and try again.</li> | |||
<li>Check that the CAPS LOCK key is not on.</li> | |||
<li>Use the <a href="password-recovery">password recovery</a> tool to get a new | |||
password sent to you.</li> | |||
<li>Contact our <a href="customer-support">customer support</a>.</li> | |||
</ul> | |||
</div> | |||
</nowiki></pre> | |||
An error with step-by-step instructions for fixing the situation: | |||
<pre><nowiki> | |||
<div class="error"><p>Login failed. User account locked due to unconfirmed email address.</p> | |||
<ol class="instructions"> | |||
<li>Use the <a href="email-confirmation">email confirmation</a> tool to get a new | |||
confirmation email sent to your account.</li> | |||
<li>Copy the confirmation code you receive in the email | |||
into the <a href="confirmation-code">confirmation code</a> form.</li> | |||
<li>Enter your new password.</li> | |||
</ol> | |||
</div> | |||
</nowiki></pre> | |||
==See also== | |||
*[[error-message-examples]] |
Latest revision as of 17:15, 28 June 2007
Error Message Brainstorming
Typical Web applications emit text messages to inform the user of error situations -- either user errors ("Invalid user name or password", "Failed to enter required fields") or system errors ("can't connect to database server", "Call to member function 'foo' on null object.").
There are a number of use-cases for having a standardized, machine-readable format for HTML error messages.
- Automated bug-reporting tools
- Enhanced technical support requests -- a client tool could store recent error messages and transmit them to the support technician
- Workaround-lookups ("What do I do now?") -- a client tool could automatically search company or external knowledge bases for fixes or workarounds for a given error
Some potential fields
- A class that marks an element as being an error message. "error", "errormsg" and similar names are used already in examples.
- An error ID or number. Many systems have unique identifiers for errors, but don't share them with users (for whom they'd be mostly meaningless). This may be a potential use of the abbr-design-pattern, like <abbr class="error" title="E5405">Database index error.</abbr>".
- Text describing the error situation.
- Instructions for workarounds or correcting user behavior. Possible implementations are an unordered list ("Try this, OR that, OR the other") and an ordered list ("Step one: do this. Step two: do that. Step three: do the other."). They could also be mixed in a hierarchical way. (Note: idea comes from Paypal, which uses an unordered list.)
Brainstorming examples
Below are some brainstorming examples based on the above proposed fields, in roughly increasing order of complexity. Note that they all use "user login" errors, but that this specification is for any kind of error.
Just a text error message:
<div class="error">Login failed. User name and password not found.</div>
A text error message with a uniquely identifying error code:
<div class="error"><abbr title="E3316">Login failed. User name and password not found.</abbr></div>
- Please see accessibility-issues#abbr-design-pattern. Andy Mabbett 10:15, 28 Jun 2007 (PDT)
An error with some options for correcting the situation:
<div class="error"><p>Login failed. User name and password not found.</p> <ul class="instructions"> <li>Check your spelling and try again.</li> <li>Check that the CAPS LOCK key is not on.</li> <li>Use the <a href="password-recovery">password recovery</a> tool to get a new password sent to you.</li> <li>Contact our <a href="customer-support">customer support</a>.</li> </ul> </div>
An error with step-by-step instructions for fixing the situation:
<div class="error"><p>Login failed. User account locked due to unconfirmed email address.</p> <ol class="instructions"> <li>Use the <a href="email-confirmation">email confirmation</a> tool to get a new confirmation email sent to your account.</li> <li>Copy the confirmation code you receive in the email into the <a href="confirmation-code">confirmation code</a> form.</li> <li>Enter your new password.</li> </ol> </div>