| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| <html> |
| <head> |
| |
| |
| <meta http-equiv="CONTENT-TYPE" content="text/html; charset=windows-1252"> |
| |
| |
| |
| <title></title> |
| <meta name="GENERATOR" content="StarOffice 8 (Win32)"> |
| <meta name="AUTHOR" content="Christian Jansen"> |
| <meta name="CREATED" content="20050718;16055600"> |
| <meta name="CHANGEDBY" content="Christian Jansen"> |
| <meta name="CHANGED" content="20051005;17302200"> |
| |
| |
| </head> |
| |
| |
| <body dir="ltr" lang="en-US"> |
| <div align="left"> |
| <h2 class="western">Guidelines for Specifying Alerts</h2> |
| <table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="black"> |
| <tr> |
| <td bgcolor="white"><b>Owner:<br> |
| </b>Christian |
| Jansen</td> |
| <td bgcolor="white"><b>Last |
| Change:<br> |
| </b><csobj format="LongDate" h="20" locale="00000409" region="0" t="DateTime" w="203">Wednesday, December 28, 2005</csobj></td> |
| </tr> |
| <tr> |
| <td colspan="2" bgcolor="white"><b>Goal |
| of this document<br> |
| </b>These |
| guidelines shall help specification authors specifying Alerts.</td> |
| </tr> |
| <tr> |
| <td colspan="2" bgcolor="white"><b>Intended readership <br> |
| </b>Specification authors, specification reviewers (Development , Quality Assurance , User Experience, Documentation)</td> |
| </tr> |
| <tr> |
| <td colspan="2" bgcolor="white"><b>Feedback:<br> |
| </b><a href="mailto:dev@specs.openoffice.org">dev@specs.openoffice.org<br> |
| </a></td> |
| </tr> |
| </table> |
| <h2 class="western"></h2> |
| </div> |
| <p class="western" style="">Alerts (this incudes |
| Warnings, Error Messages, Questions) are modal dialogs which contain |
| the have to contain the following Elements:</p> |
| <ul> |
| |
| <li> |
| <p class="western" style="">Alert Message |
| Text</p> |
| |
| </li> |
| <li> |
| <p class="western" style="">Informative Text |
| (this includes additional Information),</p> |
| |
| </li> |
| <li> |
| <p class="western" style="">Button(s) for |
| addressing the alert, and</p> |
| |
| </li> |
| <li> |
| <p class="western" style="">The correct icon |
| type to indicate the severity of the Alert</p> |
| |
| </li> |
| </ul> |
| |
| <p class="western"><b>An alert has to:</b></p> |
| |
| <ul> |
| |
| <li> |
| <p class="western">Clearly indicate that something has gone |
| wrong<br> |
| Describe the problem clearly and briefly.<br> |
| Reason: |
| Users want to quickly know what went wrong and how to fix it. Be |
| brief.</p> |
| |
| </li> |
| <li> |
| <p class="western">Be polite and do not blame the |
| users<br> |
| Remember that people are upset when things are going |
| wrong. Treat users with respect.<br> |
| Reason: |
| At this critical juncture you can make or break your future |
| relationship with them.</p> |
| |
| </li> |
| <li> |
| <p class="western">Give advice on how to fix the problem</p> |
| |
| </li> |
| <li> |
| <p class="western">Use the language your Target group |
| understands<br> |
| Stay away from obscure error codes, |
| abbreviations, technical jargon, or internal marketing terms |
| unfamiliar to users. Use simple English.</p> |
| |
| </li> |
| <li> |
| <p class="western">Don’t make customers |
| guess<br> |
| Explicitly tell them how to prevent repeating an error.</p> |
| |
| </li> |
| </ul> |
| |
| <p class="western"><b>Usage of Icons</b></p> |
| |
| <p class="western">Each Alert has to provide an icon. The icon gives |
| information about the type of alert and its severity level of the |
| alert.</p> |
| |
| <table border="0" cellpadding="2" cellspacing="1" width="100%" bgcolor="black"> |
| |
| <col width="25*"> |
| <col width="32*"> |
| <col width="199*"> |
| <thead> |
| <tr valign="top"> |
| |
| <th bgcolor="white" width="10%"> |
| |
| <p class="western">Icon</p> |
| |
| </th> |
| |
| <th bgcolor="white" width="12%"> |
| |
| <p class="western" align="center">Severity</p> |
| |
| </th> |
| |
| <th bgcolor="white" width="78%"> |
| |
| <p class="western"><br> |
| |
| </p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| <tbody> |
| |
| <tr> |
| |
| <td bgcolor="#e6e6e6" width="10%"> |
| |
| <p class="western" align="center"><img src="images/Alert-Guidelines_html_m6dd90e3c.gif" name="graphics7" align="bottom" border="0" height="38" width="39"></p> |
| |
| </td> |
| |
| <td bgcolor="#e6e6e6" width="12%"> |
| |
| <p class="western" align="center">Question</p> |
| |
| </td> |
| |
| <td bgcolor="#e6e6e6" width="78%"> |
| |
| <p class="western">Use this icon for alerts that ask a question. |
| Use question as in normal flow of operation.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td bgcolor="white" width="10%"> |
| |
| <p class="western" align="center"><img src="images/Alert-Guidelines_html_me02727a.png" name="graphics4" border="0" height="36" width="37"></p> |
| |
| </td> |
| |
| <td bgcolor="white" width="12%"> |
| |
| <p class="western" align="center">Information</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="78%"> |
| |
| <p class="western">Use this icon for alerts that provide an |
| information. Use this in normal flow of operation.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td bgcolor="#e6e6e6" width="10%"> |
| |
| <p class="western" align="center"><img src="images/Alert-Guidelines_html_m443a7f50.gif" name="graphics6" align="bottom" border="0" height="39" width="40"></p> |
| |
| </td> |
| |
| <td bgcolor="#e6e6e6" width="12%"> |
| |
| <p class="western" align="center">Warning</p> |
| |
| </td> |
| |
| <td bgcolor="#e6e6e6" width="78%"> |
| |
| <p class="western">Display this icon to notify that an unusual |
| error occurred</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td bgcolor="white" width="10%"> |
| |
| <p class="western" align="center"><img src="images/Alert-Guidelines_html_m6befee50.png" name="graphics5" align="middle" border="0" height="36" width="37"></p> |
| |
| </td> |
| |
| <td bgcolor="white" width="12%"> |
| |
| <p class="western" align="center">Critical</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="78%"> |
| |
| <p class="western">Display this icon to notify that an critical |
| error occurred</p> |
| |
| </td> |
| |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| |
| <p class="western"> |
| </p> |
| |
| <p class="western"><b>Example:</b></p> |
| |
| <p class="western">The examples below shall give an idea of a warning |
| which got improved from a poorly written alert to a good one:</p> |
| |
| <table border="0" bgcolor="black" bordercolor="#35556b" cellpadding="2" cellspacing="1" width="100%"> |
| |
| <col width="25*"> |
| <col width="128*"> |
| <col width="102*"> |
| <thead> |
| <tr valign="top"> |
| |
| <th bgcolor="white" width="10%"> |
| |
| <p class="western">Icon</p> |
| |
| </th> |
| |
| <th bgcolor="white" width="50%"> |
| |
| <p class="western">Alert Text</p> |
| |
| </th> |
| |
| <th bgcolor="white" width="40%"> |
| |
| <p class="western">OK?</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| <tbody> |
| |
| <tr valign="top"> |
| |
| <td bgcolor="white" width="10%"> |
| |
| <p class="western" align="center"><img src="images/Alert-Guidelines_html_me02727a.png" name="graphics1" border="0" height="36" width="37"></p> |
| |
| </td> |
| |
| <td bgcolor="white" width="50%"> |
| <p class="western">Error saving the document ABC:<br> |
| General Error.<br> |
| General Input/Output error</p> |
| </td> |
| |
| <td bgcolor="white" width="40%"> |
| <p class="western">No<br>Too technical. Language used is for Programmers but not for users. Wrong type of icon has been selected.</p> |
| </td> |
| |
| </tr> |
| |
| <tr valign="top"> |
| |
| <td bgcolor="white" width="10%"> |
| |
| <p class="western" align="center"><img src="images/Alert-Guidelines_html_m6befee50.png" name="graphics2" align="middle" border="0" height="36" width="37"></p> |
| |
| </td> |
| |
| <td bgcolor="white" width="50%"> |
| |
| <p class="western">The document ABC could not be saved, because |
| it is read-only.</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="40%"> |
| <p class="western">No<br> |
| Got |
| improved, but provides no hint to get the problem solved.<br> |
| Wrong type of icon has been selected; severity |
| much too high.</p> |
| </td> |
| |
| </tr> |
| |
| <tr valign="top"> |
| |
| <td bgcolor="white" width="10%"> |
| |
| <p class="western" align="center"><img src="images/Alert-Guidelines_html_m70233c0b.png" name="graphics3" align="middle" border="0" height="39" width="40"></p> |
| |
| </td> |
| |
| <td bgcolor="white" width="50%"> |
| <p class="western">The document ABC could not be saved, because |
| it is read-only.</p> |
| <p class="western">Try to remove the read-only property, or |
| select “Save As...” from the “File” menu.</p> |
| </td> |
| |
| <td bgcolor="white" width="40%"> |
| |
| <p class="western">Yes<br> |
| The |
| text is well formulated, gives users a hint how to get this |
| problem fixed. The severity, indicated by the icon, is correct.</p> |
| |
| </td> |
| |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| <p class="western" style="margin-bottom: 0cm; font-style: normal;" align="left"> |
| </p> |
| <p class="western"><b>Document History:</b></p> |
| <table border="0" bgcolor="black" bordercolor="#35556b" cellpadding="2" cellspacing="1" width="100%"> |
| |
| <col width="54"> |
| <col width="383"> |
| <col width="51"> |
| <col width="121"> |
| <thead> |
| <tr valign="top"> |
| |
| <th bgcolor="white" width="54"> |
| |
| <p class="western">Revision</p> |
| |
| </th> |
| |
| <th bgcolor="white" width="559"> |
| |
| <p class="western">Change</p> |
| |
| </th> |
| |
| <th bgcolor="white" width="56"> |
| |
| <p class="western">Initials</p> |
| |
| </th> |
| |
| <th bgcolor="white" width="135"> |
| |
| <p class="western">Date</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| <tbody> |
| |
| <tr> |
| |
| <td bgcolor="white" height="12" width="54"> |
| |
| <p class="western" align="center">1</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="559"> |
| |
| <p class="western">First draft created</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="56"> |
| |
| <p class="western">CJ</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="135"> |
| |
| <p class="western">July 23, 2005</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td bgcolor="white" width="54"> |
| |
| <p class="western" align="center">2</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="559"> |
| |
| <p class="western">Updated after inspection of p3386 team</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="56"> |
| |
| <p class="western">CJ</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="135"> |
| |
| <p class="western">October 5, 2005</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| |
| <td bgcolor="white" width="54"> |
| |
| <p class="western" align="center">3</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="559"> |
| |
| <p class="western">Revised for OpenOffice.org usage</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="56"> |
| |
| <p class="western">CJ</p> |
| |
| </td> |
| |
| <td bgcolor="white" width="135"> |
| |
| <p class="western">December 22, 2005</p> |
| |
| </td> |
| |
| </tr> |
| |
| |
| </tbody> |
| </table> |
| </body> |
| </html> |
