SlideShare a Scribd company logo
1 of 30
Android UI Design and UX for Tablets	
Nobuya Sato, Seesmic 	
July 17th 2011 (Revised Version)   @nobsato #ABC2011s	
                                                          seesmic.com
Introduce myself	
-    大学では工業デザイン学科
-    CD-ROM、3DCG、ゲームUI、Web、etc
-    外資系Web制作会社でIAやUX、Web戦略
-    ソニーで全社的なUXプラットフォーム戦略
-    米Seesmicでプロダクトの品質向上と日本語化	




                             seesmic.com
Android, android, android …	
HTC G1                GALAXT Tab 10.1
Google Ion            Optimus Pad
HTC Hero              HTC EVO View 4G	
Motorola MILESTONE
Xperia X10 mini pro
Nexus One
HTC EVO 4G
HTC Desire
HTC Wildfire
Nexus S
Xperia PLAY 	
                                          seesmic.com
Not only Droid…	
Got iPhone on July 17, 2007	




                                seesmic.com
Do you know there is an
official Android UI Design
Guidelines?	




                             seesmic.com
It’s Not about “UI” Guidelines	




                             seesmic.com
About “UI Design” Guidelines	




                             seesmic.com
About native app (local UI),
not about Web app (HTML/JS)	




                          seesmic.com
Android is not iOS	




                       seesmic.com
It’s not an iPhone/iPad world	




                             seesmic.com
Android UI design guidelines	




                             seesmic.com
UI design at Google I/O 2010	




                   http://bit.ly/IO2010AndroidUI
                                         seesmic.com
Android UI design patterns	
-    Dashboard
-    Action Bar
-    Search Bar
-    Quick Actions
-    Companion Widget 	




                               seesmic.com
UI pattern: Dashboard	




                   Google I/O 2010 “Android UI Design Patterns”より転載 	

                                                   seesmic.com
UI pattern: Action Bar	




                    Google I/O 2010 “Android UI Design Patterns”より転載 	

                                                    seesmic.com
UI pattern: Search Bar	




                    Google I/O 2010 “Android UI Design Patterns”より転載 	

                                                    seesmic.com
UI pattern: Quick Action	




                    Google I/O 2010 “Android UI Design Patterns”より転載 	

                                                    seesmic.com
UI pattern: Companion Widget	




                  Google I/O 2010 “Android UI Design Patterns”より転載 	

                                                  seesmic.com
Implementing UI patterns:
Seesmic for Android	




                            seesmic.com
UI design at Google I/O 2011	




                 http://bit.ly/IO2011AndroidUI
                 http://bit.ly/IO20011AndroidUI_movi
                 	
                        seesmic.com
Honeycomb UI elements	




                          seesmic.com
UI design patterns for HC	
-    Action Bar → Now, supported by SDK Framework!	
-    App Navigation
-    Multi-pane Layouts
-    Beyond the List	




                                                       seesmic.com
HC UI pattern: Action Bar	
App Icon	
                                                                    Option Menu	




             Selection Menu	
                                                                              Action Menu	




                                Google I/O 2011 “Designing and Implementing Android Uis for Phones and Tablets”より転載 	

                                                                                                    seesmic.com
HC UI pattern: Multi-pan Layouts	




            Google I/O 2011 “Designing and Implementing Android Uis for Phones and Tablets”より転載 	

                                                                                seesmic.com
Developing new HC UI:
Seesmic for Honeycomb	




                          seesmic.com
Preview at Google I/O 2012	




Google I/O 2011: LG Girl Demos Seesmic for
Honeycomb on LG’s new G-Slate‬
                                   http://bit.ly/IO2011_SeesmicHD 	
                                                            seesmic.com
HC tablet (8-10) on hands?	




                           seesmic.com
User’s manipulation on HC	
                                Right Index finger Touch Point	
                                                   Right or Left
                                                   Index Finger
                                                   Navigational
                                                   Point	




Left Thumb Reachable Area	
   Right Thumb Reachable Area	
                                                      seesmic.com
About Seesmic
 -    2007にLoic Le Meurによって起業
 -    米国サンフランシスコ本社+欧州に3拠点	
 -    様々なプラットフォームでSNSツールを提供
 -    Desktop向けには80以上のSNSプラグイン
 -    Androidは100万ダウンロード達成!




全てのブラウザから	
   モバイルで何処からでも	
   パワフルなカスタマイズ機能	



                                         seesmic.com
Thank you!	




Seesmic
seesmic.com




1550 Bryant Street, Suite 890
San Francisco, CA 94103, USA

                                seesmic.com

More Related Content

Similar to ABC2011 Summer: Android UI and UX for the Tablets

Responsive design mobile_apps
Responsive design mobile_appsResponsive design mobile_apps
Responsive design mobile_apps
Gorilla Group
 

Similar to ABC2011 Summer: Android UI and UX for the Tablets (20)

Mobile User Interface Development Challenges and Trade-offs
Mobile User Interface Development Challenges and Trade-offsMobile User Interface Development Challenges and Trade-offs
Mobile User Interface Development Challenges and Trade-offs
 
Interaction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile ConstraintsInteraction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile Constraints
 
Mobile development basics and trends - tech day 2015
Mobile development   basics and trends - tech day 2015Mobile development   basics and trends - tech day 2015
Mobile development basics and trends - tech day 2015
 
Socialcam App of the week
Socialcam App of the weekSocialcam App of the week
Socialcam App of the week
 
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design ResourcesiPad/iPhone - UI Design Resources
iPad/iPhone - UI Design Resources
 
Responsive Web Cross-Media and Mobile
Responsive Web Cross-Media and MobileResponsive Web Cross-Media and Mobile
Responsive Web Cross-Media and Mobile
 
UI_UX_Design.pptx
UI_UX_Design.pptxUI_UX_Design.pptx
UI_UX_Design.pptx
 
Interactive cues in flat design
Interactive cues in flat designInteractive cues in flat design
Interactive cues in flat design
 
Responsive design mobile_apps
Responsive design mobile_appsResponsive design mobile_apps
Responsive design mobile_apps
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild West
 
Mobile UX Prototyping with Ionic
Mobile UX Prototyping with IonicMobile UX Prototyping with Ionic
Mobile UX Prototyping with Ionic
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
 
Top wireframing tools for mobile apps
Top wireframing tools for mobile appsTop wireframing tools for mobile apps
Top wireframing tools for mobile apps
 
Mobile Human interface giude
Mobile Human interface giudeMobile Human interface giude
Mobile Human interface giude
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Native vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile applicationNative vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile application
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
 
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
 
Devoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with FlexDevoxx 2010: Develop mobile applications with Flex
Devoxx 2010: Develop mobile applications with Flex
 

More from Nobuya Sato

IA Workshop, Introduction to Information Architecture (2002)
IA Workshop, Introduction to Information Architecture (2002)IA Workshop, Introduction to Information Architecture (2002)
IA Workshop, Introduction to Information Architecture (2002)
Nobuya Sato
 

More from Nobuya Sato (20)

Google I/O 19 Extended in Kyushu: Design Update
Google I/O 19 Extended in Kyushu: Design UpdateGoogle I/O 19 Extended in Kyushu: Design Update
Google I/O 19 Extended in Kyushu: Design Update
 
ABC2018 Autumn: Android PIe UI Design
ABC2018 Autumn:  Android PIe UI DesignABC2018 Autumn:  Android PIe UI Design
ABC2018 Autumn: Android PIe UI Design
 
ABC2018 Spring: CxD: Conversation Designの理解
ABC2018 Spring:  CxD: Conversation Designの理解ABC2018 Spring:  CxD: Conversation Designの理解
ABC2018 Spring: CxD: Conversation Designの理解
 
Google I/O 18 Extended in Shinshu: Material Design Update
Google I/O 18 Extended in Shinshu: Material Design UpdateGoogle I/O 18 Extended in Shinshu: Material Design Update
Google I/O 18 Extended in Shinshu: Material Design Update
 
Google I/O 17 Recap in Shikoku: Design Sprint Workshop
Google I/O 17 Recap in Shikoku: Design Sprint WorkshopGoogle I/O 17 Recap in Shikoku: Design Sprint Workshop
Google I/O 17 Recap in Shikoku: Design Sprint Workshop
 
Design-JP Vol.02: Lighting Talk: Interaction Idea?
Design-JP Vol.02: Lighting Talk: Interaction Idea?Design-JP Vol.02: Lighting Talk: Interaction Idea?
Design-JP Vol.02: Lighting Talk: Interaction Idea?
 
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
 
IA CAMP 2015: As Yet Untitled
IA CAMP 2015: As Yet UntitledIA CAMP 2015: As Yet Untitled
IA CAMP 2015: As Yet Untitled
 
ABC2014 Winter: Material Design
ABC2014 Winter: Material DesignABC2014 Winter: Material Design
ABC2014 Winter: Material Design
 
ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014ABC2014 Spring: UI/UX Design Trends 2014
ABC2014 Spring: UI/UX Design Trends 2014
 
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
 
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
 
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX DesignSmartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
 
Find Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web CreatorFind Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web Creator
 
What’s New on Android Design (for 4.1)
What’s New on Android Design (for 4.1)What’s New on Android Design (for 4.1)
What’s New on Android Design (for 4.1)
 
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
 
Google I/O 2012 Tokyo Report: Vietnam Carb and Android Design Sessions
Google I/O 2012 Tokyo Report: Vietnam Carb and Android Design SessionsGoogle I/O 2012 Tokyo Report: Vietnam Carb and Android Design Sessions
Google I/O 2012 Tokyo Report: Vietnam Carb and Android Design Sessions
 
ABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for DummiesABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for Dummies
 
Android Design Club #1: Introduction to Design
Android Design Club #1: Introduction to DesignAndroid Design Club #1: Introduction to Design
Android Design Club #1: Introduction to Design
 
IA Workshop, Introduction to Information Architecture (2002)
IA Workshop, Introduction to Information Architecture (2002)IA Workshop, Introduction to Information Architecture (2002)
IA Workshop, Introduction to Information Architecture (2002)
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Recently uploaded (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 

ABC2011 Summer: Android UI and UX for the Tablets

  • 1. Android UI Design and UX for Tablets Nobuya Sato, Seesmic July 17th 2011 (Revised Version) @nobsato #ABC2011s seesmic.com
  • 2. Introduce myself -  大学では工業デザイン学科 -  CD-ROM、3DCG、ゲームUI、Web、etc -  外資系Web制作会社でIAやUX、Web戦略 -  ソニーで全社的なUXプラットフォーム戦略 -  米Seesmicでプロダクトの品質向上と日本語化 seesmic.com
  • 3. Android, android, android … HTC G1 GALAXT Tab 10.1 Google Ion Optimus Pad HTC Hero HTC EVO View 4G Motorola MILESTONE Xperia X10 mini pro Nexus One HTC EVO 4G HTC Desire HTC Wildfire Nexus S Xperia PLAY seesmic.com
  • 4. Not only Droid… Got iPhone on July 17, 2007 seesmic.com
  • 5. Do you know there is an official Android UI Design Guidelines? seesmic.com
  • 6. It’s Not about “UI” Guidelines seesmic.com
  • 7. About “UI Design” Guidelines seesmic.com
  • 8. About native app (local UI), not about Web app (HTML/JS) seesmic.com
  • 9. Android is not iOS seesmic.com
  • 10. It’s not an iPhone/iPad world seesmic.com
  • 11. Android UI design guidelines seesmic.com
  • 12. UI design at Google I/O 2010 http://bit.ly/IO2010AndroidUI seesmic.com
  • 13. Android UI design patterns -  Dashboard -  Action Bar -  Search Bar -  Quick Actions -  Companion Widget seesmic.com
  • 14. UI pattern: Dashboard Google I/O 2010 “Android UI Design Patterns”より転載 seesmic.com
  • 15. UI pattern: Action Bar Google I/O 2010 “Android UI Design Patterns”より転載 seesmic.com
  • 16. UI pattern: Search Bar Google I/O 2010 “Android UI Design Patterns”より転載 seesmic.com
  • 17. UI pattern: Quick Action Google I/O 2010 “Android UI Design Patterns”より転載 seesmic.com
  • 18. UI pattern: Companion Widget Google I/O 2010 “Android UI Design Patterns”より転載 seesmic.com
  • 19. Implementing UI patterns: Seesmic for Android seesmic.com
  • 20. UI design at Google I/O 2011 http://bit.ly/IO2011AndroidUI http://bit.ly/IO20011AndroidUI_movi seesmic.com
  • 21. Honeycomb UI elements seesmic.com
  • 22. UI design patterns for HC -  Action Bar → Now, supported by SDK Framework! -  App Navigation -  Multi-pane Layouts -  Beyond the List seesmic.com
  • 23. HC UI pattern: Action Bar App Icon Option Menu Selection Menu Action Menu Google I/O 2011 “Designing and Implementing Android Uis for Phones and Tablets”より転載 seesmic.com
  • 24. HC UI pattern: Multi-pan Layouts Google I/O 2011 “Designing and Implementing Android Uis for Phones and Tablets”より転載 seesmic.com
  • 25. Developing new HC UI: Seesmic for Honeycomb seesmic.com
  • 26. Preview at Google I/O 2012 Google I/O 2011: LG Girl Demos Seesmic for Honeycomb on LG’s new G-Slate‬ http://bit.ly/IO2011_SeesmicHD seesmic.com
  • 27. HC tablet (8-10) on hands? seesmic.com
  • 28. User’s manipulation on HC Right Index finger Touch Point Right or Left Index Finger Navigational Point Left Thumb Reachable Area Right Thumb Reachable Area seesmic.com
  • 29. About Seesmic -  2007にLoic Le Meurによって起業 -  米国サンフランシスコ本社+欧州に3拠点 -  様々なプラットフォームでSNSツールを提供 -  Desktop向けには80以上のSNSプラグイン -  Androidは100万ダウンロード達成! 全てのブラウザから モバイルで何処からでも パワフルなカスタマイズ機能 seesmic.com
  • 30. Thank you! Seesmic seesmic.com 1550 Bryant Street, Suite 890 San Francisco, CA 94103, USA seesmic.com