SlideShare uma empresa Scribd logo
1 de 63
Baixar para ler offline
The eternal question: Android or iOS first?
Android, but take care of UX and follow
design guidelines
Piervincenzo Madeo

07.02.2014 - Turin
Piervincenzo Madeo
Founder of Eyeonplay
http://eyeonplay.com

User Experience Specialist of Life Interaction
http://life-interaction.com

Google Developer Live Italia - Android UX
http://developersitalia.blogspot.it/

Startupper and Android enthusiast
First challenge in the mobile app market
A REAL TIME PLATFORM FOR FOOTBALL lovers
create game

track events

share match report
Let’s talk about mistakes!
iOS first
Not designed for users needs
Launching too late with too many features
Let’s talk about mistakes!
iOS first
Not designed for users needs
Launching too late with too many features
iOS first. Why?
Started in 2011… iPhone is so cool
Hard to find an Android developer
Fragmentation and UX/UI ‘anarchy’
Smartphone OS Market 2011Q3

Source: http://commons.wikimedia.org/wiki/File%3AWorld-Wide-Smartphone-Market-Share.png
By Milominderbinder2
Android hits 81.0% smartphone share in Q3 2013

Source: http://thenextweb.com/
Awesome things happen
Android 4.0 and Holo Theme
“Before Android 4.0 the variance in system themes from device to device
could make it difficult to design an app with a single predictable look and feel.
We set out to improve this situation for the developer community in Ice Cream
Sandwich and beyond.”
Adam Powell, Android Framework engineer
Official Design Guidelines
http://developer.android.com/design/index.html
Beautiful applications and great UX
Awesome Android Developer Community
Official Resources and Doc

Community resources

Design
http://developer.android.com/design/index.html

GitHub
https://github.com/search?l=Java&o=desc&q=andro...

Develop
http://developer.android.com/develop/index.html

Q&A
http://stackoverflow.com/questions/tagged/android

API Guides
http://developer.android.com/guide/index.html

Newsletter
http://androidweekly.net/

Android Developer Videos
http://www.youtube.com/user/androiddevelopers

Inspiration
http://www.android-app-patterns.com/

Android Design in Action Series
http://www.youtube.com/playlist?list=PLW…

…

Android Developers Blog
http://android-developers.blogspot.it
We’re changing and Android will help us
Our future plan with Android in mind
Consumer apps for football lovers
Solid backend framework
Business intelligence for game statistics
Android is for startups. No doubts!
Free and open source
Free resources that help you in creating great products
Thousands of new device activations
Immediate go to market
Dark side of the…
Monetisation strategy (in-app purchase)
Fragmentation
Competition
Take care of the User Experience
UX ≠ USABILITY
UX
User Experience is not about features.
The perfect UX meets the exact needs of the user
USABILITY
is a quality attribute that estimate how easy is
to use your user interface. It’s defined by: learnability,
efficiency, memorability and error repetitions
Mental Model
“Mental models are what people really have in their heads and what guides
their use of things”
Donald Norman, 1983
Mental model
What user thinks she knows about a UI impacts how she uses it
Additional experience with the system can change the users’ model
Mental models of your app is influenced by other apps
Courtesy of Nadav Savio | Gian Ant Design | CC | http://goo.gl/HX9EDa
Mobility constraints
Users have intermittent attention while using apps
It’s a multitasking scenario that means a lot of interruptions
Device constraints: battery, display and network
Your goals designing a new application
Make the UX of your app conform to users' mental models
Improve users' mental models
Offer relevant mobile-only functionalities
Design for user needs through highly specific tasks
Design apps that have a consistent and predictable behaviour
What a good UX can’t solve
Wrong product
Team structure and balance
Wrong strategy and inappropriate go to market
Android Patterns & Best Practices
Pay attention to your top level screen
Start screen requires always special attention
Put content and frequent actions forward
Top level switching with view controls
Make it easy to navigate and switch between top level view
Introduce the user to the major functional areas
Avoid duplication and mixed solutions
Action Bar
Display key actions in an accessible way
Actions should have clear and predictable behaviour (add item, search)
Expose brand identity
Swipe between Detail Views
Navigate between detail items in succession using the swipe gesture
The Contextual Action Bar (CAB)
Useful to select data items by touching them
Trigger action to selected items
Perform specific and predictable action
Notifications
Keep the user informed about events
Use it for smart alerts
Users hate unwanted and not informative alerts
Notifications are now really flexible. Use responsibly
Always! Allow users to disable notifications
Pull to refresh
Swipe down to update recent items in your ListView
Use the Action Bar to keep updated the user
Add a visible loader
Undo Bar
Show up just after a potential destructive action
Allow users to undo the most recent action
Show it in an easy-to-tap position
Please, forget pixels!
Use Density Independent Pixels
DIP or DP units keep things the same physical size across any screen size
Use Density Independent Pixels
1px is just 1dp at 160dpi

_____ px = [ ____ dip * ___dpi ] / 160dpi
48dp for touch target
Touchable UI targets are generally laid out along 48dp units
8dp for your grid
Spacing between each UI element should 8dp (multiple of 4)
Text and scale independent pixel (sp)
1 scale-independent pixel unit is equal to 1dp with a 100% globe text scale
User can select a system-wide scaling factor for text in Settings
Always use scale independent pixel unit for text
Hello, Roboto
Roboto Thin & Thin Oblique
Roboto Light & Light Oblique
Roboto Regular & Oblique
Roboto Medium & Medium Oblique
Roboto Bold & Bold Oblique
Roboto Black & Black Oblique
Roboto Condensed & Condensed Oblique
Roboto Condensed Bold & Condensed Bold Oblique
Support multiple screen
Explicitly declare in the manifest which screen sizes your application supports
Provide different layouts for different screen sizes
Provide different bitmap drawables for different screen densities
http://developer.android.com/guide/practices/screens_support.html
My typical workflow
1. Sketches, wireframes and UX flow
Describe the intent of each single view
Visualise the entire use flow
Tell a use case using personas
2. UI prototype
Create a more detailed UI prototype
Define the look and feel
Tell a use case using personas
3. User tests
Test your assumptions with real people
You need no more than 5 tests
Create clever tasks for the user
SVG and JavaScript - Live demo
Keep in touch!
http://twitter.com/piervix
http://dribbble.com/piervix

Mais conteúdo relacionado

Mais procurados

Yahoo Blueprint for Mobile Widget Aamp Austin (Markus Spiering)
Yahoo Blueprint for Mobile Widget Aamp Austin (Markus Spiering)Yahoo Blueprint for Mobile Widget Aamp Austin (Markus Spiering)
Yahoo Blueprint for Mobile Widget Aamp Austin (Markus Spiering)Daniel Appelquist
 
android marshmallow- latest android application version
android marshmallow-  latest android application versionandroid marshmallow-  latest android application version
android marshmallow- latest android application versionJAI SHANKER
 
Predicting a winner between the android and the i os
Predicting a winner between the android and the i osPredicting a winner between the android and the i os
Predicting a winner between the android and the i osAshish Tandon
 
Android technlogy
Android technlogyAndroid technlogy
Android technlogyAjay Chawda
 
Final Presentation
Final PresentationFinal Presentation
Final PresentationSuhina Nath
 
How to develop innovative apps for foldable devices
How to develop innovative apps for foldable devices How to develop innovative apps for foldable devices
How to develop innovative apps for foldable devices Concetto Labs
 
So You Want a Mobile App? What Now?
So You Want a Mobile App? What Now?So You Want a Mobile App? What Now?
So You Want a Mobile App? What Now?AmadeusConsulting
 
Tipstocreateasuccessfulandroidapplication
TipstocreateasuccessfulandroidapplicationTipstocreateasuccessfulandroidapplication
TipstocreateasuccessfulandroidapplicationPromptCloud
 
Usability/Accessibility 2013
Usability/Accessibility 2013Usability/Accessibility 2013
Usability/Accessibility 2013Randall Arnold
 
The mobile ecosystem
The mobile ecosystemThe mobile ecosystem
The mobile ecosystemMelis Rimer
 
Mobile and Tablet App Development and Market Share
Mobile and Tablet App Development and Market ShareMobile and Tablet App Development and Market Share
Mobile and Tablet App Development and Market ShareJeremy Callinan
 
Design For Mobile Apps
Design For Mobile AppsDesign For Mobile Apps
Design For Mobile Appsmosti Farahat
 

Mais procurados (20)

Yahoo Blueprint for Mobile Widget Aamp Austin (Markus Spiering)
Yahoo Blueprint for Mobile Widget Aamp Austin (Markus Spiering)Yahoo Blueprint for Mobile Widget Aamp Austin (Markus Spiering)
Yahoo Blueprint for Mobile Widget Aamp Austin (Markus Spiering)
 
android marshmallow- latest android application version
android marshmallow-  latest android application versionandroid marshmallow-  latest android application version
android marshmallow- latest android application version
 
transcend viewer
 transcend viewer transcend viewer
transcend viewer
 
Predicting a winner between the android and the i os
Predicting a winner between the android and the i osPredicting a winner between the android and the i os
Predicting a winner between the android and the i os
 
Android technlogy
Android technlogyAndroid technlogy
Android technlogy
 
MOTOROLA XOOM Meet-up March 1st
MOTOROLA XOOM Meet-up March 1stMOTOROLA XOOM Meet-up March 1st
MOTOROLA XOOM Meet-up March 1st
 
Final Presentation
Final PresentationFinal Presentation
Final Presentation
 
How to develop innovative apps for foldable devices
How to develop innovative apps for foldable devices How to develop innovative apps for foldable devices
How to develop innovative apps for foldable devices
 
Mobile platforms
Mobile platformsMobile platforms
Mobile platforms
 
So You Want a Mobile App? What Now?
So You Want a Mobile App? What Now?So You Want a Mobile App? What Now?
So You Want a Mobile App? What Now?
 
Tipstocreateasuccessfulandroidapplication
TipstocreateasuccessfulandroidapplicationTipstocreateasuccessfulandroidapplication
Tipstocreateasuccessfulandroidapplication
 
Trilha Android - Android Evolved
Trilha Android - Android EvolvedTrilha Android - Android Evolved
Trilha Android - Android Evolved
 
Usability/Accessibility 2013
Usability/Accessibility 2013Usability/Accessibility 2013
Usability/Accessibility 2013
 
Android fragmentation 2013
Android fragmentation 2013Android fragmentation 2013
Android fragmentation 2013
 
The mobile ecosystem
The mobile ecosystemThe mobile ecosystem
The mobile ecosystem
 
Mobile Ecosystem
Mobile EcosystemMobile Ecosystem
Mobile Ecosystem
 
Android marshmallow 6.0
Android marshmallow 6.0Android marshmallow 6.0
Android marshmallow 6.0
 
Mobile and Tablet App Development and Market Share
Mobile and Tablet App Development and Market ShareMobile and Tablet App Development and Market Share
Mobile and Tablet App Development and Market Share
 
Android Wear Virtual Digital Assistant on your wrist
Android Wear Virtual Digital Assistant on your wristAndroid Wear Virtual Digital Assistant on your wrist
Android Wear Virtual Digital Assistant on your wrist
 
Design For Mobile Apps
Design For Mobile AppsDesign For Mobile Apps
Design For Mobile Apps
 

Semelhante a Android or iOS First? UX Debate

Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile ExperienceDavid Drucker
 
Android Design Guidelines 4.0
Android Design Guidelines 4.0Android Design Guidelines 4.0
Android Design Guidelines 4.0Brandon Nolte
 
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfBest UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfHarssh Trivedi
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesIRJET Journal
 
Devmento발표100525
Devmento발표100525Devmento발표100525
Devmento발표100525jinwook shin
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1Sameer Chavan
 
1.Usability Engineering.pptx
1.Usability Engineering.pptx1.Usability Engineering.pptx
1.Usability Engineering.pptxDr.Saranya K.G
 
Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014Gonçalo Veiga
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic AdvantageMichael Dubakov
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
 
Mobile Accessibility - How To Become Socially Responsible Mobile Developer
Mobile Accessibility - How To Become Socially Responsible Mobile Developer Mobile Accessibility - How To Become Socially Responsible Mobile Developer
Mobile Accessibility - How To Become Socially Responsible Mobile Developer Konstantin Loginov
 
Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora Designing for Multiple Devices - Sarit Arora
Designing for Multiple Devices - Sarit AroraSTC India UX SIG
 
Mobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyDoralin Kelly
 
Mobile User Experience - @iRajLal
Mobile User Experience - @iRajLalMobile User Experience - @iRajLal
Mobile User Experience - @iRajLalRaj Lal
 
When User Interface Patterns Become Mobile
When User Interface Patterns Become MobileWhen User Interface Patterns Become Mobile
When User Interface Patterns Become MobileJean Vanderdonckt
 

Semelhante a Android or iOS First? UX Debate (20)

Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
Android Design Guidelines 4.0
Android Design Guidelines 4.0Android Design Guidelines 4.0
Android Design Guidelines 4.0
 
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdfBest UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
Best UI UX Practices for Mobile App & Website Design by Harssh Trivedi.pdf
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile Devices
 
Devmento발표100525
Devmento발표100525Devmento발표100525
Devmento발표100525
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 
1.Usability Engineering.pptx
1.Usability Engineering.pptx1.Usability Engineering.pptx
1.Usability Engineering.pptx
 
Android Design
Android DesignAndroid Design
Android Design
 
Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014Role of UX in a Mobile First approach @ NextStep Americas 2014
Role of UX in a Mobile First approach @ NextStep Americas 2014
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
UI Design
UI DesignUI Design
UI Design
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 
hema ppt (2).pptx
hema ppt (2).pptxhema ppt (2).pptx
hema ppt (2).pptx
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
Mobile Accessibility - How To Become Socially Responsible Mobile Developer
Mobile Accessibility - How To Become Socially Responsible Mobile Developer Mobile Accessibility - How To Become Socially Responsible Mobile Developer
Mobile Accessibility - How To Become Socially Responsible Mobile Developer
 
Designing for Multiple Devices - Sarit Arora
 Designing for Multiple Devices - Sarit Arora Designing for Multiple Devices - Sarit Arora
Designing for Multiple Devices - Sarit Arora
 
Mobile UX Workshop General Assembly
Mobile UX Workshop General AssemblyMobile UX Workshop General Assembly
Mobile UX Workshop General Assembly
 
Mobile User Experience - @iRajLal
Mobile User Experience - @iRajLalMobile User Experience - @iRajLal
Mobile User Experience - @iRajLal
 
When User Interface Patterns Become Mobile
When User Interface Patterns Become MobileWhen User Interface Patterns Become Mobile
When User Interface Patterns Become Mobile
 

Último

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
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
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
 
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
 
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
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
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
 
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
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
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
 
"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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
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
 
"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
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 

Último (20)

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!
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
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
 
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
 
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
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 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
 
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
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
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
 
"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
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
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
 
"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
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 

Android or iOS First? UX Debate

  • 1. The eternal question: Android or iOS first? Android, but take care of UX and follow design guidelines Piervincenzo Madeo 07.02.2014 - Turin
  • 2. Piervincenzo Madeo Founder of Eyeonplay http://eyeonplay.com User Experience Specialist of Life Interaction http://life-interaction.com Google Developer Live Italia - Android UX http://developersitalia.blogspot.it/ Startupper and Android enthusiast
  • 3. First challenge in the mobile app market
  • 4. A REAL TIME PLATFORM FOR FOOTBALL lovers
  • 6. Let’s talk about mistakes! iOS first Not designed for users needs Launching too late with too many features
  • 7. Let’s talk about mistakes! iOS first Not designed for users needs Launching too late with too many features
  • 8. iOS first. Why? Started in 2011… iPhone is so cool Hard to find an Android developer Fragmentation and UX/UI ‘anarchy’
  • 9. Smartphone OS Market 2011Q3 Source: http://commons.wikimedia.org/wiki/File%3AWorld-Wide-Smartphone-Market-Share.png By Milominderbinder2
  • 10. Android hits 81.0% smartphone share in Q3 2013 Source: http://thenextweb.com/
  • 11. Awesome things happen Android 4.0 and Holo Theme “Before Android 4.0 the variance in system themes from device to device could make it difficult to design an app with a single predictable look and feel. We set out to improve this situation for the developer community in Ice Cream Sandwich and beyond.” Adam Powell, Android Framework engineer
  • 14. Awesome Android Developer Community Official Resources and Doc Community resources Design http://developer.android.com/design/index.html GitHub https://github.com/search?l=Java&o=desc&q=andro... Develop http://developer.android.com/develop/index.html Q&A http://stackoverflow.com/questions/tagged/android API Guides http://developer.android.com/guide/index.html Newsletter http://androidweekly.net/ Android Developer Videos http://www.youtube.com/user/androiddevelopers Inspiration http://www.android-app-patterns.com/ Android Design in Action Series http://www.youtube.com/playlist?list=PLW… … Android Developers Blog http://android-developers.blogspot.it
  • 15. We’re changing and Android will help us
  • 16. Our future plan with Android in mind Consumer apps for football lovers Solid backend framework Business intelligence for game statistics
  • 17. Android is for startups. No doubts! Free and open source Free resources that help you in creating great products Thousands of new device activations Immediate go to market
  • 18. Dark side of the… Monetisation strategy (in-app purchase) Fragmentation Competition
  • 19. Take care of the User Experience
  • 21. UX User Experience is not about features. The perfect UX meets the exact needs of the user
  • 22. USABILITY is a quality attribute that estimate how easy is to use your user interface. It’s defined by: learnability, efficiency, memorability and error repetitions
  • 23. Mental Model “Mental models are what people really have in their heads and what guides their use of things” Donald Norman, 1983
  • 24. Mental model What user thinks she knows about a UI impacts how she uses it Additional experience with the system can change the users’ model Mental models of your app is influenced by other apps
  • 25. Courtesy of Nadav Savio | Gian Ant Design | CC | http://goo.gl/HX9EDa
  • 26. Mobility constraints Users have intermittent attention while using apps It’s a multitasking scenario that means a lot of interruptions Device constraints: battery, display and network
  • 27. Your goals designing a new application Make the UX of your app conform to users' mental models Improve users' mental models Offer relevant mobile-only functionalities Design for user needs through highly specific tasks Design apps that have a consistent and predictable behaviour
  • 28. What a good UX can’t solve Wrong product Team structure and balance Wrong strategy and inappropriate go to market
  • 29. Android Patterns & Best Practices
  • 30. Pay attention to your top level screen Start screen requires always special attention Put content and frequent actions forward
  • 31.
  • 32. Top level switching with view controls Make it easy to navigate and switch between top level view Introduce the user to the major functional areas Avoid duplication and mixed solutions
  • 33.
  • 34. Action Bar Display key actions in an accessible way Actions should have clear and predictable behaviour (add item, search) Expose brand identity
  • 35.
  • 36. Swipe between Detail Views Navigate between detail items in succession using the swipe gesture
  • 37.
  • 38. The Contextual Action Bar (CAB) Useful to select data items by touching them Trigger action to selected items Perform specific and predictable action
  • 39.
  • 40. Notifications Keep the user informed about events Use it for smart alerts Users hate unwanted and not informative alerts Notifications are now really flexible. Use responsibly Always! Allow users to disable notifications
  • 41.
  • 42. Pull to refresh Swipe down to update recent items in your ListView Use the Action Bar to keep updated the user Add a visible loader
  • 43.
  • 44. Undo Bar Show up just after a potential destructive action Allow users to undo the most recent action Show it in an easy-to-tap position
  • 45.
  • 47. Use Density Independent Pixels DIP or DP units keep things the same physical size across any screen size
  • 48. Use Density Independent Pixels 1px is just 1dp at 160dpi _____ px = [ ____ dip * ___dpi ] / 160dpi
  • 49. 48dp for touch target Touchable UI targets are generally laid out along 48dp units
  • 50. 8dp for your grid Spacing between each UI element should 8dp (multiple of 4)
  • 51. Text and scale independent pixel (sp) 1 scale-independent pixel unit is equal to 1dp with a 100% globe text scale User can select a system-wide scaling factor for text in Settings Always use scale independent pixel unit for text
  • 52. Hello, Roboto Roboto Thin & Thin Oblique Roboto Light & Light Oblique Roboto Regular & Oblique Roboto Medium & Medium Oblique Roboto Bold & Bold Oblique Roboto Black & Black Oblique Roboto Condensed & Condensed Oblique Roboto Condensed Bold & Condensed Bold Oblique
  • 53. Support multiple screen Explicitly declare in the manifest which screen sizes your application supports Provide different layouts for different screen sizes Provide different bitmap drawables for different screen densities http://developer.android.com/guide/practices/screens_support.html
  • 54.
  • 56. 1. Sketches, wireframes and UX flow Describe the intent of each single view Visualise the entire use flow Tell a use case using personas
  • 57.
  • 58. 2. UI prototype Create a more detailed UI prototype Define the look and feel Tell a use case using personas
  • 59.
  • 60. 3. User tests Test your assumptions with real people You need no more than 5 tests Create clever tasks for the user
  • 61.
  • 62. SVG and JavaScript - Live demo