<div class="layout-content-row">
<div class="layout-content-col span-8">
<ol>
- <li><h4>High value</h4>
+ <li><strong>High value</strong>
<p>Without it, users wouldn't be able to customize the most frequently-visited Android screen to meet their needs.</p></li>
- <li><h4>Available only through a gesture</h4>
+ <li><strong>Available only through a gesture</strong>
<p>Users can't do this through a button or a menu.</p></li>
- <li><h4>Atypical for the gesture</h4>
+ <li><strong>Atypical for the gesture</strong>
<p>Many high value functions invoked through a gesture - like scrolling, swiping tabs, and turning pages - are common and yield expected results. Users will be able to discover them in your app, and unsolicited help is unnecessary. But here, the gesture does something unexpected: press and hold doesn't just select an app, it also immediately navigates to the Home Screen and creates a shortcut to the app that can then be dragged around.</p></li>
</ol>
<p>However, this is an exceptional case. Most functionality doesn't meet all three of these criteria.</p>
</div>
<div class="layout-content-col span-5">
- <img src="{@docRoot}design/media/swipe_views.png">
+ <img src="{@docRoot}design/media/help_cling.png">
<div class="figure-caption">
The first time each user visits the All Apps screen, a semi-transparent overlay appears to teach an important gesture.
</div>
<div class="layout-content-row">
<div class="layout-content-col span-7">
- <img src="{@docRoot}design/media/swipe_views2.png">
+ <img src="{@docRoot}design/media/help_overflow.png">
</div>
<div class="layout-content-col span-6">
- <img src="{@docRoot}design/media/swipe_views2.png">
+ <img src="{@docRoot}design/media/help_solo_overflow.png">
<div class="figure-caption">
Even if your screen has no other action overflow items, "Help" should appear there and not be promoted to the action bar.
</div>
<p>When someone chooses "Help":</p>
<div class="layout-content-row">
- <div class="layout-content-col span-7">
- <h4 class="do-dont-label bad">Don't</h4>
-
- <p>Present a dialog asking them to choose between help and other options.</p>
+ <div class="layout-content-col span-4">
+ <img src="{@docRoot}design/media/help_dont.png">
</div>
- <div class="layout-content-col span-6">
- <img src="{@docRoot}design/media/swipe_views2.png">
+ <div class="layout-content-col span-4">
+ <img src="{@docRoot}design/media/help_better.png">
</div>
+ <div class="layout-content-col span-5">
+ <img src="{@docRoot}design/media/help_evenbetter.png">
+ </div>
</div>
<div class="layout-content-row">
- <div class="layout-content-col span-7">
+ <div class="layout-content-col span-4">
+ <h4 class="do-dont-label bad">Don't</h4>
+ <p>Present a dialog asking them to choose between help and other options.</p>
+ </div>
+ <div class="layout-content-col span-4">
<h4 class="do-dont-label good">Better</h4>
<p>Immediately launch a web browser with help content. Place other options in a footer.</p>
</div>
- <div class="layout-content-col span-6">
- <img src="{@docRoot}design/media/swipe_views2.png">
- </div>
-</div>
-
-<div class="layout-content-row">
- <div class="layout-content-col span-7">
+ <div class="layout-content-col span-5">
<h4 class="do-dont-label good">Even Better</h4>
<p>Build a help screen in your app and offer other options in the action bar.</p>
<p>This requires more development work than launching a web browser, but it's a nicer experience for users because they don't leave your app to get the help they need and doesn't require a network connection.</p>
</div>
- <div class="layout-content-col span-6">
- <img src="{@docRoot}design/media/swipe_views2.png">
- </div>
</div>
<h2>Principles for Writing On-Screen Help Content</h2>