6155
Comment: copied from private wiki
|
3985
|
Deletions are marked like this. | Additions are marked like this. |
Line 1: | Line 1: |
## page was renamed from DeveloperDocumentation/UserInterfaceChecklist | |
Line 2: | Line 3: |
== When designing a Web page == * Is the page necessary? Or is it small enough to be an expandable section of another page? * Imagine you're in the target audience for the page, but you've never seen it before. Reading it, would you understand what's going on? Does it need embedded help? * Is the `<title>` appropriate and context-sensitive? If the page is the Overview of an independent entity (e.g. a person or a package), does the `<title>` end with "in Launchpad"? * Are at least two of the tabs enabled? If not, the location hierarchy has likely gone too deep. * With those tabs that are enabled, do all of them go to other facets of the last object in the location bar? * In any form, what happens if you skip a compulsory field? What happens if you enter disallowed characters? What happens if you enter 200 KB of text? * After finishing with the page, is there anywhere you'll very likely want to go next? Is that destination linked to? * Does the page look elegant and well-balanced? |
|
Line 16: | Line 6: |
These guidelines apply to Web pages, e-mail messages, and any other media used in the future. | These guidelines apply to Web pages, e-mail messages, Atom feeds, IRC notifications, and any other media used in the future. |
Line 23: | Line 13: |
||DOAP ||''nothing''|| ||FOAF ||''nothing''|| |
|
Line 44: | Line 32: |
== Template code == * Template code should be indented with two spaces. ||'''Don’t use this''' ||'''Use this instead''' || ||`<b>` ||`<th>`, `<dt><dfn>`, `<strong>` || ||`<br>` ||`<li>`, `<div>`...`</div>` || ||`metal:fill-slot="pageheading"`||`metal:fill-slot="main"`|| ||`<h3>` ''(unless `<h2>` is used earlier in the page)'' ||`<h2>`, `<div>` || ||`<hr>` ||''nothing'', `<table class="listing">` || ||`<i>` ||''nothing'', `<em>`, `<var>` || ||`onclick=` ||''Mochi``Kit to attach event handlers to elements (and to create the elements too, if they do nothing without Java``Script).<<BR>>See the JavaScriptStyleGuide for more information.''|| ||`style=` ''(unless this style is used nowhere else)'' ||''HTML elements, classes'' || ||`<ul><li tal:repeat="bar bars"`...||`<ul tal:condition="bars"><li tal:repeat="bar bars"`...|| ||`<div tal:replace=`...<<BR>>`<span tal:replace=`...||`<tal:one-word-summary replace=`... <<BR>> `<tal:one-word-summary replace=`... <<BR>> ''(functionally identical, but more informative for those reading the code later)''|| ||' ''(ASCII single quote used for an apostrophe)'', ' || &``#8217; ''or'' ’ ''or'' ’ || ||"foo" ''(ASCII double quotes)'', " || “ ''and'' ” ''or'' “ ''and'' ” || ||'foo' ''(ASCII single quotes)'' || ‘ ''and'' ’ ''or'' ‘ ''and'' ’ || See also PageTemplateHacking, which may be mergable with this page. |
|
Line 69: | Line 36: |
== Menu items == * Menu items should start with a verb if practical. * ''use of "Show", "List", or "View" TBA'' |
|
Line 86: | Line 48: |
== Create or Register actions == Use "Register" when the '''thing''' exists outside of Launchpad. Users register projects, series, milestones, and teams in Launchpad. Use "Create" when the '''thing''' exists exclusively in Launchpad. Users create PPAs, recipes, and bugwatches in Launchpad. Some users are confused or angered when they read "create" for a '''thing''' that they know exists elsewhere. They believe Launchpad is claiming authority over the '''thing'''. This issue can often be avoided by selecting the correct verb. |
|
Line 102: | Line 73: |
These are low-level design guidelines for Web pages, e-mail messages, and other Launchpad output. They cover common mistakes, and are not a substitute for having an interface designer involved in the design of any visible change.
Text
These guidelines apply to Web pages, e-mail messages, Atom feeds, IRC notifications, and any other media used in the future.
Don’t use this |
Use this instead |
abort |
stop |
above |
this, these |
click |
nothing |
below |
this, these |
illegal |
not allowed |
invalid |
incorrect (or more specific error) |
just |
nothing |
Malone |
Launchpad or Launchpad’s bug tracker |
Note: |
nothing |
Note that |
nothing |
please (unless announcing serious inconvenience) |
nothing |
Rosetta |
Launchpad or Launchpad Translations |
simply |
nothing |
Soyuz |
nothing |
the following |
this, these |
the form |
nothing |
this form |
nothing |
this page |
nothing |
to the left |
better page layout |
to the right |
better page layout |
* |
better text ordering |
! |
nothing (or, if in real danger, <strong>) |
Capitalization
- Buttons should be Headline Case; the last word capitalized, and all other words capitalized except those three letters or fewer that are prepositions, articles, or conjunctions.
- Everything else should be sentence case, including headings, checkbox labels, menu items, and e-mail Subject lines.
Notifications, warnings, and errors
Follow the guidelines specified in AlertMessages.
Cancelling actions
The actions at the end of a form should consist of a button, followed by the word "or" and a Cancel link:
( Summary of Action ) or Cancel |
The "Cancel" link should return you to the page you came from. (To get this link, define the cancel_url @property in the browser class.)
Create or Register actions
Use "Register" when the thing exists outside of Launchpad. Users register projects, series, milestones, and teams in Launchpad.
Use "Create" when the thing exists exclusively in Launchpad. Users create PPAs, recipes, and bugwatches in Launchpad.
Some users are confused or angered when they read "create" for a thing that they know exists elsewhere. They believe Launchpad is claiming authority over the thing. This issue can often be avoided by selecting the correct verb.
E-mail messages
These guidelines apply to all e-mail messages:
- Don't wrap paragraphs manually in the message template. The e-mail machinery can do this more consistently (especially if the message contains variables).
- If the message is from a subscription, the footer should consist of three lines:
the URL of the relevant resource (e.g. the bug report)
"You are precise reason for getting this message"
"To unsubscribe: <URL of unsubscription page>" ?? -- TBD
These guidelines apply to notifications not being sent on behalf of a Launchpad user:
From addresses should be @launchpad.net, not @canonical.com or @ubuntu.com, and should have a display name starting with "Launchpad".
- The Web page that tells you you're being e-mailed should say what the From address will be.
- The Subject line should be informative, and use sentence case.
- The body text should be copyedited by someone fluent in the language being used.