new confirming page and updates to progress and iconography

Change-Id: I060ac3c34cf268d77b46ac235a2726202a4bb222

1 files changed, 76 insertions, 0 deletions

diff --git a/docs/html/design/patterns/confirming-acknowledging.jd b/docs/html/design/patterns/confirming-acknowledging.jd
new file mode 100644
index 0000000..28e4427
--- /dev/null
+++ b/docs/html/design/patterns/confirming-acknowledging.jd
@@ -0,0 +1,76 @@
+page.title=Confirming & Acknowledging
+@jd:body
+
+<p>In some situations, when a user invokes an action in your app, it's a good idea to <em>confirm</em> or <em>acknowledge</em> that action through text.</p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_confirming.png">
+    <p><strong>Confirming</strong> is asking the user to verify that they truly want to proceed with an action they just invoked. In some cases, the confirmation is presented along with a warning or critical information related to the action that they need to consider.</p>
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_acknowledge.png">
+    <p><strong>Acknowledging</strong> is displaying text to let the user know that the action they just invoked has been completed. This removes uncertainty about implicit operations that the system is taking. In some cases, the acknowledgment is presented along with an option to undo the action.</p>
+  </div>
+</div>
+
+<p>Communicating to users in these ways can help alleviate uncertainty about things that have happened or will happen. Confirming or acknowledging can also prevent users from making mistakes they might regret.</p>
+
+<h2>When to Confirm or Acknowledge User Actions</h2>
+<p>Not all actions warrant a confirmation or an acknowledgment. Use this flowchart to guide your design decisions.</p>
+<img src="{@docRoot}design/media/confirm_ack_flowchart.png">
+
+<h2>Confirming</h2>
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_ex_books.png">
+    <h4>Example: Google Play Books</h4>
+    <p>In this example, the user has requested to delete a book from their Google Play library. A dialog appears to confirm this action because it's important to understand that the book will no longer be available from any device.</p>
+    <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p>
+
+    <ul class="nolist">
+      <li class="do-dont-label bad">Don't<p><b>Are you sure?</b></p></li>
+      <li class="do-dont-label bad">Don't<p><b>Warning!</b></p></li>
+      <li class="do-dont-label good">Do<p><b>Delete from library?</b></p></li>
+    </ul>
+
+  </div>
+  <div class="layout-content-col span-7">
+    <img src="{@docRoot}design/media/confirm_ack_ex_beam.png">
+    <h4>Example: Android Beam</h4>
+    <p>Confirmations don't necessarily have to be presented in a dialog with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.</p>
+  </div>
+</div>
+
+<h2>Acknowledging</h2>
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png">
+    <h4>Example: Abandoned Gmail draft saved</h4>
+    <p>In this example, if the user navigates back or up from the Gmail compose screen, something possibly unexpected happens: the current draft is automatically saved. An acknowledgment in the form of a toast makes that apparent. It fades after a few seconds.</p>
+    <p>Undo isn't appropriate here because saving was initiated by the app, not the user. And it's quick and easy to resume composing the message by navigating to the list of drafts.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png">
+    <h4>Example: Gmail conversation deleted</h4>
+    <p>After the user deletes a conversation from the list in Gmail, an acknowledgment appears with an undo option. The acknowledgment remains until the user takes an unrelated action, such as scrolling the list.</p>
+  </div>
+</div>
+
+<h2>No Confirmation or Acknowledgment</h2>
+<div class="layout-content-row">
+  <div class="layout-content-col span-6">
+    <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png">
+    <h4>Example: Removing an app from the Home Screen</h4>
+    <p><strong>Confirmation is unnecessary</strong>. This is a deliberate action: the user must drag and drop an item onto a relatively large and isolated target. Therefore, accidents are highly unlikely. But if the user regrets the decision, it only takes a few seconds to bring it back again.</p>
+    <p><strong>Acknowledgment is unnecessary</strong>. The user will know the app is gone from the Home Screen because they made it disappear by dragging it away.</p>
+
+  </div>
+  <div class="layout-content-col span-7">
+    <img src="{@docRoot}design/media/confirm_ack_ex_plus1.png">
+    <h4>Example: +1'ing</h4>
+    <p><strong>Confirmation is unnecessary</strong>. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.</p>
+    <p><strong>Acknowledgment is unnecessary</strong>. The user will see the +1 button bounce and turn red. That's a very clear signal.</p>
+  </div>
+</div>
\ No newline at end of file