SlideShare a Scribd company logo
ANDROID UX
          & DESIGN
                  ICE CREAM SANDWICH
                          & JELLY BEAN




Presented by
ANDY FITZGERALD
JESSE WEED
WHY ANDROID?
  2008
   first commercial Android devices released

  2009
   2.8% market share
   12,000 activations daily

  2010
   32% market share
   362,000 activations daily

  2012
   59% market share
   over 1 million activations daily
UX & DESIGN


    Navigation & User Interface

    Visual Design

    The Android Ecosphere

    Case Studies
NAVIGATION &
USER INTERFACE
UP & BACK
UP & BACK: SIBLING SCREENS
UP & BACK: LINKED SCREENS
Intent
A mechanism for one app to signal it
would like another app's assistance in
performing an action.
SHARING WITH INTENTS
SHARING WITH INTENTS
SHARING WITH INTENTS
ACTION BAR
 Top Level   Category View




                             GMail
ACTION BAR
 Pageview Spinner




                    GMail
ACTION BAR
 Google Play Books   Google Play Music




                                         GMail
SCROLLABLE TABS
 Tab View         Horizontal Scrolling




                              Google Play Music
FIXED TABS
 Tab View (Fixed)   Scrolling




                                YouTube
FIXED TABS
 Tab View (Scrolled)   Landscape
                       Tabs Nested in Action Bar




                                                   YouTube
DRAWERS
 Top level view   Drawer




                           YouTube
DRAWERS
 Drawer menu   Category menu




                               YouTube
DRAWERS
 Detail view   Tabbed navigation




                                   YouTube
VISUAL DESIGN
WHAT DOES ANDROID “LOOK” LIKE?
HOME SCREEN

 Android      iPhone
NOTIFICATIONS

 Android    iPhone
CALLS

 Android   iPhone
SETTINGS

 Android   iPhone
CALENDAR

 Android   iPhone
SHARING

 Android   iPhone
KEY DESIGN PRINCIPLES
“PURE ANDROID”

 Flat, but not 2D
 Elements glow
 Understated fields
 and elements
 Subtle top-light




                     http://developer.android.com/design
TYPOGRAPHY
COLOR
ICONOGRAPHY
METRICS & GRID
Devices by Screen size & density as of Aug 1, 2012
SUPPORTING MULTIPLE
RESOLUTIONS

  Example of app without support for different densities.




  Example of app with that supports different densities.
Android UX & Design
SCALING
THE ANDROID ECOSPHERE
NOTIFICATIONS
 Expanded layouts
NOTIFICATIONS
 Actions




 Grouping
WIDGETS
 Information Widgets




 Collection Widgets




 Control Widgets
WIDGETS
 YouTube, AnyDO, BBC   YouTube
WIDGETS
 HTC Sense Email   Epicurious & Flipboard
WIDGETS
 Any.DO   Traffic Widget
OPEN SIGNAL MAPS




              h"p://opensignalmaps.com/reports/fragmenta4on.php
MULTIPLE VIEWS
SINGLE VIEW WITH
MULTIPLE PANES
STRETCH/COMPRESS
STACK
EXPAND & COLLAPSE
SHOW & HIDE
TRANSLATION:
A BAD EXAMPLE
EPICURIOUS
iPhone
EPICURIOUS
Android
PORTING PITFALLS

 Ugly user interface
 Poor use of “Knowledge in the Head”
 Shortchanges device capabilities
 Require “hacks” that lead to poor performance and
 unreliability
 Create poor forward compatibility of design work
 Generate aggravating user experiences
 (& resulting negative feedback and brand damage)
TRANSLATION:
A GOOD EXAMPLE
EVERNOTE
EVERNOTE
DELIBERATE DESIGN

 Facilitates architectural parity across multiple
 contexts
 Leverages device specific “knowledge in the head”
 Leverages device and context specific capabilities
 Is future friendly
 Fits naturally into device ecosystems
THANK YOU!

More Related Content

PDF
The Best Windows Phone Apps 2013: A Designers Collection
PPT
Presentation1
PPT
Pp Screen Design Interface
PPTX
Dreamworks
PDF
App design process part IV
PPTX
Bridging the Worlds of Console, Mobile and Reality | Baiyon
PDF
Kuyi Mobile Geeks on a Beach Presentation by Erick Garayblas
PPTX
Go launcher
The Best Windows Phone Apps 2013: A Designers Collection
Presentation1
Pp Screen Design Interface
Dreamworks
App design process part IV
Bridging the Worlds of Console, Mobile and Reality | Baiyon
Kuyi Mobile Geeks on a Beach Presentation by Erick Garayblas
Go launcher

What's hot (8)

PDF
Best google chrome extension to screenshot capture | Yizy
PDF
How do you_honeycomb_android_for_tablets
PPTX
App Review
PPTX
Kevita competitor website analysis
PPTX
Minerva exam presentation
PDF
Mobile App Trends for 2017: Design, Monetization & More
PPTX
Android OS - The Journey of most popular Operating System
KEY
When in Rome: Why Native Monetization is the Undeniable Future,
Best google chrome extension to screenshot capture | Yizy
How do you_honeycomb_android_for_tablets
App Review
Kevita competitor website analysis
Minerva exam presentation
Mobile App Trends for 2017: Design, Monetization & More
Android OS - The Journey of most popular Operating System
When in Rome: Why Native Monetization is the Undeniable Future,
Ad

Similar to Android UX & Design (20)

PDF
Android Design
PDF
Android vs iPhone - Differences in UI Patterns and Design
PDF
App design guide
PPTX
Mobile sketching
KEY
Android sessions gtug ph singapore
PPTX
Teaching Your Client Android Design, or, Don't Be An iPhoney
PDF
EIA 2015 Creating Apps with Android Material Design
PPTX
Android design in action
PDF
Silicon Valley Android Apps Brochure
PDF
Android Design Support Library
PPTX
Android ppt
PDF
Anatomy of a button
PPTX
ANDROID MARSHMALLOW
PPT
Android ui patterns
PPT
Android ui patterns
PDF
Mobile Prototyping
PDF
Android android-ui-design-patterns
PDF
Android UI design Patter
PDF
Mobile hig
PPTX
Day1 what is android(print)
Android Design
Android vs iPhone - Differences in UI Patterns and Design
App design guide
Mobile sketching
Android sessions gtug ph singapore
Teaching Your Client Android Design, or, Don't Be An iPhoney
EIA 2015 Creating Apps with Android Material Design
Android design in action
Silicon Valley Android Apps Brochure
Android Design Support Library
Android ppt
Anatomy of a button
ANDROID MARSHMALLOW
Android ui patterns
Android ui patterns
Mobile Prototyping
Android android-ui-design-patterns
Android UI design Patter
Mobile hig
Day1 what is android(print)
Ad

Recently uploaded (20)

PPTX
TLE Review Electricity (Electricity).pptx
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
Web App vs Mobile App What Should You Build First.pdf
PDF
Getting Started with Data Integration: FME Form 101
PDF
Mushroom cultivation and it's methods.pdf
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Heart disease approach using modified random forest and particle swarm optimi...
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
A Presentation on Touch Screen Technology
PDF
Zenith AI: Advanced Artificial Intelligence
PDF
August Patch Tuesday
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPTX
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
PPTX
Chapter 5: Probability Theory and Statistics
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
PDF
Assigned Numbers - 2025 - Bluetooth® Document
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
A novel scalable deep ensemble learning framework for big data classification...
TLE Review Electricity (Electricity).pptx
MIND Revenue Release Quarter 2 2025 Press Release
Web App vs Mobile App What Should You Build First.pdf
Getting Started with Data Integration: FME Form 101
Mushroom cultivation and it's methods.pdf
Encapsulation_ Review paper, used for researhc scholars
Heart disease approach using modified random forest and particle swarm optimi...
Unlocking AI with Model Context Protocol (MCP)
A Presentation on Touch Screen Technology
Zenith AI: Advanced Artificial Intelligence
August Patch Tuesday
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
Chapter 5: Probability Theory and Statistics
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Microsoft Solutions Partner Drive Digital Transformation with D365.pdf
Assigned Numbers - 2025 - Bluetooth® Document
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
A novel scalable deep ensemble learning framework for big data classification...

Android UX & Design