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

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 JonFerraiolo
 
Interaction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile ConstraintsInteraction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile ConstraintsMohammad Shaker
 
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 2015Leandro Cordeiro David
 
Socialcam App of the week
Socialcam App of the weekSocialcam App of the week
Socialcam App of the weekSojoSolutions
 
iPad/iPhone - UI Design Resources
iPad/iPhone - UI Design ResourcesiPad/iPhone - UI Design Resources
iPad/iPhone - UI Design ResourcesMichael Moir
 
Responsive Web Cross-Media and Mobile
Responsive Web Cross-Media and MobileResponsive Web Cross-Media and Mobile
Responsive Web Cross-Media and MobileMatthew Snyder
 
Interactive cues in flat design
Interactive cues in flat designInteractive cues in flat design
Interactive cues in flat designMing-Liang Liu
 
Responsive design mobile_apps
Responsive design mobile_appsResponsive design mobile_apps
Responsive design mobile_appsGorilla Group
 
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 WestGinsburg Design
 
Mobile UX Prototyping with Ionic
Mobile UX Prototyping with IonicMobile UX Prototyping with Ionic
Mobile UX Prototyping with IonicMatthew Sital-Singh
 
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...Shane Church
 
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?Effective
 
Top wireframing tools for mobile apps
Top wireframing tools for mobile appsTop wireframing tools for mobile apps
Top wireframing tools for mobile appsMindInventory
 
Mobile Human interface giude
Mobile Human interface giudeMobile Human interface giude
Mobile Human interface giudePragati Singh
 
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-10Almog Koren
 
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 applicationLoic Ortola
 
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 DevelopmentNick Landry
 
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...Katy Slemon
 
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 FlexMichael Chaize
 

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

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 UpdateNobuya Sato
 
ABC2018 Autumn: Android PIe UI Design
ABC2018 Autumn:  Android PIe UI DesignABC2018 Autumn:  Android PIe UI Design
ABC2018 Autumn: Android PIe UI DesignNobuya Sato
 
ABC2018 Spring: CxD: Conversation Designの理解
ABC2018 Spring:  CxD: Conversation Designの理解ABC2018 Spring:  CxD: Conversation Designの理解
ABC2018 Spring: CxD: Conversation Designの理解Nobuya Sato
 
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 UpdateNobuya Sato
 
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 WorkshopNobuya Sato
 
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?Nobuya Sato
 
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 SprintNobuya Sato
 
IA CAMP 2015: As Yet Untitled
IA CAMP 2015: As Yet UntitledIA CAMP 2015: As Yet Untitled
IA CAMP 2015: As Yet UntitledNobuya Sato
 
ABC2014 Winter: Material Design
ABC2014 Winter: Material DesignABC2014 Winter: Material Design
ABC2014 Winter: Material DesignNobuya Sato
 
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 2014Nobuya Sato
 
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デザインの極意Nobuya Sato
 
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)Nobuya Sato
 
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 DesignNobuya Sato
 
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 CreatorNobuya Sato
 
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)Nobuya Sato
 
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザインNobuya Sato
 
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 SessionsNobuya Sato
 
ABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for DummiesABC2012 Spring: Android Design for Dummies
ABC2012 Spring: Android Design for DummiesNobuya Sato
 
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 DesignNobuya 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

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 

Recently uploaded (20)

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 

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