page.title=Design Principles
@jd:body

<p>These design principles were developed by and for the Android User Experience Team to keep users'
best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
with purpose.</p>

<h2 id="enchant-me">Enchant Me</h2>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="delight-me">Delight me in surprising ways</h4>
<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful
force is at hand.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_delight.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4>
<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
needed to perform a task while making it more emotionally satisfying.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_real_objects.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="make-it-mine">Let me make it mine</h4>
<p>People love to add personal touches because it helps them feel at home and in control. Provide
sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
primary tasks.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_make_it_mine.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="get-to-know-me">Get to know me</h4>
<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
over, place previous choices within easy reach.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_get_to_know_me.png">

  </div>
</div>

<h2 id="simplify-my-life">Simplify My Life</h2>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="keep-it-brief">Keep it brief</h4>
<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_keep_it_brief.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="pictures-faster-than-words">Pictures are faster than words</h4>
<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
than words.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_pictures.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="decide-for-me">Decide for me but let me have the final say</h4>
<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
unhappy. Just in case you get it wrong, allow for 'undo'.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_decide_for_me.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4>
<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_information_when_need_it.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="always-know-where-i-am">I should always know where I am</h4>
<p>Give people confidence that they know their way around. Make places in your app look distinct and
use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_navigation.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="never-lose-my-stuff">Never lose my stuff</h4>
<p>Save what people took time to create and let them access it from anywhere. Remember settings,
personal touches, and creations across phones, tablets, and computers. It makes upgrading the
easiest thing in the world.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_never_lose_stuff.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4>
<p>Help people discern functional differences by making them visually distinct rather than subtle.
Avoid modes, which are places that look similar but act differently on the same input.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_looks_same.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4>
<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_important_interruption.png">

  </div>
</div>

<h2 id="make-me-amazing">Make Me Amazing</h2>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="give-me-tricks">Give me tricks that work everywhere</h4>
<p>People feel great when they figure things out for themselves. Make your app easier to learn by
leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture
may be a good navigational shortcut.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_tricks.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="its-not-my-fault">It's not my fault</h4>
<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
app. If something goes wrong, give clear recovery instructions but spare them the technical details.
If you can fix it behind the scenes, even better.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_error.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="sprinkle-encouragement">Sprinkle encouragement</h4>
<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
even if it's just a subtle glow.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4>
<p>Make novices feel like experts by enabling them to do things they never thought they could. For
example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in
only a few steps.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_heavy_lifting.png">

  </div>
</div>

<div class="vspace size-2">&nbsp;</div>

<div class="layout-content-row">
  <div class="layout-content-col span-7">

<h4 id="make-important-things-fast">Make important things fast</h4>
<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
fast to use, like the shutter button in a camera, or the pause button in a music player.</p>

  </div>
  <div class="layout-content-col span-6">

    <img src="{@docRoot}design/media/principles_make_important_fast.png">

  </div>
</div>
