SlideShare une entreprise Scribd logo
1  sur  36
Android Design
Sankalp is an User Experience Designer at Mutual Mobile,
Inc. At Mutual Mobile, he has build mobile solutions for
finding businesses, people and restaurants in the
neighborhood, to creating sales tools for selling hi-tech
products and building banking & financial services solutions
among a few.
As a designer he has always been intrigued by the man -
machine interaction which drove him into the world of
designing experiences for apps that are engaging and
exciting for the user. He believes in simplicity and
minimalism which reflects in his work. He has a Masters in
Industrial Design from IIT Delhi.
His other interests include traveling, reading, photography
and typography.
ABOUT ME
ANDROID, PURELY BY STATS!
Market share in Q2, 2013
80%
Distinct Android devices seen this year
11,868
Versions of Android still in use.
8
Android devices run Jelly Bean
37.9%
Source: Open Signal, July 2013
ANDROID, OVER THE YEARS
2009 2009 2009 2010 2010 2011 2011 2012
Cupcake
Donut
Eclair
Froyo
Gingerbread
Honeycomb
Icecream
Sandwich
Jelly Bean
KitKat
2013
Dark Ages Coming Of The Age
FRAGMENTATION
OS Based
Source: Open Signal, July 2013
iOS
iOS 6 (95%)
iOS 5 (5%)
Earlier Version (1%)
Android
Jelly Bean (37.9%)
Ice Cream Sandwich (23.3%)
Honeycomb (0.1%)
Gingerbread (34.1%)
Froyo (3.1%)
Eclair (3.1%)
Donut (0.1%)
FRAGMENTATION
Devices
Source: Open Signal, July 2013
FRAGMENTATION
AndroidiOS
Screen Sizes
Source: Open Signal, July 2013
MYTHS ABOUT ANDROID
Myth 1
Android solutions must be
designed for every possible
device and form factor
Myth 2
An Android solution takes
longer to develop than an
iOS solution
MYTH #1
DESIGN FOR EVERY POSSIBLE DEVICE
Android’s flexible design framework allows us to
build across all modern devices with just two
optimized layouts — tablets and handhelds — that
adjust to their surroundings
9-patch assets optimize images for any screen
density
MYTH #2
LONGER DEVELOPMENT TIME
iOSANDROID
But today...
• Android provides have a very strong visual
design guidelines
In the Dark Days of Android:
• Android visual design guidelines didn't exist
• General approach for designing screens for
Android was to mimic iOS
• Screens were designed with widgets that
needed to be customized so that they
functioned like they would on the iOS platform
Android isn’t constrained to phones and tablets it can power
everything from consumer electronics to satellites.
THINK OUTSIDE THE POCKET
ANDROID IS MORE THAN MOBILE
Flexibility
Designing for Android requires that you’re flexible and
think beyond the immediate device interface
Android has been used to power TVs, cars, satellites, consumer devices, household electronics, and more
Android now supports multiple user logins on the same tablet
Connected
Android can fuel a range of devices across a massive
ecosystem
Seamless
Fluid experience across devices
JELLY BEAN
Design Language
ACTION BAR
1
1 App Icon
2
2 View Control
3
3 Action Items
4
4 Action Overflow
ACTION BAR
Split
Action Items are moved
to the bottom action bar
which behaves like a
Tool bar
Contextual
Action Items appear at
the bottom as the user
selects items on the list
view
NAVIGATION
Dashboard
Dashboards cant scroll. So
there can be limited items that
can be added to navigation.
Navigation Drawer
Drawer can scroll. Also it uses Accordion Menu /
List View of items.
TABS
Static Tabs
Limited filters
Scrolling Tabs
Can accommodate as
many filters as you want
Stacked Tabs
On changing orientation to landscape
the Tabs become integral part of the
action bar.
LISTS & GRIDS
Lists
Search results
Feeds
Timeline
Settings
Navigation
Grids
Images
Icons
Accessibility
ALERTS & FEEDBACK
Dialog Boxes
Takes feedback
from the user
Alert Views
Alerts the user in
advance about
possible outcomes
of any action
Pop Ups
Provides user with
various Share
options
Toasts
Provides the user
with Feedback about
the completion of an
Action
GOING THAT
EXTRA MILE
EMPHASIZE ON CONTENT
AVOID REDUNDANCY
DONT OVERWHELM THE USER
BE CONSISTENT
DIGITAL OVER SKEUOMORPHIC
FEEDBACK WITH ANIMATIONS
Google Now Facebook Chatheads
SCALABLE TO VARIOUS FORM FACTORS
Mobile TabletChromebook
Don’ts
Tablet Apps are not scaled up
versions of Phone apps
Do’s
Design Tablet app as per the
available real estate on the
tablet screen
Use Grid System
Arrange data in the form of
information cards which can
be arranged as per the
form factor
DONT BE AFRAID OF THAT EMPTY SCREEN
SURPRISE USER IN A PLEASANT WAY
EXAMPLES
EXAMPLES
EXAMPLES
RESOURCES
http://www.android-app-patterns.com
http://androidniceties.tumblr.com
http://mobile-patterns.com/
http://www.androiduipatterns.com/
THANK YOU
sankalpjoshi@gmail.com
Questions

Contenu connexe

Tendances

Android App Development Trends for 2021
Android App Development Trends for 2021Android App Development Trends for 2021
Android App Development Trends for 2021Nirvana Canada
 
Usability/Accessibility 2013
Usability/Accessibility 2013Usability/Accessibility 2013
Usability/Accessibility 2013Randall Arnold
 
The evolution of_android
The evolution of_androidThe evolution of_android
The evolution of_androidgeneralvee
 
Android introduction (ilyas)
Android introduction (ilyas)Android introduction (ilyas)
Android introduction (ilyas)Ilyas Ahamed
 
Designing for android tablets smashing mobile
Designing for android tablets   smashing mobileDesigning for android tablets   smashing mobile
Designing for android tablets smashing mobileDaniel Downs
 
Android Basic By Ankit Shandilya
Android Basic By Ankit ShandilyaAndroid Basic By Ankit Shandilya
Android Basic By Ankit ShandilyaAnkit Shandilya
 
Introduction to anorid
Introduction to anoridIntroduction to anorid
Introduction to anoridDeepanjali Sah
 
Green living app
Green living appGreen living app
Green living appadli_1017
 
Android & iOS Marketplace in Development Era
Android & iOS Marketplace in Development EraAndroid & iOS Marketplace in Development Era
Android & iOS Marketplace in Development EraMobilePundits
 
Android ctp presentation 1
Android ctp presentation 1Android ctp presentation 1
Android ctp presentation 1DIKSHA_24
 
Mobile Development With Android
Mobile Development With AndroidMobile Development With Android
Mobile Development With AndroidMobilePundits
 
Presentation on Android application
Presentation on Android applicationPresentation on Android application
Presentation on Android applicationAtibur Rahman
 
surface computer ppt
surface computer pptsurface computer ppt
surface computer pptkabego18audry
 
Android UI design Patter
Android UI design PatterAndroid UI design Patter
Android UI design PatterTeddy Koornia
 
Microsoft Surface Report
Microsoft Surface ReportMicrosoft Surface Report
Microsoft Surface Reportpiyush khadse
 
BOLO Mobile Super Forum
BOLO Mobile Super ForumBOLO Mobile Super Forum
BOLO Mobile Super ForumTim Hayden
 

Tendances (20)

Android App Development Trends for 2021
Android App Development Trends for 2021Android App Development Trends for 2021
Android App Development Trends for 2021
 
Usability/Accessibility 2013
Usability/Accessibility 2013Usability/Accessibility 2013
Usability/Accessibility 2013
 
The evolution of_android
The evolution of_androidThe evolution of_android
The evolution of_android
 
Android introduction (ilyas)
Android introduction (ilyas)Android introduction (ilyas)
Android introduction (ilyas)
 
Designing for android tablets smashing mobile
Designing for android tablets   smashing mobileDesigning for android tablets   smashing mobile
Designing for android tablets smashing mobile
 
Android evolution
Android evolutionAndroid evolution
Android evolution
 
Android
Android Android
Android
 
Android kitkat 4.4
Android kitkat 4.4Android kitkat 4.4
Android kitkat 4.4
 
Android Basic By Ankit Shandilya
Android Basic By Ankit ShandilyaAndroid Basic By Ankit Shandilya
Android Basic By Ankit Shandilya
 
Introduction to anorid
Introduction to anoridIntroduction to anorid
Introduction to anorid
 
Green living app
Green living appGreen living app
Green living app
 
Android & iOS Marketplace in Development Era
Android & iOS Marketplace in Development EraAndroid & iOS Marketplace in Development Era
Android & iOS Marketplace in Development Era
 
Future gadgets
Future gadgetsFuture gadgets
Future gadgets
 
Android ctp presentation 1
Android ctp presentation 1Android ctp presentation 1
Android ctp presentation 1
 
Mobile Development With Android
Mobile Development With AndroidMobile Development With Android
Mobile Development With Android
 
Presentation on Android application
Presentation on Android applicationPresentation on Android application
Presentation on Android application
 
surface computer ppt
surface computer pptsurface computer ppt
surface computer ppt
 
Android UI design Patter
Android UI design PatterAndroid UI design Patter
Android UI design Patter
 
Microsoft Surface Report
Microsoft Surface ReportMicrosoft Surface Report
Microsoft Surface Report
 
BOLO Mobile Super Forum
BOLO Mobile Super ForumBOLO Mobile Super Forum
BOLO Mobile Super Forum
 

Similaire à Android Design

Mobile Website Design: Responsive, Adaptive or Both?
Mobile Website Design: Responsive, Adaptive or Both?Mobile Website Design: Responsive, Adaptive or Both?
Mobile Website Design: Responsive, Adaptive or Both?Effective
 
Android Design Guidelines 4.0
Android Design Guidelines 4.0Android Design Guidelines 4.0
Android Design Guidelines 4.0Brandon Nolte
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile ExperienceDavid Drucker
 
Components of Android
Components of AndroidComponents of Android
Components of AndroidMarie Weaver
 
Android Design Guidelines 1.1
Android Design Guidelines 1.1Android Design Guidelines 1.1
Android Design Guidelines 1.1Mutual Mobile
 
Android os revolution in mobile experience
Android os revolution in mobile experienceAndroid os revolution in mobile experience
Android os revolution in mobile experienceNitu bindal
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to androidSwapnali Pawar
 
Android.... (4.4 included)
Android.... (4.4 included)Android.... (4.4 included)
Android.... (4.4 included)ashish0019
 
Mobility testing day_1_ppt
Mobility testing day_1_pptMobility testing day_1_ppt
Mobility testing day_1_pptsayhi2sudarshan
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profitpenanochizzo
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitFernando Cejas
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti Smash Tech
 
001-Mobile Application.pptx
001-Mobile Application.pptx001-Mobile Application.pptx
001-Mobile Application.pptxAhmedDarre
 
Chrome for android_devfestx
Chrome for android_devfestxChrome for android_devfestx
Chrome for android_devfestxDominic Travers
 
Android Design Guidelines
Android Design GuidelinesAndroid Design Guidelines
Android Design GuidelinesSam Gaddis
 
MOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsMOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsAprilJasminePacis
 

Similaire à Android Design (20)

Mobile Website Design: Responsive, Adaptive or Both?
Mobile Website Design: Responsive, Adaptive or Both?Mobile Website Design: Responsive, Adaptive or Both?
Mobile Website Design: Responsive, Adaptive or Both?
 
Android Design Guidelines 4.0
Android Design Guidelines 4.0Android Design Guidelines 4.0
Android Design Guidelines 4.0
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
Android
AndroidAndroid
Android
 
Components of Android
Components of AndroidComponents of Android
Components of Android
 
Android Design Guidelines 1.1
Android Design Guidelines 1.1Android Design Guidelines 1.1
Android Design Guidelines 1.1
 
MOTOROLA XOOM Meet-up March 1st
MOTOROLA XOOM Meet-up March 1stMOTOROLA XOOM Meet-up March 1st
MOTOROLA XOOM Meet-up March 1st
 
Android os revolution in mobile experience
Android os revolution in mobile experienceAndroid os revolution in mobile experience
Android os revolution in mobile experience
 
Pp2
Pp2Pp2
Pp2
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to android
 
Android.... (4.4 included)
Android.... (4.4 included)Android.... (4.4 included)
Android.... (4.4 included)
 
Mobility testing day_1_ppt
Mobility testing day_1_pptMobility testing day_1_ppt
Mobility testing day_1_ppt
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 
Mobile Hacking Unit 1
Mobile Hacking Unit 1Mobile Hacking Unit 1
Mobile Hacking Unit 1
 
001-Mobile Application.pptx
001-Mobile Application.pptx001-Mobile Application.pptx
001-Mobile Application.pptx
 
Chrome for android_devfestx
Chrome for android_devfestxChrome for android_devfestx
Chrome for android_devfestx
 
Android Design Guidelines
Android Design GuidelinesAndroid Design Guidelines
Android Design Guidelines
 
MOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsMOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college students
 

Android Design

  • 2. Sankalp is an User Experience Designer at Mutual Mobile, Inc. At Mutual Mobile, he has build mobile solutions for finding businesses, people and restaurants in the neighborhood, to creating sales tools for selling hi-tech products and building banking & financial services solutions among a few. As a designer he has always been intrigued by the man - machine interaction which drove him into the world of designing experiences for apps that are engaging and exciting for the user. He believes in simplicity and minimalism which reflects in his work. He has a Masters in Industrial Design from IIT Delhi. His other interests include traveling, reading, photography and typography. ABOUT ME
  • 3.
  • 4. ANDROID, PURELY BY STATS! Market share in Q2, 2013 80% Distinct Android devices seen this year 11,868 Versions of Android still in use. 8 Android devices run Jelly Bean 37.9% Source: Open Signal, July 2013
  • 5. ANDROID, OVER THE YEARS 2009 2009 2009 2010 2010 2011 2011 2012 Cupcake Donut Eclair Froyo Gingerbread Honeycomb Icecream Sandwich Jelly Bean KitKat 2013 Dark Ages Coming Of The Age
  • 6. FRAGMENTATION OS Based Source: Open Signal, July 2013 iOS iOS 6 (95%) iOS 5 (5%) Earlier Version (1%) Android Jelly Bean (37.9%) Ice Cream Sandwich (23.3%) Honeycomb (0.1%) Gingerbread (34.1%) Froyo (3.1%) Eclair (3.1%) Donut (0.1%)
  • 9. MYTHS ABOUT ANDROID Myth 1 Android solutions must be designed for every possible device and form factor Myth 2 An Android solution takes longer to develop than an iOS solution
  • 10. MYTH #1 DESIGN FOR EVERY POSSIBLE DEVICE Android’s flexible design framework allows us to build across all modern devices with just two optimized layouts — tablets and handhelds — that adjust to their surroundings 9-patch assets optimize images for any screen density
  • 11. MYTH #2 LONGER DEVELOPMENT TIME iOSANDROID But today... • Android provides have a very strong visual design guidelines In the Dark Days of Android: • Android visual design guidelines didn't exist • General approach for designing screens for Android was to mimic iOS • Screens were designed with widgets that needed to be customized so that they functioned like they would on the iOS platform
  • 12. Android isn’t constrained to phones and tablets it can power everything from consumer electronics to satellites. THINK OUTSIDE THE POCKET
  • 13. ANDROID IS MORE THAN MOBILE Flexibility Designing for Android requires that you’re flexible and think beyond the immediate device interface Android has been used to power TVs, cars, satellites, consumer devices, household electronics, and more Android now supports multiple user logins on the same tablet Connected Android can fuel a range of devices across a massive ecosystem Seamless Fluid experience across devices
  • 15. ACTION BAR 1 1 App Icon 2 2 View Control 3 3 Action Items 4 4 Action Overflow
  • 16. ACTION BAR Split Action Items are moved to the bottom action bar which behaves like a Tool bar Contextual Action Items appear at the bottom as the user selects items on the list view
  • 17. NAVIGATION Dashboard Dashboards cant scroll. So there can be limited items that can be added to navigation. Navigation Drawer Drawer can scroll. Also it uses Accordion Menu / List View of items.
  • 18. TABS Static Tabs Limited filters Scrolling Tabs Can accommodate as many filters as you want Stacked Tabs On changing orientation to landscape the Tabs become integral part of the action bar.
  • 19. LISTS & GRIDS Lists Search results Feeds Timeline Settings Navigation Grids Images Icons Accessibility
  • 20. ALERTS & FEEDBACK Dialog Boxes Takes feedback from the user Alert Views Alerts the user in advance about possible outcomes of any action Pop Ups Provides user with various Share options Toasts Provides the user with Feedback about the completion of an Action
  • 27. FEEDBACK WITH ANIMATIONS Google Now Facebook Chatheads
  • 28. SCALABLE TO VARIOUS FORM FACTORS Mobile TabletChromebook Don’ts Tablet Apps are not scaled up versions of Phone apps Do’s Design Tablet app as per the available real estate on the tablet screen Use Grid System Arrange data in the form of information cards which can be arranged as per the form factor
  • 29. DONT BE AFRAID OF THAT EMPTY SCREEN
  • 30. SURPRISE USER IN A PLEASANT WAY