SlideShare a Scribd company logo
1 of 53
Designing for the mobile form factor ,[object Object],[object Object]
Overview ,[object Object],[object Object],[object Object]
Overview  ,[object Object],[object Object],[object Object]
What is a great UI? ,[object Object],[object Object],[object Object]
Square TweetDeck Seesmic doubleTwist
User friendliness ,[object Object],[object Object],[object Object],[object Object]
Responsiveness ,[object Object],[object Object],[object Object]
Visual polish ,[object Object],[object Object],[object Object]
Is mobile different? ,[object Object],[object Object],[object Object]
Overview  ,[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Screen size
Screen size ,[object Object],[object Object],[object Object]
Screen size ,[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Rotation ,[object Object],[object Object],[object Object],[object Object]
Landscape mode
Landscape mode
Landscape mode ,[object Object],[object Object],[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
User interaction ,[object Object],[object Object],[object Object]
Touch ,[object Object],[object Object],[object Object],[object Object]
Touch
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Resolution / DPI 1280 pixels / 13.3 inch 800 pixels / 8.3 inch 1280 pixels / 13.3 inch = 96 pixels per inch 800 pixels / 8.3 inch = 96 pixels per inch Artwork by studiomx.eu
Resolution matters 300dpi 96dpi
Screen density - LDPI Motorola Charm Motorola Flipout Motorola Citrus Sony Ericsson  Xperia X10 Mini HTC Wildfire HTC Tattoo
Screen density - MDPI Motorola Charm HTC Droid Eris Motorola CLIQ HTC Magic  (myTouch 3G) HTC Aria Motorola Backflip
Screen density - HDPI Motorola Droid Sony Ericsson Xperia X10 Samsung Nexus S HTC Nexus One HTC G2 HTC Evo 4G
100% difference  between LDPI and HDPI
Screen density ,[object Object],[object Object],[object Object],[object Object]
Form factor ,[object Object],[object Object],[object Object],[object Object],[object Object]
Resources ,[object Object],[object Object],[object Object]
Resources ,[object Object],[object Object],[object Object]
Mobile is different ,[object Object],[object Object],[object Object],[object Object],[object Object]
Overview  ,[object Object],[object Object],[object Object]
What is a great application? ,[object Object],[object Object],[object Object]
But much more important
A clear, simple,  user-oriented  goal
Design process ,[object Object],[object Object],[object Object],[object Object],[object Object]
User scenarios ,[object Object],[object Object],[object Object],[object Object]
As the implementor ,[object Object],[object Object],[object Object],[object Object]
Visual design ,[object Object],[object Object],[object Object]
As the implementor ,[object Object],[object Object],[object Object],[object Object]
Pixel perfection ,[object Object],[object Object]
Pixel perfection ,[object Object],[object Object],[object Object],[object Object]
Working with designers ,[object Object],[object Object],[object Object],[object Object],[object Object]
Below the surface ,[object Object],[object Object],[object Object]
Remember what’s important
What is a great UI? ,[object Object],[object Object],[object Object]
Everything else can be good enough
Q&A ,[object Object],[object Object],[object Object],[object Object]

More Related Content

Similar to Designing for the mobile form factor

Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel PublishingJoe Welinske
 
Design Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User ExperienceDesign Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User ExperienceAshutosh Kumar
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Michelle Reyes
 
Flat Design - Overview
Flat Design - OverviewFlat Design - Overview
Flat Design - OverviewJoe Buchmann
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Accounting For Every Camper
Accounting For Every CamperAccounting For Every Camper
Accounting For Every CamperAshley Dzick
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignAllan Huang
 
Website redesign
Website redesignWebsite redesign
Website redesignOptfinITy
 
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly DevicesTap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly DevicesHubbard One
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile ExperienceDavid Drucker
 
1.Usability Engineering.pptx
1.Usability Engineering.pptx1.Usability Engineering.pptx
1.Usability Engineering.pptxDr.Saranya K.G
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobileThomas Garrison
 
Min Ahmed - Can help to build a successful mobile application
Min Ahmed - Can help to build a successful mobile applicationMin Ahmed - Can help to build a successful mobile application
Min Ahmed - Can help to build a successful mobile applicationJan Paul Roth
 
Android user experience
Android user experienceAndroid user experience
Android user experienceRaihan Himel
 
Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Sonia Simi
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignCindy Royal
 

Similar to Designing for the mobile form factor (20)

Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel Publishing
 
Design Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User ExperienceDesign Strategy for Cross-Device User Experience
Design Strategy for Cross-Device User Experience
 
The challenge of touchscreen clutter 6.25.2010
The challenge of touchscreen clutter   6.25.2010The challenge of touchscreen clutter   6.25.2010
The challenge of touchscreen clutter 6.25.2010
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
 
Flat Design - Overview
Flat Design - OverviewFlat Design - Overview
Flat Design - Overview
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Accounting For Every Camper
Accounting For Every CamperAccounting For Every Camper
Accounting For Every Camper
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Website redesign
Website redesignWebsite redesign
Website redesign
 
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly DevicesTap. Swipe. Pinch: Designing for Touch-Friendly Devices
Tap. Swipe. Pinch: Designing for Touch-Friendly Devices
 
Mobile Web Development
Mobile Web DevelopmentMobile Web Development
Mobile Web Development
 
Mobile Web Development
Mobile Web Development Mobile Web Development
Mobile Web Development
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
1.Usability Engineering.pptx
1.Usability Engineering.pptx1.Usability Engineering.pptx
1.Usability Engineering.pptx
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
Min Ahmed - Can help to build a successful mobile application
Min Ahmed - Can help to build a successful mobile applicationMin Ahmed - Can help to build a successful mobile application
Min Ahmed - Can help to build a successful mobile application
 
Android user experience
Android user experienceAndroid user experience
Android user experience
 
Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
UI guidelines
UI guidelinesUI guidelines
UI guidelines
 

More from Kirill Grouchnikov

Responsive mobile design in practice
Responsive mobile design in practiceResponsive mobile design in practice
Responsive mobile design in practiceKirill Grouchnikov
 
Responsive mobile design
Responsive mobile designResponsive mobile design
Responsive mobile designKirill Grouchnikov
 
Substance Java One 2007 Community Corner
Substance Java One 2007  Community  CornerSubstance Java One 2007  Community  Corner
Substance Java One 2007 Community CornerKirill Grouchnikov
 
Flamingo Ribbon component
Flamingo Ribbon componentFlamingo Ribbon component
Flamingo Ribbon componentKirill Grouchnikov
 
Advanced Effects Oscon 2007
Advanced Effects   Oscon 2007Advanced Effects   Oscon 2007
Advanced Effects Oscon 2007Kirill Grouchnikov
 
High DPI for desktop applications
High DPI for desktop applicationsHigh DPI for desktop applications
High DPI for desktop applicationsKirill Grouchnikov
 
On The Shoulders Of Giants
On The Shoulders Of GiantsOn The Shoulders Of Giants
On The Shoulders Of GiantsKirill Grouchnikov
 

More from Kirill Grouchnikov (8)

Responsive mobile design in practice
Responsive mobile design in practiceResponsive mobile design in practice
Responsive mobile design in practice
 
Responsive mobile design
Responsive mobile designResponsive mobile design
Responsive mobile design
 
Substance Java One 2007 Community Corner
Substance Java One 2007  Community  CornerSubstance Java One 2007  Community  Corner
Substance Java One 2007 Community Corner
 
Flamingo Ribbon component
Flamingo Ribbon componentFlamingo Ribbon component
Flamingo Ribbon component
 
Party of One
Party of OneParty of One
Party of One
 
Advanced Effects Oscon 2007
Advanced Effects   Oscon 2007Advanced Effects   Oscon 2007
Advanced Effects Oscon 2007
 
High DPI for desktop applications
High DPI for desktop applicationsHigh DPI for desktop applications
High DPI for desktop applications
 
On The Shoulders Of Giants
On The Shoulders Of GiantsOn The Shoulders Of Giants
On The Shoulders Of Giants
 

Recently uploaded

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 Servicegiselly40
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
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...Neo4j
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
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 CVKhem
 
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...apidays
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
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 Nanonetsnaman860154
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
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 Scriptwesley chun
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
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 AutomationSafe Software
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
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.pptxKatpro Technologies
 

Recently uploaded (20)

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
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
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...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
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
 
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...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
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
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
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
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
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
 

Designing for the mobile form factor