docs/html/design/get-started/principles.jd

page.title=Android 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.
For Android developers and designers, they continue to
underlie the more  detailed design guidelines for different
types of devices.</p>

<p>
Consider these principles as you apply your own
creativity and design thinking. Deviate with purpose.
</p>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>

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

<div class="cols">
  <div class="col-7of12">

<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="col-5of12">

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

  </div>
</div>