Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Buttons |
Scott Main | 64d5103 | 2013-04-12 14:00:30 -0700 | [diff] [blame] | 2 | page.tags="button","input" |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
Scott Main | cbcd17d | 2013-05-14 08:46:55 -0700 | [diff] [blame] | 5 | <a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html"> |
| 6 | <div> |
| 7 | <h3>Developer Docs</h3> |
| 8 | <p>Buttons</p> |
| 9 | </div> |
| 10 | </a> |
| 11 | |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 12 | <p>A button consists of text and/or an image that clearly communicates what action |
| 13 | will occur when the user touches it. A button can have an image, text, or both. |
| 14 | </p> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 15 | |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 16 | <div class="layout-content-row" style="margin-top:22px"> |
| 17 | <div class="layout-content-col span-3"> |
| 18 | <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;"> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 19 | </div> |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 20 | <div class="layout-content-col span-3"> |
| 21 | <img src="{@docRoot}design/media/buttons_text.png" style="height:94px;"> |
| 22 | </div> |
| 23 | <div class="layout-content-col span-7"> |
| 24 | <img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;"> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 25 | </div> |
| 26 | </div> |
| 27 | |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 28 | <div class="layout-content-row" style="margin-top:0;"> |
| 29 | <div class="layout-content-col span-3"> |
| 30 | <p>An image alone works best when the action can be represented by a symbol that's well understood.</p> |
| 31 | </div> |
| 32 | <div class="layout-content-col span-3"> |
| 33 | <p>Text alone is most appropriate for actions that would be difficult to |
| 34 | represent visually, or are critical to convey in words to avoid any ambiguity.</p> |
| 35 | </div> |
| 36 | <div class="layout-content-col span-7"> |
| 37 | <p> |
| 38 | Both an icon and text is most appropriate when they complement each other: |
| 39 | each carrying its own bit of information, but together making a larger whole. |
| 40 | </p> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 41 | |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 42 | <p> |
| 43 | For example, in a birthday reminder card in Google Now, the button's text |
| 44 | describes the action while its image indicates that the action will be done |
| 45 | in Google+. |
| 46 | </p> |
| 47 | </div> |
| 48 | </div> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 49 | |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 50 | <h3>What about button backgrounds?</h3> |
| 51 | |
| 52 | <div class="layout-content-row"> |
| 53 | <div class="layout-content-col span-6"> |
| 54 | <p>For <strong>image-only</strong> buttons, a background isn't necessary because |
| 55 | users are accustomed to interacting with objects.</p> |
| 56 | |
| 57 | <div class="layout-content-row" style="margin-left:72px"> |
| 58 | <div class="layout-content-col span-2"> |
| 59 | <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div> |
| 60 | <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;"> |
| 61 | </div> |
| 62 | <div class="layout-content-col span-2" style="width:29px;margin-left:10px;"> |
| 63 | <div class="do-dont-label good"><strong>Do</strong></div> |
| 64 | <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;"> |
| 65 | </div> |
| 66 | </div> |
| 67 | </div> |
| 68 | |
| 69 | <div class="layout-content-col span-7"> |
| 70 | <p> |
| 71 | For buttons <strong>with text</strong>, a background is also usually |
| 72 | unnecessary. To invite users to touch, phrase it as a clear action (e.g. |
| 73 | "Start", "Sign in") and use different color and formatting than the screen's |
| 74 | usual body text. |
| 75 | </p> |
| 76 | |
| 77 | <p> |
| 78 | Use buttons with backgrounds sparingly. Because they have a heavy appearance, |
| 79 | they work best when there's only one or two of them on the screen. They're |
| 80 | most appropriate for: |
| 81 | </p> |
| 82 | |
| 83 | <ul> |
| 84 | <li>A call to action you really want users to pursue (e.g. "Sign up")</li> |
| 85 | <li>A key decision point (e.g. "Accept" / "Decline")</li> |
| 86 | <li>When the user is about to commit a significant action (e.g. "Erase |
| 87 | everything", "Buy now")</li> |
| 88 | </ul> |
| 89 | </div> |
| 90 | </div> |
Scott Main | d4cc942 | 2012-10-03 18:47:08 -0700 | [diff] [blame] | 91 | |