Designing for Android
                           Design tips for developers.




                             Android Dev Meetup. Munich. 25 August 2010. Hosted by


Friday 26 August 11
1. Introduction
                2. Fundamental Design Principles
                3. Evaluating your designs




Friday 26 August 11
1. Introduction




Friday 26 August 11
Interaction Designer @ frog




                                                        Kevin Cannon
                                                    www.multiblah.com
                                                           @multikev

Friday 26 August 11
2. Fundamental Design Principles




Friday 26 August 11
Consistency
                            Contrast
                        Visual Hierarchy
                      Proximity & Grouping
                           A ordance
                           Experience




Friday 26 August 11
Consistency




Friday 26 August 11
Friday 26 August 11

Button placement changes. Inconsistent within the app. Inconsistent with Android.
Contrast




Friday 26 August 11
Friday 26 August 11

No contrast between news items.
Friday 26 August 11

A small addition of more contrast on alternating rows scrolling long list easier.
Friday 26 August 11

Strong contrast between main areas
Main Area




Friday 26 August 11

Strong contrast between main areas
Main Area




                                     Other Actions




Friday 26 August 11

Strong contrast between main areas
Visual Hierarchy




Friday 26 August 11
Friday 26 August 11
Friday 26 August 11

squint test
1




Friday 26 August 11

squint test
2



                      1




Friday 26 August 11

squint test
2



                      1




                      3




Friday 26 August 11

squint test
2



                      1




                      3




Friday 26 August 11

Guide the users eye
Friday 26 August 11

Using colour and contrast to create a visual hierarchy.
Primary Action




Friday 26 August 11

Using colour and contrast to create a visual hierarchy.
Primary Action                      Secondary Action




Friday 26 August 11

Using colour and contrast to create a visual hierarchy.
Primary Action                      Secondary Action




                                                          Tertiary Actions




Friday 26 August 11

Using colour and contrast to create a visual hierarchy.
Proximity & Grouping




Friday 26 August 11
Friday 26 August 11
Undo?




                         Huh?




Friday 26 August 11
Undo?




                         Eject/Fullscreen?




Friday 26 August 11
Friday 26 August 11

The green areas are the tools which handle drawing
Friday 26 August 11
Original   Changed

Friday 26 August 11
A ordance




Friday 26 August 11
Friday 26 August 11
Friday 26 August 11
Friday 26 August 11

Another book app, reveals the next page as you swipe, helping the user understand the
behaviour.
How can that be taken further?
* Only iPhone example in this presentation
Friday 26 August 11

the iBooks app, showing a hint of pages on the right, builds in an additional visual queue.
Experience




Friday 26 August 11

What experience you you want to create?
Example: Gentle Alarm

                      Wake you up gently. Good night’s sleep.
                       Improve quality of life. More energy.




Friday 26 August 11
Friday 26 August 11
This is the
                “quick alarm setting”




Friday 26 August 11
Sending mixed messages




Friday 26 August 11

Reading a book
Seriously?




                                                      Wirklich?




Friday 26 August 11

This is a pretty poor experience of reading a book.
Want to reward the user.
3. Evaluating your designs




Friday 26 August 11
Define Clear Goals

                                 1.
                                 2.
                                 3.

                                 What does my app not do?




Friday 26 August 11

Define what your app is, and what it’s not. From a users’ point of view.
Define Clear Goals

                      1. Help someone save money.
                      2. Tell them what they spend money on.
                      3. Feel in control of their spending.

                      What does my app not do?
                      Not a budget planner or manager.




Friday 26 August 11

Boxee Remote
Simple   Flexible




Friday 26 August 11
Risk!




              Simple   Flexible




Friday 26 August 11
Risk!




                Simple    Flexible




Friday 26 August 11

Boxee Remote
Trade offs
http://www.flickr.com/photos/thedalogs/3196553836/

Friday 26 August 11

When do you ever eat your dinner with a Swiss Army Knife?
http://www.flickr.com/photos/limaoscarjuliet/3252847916/
                                                 http://www.flickr.com/photos/striatic/2243067342/sizes/z/in/photostream/

Friday 26 August 11

Great picture!
Frequent




           Beginner                 Expert




                      In-frequent
Friday 26 August 11
Frequent



                        ?
                                                    ?

           Beginner                                     Expert

                                                    ?
                                  ?


                                      In-frequent
Friday 26 August 11

Know where your app lives on this chart
Frequent

                      Lock & Key                         Aeroplane Cockpit




           Beginner                                                 Expert




                       Fire Extinguisher



                                           In-frequent
Friday 26 August 11

Know where your app lives on this chart
Visual Design




Friday 26 August 11
Friday 26 August 11
Friday 26 August 11

Studies have shown, people perceive interfaces that look better as easier to use.
Friday 26 August 11
2nd Flashlight app
                in marketplace!



Friday 26 August 11
First Use




Friday 26 August 11

If your app requires content to succeed, decide how to handle first use.
screenshot - pulse,
Friday 26 August 11

If your app requires content to succeed, decide how to handle first use.

Couldn’t this have 5 starting videos?
Friday 26 August 11

This is the fist use of an app. For a flash light application! Seriously!
Friday 26 August 11

A more friendly approach
Friday 26 August 11

Default content set.
Context




Friday 26 August 11

If your app requires content to succeed, decide how to handle first use.
screenshot - pulse,
Friday 26 August 11

An expenses application. Often used offline when travelling abroad.
Airplane mode!




Friday 26 August 11

I was in airplane mode. Default email client!?
Friday 26 August 11
You are not your user




Friday 26 August 11
Friday 26 August 11
Your users are not stupid just because they make mistakes




Friday 26 August 11
Friday 26 August 11
Ask what you can take out,
                       not what you can put in.




Friday 26 August 11
From: Designing Interactions, Bill Moggridge, 2007, ISBN 978-0262134743

Friday 26 August 11
Think about the full life cycle of your app.




       Awareness                         Usage                       End




Friday 26 August 11
Think about the full life cycle of your app.




       Awareness                         Usage                       End

          Marketplace
           App site
           App Icon
          Reputation
           Reviews




Friday 26 August 11
Think about the full life cycle of your app.




       Awareness                         Usage                       End

          Marketplace                    First Use
           App site                      Support
           App Icon                    New features
          Reputation                   Update Cycles
           Reviews




Friday 26 August 11
Think about the full life cycle of your app.




       Awareness                         Usage                           End

          Marketplace                    First Use                     Stop use
           App site                      Support                       Deletion
           App Icon                    New features                     Rating
          Reputation                   Update Cycles                 Word-of-mouth
           Reviews




Friday 26 August 11
Friday 26 August 11

Fi
Finally, just get the details right




Friday 26 August 11

Fi
Friday 26 August 11

You don’t need an alert for this, a more subtle, inline message would be more appropriate.
Technical frameworks can allow us to be lazy, we need to try avoid that.
What’s wrong with this icon?
Friday 26 August 11
What’s wrong with this icon?
Friday 26 August 11

This is where 90% of people see your app, how it looks here is crucial.
What’s wrong with this icon?
Friday 26 August 11

Ignoring the platform you’re designing for.
What’s wrong with this screen?
Friday 26 August 11

Number format.
What’s wrong with this screen?
Friday 26 August 11

Number format.
Hint: You’re
                                                 supposed to be
                                                 entering an expense




                      What’s wrong with this screen?
Friday 26 August 11
Hint: You’re
                                                 supposed to be
                                                 entering an expense




                      What’s wrong with this screen?
Friday 26 August 11
Hint: You’re
                                                 supposed to be
                                                 entering an expense




                                                 Bad choice of input
                                                 keyboard for just
                                                 entering numbers.




                      What’s wrong with this screen?
Friday 26 August 11
Friday 26 August 11

If you remove all content - suggests what to do next.
Friday 26 August 11
Small hit areas


Friday 26 August 11
Small hit areas


Friday 26 August 11
Friday 26 August 11

Fi
Thanks!




                                    Kevin Cannon
                                www.multiblah.com
                                       @multikev

Friday 26 August 11

Design tips for developers