Home | History | Annotate | Download | only in style 
      1 page.title=Writing Style
      2 page.tags="dialog","toast","notification"
      3 @jd:body
      4 
      5 <p>When choosing words for your app:</p>
      6 <ol>
      7 <li>
      8 <p><strong>Keep it brief.</strong> Be concise, simple and precise. Start with a 30 character limit (including
      9    spaces), and don't use more unless absolutely necessary.</p>
     10 </li>
     11 <li>
     12 <p><strong>Keep it simple.</strong> Pretend you're speaking to someone who's smart and competent, but doesn't
     13    know technical jargon and may not speak English very well. Use short words, active verbs, and
     14    common nouns.</p>
     15 </li>
     16 <li>
     17 <p><strong>Be friendly.</strong> Use contractions. Talk directly to the reader using second person ("you"). If
     18    your text doesn't read the way you'd say it in casual conversation, it's probably not the way
     19    you should write it. Don't be abrupt or annoying and make the user feel safe, happy and
     20    energized.</p>
     21 </li>
     22 <li>
     23 <p><strong>Put the most important thing first.</strong> The first two words (around 11 characters, including
     24    spaces) should include at least a taste of the most important information in the string. If they
     25    don't, start over.</p>
     26 </li>
     27 <li>
     28 <p><strong>Describe only what's necessary, and no more.</strong> Don't try to explain subtle differences. They
     29    will be lost on most users.</p>
     30 </li>
     31 <li>
     32 <p><strong>Avoid repetition.</strong> If a significant term gets repeated within a screen or block of text, find
     33    a way to use it just once.</p>
     34 </li>
     35 </ol>
     36 
     37 <h2 id="examples">Examples</h2>
     38 
     39 <ol><li class="value-1"><strong>Keep it brief.</strong> From the setup wizard:</ol>
     40 
     41 <div class="layout-content-row">
     42   <div class="layout-content-col span-6 layout-with-list-item-margins">
     43 
     44     <div class="do-dont-label bad">Too formal</div>
     45 
     46     <table class="ui-table good"><tbody><tr><td>
     47     Consult the documentation that came with your phone for further instructions.
     48     </td></tr></tbody></table>
     49 
     50   </div>
     51   <div class="layout-content-col span-6">
     52 
     53     <div class="do-dont-label good">Better</div>
     54 
     55     <table class="ui-table good"><tbody><tr><td>
     56     Read the instructions that came with your phone.
     57     </td></tr></tbody></table>
     58 
     59   </div>
     60 </div>
     61 
     62 <div class="vspace size-1">&nbsp;</div>
     63 
     64 <ol><li class="value-2"><strong>Keep it simple.</strong> From the Location settings screen:</ol>
     65 
     66 <div class="layout-content-row">
     67   <div class="layout-content-col span-6 layout-with-list-item-margins">
     68 
     69     <div class="do-dont-label bad">Confusing</div>
     70 
     71     <table class="ui-table bad">
     72     <thead>
     73       <tr>
     74         <th>
     75         Use GPS satellites
     76         </th>
     77       </tr>
     78     </thead>
     79     <tbody>
     80       <tr>
     81         <td>
     82         When locating, accurate to street level.
     83         </td>
     84       </tr>
     85     </tbody>
     86     </table>
     87 
     88   </div>
     89   <div class="layout-content-col span-6">
     90 
     91     <div class="do-dont-label good">Better</div>
     92 
     93     <table class="ui-table good">
     94     <thead>
     95       <tr>
     96         <th>
     97         GPS
     98         </th>
     99       </tr>
    100     </thead>
    101     <tbody>
    102       <tr>
    103         <td>
    104         Let apps use satellites to pinpoint your location.
    105         </td>
    106       </tr>
    107     </tbody>
    108     </table>
    109 
    110   </div>
    111 </div>
    112 
    113 <div class="vspace size-1">&nbsp;</div>
    114 
    115 <ol><li class="value-3"><strong>Be friendly.</strong> Dialog that appears when an application
    116 crashes:</ol>
    117 
    118 <div class="layout-content-row">
    119   <div class="layout-content-col span-6 layout-with-list-item-margins">
    120 
    121     <div class="do-dont-label bad">Confusing and annoying&mdash;"Sorry" just rubs salt in the
    122     wound.</div>
    123 
    124     <table class="ui-table bad">
    125     <thead>
    126       <tr>
    127         <th colspan="3">
    128         Sorry!
    129         </th>
    130       </tr>
    131     </thead>
    132     <tbody>
    133       <tr>
    134         <td colspan="3">
    135         Activity MyAppActivity (in application MyApp)
    136         is not responding.
    137         </td>
    138       </tr>
    139     </tbody>
    140     <tfoot>
    141       <tr>
    142         <td width="33%">Force close</td>
    143         <td width="33%">Wait</td>
    144         <td width="33%">Report</td>
    145       </tr>
    146     </tbody>
    147     </table>
    148 
    149   </div>
    150   <div class="layout-content-col span-6">
    151 
    152     <div class="do-dont-label good">Shorter, more direct, no faux-apologetic title:<br><br></div>
    153 
    154     <table class="ui-table good">
    155     <thead>
    156       <tr>
    157         <th colspan="3">
    158         MyApp isn't responding.
    159         </th>
    160       </tr>
    161     </thead>
    162     <tbody>
    163       <tr>
    164         <td colspan="3">
    165         Do you want to close it?
    166         </td>
    167       </tr>
    168     </tbody>
    169     <tfoot>
    170       <tr>
    171         <td width="33%">Wait</td>
    172         <td width="33%">Report</td>
    173         <td width="33%">Close</td>
    174       </tr>
    175     </tbody>
    176     </table>
    177 
    178   </div>
    179 </div>
    180 
    181 <div class="vspace size-1">&nbsp;</div>
    182 
    183 <ol><li class="value-4"><strong>Put the most important thing first.</strong></ol>
    184 
    185 <div class="layout-content-row">
    186   <div class="layout-content-col span-6 layout-with-list-item-margins">
    187 
    188     <div class="do-dont-label bad">Top news last</div>
    189 
    190     <table class="ui-table bad"><tbody><tr><td>
    191     77 other people +1'd this, including Larry Page.
    192     </td></tr></tbody></table>
    193 
    194   </div>
    195   <div class="layout-content-col span-6">
    196 
    197     <div class="do-dont-label good">Top news first</div>
    198 
    199     <table class="ui-table good"><tbody><tr><td>
    200     Larry Page and 77 others +1'd this.
    201     </td></tr></tbody></table>
    202 
    203   </div>
    204 </div>
    205 
    206 <div class="layout-content-row">
    207   <div class="layout-content-col span-6 layout-with-list-item-margins">
    208 
    209     <div class="do-dont-label bad">Task last</div>
    210 
    211     <table class="ui-table bad"><tbody><tr><td>
    212     Touch Next to complete setup using a Wi-Fi connection.
    213     </td></tr></tbody></table>
    214 
    215   </div>
    216   <div class="layout-content-col span-6">
    217 
    218     <div class="do-dont-label good">Task first</div>
    219 
    220     <table class="ui-table good"><tbody><tr><td>
    221     To finish setup using Wi-Fi, touch Next.
    222     </td></tr></tbody></table>
    223 
    224   </div>
    225 </div>
    226 
    227 <div class="vspace size-1">&nbsp;</div>
    228 
    229 <ol><li class="value-5"><strong>Describe only what's necessary, and no more.</strong></ol>
    230 
    231 <div class="layout-content-row">
    232   <div class="layout-content-col span-6 layout-with-list-item-margins">
    233 
    234     <div class="do-dont-label bad">From a Setup Wizard screen</div>
    235 
    236     <table class="ui-table bad">
    237     <thead>
    238       <tr>
    239         <th>
    240         Signing in...
    241         </th>
    242       </tr>
    243     </thead>
    244     <tbody>
    245       <tr>
    246         <td>
    247         Your phone needs to communicate with<br>
    248         Google servers to sign in to your account.<br>
    249         This may take up to five minutes.
    250         </td>
    251       </tr>
    252     </tbody>
    253     </table>
    254 
    255   </div>
    256   <div class="layout-content-col span-6">
    257 
    258     <div class="do-dont-label good">From a Setup Wizard screen</div>
    259 
    260     <table class="ui-table good">
    261     <thead>
    262       <tr>
    263         <th>
    264         Signing in...
    265         </th>
    266       </tr>
    267     </thead>
    268     <tbody>
    269       <tr>
    270         <td>
    271         Your phone is contacting Google.<br>
    272         This can take up to 5 minutes.
    273         </td>
    274       </tr>
    275     </tbody>
    276     </table>
    277 
    278   </div>
    279 </div>
    280