SlideShare a Scribd company logo
1 of 70
Beautifully Usable, Multiple Screens Too Suzanne Alexandra
@suzalex  @motodev Suzanne Alexandra
the piano staircase http://moto.ly/pianostaircase
the goal graceful, natural, effortless communication between user, device, and application
smartphones screen sizes screen densities android versions device features tablets 7-inch, 8-inch, 10-inch natural portrait, natural landscape gingerbread, honeycomb, ice cream sandwich
″ Massive technological disruptions create big market opportunities.  Tablets  are clearly disrupting numerous markets, and I think now is the right time to place  big bets  on the tablet market  --  and the platform we are betting on is  Android .″ Mark Williamson CEO and Cofounder
what is
what can be
what can be
but how?
functional beautiful whimsical emotional
stacked image galleries
content from many sources
sources timeline
the challenge image size and quality
<ImageView  xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;300dp&quot;  android:layout_height=&quot;200dp&quot;  > </ImageView> be scalable Smartphones, 2.3+ 10-inch tablets, 3.2+ 150 dp by 100 dp
public View getView( int position, View convertView, ViewGroup parent) { LayoutInflater inflater = getLayoutInflater(); ImageView i = (ImageView) inflater.inflate( R.layout.image, parent, false ); i.setImageResource(mImageIds[position]); i.setScaleType(ImageView.ScaleType. FIT_XY ); i.setBackgroundResource(mGalleryItemBackground); return i; } override getView()
BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = false; options.inDither = false; options.inScaled = false; options.inPreferredConfig = Bitmap.Config.ARGB_8888; options.inTargetDensity = screenDensity;  // 160 dpi Bitmap bitmap =  BitmapFactory.decodeResource(getResources(),    R.drawable.sample_0, options); use BitmapFactory.Options()
functional beautiful whimsical emotional
center stage
the spread
most important content at  screen center controls and metadata around it
 
the challenge watch the orientation change
<RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:orientation=&quot;vertical&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_parent&quot;> <ImageView android:id=&quot;@+id/myimage&quot; ... /> <include android:id=&quot;@+id/metadata&quot;   layout=&quot;@layout/metadata&quot;   android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot;   ... /> </RelativeLayout> use <include>
functional beautiful whimsical emotional
scrollable layouts
vertical scrollview
 
ice cream sandwich left-to-right swipes
catalogue by thefind plume news360
HorizontalScrollView
ViewPager layout PagerAdapter views Android Developers Blog  http://bit.ly/oef2fy
functional beautiful whimsical emotional
static sidebar
action bars important functions easily available   your app looks like an android app   available on smartphones and tablets
evernote
peripheral vs central vision specific objects overview of scene
evernote global secondary or contextual global primary
[object Object],[object Object],[object Object],[object Object]
hicks law time it takes to make a decision increases as the number of alternatives increase fitts law time to move to a target depends on distance to and size of the target
evernote be careful here
tablet to smartphone
functional beautiful whimsical emotional
hide and show fragments
watch the orientation change
stacking is better
 
FragmentTransaction ft =   getFragmentManager().beginTransaction()   ; ft.setCustomAnimations(  R.anim.slide_in_left , R.anim.slide_out_right  ); DetailsFragment newFragment = DetailsFragment.newInstance(); ft.replace ( R.id.details_fragment_container,  newFragment, &quot;detailFragment&quot;); // Start the animated transition. ft.commit(); slide fragments
public void onClick(View v) {    FragmentTransaction ft =  getFragmentManager().beginTransaction();                ft.setCustomAnimations( android.R.animator.fade_in, android.R.animator.fade_out);        if (  fragment.isHidden()  ) {             ft.show(fragment);           button.setText(&quot;Hide&quot;);       } else {             ft.hide(fragment);           button.setText(&quot;Show&quot;)       }        ft.commit(); } use show() and hide()
ok. what was that  animation part?
<set> <objectAnimator  xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:duration=&quot;500&quot; android:valueFrom=&quot;-1280&quot; android:valueTo=&quot;0&quot; android:valueType=&quot;floatType&quot; android:propertyName=&quot;x&quot;  /> </set> create an xml animation
if (fragment.isHidden()) { ft.setCustomAnimations(   R.anim.infromleft, R.anim.outtoleft); ft.show(fragment); button.setText(&quot;Hide&quot;); } set the custom animation
tablet to smartphone
functional beautiful whimsical emotional
so. how do we get whimsical?
playfulness sets your app apart
playfulness sets your app apart engagement of the  heart
flipping lists
What would it be like to shop in several languages?
 
<uses-sdk    android:minSdkVersion=&quot; 11 &quot; android:targetSdkVersion=&quot; 13 &quot; /> new package android.animation
<LinearLayout  … > <ListView android:id= &quot;@+id/list_en&quot; android:layout_width=&quot;match_parent&quot; android:layout_weight=&quot;1&quot; android:layout_height=&quot;match_parent&quot; /> <ListView android:id= &quot;@+id/list_es&quot; android:layout_width=&quot;match_parent&quot; android:layout_weight=&quot;1&quot; android:layout_height=&quot;match_parent&quot; android:visibility=&quot;gone&quot;  /> </LinearLayout> two listview elements
ObjectAnimator visToInvis = ObjectAnimator.ofFloat(   visibleList, &quot;rotationY&quot;, 0f, 90f); visToInvis.setDuration(500); visToInvis.setInterpolator(accelerator); final ObjectAnimator invisToVis =   ObjectAnimator.ofFloat(   invisibleList, &quot;rotationY&quot;, -90f, 0f); invisToVis.setDuration(500); invisToVis.setInterpolator(decelerator); and an objectanimator
functional beautiful whimsical emotional
so what's an example of  emotional ?
youtube
questions? @suzalex @motodev http://moto.ly/techlibrary more ui patterns
MOTODEV developer.motorola.com ,[object Object],[object Object],[object Object]
LEGAL   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],MOTOROLA and the Stylized M Logo are trademarks or registered trademarks of Motorola Trademark Holdings, LLC. All other trademarks are the property of their respective owners.  © 2011 Motorola Mobility, Inc.  All rights reserved.

More Related Content

Similar to Ui patterns

Getting the Magic on Android Tablets
Getting the Magic on Android TabletsGetting the Magic on Android Tablets
Getting the Magic on Android TabletsOSCON Byrum
 
Building apps for multiple devices
Building apps for multiple devicesBuilding apps for multiple devices
Building apps for multiple devicesTerry Ryan
 
Beginning Android Flash Development
Beginning Android Flash DevelopmentBeginning Android Flash Development
Beginning Android Flash DevelopmentStephen Chin
 
21 android2 updated
21 android2 updated21 android2 updated
21 android2 updatedGhanaGTUG
 
Android Flash Development
Android Flash DevelopmentAndroid Flash Development
Android Flash DevelopmentStephen Chin
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile WidgetsJose Palazon
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsRicardo Varela
 
Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15sullis
 
SDC2013 : Monetization
SDC2013 : MonetizationSDC2013 : Monetization
SDC2013 : MonetizationYongSik Jeong
 
Advanced Android gReporter
Advanced Android gReporterAdvanced Android gReporter
Advanced Android gReporternatdefreitas
 
Mobile Software Engineering Crash Course - C03 Android
Mobile Software Engineering Crash Course - C03 AndroidMobile Software Engineering Crash Course - C03 Android
Mobile Software Engineering Crash Course - C03 AndroidMohammad Shaker
 

Similar to Ui patterns (20)

Getting the Magic on Android Tablets
Getting the Magic on Android TabletsGetting the Magic on Android Tablets
Getting the Magic on Android Tablets
 
Getting the Magic on Android Tablets
Getting the Magic on Android TabletsGetting the Magic on Android Tablets
Getting the Magic on Android Tablets
 
Building apps for multiple devices
Building apps for multiple devicesBuilding apps for multiple devices
Building apps for multiple devices
 
Beginning Android Flash Development
Beginning Android Flash DevelopmentBeginning Android Flash Development
Beginning Android Flash Development
 
Developing in android
Developing in androidDeveloping in android
Developing in android
 
Geekcamp Android
Geekcamp AndroidGeekcamp Android
Geekcamp Android
 
21 android2 updated
21 android2 updated21 android2 updated
21 android2 updated
 
Working with Multiple Android Screens
Working with Multiple Android ScreensWorking with Multiple Android Screens
Working with Multiple Android Screens
 
Your First Adobe Flash Application for Android
Your First Adobe Flash Application for AndroidYour First Adobe Flash Application for Android
Your First Adobe Flash Application for Android
 
Windows 8 Developer Preview
Windows 8 Developer PreviewWindows 8 Developer Preview
Windows 8 Developer Preview
 
Migrating JavaME Apps to Android
Migrating JavaME Apps to AndroidMigrating JavaME Apps to Android
Migrating JavaME Apps to Android
 
Android Flash Development
Android Flash DevelopmentAndroid Flash Development
Android Flash Development
 
AIR & API
AIR & APIAIR & API
AIR & API
 
BluePrint Mobile Framework
BluePrint Mobile FrameworkBluePrint Mobile Framework
BluePrint Mobile Framework
 
Yahoo Mobile Widgets
Yahoo Mobile WidgetsYahoo Mobile Widgets
Yahoo Mobile Widgets
 
Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
 
Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15Android 3.0 Portland Java User Group 2011-03-15
Android 3.0 Portland Java User Group 2011-03-15
 
SDC2013 : Monetization
SDC2013 : MonetizationSDC2013 : Monetization
SDC2013 : Monetization
 
Advanced Android gReporter
Advanced Android gReporterAdvanced Android gReporter
Advanced Android gReporter
 
Mobile Software Engineering Crash Course - C03 Android
Mobile Software Engineering Crash Course - C03 AndroidMobile Software Engineering Crash Course - C03 Android
Mobile Software Engineering Crash Course - C03 Android
 

More from OSCON Byrum

OSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom FifieldOSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom FifieldOSCON Byrum
 
Protecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent LicenseProtecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent LicenseOSCON Byrum
 
Using Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open DataUsing Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open DataOSCON Byrum
 
Open Source Automotive Development
Open Source Automotive DevelopmentOpen Source Automotive Development
Open Source Automotive DevelopmentOSCON Byrum
 
How we built our community using Github - Uri Cohen
How we built our community using Github - Uri CohenHow we built our community using Github - Uri Cohen
How we built our community using Github - Uri CohenOSCON Byrum
 
The Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in PythonThe Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in PythonOSCON Byrum
 
Distributed Coordination with Python
Distributed Coordination with PythonDistributed Coordination with Python
Distributed Coordination with PythonOSCON Byrum
 
An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)OSCON Byrum
 
Oscon 2013 Jesse Anderson
Oscon 2013 Jesse AndersonOscon 2013 Jesse Anderson
Oscon 2013 Jesse AndersonOSCON Byrum
 
US Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David MertzUS Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David MertzOSCON Byrum
 
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...OSCON Byrum
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of usOSCON Byrum
 
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking OSCON Byrum
 
Declarative web data visualization using ClojureScript
Declarative web data visualization using ClojureScriptDeclarative web data visualization using ClojureScript
Declarative web data visualization using ClojureScriptOSCON Byrum
 
Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...OSCON Byrum
 
A Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed ApplicationsA Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed ApplicationsOSCON Byrum
 
Life After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data CloudLife After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data CloudOSCON Byrum
 
Faster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesFaster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesOSCON Byrum
 
Comparing open source private cloud platforms
Comparing open source private cloud platformsComparing open source private cloud platforms
Comparing open source private cloud platformsOSCON Byrum
 
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open SourceState of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open SourceOSCON Byrum
 

More from OSCON Byrum (20)

OSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom FifieldOSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
 
Protecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent LicenseProtecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent License
 
Using Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open DataUsing Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open Data
 
Open Source Automotive Development
Open Source Automotive DevelopmentOpen Source Automotive Development
Open Source Automotive Development
 
How we built our community using Github - Uri Cohen
How we built our community using Github - Uri CohenHow we built our community using Github - Uri Cohen
How we built our community using Github - Uri Cohen
 
The Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in PythonThe Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in Python
 
Distributed Coordination with Python
Distributed Coordination with PythonDistributed Coordination with Python
Distributed Coordination with Python
 
An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)
 
Oscon 2013 Jesse Anderson
Oscon 2013 Jesse AndersonOscon 2013 Jesse Anderson
Oscon 2013 Jesse Anderson
 
US Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David MertzUS Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David Mertz
 
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of us
 
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
 
Declarative web data visualization using ClojureScript
Declarative web data visualization using ClojureScriptDeclarative web data visualization using ClojureScript
Declarative web data visualization using ClojureScript
 
Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...
 
A Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed ApplicationsA Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed Applications
 
Life After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data CloudLife After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data Cloud
 
Faster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesFaster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypes
 
Comparing open source private cloud platforms
Comparing open source private cloud platformsComparing open source private cloud platforms
Comparing open source private cloud platforms
 
State of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open SourceState of the Art Web Mapping with Open Source
State of the Art Web Mapping with Open Source
 

Recently uploaded

Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdfMuhammad Subhan
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingScyllaDB
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform EngineeringMarcus Vechiato
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxMasterG
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxFIDO Alliance
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...FIDO Alliance
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfAnubhavMangla3
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 

Recently uploaded (20)

Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 

Ui patterns

Editor's Notes

  1. This is how to reach me … Now the feedback I&apos;ve gotten is that there&apos;s lots of articles, presentations, and so on, on Android development – but that you want more design knowledge. So this presentation focuses more on design, especially design patterns. We&apos;ll talk about code a little, but this is much more of a design talk.
  2. So there&apos;s a really great video that I&apos;d like you all to watch. It&apos;s called The Piano Staircase, and it&apos;s all about why it&apos;s important to add some fun to your apps. Briefly, it&apos;s about a metro station in Stockholm, where the designers wanted people to take the stairs more, rather than the escalator. So they painted the steps to look like piano keys, and added musical tones to each one. And that made the staircase use dramatically increase.
  3. Now, in addition to fun, here&apos;s the goal … graceful, natural, effortless communication between user, device, and application … and you want this across many different tablets and smartphones, and you want users to recognize your app across all those devices.
  4. But here&apos;s the challenge. According to Andy Rubin there are about 600 different Android devices available in the market right now. smartphones different screen sizes, screen densities android versions, device features oem skins wvga, qhd, vga tablets 7-inch, 8-inch, 10-inch natural landscape, natural portrait gingerbread, honeycomb, ice cream sandwich
  5. In addition to that, you also have this – the concept that tablets are disrupting the market, and that users often expect applications on tablets to behave differently, or have more functionality. So it can be challenging to create a user interface that works well across tablets and smartphones.
  6. This is an example of a smartphone app, a shopping app, that doesn&apos;t transfer well to tablets. It may be usable, but not quite – because the images are very small and hard to tap. It&apos;s also not taking advantage of the large screen that tablets have to offer, or any of the new tablet features.
  7. Now this is an app that shows you what can be. Here, with Evernote, you can see that the tablet and smartphone versions look very similar and are easily recognizable. They both have action bars, across the top. This particular screen is showing a list of notes, and the displays are both effective, for the different form factors.
  8. This app is Catalogue by TheFind, and you can see that the tablet and smartphone versions look the same, and the interaction is the same, at least on this screen. These are both built with a HorizontalScrollView, so that you scroll horizontally through many images. So this is an example of very good usabiilty and branding, across different form factors.
  9. Now, if you want your app to have good design and appeal to users, you&apos;ll want to be aware of the hierarchy of user needs, which has 4 levels. With this hierarchy, you want to start from the bottom and work up. Those levels are – functional, beautiful, whimsical, and emotional. Functional means that the app is useful and its interface works well. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially to vision, hearing, and touch. After you handle those two needs, you can work on Whimsical . Whimsical means that the app is playful, fun, and enjoyable. This makes users want to use it and want to come back. We&apos;ll look at some good examples of Whimsical in a few minutes. And Emotional is the highest level. This is where an application satisfies some emotional needs in your users. A good example of this is an application that builds communities or allows people to connect in ways they couldn&apos;t before. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on beauty, uniqueness and meaningfulness. The question is … specifically, how do we get this? So I started looking at UI patterns found in successful apps, that work well across tablets and smartphones, and building a catalog of patterns. So far, I&apos;ve identified about 20 patterns used in leading apps, and am starting to publish them on the MotoDev site. I&apos;ll talk about a few of those tonight.
  10. so the pattern we want to show you is stacked image galleries, which is used in Pulse News and Taptu, both successful apps for Android tablets. use when content from many sources independently scrollable content pieces equal the items are grouped into categories or sources -- you want to display multiple categories or sources at the same time, with each category independently scrollable. for example - news items articles blog posts recipes classes videos
  11. So here, we&apos;re setting the image size in a scalable way, by creating two ImageView sizes, in two different directories. The tablet size, in layout-sw720dp, is 300dp by 200dp. The smartphone size, in layout, is 150dp by 100dp.
  12. Now, when you do this, you want to use this form of the inflate() method. The first paramater is the layout file. the second parameter is the parent view, which getView() gives you you must always pass the parent if you pass null as the parent, the layout inflater does not know what type of layout parameters to create, and ignores all the android:layout attributes the third parameter should be false, because it tells the inflater not to add the inflated view to the parent right away. that&apos;s the right thing, when you&apos;re in an adapter&apos;s getView() method
  13. You also want to be careful of image quality. To get better quality when scaling images, especially when scaling images up for 10-inch tablets, use the BitmapFactory.Options class. This is what works well in my sample. I&apos;ve set options.inDither to false, and options.inScaled to false. I&apos;ve also set optionsinPreferredConfig to ARGB_8888, which means the bitmap stays at 32 bits. Then I use BitmapFactory to load it.
  14. Now, if you want your app to have good design and appeal to users, you&apos;ll want to be aware of the hierarchy of user needs, which has 4 levels. With this hierarchy, you want to start from the bottom and work up. Those levels are – functional, beautiful, whimsical, and emotional. Functional means that the app is useful and its interface works well. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially to vision, hearing, and touch. After you handle those two needs, you can work on Whimsical . Whimsical means that the app is playful, fun, and enjoyable. This makes users want to use it and want to come back. We&apos;ll look at some good examples of Whimsical in a few minutes. And Emotional is the highest level. This is where an application satisfies some emotional needs in your users. A good example of this is an application that builds communities or allows people to connect in ways they couldn&apos;t before. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on beauty, uniqueness and meaningfulness. The question is … specifically, how do we get this? So I started looking at UI patterns found in successful apps, that work well across tablets and smartphones, and building a catalog of patterns. So far, I&apos;ve identified about 20 patterns used in leading apps, and am starting to publish them on the MotoDev site. I&apos;ll talk about a few of those tonight.
  15. ** what is
  16. Use this to make content, rather than navigation or category lists, the primary focus of the screen. ** This is a content forward interface. This can happen on a landing screen, a deep-level content screen, or in a single-screen application. (Note: This is not the only pattern for single-pane screens. Some benefit from a diagonal, horizontal, or vertical balance – those are other patterns.)
  17. Now here&apos;s the challenge … you probably need different layouts for landscape and portrait on tablets, as well as landscape and portrait on smartphones. As you can see in this screen, the main content is not exactly centered, but the design is still balanced and uses the full screen.
  18. Use includes … this is not a new technique … it&apos;s been in Android since the very beginning. You all know this already. You can override layout attributes. But there’s a gotcha. When you override layout attributes, be sure to specify both android:layout_width and android:layout_height , as well as any other layout attributes you want to override. This ensures that all of your attributes are recognized by the LayoutInflater class.
  19. Now, if you want your app to have good design and appeal to users, you&apos;ll want to be aware of the hierarchy of user needs, which has 4 levels. With this hierarchy, you want to start from the bottom and work up. Those levels are – functional, beautiful, whimsical, and emotional. Functional means that the app is useful and its interface works well. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially to vision, hearing, and touch. After you handle those two needs, you can work on Whimsical . Whimsical means that the app is playful, fun, and enjoyable. This makes users want to use it and want to come back. We&apos;ll look at some good examples of Whimsical in a few minutes. And Emotional is the highest level. This is where an application satisfies some emotional needs in your users. A good example of this is an application that builds communities or allows people to connect in ways they couldn&apos;t before. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on beauty, uniqueness and meaningfulness. The question is … specifically, how do we get this? So I started looking at UI patterns found in successful apps, that work well across tablets and smartphones, and building a catalog of patterns. So far, I&apos;ve identified about 20 patterns used in leading apps, and am starting to publish them on the MotoDev site. I&apos;ll talk about a few of those tonight.
  20. So this is an example of how a vertical scroll is created, with a ScrollView element. The header at the top, and the buttons at the bottom, have a fixed size. But the content in the center is scrollable, with a vertical swipe.
  21. But this what happens when the screen is rotated to landscape. In landscape, or on a natural landscape device, the vertical scroll won&apos;t be too comfortable.
  22. demo – Catalogue TheFind and ViewPagerDemo
  23. ** DEMO CATALOGUE BY THEFIND There are a couple different ways to create a horizontal scroll. The first, and probably the simplest, is HorizontalScrollView. Think of a very wide layout that stretches horizontally and is wider than the width of the screen. This is a design pattern used in iPad. Pay attention to the view snapping behavior. With HorizontalScrollView, views stay exactly where the user moves them.
  24. An important difference between ViewPager and HorizontalScrollView is that ViewPager gives you a &amp;quot;snapping&amp;quot; effect, where after a view is scrolled far enough, it snaps into place. Another difference is that ViewPager uses an adapter, just like a ListView. So items can be slid off the screen to the left, and then recycled and slid back in, from the right. The views used with a ViewPager can also be fragments, which gives you an amazing amount of control over your application. So if you want more information about ViewPager, you can read about it at this link, on the Android Developers Blog.
  25. OPTIONAL … DEMO YOUTUBE AFTER But most usability problems occur because we&apos;re trying to satisfy one or more levels of the hierarchy of user needs. That hierarchy, starting from the bottom up, is Functional, Beautiful, Whimsical, and Emotional. Functional means that the app is useful and usable. Users can navigate and use the user interface, The next level, Beautiful , is about aesthetics and appealing to the senses, especially the senses of vision, hearing, and touch. You should always make sure your app satisfies those two levels first. The third level, Whimsical , means the app is fun and engaging. We&apos;ll look at some specific patterns and techniques for adding Whimsical in a few moments. The fourth and highest level is Emotional . When you app works on this level, it satisfies some of your users&apos; emotional needs. One way to do this is by creating communities. An example of an app that works on at least 3 of these levels is the YouTube app for tablets.
  26. When you use the edges of the screen, you need to be aware of the difference between peripheral and central vision. This is the result of a study done by Adam Larson and Lester Loschky, of Kansas State University, in which they showed people photographs of common scenes, where different parts of the image were obscured. They concluded that central vision is most critical for specific object recognition, but peripheral vision is used for getting the gist of a scene. So peripheral vision gives us more information than we realize. Specifically, it gives us information on what type of scene we are looking at. To relate this to Android, the edges of the screen give people an overview of what the screen is about.
  27. On the smartphone, you may want to place the sidebar icons on a dashboard. This is the mapping of the functionality icons between smartphone and tablet, so you can see that 4 icons on the smartphone dashboard wind up in the tablet sidebar, while the most important, or frequently used function goes to the action bar. Now the development technique to use here is probably layout includes, as we saw earlier with Center Stage. You would create the sidebar using a layout include and reuse that include in all of your activities.
  28. Now, if you want your app to have good design and appeal to users, you&apos;ll want to be aware of the hierarchy of user needs, which has 4 levels. With this hierarchy, you want to start from the bottom and work up. Those levels are – functional, beautiful, whimsical, and emotional. Functional means that the app is useful and its interface works well. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially to vision, hearing, and touch. After you handle those two needs, you can work on Whimsical . Whimsical means that the app is playful, fun, and enjoyable. This makes users want to use it and want to come back. We&apos;ll look at some good examples of Whimsical in a few minutes. And Emotional is the highest level. This is where an application satisfies some emotional needs in your users. A good example of this is an application that builds communities or allows people to connect in ways they couldn&apos;t before. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on beauty, uniqueness and meaningfulness. The question is … specifically, how do we get this? So I started looking at UI patterns found in successful apps, that work well across tablets and smartphones, and building a catalog of patterns. So far, I&apos;ve identified about 20 patterns used in leading apps, and am starting to publish them on the MotoDev site. I&apos;ll talk about a few of those tonight.
  29. OPTIONAL - DEMO GMAIL
  30. To animate the transition between fragments, or to animate the process of showing or hiding a fragment, you use the Fragment Manager to create a Fragment Transaction. Within each Fragment Transaction, you can specify in and out animations. The in animation is used to show a fragment, the out is used to hide one, and both are used for replace. This code shows how you would replace a fragment by sliding out one fragment and sliding the other one in it&apos;s place.
  31. To show and hide fragments, you want to use a FragmentManager to create a FragmentTransaction. A FragmentTransaction handles a set of fragment operations and then commits them. Now here, on this fragment object, there&apos;s a very useful method on the Fragment class, called isHidden(), that returns true if the fragment has been hidden. There are also some very useful methods on the FragmentTransaction class, show() and hide(). With these three methods, it will be very easy for you to show and hide fragments.
  32. Now this technique is for Honeycomb and Ice Cream Sandwich, API level 11 and up. You also need to write some animations. For example, if you want a fragment to slide in and slide out, you would write slide_in and slide_out animations. If you want to define the animation in XML, use an objectAnimator tag. This animation slides an object (or a fragment) in from left to right – so here, we&apos;re sliding in from -1280, way off the screen to the left, to position 0.
  33. And then, remember to set your custom animations, using FragmentTransaction.setCustomAnimations.
  34. This is a sliding panel that&apos;s created with a TranslateAnimation
  35. This technique is for Honeycomb and Ice Cream Sandwich, API level 11 and forward. It was developed by Chet Haase at Google, who has a great post on the Android Developers Blog The new animation features are available in the android.animation package, and you&apos;ll need to use a minSdkVersion, of at least 11.
  36. So here we&apos;ve defined two ListViews in XML, which are populated by two different String arrays, one in English and one in Spanish. Notice that on the second ListView, we&apos;ve set android:visibility to gone.
  37. For this animation, you use the new ObjectAnimator class. It&apos;s new in Honeycomb, since API level 11, part of the android.animation package – but it does work on Ice Cream Sandwich. So here, pay attention to the ofFloat method. The first ofFloat method is setting animation on an object named visibleList . (That&apos;s our first list.) It&apos;s also saying that the animation will take place on a new property that&apos;s added to the View class, called rotationY , and it controls rotation around a pivot point. So here, rotationY controls rotation around the Y axis. The visibleList is being rotated out from position 0 to position 90, and invisibleList is being rotated in from -90 to 0. So there are a lot of cool things you can do with the new animation package in Honeycomb. If you&apos;re interested in animation, you&apos;ll want to check out the post by Chet Haase on the Android Developer Blog, and the animation demos in the API Demos sample. So I&apos;ll leave you to play with that.