Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
User Interface
Design Tips

July 2010
Why should I care about UI?

Better UI

  Perceived quality + polish

     Better ratings

       Better app ranking

    ...
Agenda – Android UI design tips

1.  Do’s and don’ts
2.  Design philosophy and considerations
3.  UI framework features yo...
Do’s and don’ts
  DON’T simply port         DON’T create rigid,
   your UI from other         absolute-positioned
   platforms          ...
  DO create versions of      DO support D-pad &
   all resources for high      trackball navigation
   density screens
 ...
DO work with visual and
interaction designer(s)



                          7
Design philosophy
and considerations
Android design philosophy

  Clear vs. “simple”
  Content vs. chrome
  Consistent yet engaging
  –  Elegant variation

...
Principles of good interface design*

1.  Focus on the user
2.  Make the right things visible
3.  Show proper feedback
4. ...
1. Focus on the user

  Know your users
  –  Age, skill level, culture, disabilities, etc.
  –  What they want to do with...
2. Make the right things visible

  The most common operations should be
   immediately visible and available


  Second...
3. Show proper feedback

  Have at least 4 states (<selector>) for
   all interactive UI elements:


      default   disa...
4. Be predictable

  Do what the user expects
  –  Properly interact with the activity stack
  –  Show information and ac...
If complex instructions
are required, rethink
your design.

                          15
5. Be fault tolerant

  Constrain possible operations to only
   those that make sense
  –  Disable UI elements when appr...
“If an error is possible,
someone will make it.”
                    – Donald Norman, author,
               The Design of...
Design considerations

  Physical screen size
  Screen density
  Portrait & landscape orientations
  Primary UI intera...
Design considerations

  Awareness about the ways in which
   devices can vary is very important
  Read through the CDD ...
UI framework features you
should definitely be using
<RelativeLayout>


                   21
Resource qualifiers

                        One .apk contains all
                         resources
                   ...
9-patch drawables – foo.9.png




  Similar to CSS3 border-image
  Border pixels indicate stretchable regions
  Make bo...
Selector (state list) drawables


    foo.xml:


<selector>
    <item android:drawable="@drawable/foo_disabled"
          ...
Selector (state list) drawables


  foo_default.png   foo_disabled.png   foo_focused.png   foo_pressed.png




  foo_defau...
Layer drawables – XML + PNGs




                   +                    +   Drawable.setColorFilter(

                   ...
Layer drawables – XML + PNGs




           =
               Rendered output
               (resizable w/ 9-patch)




   ...
New UI design patterns
New UI design patterns

Borrowed from the
Android UI design patterns
talk at Google I/O 2010

 http://code.google.com/even...
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         30
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         31
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         32
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         33
Dashboard
“What can I do with this app?”
“What’s new?”




                                 34
Dashboard – Recommendations

  Focus on 3-6 most important app
   sections
  Highlight what’s new
  Be flavorful – it’s...
Action Bar
“How can I do <common action> quickly?”




                                          36
Action Bar – Recommendations

  Bring key, app-wide actions onscreen
  Help to convey a sense of place
  Use consistent...
Quick Actions
“What can I do with <this object>?”




                                      38
Icons and guidelines
New Android icon style




Tactile • Rendered • Forward Facing • Top-lit
  Synecdoche • Diverse shapes, materials
Icon guidelines

Guidelines and templates are available at:

  http://developer.android.com/guide/practices/
  ui_guidelin...
Questions?
Copyrights and Trademarks

  Android, Google are registered
   trademarks of Google Inc.
  All other trademarks and copy...
Upcoming SlideShare
Loading in …5
×

Agenda – Android UI design Android UI Design Tips

338,058 views

Published on

Agenda – Android UI design tips

1.  Do’s and don’ts
2.  Design philosophy and considerations
3.  UI framework features you
should definitely be using
4.  New UI design patterns
5.  Icons and guidelines

3

Published in: Technology
  • Nice tips i would had one point : analytics. Solutions like smartlook can be useful to get feedback about your UI and keep on improving it: https://bit.ly/2UbUfR1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Finally i found something that changed my life, if you need to change yours just watch the video here http://bit.ly/changesvideo Hope it helps you as it helped me!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Now, change your life Now! No more excuses, watch the video http://bit.ly/changesvideo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Now, change your life Now! No more excuses, watch the video http://bit.ly/changesvideo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×