5142
Comment: Removed 'when designing a web page' section - as it's now integrated with UserInterfaceReviewNotes.
|
3994
|
Deletions are marked like this. | Additions are marked like this. |
Line 1: | Line 1: |
## page was renamed from DeveloperDocumentation/UserInterfaceChecklist | |
Line 2: | Line 3: |
Line 6: | 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 13: | Line 13: |
||DOAP ||''nothing''|| ||FOAF ||''nothing''|| |
|
Line 34: | 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 57: | Line 34: |
* 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. | * Buttons and tabs 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. |
Line 59: | Line 36: |
== Menu items == * Menu items should start with a verb if practical. * ''use of "Show", "List", or "View" TBA'' |
|
Line 76: | 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 92: | 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 and tabs 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.