help image updates

Change-Id: I4357879eb365f5584efb838139132fd9f7a6e1be

Author: Peter Ng

docs/html/design/media/help_better.png

@@ -23,17 +23,17 @@ page.title=Help
 <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>
@@ -47,10 +47,10 @@ page.title=Help
 
 <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>
@@ -69,35 +69,31 @@ page.title=Help
 <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>