SlideShare a Scribd company logo
Android 4.0 UI Design Tips
Justin Lee
Android 4.0 UI Design Tips
Evolution of Android




Android 2.3    Android 3.0     Android 4.0
 Gingerbread    Honeycomb    Ice Cream Sandwich
One OS for Smartphones & Tablets
Topics
Major UI Changes
Design Patterns
Do and Don’t
Major UI Changes
Fight for Fragmentation
Android is not easy to learn
http://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up
Inconsistent hardware buttons
is a big problem
ICS drop hardware buttons


                screen



  Gingerbread            ICS
Software Buttons are dynamic


 Landscape Left




  Landscape Right
Back   Home   Recents
What’s missing?
Menu Button
Menu button is NOT longer a
primary button




  Gingerbread       ICS
Quiz: How to goto settings page?
Not to many people can get it by
themselves
ICS make the menu much
more easy to find
The menu button in legacy
app still available on ICS
But it’s time to say goodbye
http://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html
Migrate the global actions to the
action bar & action overflow
      Old                 New
Split action bar for contextual
actions
      Old               New
Backwards compatibility
                                                                  Legacy hardware




                                                                  Legacy software




http://developer.android.com/design/patterns/compatibility.html
Back Button
The behavior of back button
is inconsistent from user’s POV




                         ?
In app navigation is much more
predictable
Home Button
Home button perform too many
functions before ICS


                    tap

              tap




      long press
The only function of home
button on ICS is going home
How to goto a recent app?
Recents Button
Tap recents button to show
recent app list
The new recents screen


            tap to switch

            swipe to remove
Long press gesture changed
        Old                 New




Open contextual menu   Select the item
App UI Design Patterns
Common App UI


                                                           1.Main Action Bar
                                                           2.View Control
                                                           3.Content Area
                                                           4.Split Action Bar



http://developer.android.com/design/get-started/ui-overview.html
General App Structure
                   Top level views




                   Category views




                   Detail/edit view
New in ICS
                                                    1.Navigation Bar


                                                    2.Action Bar


                                                    3.Multi-pane layouts


                                                    4.Selection
 http://developer.android.com/design/patterns/new-4-0.html
Navigation

                                  Back                                Up



                    system & in-app
                                                               In-app navigation
                       navigation



http://developer.android.com/design/patterns/navigation.html
Swipe Views
       Swiping
       Between
       Detail Views




       Swiping
       Between
       Tabs

http://developer.android.com/design/patterns/swipe-views.html
Action Bar



                                           1.App icon
                                           2.View Control
                                           3.Action Buttons
                                           4.Action overflow


http://developer.android.com/design/patterns/actionbar.html
Split Action Bars


                                                              1.Main action bar
                                                              2.Top bar
                                                              3.Bottom Bar




http://developer.android.com/design/patterns/actionbar.html
Multi-pane layouts




             Smartphone                                                Tablet

http://developer.android.com/design/patterns/multi-pane-layouts.html
Selection

                                          Contextual action bar




Long press on an item in list to select                         Dynamically adjust CAB actions

  http://developer.android.com/design/patterns/selection.html
Notifications




http://developer.android.com/design/patterns/notifications.html
Do and Don’t
Do make the large, obvious
  tap targets
            Touchable UI components are generally laid out along 48dp units.




http://www.slideshare.net/AndroidDev/android-ui-design-tips
http://developer.android.com/design/style/metrics-grids.html
Do use screen density
  independent units (dp)
                                   not density independent (px)




                                       density independent (dp)




http://developer.android.com/guide/practices/screens_support.html
Do create versions of all resources
  for high density screens




http://developer.android.com/design/style/devices-displays.html
Do properly handle orientation changes
                            Stretch/compress                      Expand/collapse




                                        Stack                       Show/hide




http://developer.android.com/design/style/devices-displays.html
Do follow Android icon guideline
              Launcher
                   Launcher




                  Action Bar




http://developer.android.com/design/style/iconography.html
Don't mimic UI elements
  from other platforms

                                  Android


                                         iOS


                Windows Phone 7




http://developer.android.com/design/patterns/pure-android.html
Don't mimic UI elements
  from other platforms

                                 Android

                                        iOS

               Windows Phone 7




http://developer.android.com/design/patterns/pure-android.html
Don't use bottom tab bars




http://developer.android.com/design/patterns/pure-android.html
Don't use labeled back
  buttons on action bars




http://developer.android.com/design/patterns/pure-android.html
Don't use right-pointing
  carets on line items




http://developer.android.com/design/patterns/pure-android.html
Question?
Thank You!
Ad

Recommended

Android UI Design Tips
Android UI Design Tips
Luis Abreu
 
The Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers Collection
Theresa Neil
 
Session 9-10 - UI/UX design for iOS 7 application
Session 9-10 - UI/UX design for iOS 7 application
Vu Tran Lam
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5
Theresa Neil
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)
Mohammad Khalil
 
iOS Human Interface Guideline
iOS Human Interface Guideline
Design My Template LLP
 
打造你的第一個iPhone APP
打造你的第一個iPhone APP
彼得潘 Pan
 
iOS 7 UI Transition Guide
iOS 7 UI Transition Guide
Evgeny Belyaev
 
Mobile App Development
Mobile App Development
Chris Morrell
 
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Fabien Marry
 
Ux Example
Ux Example
Johnson Wang
 
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Paul Sons
 
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...
SwiftPH
 
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.
Theresa Neil
 
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Bala Subra
 
App design guide
App design guide
Jintin Lin
 
Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?
Justin O'Neill
 
Consider Starting Small
Consider Starting Small
Andrew Smith
 
Why the page is killing innovation in magazine UX
Why the page is killing innovation in magazine UX
Rob Boynes
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-Platforms
Martin Ebner
 
Introduction to Mobile Development
Introduction to Mobile Development
Pragnesh Vaghela
 
Native vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application Development
Kosala Nuwan Perera
 
Day: 1 Introduction to Mobile Application Development (in Android)
Day: 1 Introduction to Mobile Application Development (in Android)
Ahsanul Karim
 
Introduction to Android development - Presentation
Introduction to Android development - Presentation
Atul Panjwani
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!
July Systems
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App Development
Özcan Zafer AYAN
 
Native vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile application
Loic Ortola
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
Nick Landry
 
RIA Screen Layouts
RIA Screen Layouts
Theresa Neil
 
Designing for Interesting Moments
Designing for Interesting Moments
Bill Scott
 

More Related Content

What's hot (20)

Mobile App Development
Mobile App Development
Chris Morrell
 
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Fabien Marry
 
Ux Example
Ux Example
Johnson Wang
 
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Paul Sons
 
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...
SwiftPH
 
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.
Theresa Neil
 
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Bala Subra
 
App design guide
App design guide
Jintin Lin
 
Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?
Justin O'Neill
 
Consider Starting Small
Consider Starting Small
Andrew Smith
 
Why the page is killing innovation in magazine UX
Why the page is killing innovation in magazine UX
Rob Boynes
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-Platforms
Martin Ebner
 
Introduction to Mobile Development
Introduction to Mobile Development
Pragnesh Vaghela
 
Native vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application Development
Kosala Nuwan Perera
 
Day: 1 Introduction to Mobile Application Development (in Android)
Day: 1 Introduction to Mobile Application Development (in Android)
Ahsanul Karim
 
Introduction to Android development - Presentation
Introduction to Android development - Presentation
Atul Panjwani
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!
July Systems
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App Development
Özcan Zafer AYAN
 
Native vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile application
Loic Ortola
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
Nick Landry
 
Mobile App Development
Mobile App Development
Chris Morrell
 
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Why the iPad UI matters, And how it differs from the Tablet PC, but also from...
Fabien Marry
 
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Mobile Application Development: Hybrid, Native and Mobile Web Apps
Paul Sons
 
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...
[SwiftPH + PADC Meetup - May 2019] Mobile Interface Guidelines Comparison (iO...
SwiftPH
 
Mobile Design. Strategic Solutions.
Mobile Design. Strategic Solutions.
Theresa Neil
 
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Mobile Development Architecture Ppt with Slides, Book Notes on using Web Silv...
Bala Subra
 
App design guide
App design guide
Jintin Lin
 
Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?
Justin O'Neill
 
Consider Starting Small
Consider Starting Small
Andrew Smith
 
Why the page is killing innovation in magazine UX
Why the page is killing innovation in magazine UX
Rob Boynes
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-Platforms
Martin Ebner
 
Introduction to Mobile Development
Introduction to Mobile Development
Pragnesh Vaghela
 
Native vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application Development
Kosala Nuwan Perera
 
Day: 1 Introduction to Mobile Application Development (in Android)
Day: 1 Introduction to Mobile Application Development (in Android)
Ahsanul Karim
 
Introduction to Android development - Presentation
Introduction to Android development - Presentation
Atul Panjwani
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!
July Systems
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App Development
Özcan Zafer AYAN
 
Native vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile application
Loic Ortola
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
Nick Landry
 

Viewers also liked (20)

RIA Screen Layouts
RIA Screen Layouts
Theresa Neil
 
Designing for Interesting Moments
Designing for Interesting Moments
Bill Scott
 
All The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design Strategies
Theresa Neil
 
Android presentation slide
Android presentation slide
APSMIND TECHNOLOGY PVT LTD.
 
Android workShop
Android workShop
Srinivas Devarapalli
 
Android vs Others Operating System
Android vs Others Operating System
Shemul Hossain
 
My presentation on Android in my college
My presentation on Android in my college
Sneha Lata
 
PPT Companion to Android
PPT Companion to Android
Dharani Kumar Madduri
 
Android ppt
Android ppt
blogger at indiandswad
 
HP19 Mobile Design: 為行動使用者設計
HP19 Mobile Design: 為行動使用者設計
Justin Lee
 
2011/06/21 Microsoft Developer Day 2011—Design Decade
2011/06/21 Microsoft Developer Day 2011—Design Decade
Justin Lee
 
UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢
Justin Lee
 
Process and Purpose: Build a Media Start-Up That Matters. By Corey Ford. #Roc...
Process and Purpose: Build a Media Start-Up That Matters. By Corey Ford. #Roc...
DigiComNet
 
Lean UX von Yavuz Yilmaz | webulos.com
Lean UX von Yavuz Yilmaz | webulos.com
Yavuz Yilmaz
 
2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Justin Lee
 
The Interactive Intranet People, Stucture & Reality
The Interactive Intranet People, Stucture & Reality
Ephraim Julius Freed
 
20120524 App開發流程與小工具分享@UI Cafe
20120524 App開發流程與小工具分享@UI Cafe
Justin Lee
 
Reversing the UI Design Process
Reversing the UI Design Process
Sourcebits
 
Website Design for Senior Citizens
Website Design for Senior Citizens
Nikki Kerber
 
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
Steve Kim
 
RIA Screen Layouts
RIA Screen Layouts
Theresa Neil
 
Designing for Interesting Moments
Designing for Interesting Moments
Bill Scott
 
All The Screens: Cross Platform Design Strategies
All The Screens: Cross Platform Design Strategies
Theresa Neil
 
Android vs Others Operating System
Android vs Others Operating System
Shemul Hossain
 
My presentation on Android in my college
My presentation on Android in my college
Sneha Lata
 
HP19 Mobile Design: 為行動使用者設計
HP19 Mobile Design: 為行動使用者設計
Justin Lee
 
2011/06/21 Microsoft Developer Day 2011—Design Decade
2011/06/21 Microsoft Developer Day 2011—Design Decade
Justin Lee
 
UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢
Justin Lee
 
Process and Purpose: Build a Media Start-Up That Matters. By Corey Ford. #Roc...
Process and Purpose: Build a Media Start-Up That Matters. By Corey Ford. #Roc...
DigiComNet
 
Lean UX von Yavuz Yilmaz | webulos.com
Lean UX von Yavuz Yilmaz | webulos.com
Yavuz Yilmaz
 
2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前
Justin Lee
 
The Interactive Intranet People, Stucture & Reality
The Interactive Intranet People, Stucture & Reality
Ephraim Julius Freed
 
20120524 App開發流程與小工具分享@UI Cafe
20120524 App開發流程與小工具分享@UI Cafe
Justin Lee
 
Reversing the UI Design Process
Reversing the UI Design Process
Sourcebits
 
Website Design for Senior Citizens
Website Design for Senior Citizens
Nikki Kerber
 
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
Steve Kim
 
Ad

Similar to Android 4.0 UI Design Tips (20)

2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
Justin Lee
 
Android UI Patterns
Android UI Patterns
Peter Pascale
 
Android ui patterns
Android ui patterns
Mobile March
 
Android ui patterns
Android ui patterns
vpulec
 
Android 4.0 UI design tips
Android 4.0 UI design tips
Star Channel - Nea Tileorasi
 
Android design patterns
Android design patterns
Platty Soft
 
Android ActionBar Navigation reloaded
Android ActionBar Navigation reloaded
Dominik Helleberg
 
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Cường Doãn
 
Honeycomb UI Patterns
Honeycomb UI Patterns
Pulkit Arora
 
Android Workshop - Session 2
Android Workshop - Session 2
NAILBITER
 
Android Design Guidelines 4.0
Android Design Guidelines 4.0
Brandon Nolte
 
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Teddy Koornia
 
Android UX & Design
Android UX & Design
Jesse Weed
 
Android UX & Design
Android UX & Design
Andy Fitzgerald
 
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
AndiNurkholis1
 
User experience and interactions design
User experience and interactions design
Rakesh Jha
 
Build a user experience on Android
Build a user experience on Android
Eyal Lezmy
 
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Motorola Mobility - MOTODEV
 
Build a user experience by Eyal Lezmy
Build a user experience by Eyal Lezmy
Paris Android User Group
 
ANDROID DESIGN GUIDELINES
ANDROID DESIGN GUIDELINES
Istiaque Reza
 
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
2012/02/15 Android 4.0 UI Design Tips@happy designer meetup
Justin Lee
 
Android ui patterns
Android ui patterns
Mobile March
 
Android ui patterns
Android ui patterns
vpulec
 
Android design patterns
Android design patterns
Platty Soft
 
Android ActionBar Navigation reloaded
Android ActionBar Navigation reloaded
Dominik Helleberg
 
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Cường Doãn
 
Honeycomb UI Patterns
Honeycomb UI Patterns
Pulkit Arora
 
Android Workshop - Session 2
Android Workshop - Session 2
NAILBITER
 
Android Design Guidelines 4.0
Android Design Guidelines 4.0
Brandon Nolte
 
Designing and implementing_android_uis_for_phones_and_tablets
Designing and implementing_android_uis_for_phones_and_tablets
Teddy Koornia
 
Android UX & Design
Android UX & Design
Jesse Weed
 
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
AndiNurkholis1
 
User experience and interactions design
User experience and interactions design
Rakesh Jha
 
Build a user experience on Android
Build a user experience on Android
Eyal Lezmy
 
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Motorola Mobility - MOTODEV
 
ANDROID DESIGN GUIDELINES
ANDROID DESIGN GUIDELINES
Istiaque Reza
 
Ad

More from Justin Lee (20)

2023/04/19 學習中的AI 如何幫助孩子有效學習
2023/04/19 學習中的AI 如何幫助孩子有效學習
Justin Lee
 
2014/01/12 旅人的府城漫步
2014/01/12 旅人的府城漫步
Justin Lee
 
20130614 Titanium簡介@政大資科
20130614 Titanium簡介@政大資科
Justin Lee
 
20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享
20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享
Justin Lee
 
2013/05/19 Sketching with code@JSDC2013
2013/05/19 Sketching with code@JSDC2013
Justin Lee
 
[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介
Justin Lee
 
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
Justin Lee
 
App使用者經驗設計
App使用者經驗設計
Justin Lee
 
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
Justin Lee
 
20110525[Taipei GTUG] titanium mobile簡介
20110525[Taipei GTUG] titanium mobile簡介
Justin Lee
 
Sketching User Experience—Video Sketching
Sketching User Experience—Video Sketching
Justin Lee
 
How I Use Google Technology to Enhance Travel Experience
How I Use Google Technology to Enhance Travel Experience
Justin Lee
 
20100915 學習撰寫 Google Chrome Extension
20100915 學習撰寫 Google Chrome Extension
Justin Lee
 
談如何發展具有破壞力的創新構想
談如何發展具有破壞力的創新構想
Justin Lee
 
Interaction Design & Industrial Design In 3C Industry
Interaction Design & Industrial Design In 3C Industry
Justin Lee
 
USB 3.0 Intro
USB 3.0 Intro
Justin Lee
 
User Experience Design
User Experience Design
Justin Lee
 
2009/04/19 ui gathering專題演講媒材、設計與適應性思考
2009/04/19 ui gathering專題演講媒材、設計與適應性思考
Justin Lee
 
2023/04/19 學習中的AI 如何幫助孩子有效學習
2023/04/19 學習中的AI 如何幫助孩子有效學習
Justin Lee
 
2014/01/12 旅人的府城漫步
2014/01/12 旅人的府城漫步
Justin Lee
 
20130614 Titanium簡介@政大資科
20130614 Titanium簡介@政大資科
Justin Lee
 
20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享
20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享
Justin Lee
 
2013/05/19 Sketching with code@JSDC2013
2013/05/19 Sketching with code@JSDC2013
Justin Lee
 
[ICOS2013] Appcelerator Titanium簡介
[ICOS2013] Appcelerator Titanium簡介
Justin Lee
 
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
Justin Lee
 
App使用者經驗設計
App使用者經驗設計
Justin Lee
 
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
Justin Lee
 
20110525[Taipei GTUG] titanium mobile簡介
20110525[Taipei GTUG] titanium mobile簡介
Justin Lee
 
Sketching User Experience—Video Sketching
Sketching User Experience—Video Sketching
Justin Lee
 
How I Use Google Technology to Enhance Travel Experience
How I Use Google Technology to Enhance Travel Experience
Justin Lee
 
20100915 學習撰寫 Google Chrome Extension
20100915 學習撰寫 Google Chrome Extension
Justin Lee
 
談如何發展具有破壞力的創新構想
談如何發展具有破壞力的創新構想
Justin Lee
 
Interaction Design & Industrial Design In 3C Industry
Interaction Design & Industrial Design In 3C Industry
Justin Lee
 
User Experience Design
User Experience Design
Justin Lee
 
2009/04/19 ui gathering專題演講媒材、設計與適應性思考
2009/04/19 ui gathering專題演講媒材、設計與適應性思考
Justin Lee
 

Recently uploaded (20)

最新版意大利布雷西亚自由美术学院毕业证(LABA毕业证书)原版定制
最新版意大利布雷西亚自由美术学院毕业证(LABA毕业证书)原版定制
taqyea
 
brain anatomy physiology 2025 short.pptx
brain anatomy physiology 2025 short.pptx
MohamedHany892810
 
Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdf
Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdf
Dr. Rema
 
Bethany Michels Architecture Portfolio.pdf
Bethany Michels Architecture Portfolio.pdf
Bethany Michels
 
LRC image social media marketing class design
LRC image social media marketing class design
yeshwimbu
 
The-Future-of-Fashion-in-Singapore-Moushumi-Khara.pdf
The-Future-of-Fashion-in-Singapore-Moushumi-Khara.pdf
The Lifestyle Editor
 
Architect list in Bangalore. Architects list in Bangalore.pdf
Architect list in Bangalore. Architects list in Bangalore.pdf
Tejas758706
 
Design _of RC _Structure_Presentation.pptx
Design _of RC _Structure_Presentation.pptx
htunhtunLinn6
 
Genting Kecamatan Samadua Tahun 2025.pptx
Genting Kecamatan Samadua Tahun 2025.pptx
fazrulichsanmilan
 
COMMERCE.pdfdxxcchbbnnnnbbnxxcvvvvvvbbbbbbbbbbbbb
COMMERCE.pdfdxxcchbbnnnnbbnxxcvvvvvvbbbbbbbbbbbbb
shivanshsahu0108
 
overview visual graphic design for SHS.pptx
overview visual graphic design for SHS.pptx
KarlVincentNonog
 
roadsafety_training_manual_unit_1_magnitude_and_impact.ppt
roadsafety_training_manual_unit_1_magnitude_and_impact.ppt
mbkl05cctjv
 
Smart_Sustainable_Civil_Engineering_PPT.pptx
Smart_Sustainable_Civil_Engineering_PPT.pptx
venkateshreddy0792
 
最新版美国威斯康星大学普拉特维尔分校毕业证(UWP毕业证书)原版定制
最新版美国威斯康星大学普拉特维尔分校毕业证(UWP毕业证书)原版定制
taqyea
 
LAVIELACE - Collections portfolio showcase
LAVIELACE - Collections portfolio showcase
Geo Lupascu
 
The power of storytelling in design.pdf
The power of storytelling in design.pdf
Zohaib421
 
Ideo on friction - resource to aid you in that process
Ideo on friction - resource to aid you in that process
vikram sood
 
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
hazlienasyiqeen
 
Give Your Salon a Gorgeous Makeover with Interior Designs That Reflect Your P...
Give Your Salon a Gorgeous Makeover with Interior Designs That Reflect Your P...
SPL Interiors
 
research proposal on IDA By dr waleed zaheen.pptx
research proposal on IDA By dr waleed zaheen.pptx
waleedzaheen1
 
最新版意大利布雷西亚自由美术学院毕业证(LABA毕业证书)原版定制
最新版意大利布雷西亚自由美术学院毕业证(LABA毕业证书)原版定制
taqyea
 
brain anatomy physiology 2025 short.pptx
brain anatomy physiology 2025 short.pptx
MohamedHany892810
 
Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdf
Transformative Storytelling_ Insights from the Sankofa Writing Intensive.pdf
Dr. Rema
 
Bethany Michels Architecture Portfolio.pdf
Bethany Michels Architecture Portfolio.pdf
Bethany Michels
 
LRC image social media marketing class design
LRC image social media marketing class design
yeshwimbu
 
The-Future-of-Fashion-in-Singapore-Moushumi-Khara.pdf
The-Future-of-Fashion-in-Singapore-Moushumi-Khara.pdf
The Lifestyle Editor
 
Architect list in Bangalore. Architects list in Bangalore.pdf
Architect list in Bangalore. Architects list in Bangalore.pdf
Tejas758706
 
Design _of RC _Structure_Presentation.pptx
Design _of RC _Structure_Presentation.pptx
htunhtunLinn6
 
Genting Kecamatan Samadua Tahun 2025.pptx
Genting Kecamatan Samadua Tahun 2025.pptx
fazrulichsanmilan
 
COMMERCE.pdfdxxcchbbnnnnbbnxxcvvvvvvbbbbbbbbbbbbb
COMMERCE.pdfdxxcchbbnnnnbbnxxcvvvvvvbbbbbbbbbbbbb
shivanshsahu0108
 
overview visual graphic design for SHS.pptx
overview visual graphic design for SHS.pptx
KarlVincentNonog
 
roadsafety_training_manual_unit_1_magnitude_and_impact.ppt
roadsafety_training_manual_unit_1_magnitude_and_impact.ppt
mbkl05cctjv
 
Smart_Sustainable_Civil_Engineering_PPT.pptx
Smart_Sustainable_Civil_Engineering_PPT.pptx
venkateshreddy0792
 
最新版美国威斯康星大学普拉特维尔分校毕业证(UWP毕业证书)原版定制
最新版美国威斯康星大学普拉特维尔分校毕业证(UWP毕业证书)原版定制
taqyea
 
LAVIELACE - Collections portfolio showcase
LAVIELACE - Collections portfolio showcase
Geo Lupascu
 
The power of storytelling in design.pdf
The power of storytelling in design.pdf
Zohaib421
 
Ideo on friction - resource to aid you in that process
Ideo on friction - resource to aid you in that process
vikram sood
 
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
hazlienasyiqeen
 
Give Your Salon a Gorgeous Makeover with Interior Designs That Reflect Your P...
Give Your Salon a Gorgeous Makeover with Interior Designs That Reflect Your P...
SPL Interiors
 
research proposal on IDA By dr waleed zaheen.pptx
research proposal on IDA By dr waleed zaheen.pptx
waleedzaheen1
 

Android 4.0 UI Design Tips

  • 1. Android 4.0 UI Design Tips Justin Lee
  • 3. Evolution of Android Android 2.3 Android 3.0 Android 4.0 Gingerbread Honeycomb Ice Cream Sandwich
  • 4. One OS for Smartphones & Tablets
  • 5. Topics Major UI Changes Design Patterns Do and Don’t
  • 8. Android is not easy to learn http://www.pocket-lint.com/news/40615/78-android-tips-beginners-set-up
  • 10. ICS drop hardware buttons screen Gingerbread ICS
  • 11. Software Buttons are dynamic Landscape Left Landscape Right
  • 12. Back Home Recents
  • 15. Menu button is NOT longer a primary button Gingerbread ICS
  • 16. Quiz: How to goto settings page?
  • 17. Not to many people can get it by themselves
  • 18. ICS make the menu much more easy to find
  • 19. The menu button in legacy app still available on ICS
  • 20. But it’s time to say goodbye http://android-developers.blogspot.com/2012/01/say-goodbye-to-menu-button.html
  • 21. Migrate the global actions to the action bar & action overflow Old New
  • 22. Split action bar for contextual actions Old New
  • 23. Backwards compatibility Legacy hardware Legacy software http://developer.android.com/design/patterns/compatibility.html
  • 25. The behavior of back button is inconsistent from user’s POV ?
  • 26. In app navigation is much more predictable
  • 28. Home button perform too many functions before ICS tap tap long press
  • 29. The only function of home button on ICS is going home
  • 30. How to goto a recent app?
  • 32. Tap recents button to show recent app list
  • 33. The new recents screen tap to switch swipe to remove
  • 34. Long press gesture changed Old New Open contextual menu Select the item
  • 35. App UI Design Patterns
  • 36. Common App UI 1.Main Action Bar 2.View Control 3.Content Area 4.Split Action Bar http://developer.android.com/design/get-started/ui-overview.html
  • 37. General App Structure Top level views Category views Detail/edit view
  • 38. New in ICS 1.Navigation Bar 2.Action Bar 3.Multi-pane layouts 4.Selection http://developer.android.com/design/patterns/new-4-0.html
  • 39. Navigation Back Up system & in-app In-app navigation navigation http://developer.android.com/design/patterns/navigation.html
  • 40. Swipe Views Swiping Between Detail Views Swiping Between Tabs http://developer.android.com/design/patterns/swipe-views.html
  • 41. Action Bar 1.App icon 2.View Control 3.Action Buttons 4.Action overflow http://developer.android.com/design/patterns/actionbar.html
  • 42. Split Action Bars 1.Main action bar 2.Top bar 3.Bottom Bar http://developer.android.com/design/patterns/actionbar.html
  • 43. Multi-pane layouts Smartphone Tablet http://developer.android.com/design/patterns/multi-pane-layouts.html
  • 44. Selection Contextual action bar Long press on an item in list to select Dynamically adjust CAB actions http://developer.android.com/design/patterns/selection.html
  • 47. Do make the large, obvious tap targets Touchable UI components are generally laid out along 48dp units. http://www.slideshare.net/AndroidDev/android-ui-design-tips http://developer.android.com/design/style/metrics-grids.html
  • 48. Do use screen density independent units (dp) not density independent (px) density independent (dp) http://developer.android.com/guide/practices/screens_support.html
  • 49. Do create versions of all resources for high density screens http://developer.android.com/design/style/devices-displays.html
  • 50. Do properly handle orientation changes Stretch/compress Expand/collapse Stack Show/hide http://developer.android.com/design/style/devices-displays.html
  • 51. Do follow Android icon guideline Launcher Launcher Action Bar http://developer.android.com/design/style/iconography.html
  • 52. Don't mimic UI elements from other platforms Android iOS Windows Phone 7 http://developer.android.com/design/patterns/pure-android.html
  • 53. Don't mimic UI elements from other platforms Android iOS Windows Phone 7 http://developer.android.com/design/patterns/pure-android.html
  • 54. Don't use bottom tab bars http://developer.android.com/design/patterns/pure-android.html
  • 55. Don't use labeled back buttons on action bars http://developer.android.com/design/patterns/pure-android.html
  • 56. Don't use right-pointing carets on line items http://developer.android.com/design/patterns/pure-android.html