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
 
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

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

Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 

Recently uploaded (20)

Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 

Designing for the mobile form factor