SlideShare une entreprise Scribd logo
1  sur  42
Mobile Apps Design Principles


        Mohamad Sani
        sani@msani.net
Main Principles
1. Enchant me
      Just like a well-made tool, your app should strive to
      combine beauty, simplicity and purpose to create a
      magical experience that is effortless and powerful
2. Simplify my life
  –   Easy to understand
  –   When people use your app for the first time, they should
      intuitively grasp the most important features
  –   Simple tasks never require complex procedure
  –   Never overwhelmed by too many choices or irrelevant
      flash
3. Make me amazing
  –   Empower people to try new things and to use apps in
      inventive new ways
  –   Feel personal, giving people access to superb technology
      with clarity and grace
Beauty is more than skin deep. Mobile apps should be sleek and
aesthetically pleasing on multiple levels. Transitions are fast and
clear; layout and typography are crisp and meaningful. App icons
are works of art in their own right. Just like a well-made tool, your
app should strive to combine beauty, simplicity and purpose to
create a magical experience that is effortless and powerful.

ENCHANT ME
Delight
Delight me in surprising
ways
  A beautiful surface, a
  carefully-placed
  animation, or a well-timed
  sound effect is a joy to
  experience.
  Subtle effects contribute
  to a feeling of
  effortlessness and a
  sense that a powerful
  force is at hand.
Real Object
Real objects are more fun
than buttons and menus
  Allow people to directly
  touch and manipulate
  objects in your app. It
  reduces the cognitive
  effort needed to perform
  a task while making it
  more emotionally
  satisfying.
Personal
Let me make it mine
  People love to add
  personal touches
  because it helps them
  feel at home and in
  control. Provide
  sensible, beautiful
  defaults, but also
  consider fun, optional
  customizations that don't
  hinder primary tasks.
Learn Preference
Get to know me
  Learn peoples'
  preferences over time.
  Rather than asking them
  to make the same
  choices over and over,
  place previous choices
  within easy reach.
Mobile apps make life easier and are easy to understand. When
people use your app for the first time, they should intuitively grasp
the most important features. The design work doesn't stop at the
first use, though. Mobile apps remove ongoing chores like file
management and syncing. Simple tasks never require complex
procedures, and complex tasks are tailored to the human hand and
mind. People of all ages and cultures feel firmly in control, and are
never overwhelmed by too many choices or irrelevant flash.

SIMPLIFY MY LIFE
Short Text
Keep it brief
  Use short phrases with
  simple words. People are
  likely to skip sentences if
  they're long.
Picture
Pictures are faster than
words
  Consider using pictures
  to explain ideas. They get
  people's attention and
  can be much more
  efficient than words.
Predict & Confirm
Decide for me but let me
have the final say
  Take your best guess and
  act rather than asking
  first. Too many choices
  and decisions make
  people unhappy. Just in
  case you get it wrong,
  allow for 'undo‘.
Display Few
Only show what I need when
I need it
  People get overwhelmed
  when they see too much
  at once. Break tasks and
  information into small,
  digestible chunks.
  Hide options that aren't
  essential at the moment,
  and teach people as they
  go.
Navigation
I should always know where
I am
  Give people confidence
  that they know their way
  around.
  Make places in your app
  look distinct and use
  transitions to show
  relationships among
  screens.
  Provide feedback on
  tasks in progress.
Save Works
Never lose my stuff
  Save what people took
  time to create and let
  them access it from
  anywhere.
  Remember
  settings, personal
  touches, and creations
  across
  phones, tablets, and
  computers. It makes
  upgrading the easiest
  thing in the world.
Look Same
If it looks the same, it should
act the same
  Help people discern
  functional differences by
  making them visually
  distinct rather than subtle.
  Avoid modes, which are
  places that look similar
  but act differently on the
  same input
Interrupt Only If Important
Only interrupt me if it's
important
  Like a good personal
  assistant, shield people
  from unimportant
  minutiae. People want to
  stay focused, and unless
  it's critical and time-
  sensitive, an interruption
  can be taxing and
  frustrating
It's not enough to make an app that is easy to use. Good mobile
apps empower people to try new things and to use apps in
inventive new ways. Smartphones lets people combine applications
into new workflows through multitasking, notifications, and sharing
across apps. At the same time, your app should feel
personal, giving people access to superb technology with clarity
and grace.

MAKE ME AMAZING
Tricks
Give me tricks that work
everywhere
  People feel great when
  they figure things out for
  themselves. Make your
  app easier to learn by
  leveraging visual patterns
  and muscle memory from
  other mobile apps. For
  example, the swipe
  gesture may be a good
  navigational shortcut
Gentle Error
It's not my fault
  Be gentle in how you
  prompt people to make
  corrections. They want to
  feel smart when they use
  your app.
  If something goes
  wrong, give clear recovery
  instructions but spare them
  the technical details.
  If you can fix it behind the
  scenes, even better
Sprinkle
Sprinkle encouragement
  Break complex tasks into
  smaller steps that can be
  easily accomplished.
  Give feedback on actions,
  even if it's just a subtle
  glow.
  Drag & drop is a good
  practice
Heavy Lifting
Do the heavy lifting for me
  Make novices feel like
  experts by enabling them
  to do things they never
  thought they could.
  For example, shortcuts
  that combine multiple
  photo effects can make
  amateur photographs
  look amazing in only a
  few steps
Make Important Fast
Make important things
fast
  Not all actions are equal.
  Decide what's most
  important in your app and
  make it easy to find and
  fast to use, like the
  shutter button in a
  camera, or the pause
  button in a music player.
SIZE & COLOR
48 px Rhythm
• 48 pixels for touchable UI components
• Why 48 px?
  – On average, 48 px translate to a physical size of
    about 9mm (with some variability). This is comfortably
    in the range of recommended target sizes (7-10 mm)
    for touch screen objects and users will be able to
    reliably and accurately target them with their fingers.
  – If you design your elements to be at least 48 px high
    and wide you can guarantee that:
     1. your targets will never be smaller than the minimum
        recommended target size of 7mm regardless of what
        screen they are displayed on.
     2. you strike a good compromise between overall information
        density on the one hand, and targetability of UI elements
        on the other.
48 px Rhythm




Mind the gaps
• Spacing between each UI element is 8dp.
48 px Rhythm
  Examples
Color
• Use color primarily for emphasis. Choose
  colors that fit with your brand and provide
  good contrast between visual components.
• Red and green may be indistinguishable to
  color-blind users.
Color for Contextual Icon
• Use non-neutral colors
  sparingly and with
  purpose.
• For example, Gmail
  uses yellow in the star
  icon to indicate a
  bookmarked message.
  If an icon is actionable,
  choose a color that
  contrasts well with the
  background.
1.   Find ways to display useful content on your start screen.
2.   Use action bars to provide consistent navigation.
3.   Keep your hierarchies shallow by using horizontal navigation
     and shortcuts.
4.   Use multi-select to allow the user to act on collections of data.
5.   Allow for quick navigation between detail items with swipe
     views.

APP STRUCTURE CHECKLIST
App Structure 1
Find ways to display useful content on your start
screen.
App Structure 2
Use action bars to provide consistent navigation
App Structure 3
Keep your hierarchies
shallow by using
horizontal navigation
and shortcuts
App Structure 4
Use multi-select to
allow the user to act
on collections of data
App Structure 5
Allow for quick
navigation between
detail items with
swipe views
1. Brief
2. Simple
3. Friendly
4. Most Important First
5. Only The Necessary
6. Avoid Repetition

WRITING STYLE
Keep it brief
Be concise, simple and precise. Start with a 30
character limit (including spaces), and don't use
more unless absolutely necessary.
Keep it simple
Pretend you're speaking to someone who's
smart and competent, but doesn't know
technical jargon and may not speak English very
well. Use short words, active verbs, and
common nouns.
Be friendly
•   Use contractions.
•   Talk directly to the reader using second person
    ("you").
•   If your text doesn't read the way you'd say it in casual
    conversation, it's probably not the way you should
    write it.
•   Don't be abrupt, make the user feel safe, happy and
    energized.
Put the most important thing first
The first two words (around 11 characters,
including spaces) should include at least a taste
of the most important information in the string. If
they don't, start over.
Only The Necessary
Describe only what's necessary and no more.
Don't try to explain subtle differences. They will
be lost on most users.
Avoid repetition
If a significant term
gets repeated within a
screen or block of
text, find a way to use
it just once
http://developer.android.com/design
SOURCE

Contenu connexe

Tendances

UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity PrototypingUser Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity PrototypingHans Põldoja
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityMarc Miquel
 
Usability and User Experience
Usability and User ExperienceUsability and User Experience
Usability and User ExperienceShawn Calvert
 
Mobile application development ppt
Mobile application development pptMobile application development ppt
Mobile application development ppttirupathinews
 
The UX Design 101- For Engaging Mobile Apps
The UX Design 101- For Engaging Mobile AppsThe UX Design 101- For Engaging Mobile Apps
The UX Design 101- For Engaging Mobile AppsSuyati Technologies
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaRoshan Karunarathna
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
User Interface Design Basic
User Interface Design BasicUser Interface Design Basic
User Interface Design BasicHeru WIjayanto
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
 

Tendances (20)

UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
User Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity PrototypingUser Interface Prototyping Techniques: Low Fidelity Prototyping
User Interface Prototyping Techniques: Low Fidelity Prototyping
 
Elements of User Experience by Jesse James Garrett
Elements of User Experience by Jesse James GarrettElements of User Experience by Jesse James Garrett
Elements of User Experience by Jesse James Garrett
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
 
Usability and User Experience
Usability and User ExperienceUsability and User Experience
Usability and User Experience
 
Mobile application development ppt
Mobile application development pptMobile application development ppt
Mobile application development ppt
 
The UX Design 101- For Engaging Mobile Apps
The UX Design 101- For Engaging Mobile AppsThe UX Design 101- For Engaging Mobile Apps
The UX Design 101- For Engaging Mobile Apps
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
UX 101: Personas
UX 101: PersonasUX 101: Personas
UX 101: Personas
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
User Interface Design Basic
User Interface Design BasicUser Interface Design Basic
User Interface Design Basic
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 

En vedette

Visual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile appsVisual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile appsTania Schlatter
 
Engaging mobile and website applications
Engaging mobile and website applicationsEngaging mobile and website applications
Engaging mobile and website applicationsPanos Virvilios
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 
Calculating ROI with Innovative eCommerce Platforms
Calculating ROI with Innovative eCommerce PlatformsCalculating ROI with Innovative eCommerce Platforms
Calculating ROI with Innovative eCommerce PlatformsMongoDB
 
How To Sell Your UX Vision- UX Scotland 2015
How To Sell Your UX Vision- UX Scotland 2015How To Sell Your UX Vision- UX Scotland 2015
How To Sell Your UX Vision- UX Scotland 2015Jane Guthrie
 
User Experience Trends in Banking
User Experience Trends in BankingUser Experience Trends in Banking
User Experience Trends in BankingBackbase
 
B2B and e-commerce Architecture
B2B and e-commerce ArchitectureB2B and e-commerce Architecture
B2B and e-commerce ArchitectureSonia Grover
 
Mobile Site For Mobile World
Mobile Site For Mobile WorldMobile Site For Mobile World
Mobile Site For Mobile WorldIdo Green
 
DFD for E-Commerce Website
DFD for E-Commerce WebsiteDFD for E-Commerce Website
DFD for E-Commerce WebsiteRabart Kurrey
 
Dfd examples
Dfd examplesDfd examples
Dfd examplesMohit
 

En vedette (11)

Visual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile appsVisual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile apps
 
Engaging mobile and website applications
Engaging mobile and website applicationsEngaging mobile and website applications
Engaging mobile and website applications
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
Calculating ROI with Innovative eCommerce Platforms
Calculating ROI with Innovative eCommerce PlatformsCalculating ROI with Innovative eCommerce Platforms
Calculating ROI with Innovative eCommerce Platforms
 
How To Sell Your UX Vision- UX Scotland 2015
How To Sell Your UX Vision- UX Scotland 2015How To Sell Your UX Vision- UX Scotland 2015
How To Sell Your UX Vision- UX Scotland 2015
 
User Experience Trends in Banking
User Experience Trends in BankingUser Experience Trends in Banking
User Experience Trends in Banking
 
B2B and e-commerce Architecture
B2B and e-commerce ArchitectureB2B and e-commerce Architecture
B2B and e-commerce Architecture
 
Mobile Site For Mobile World
Mobile Site For Mobile WorldMobile Site For Mobile World
Mobile Site For Mobile World
 
Designing With Vision
Designing With VisionDesigning With Vision
Designing With Vision
 
DFD for E-Commerce Website
DFD for E-Commerce WebsiteDFD for E-Commerce Website
DFD for E-Commerce Website
 
Dfd examples
Dfd examplesDfd examples
Dfd examples
 

Similaire à Mobile Apps Design Principles

Android Design Guidelines 4.0
Android Design Guidelines 4.0Android Design Guidelines 4.0
Android Design Guidelines 4.0Brandon Nolte
 
20 Principles: UI Design
20 Principles: UI Design20 Principles: UI Design
20 Principles: UI DesignMoodLabs
 
UI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignUI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignMoodLabs
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackonnajam gs
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015Katelyn Caillouet
 
Major Work_FunkItUp editor_interactive
Major Work_FunkItUp editor_interactiveMajor Work_FunkItUp editor_interactive
Major Work_FunkItUp editor_interactiveNikki Clark
 
2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutionsDMI
 
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
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface DesignKANKIPATI KISHORE
 
UIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxUIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxbhawnamangla2
 
Intro to user experience design
Intro to user experience designIntro to user experience design
Intro to user experience designyaluna
 
User interface design for touch screen displays
User interface design for touch screen displaysUser interface design for touch screen displays
User interface design for touch screen displaysNew Vision Display
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoBeMyApp
 
How to Create Insanely Cool UX Designs Using Micro-interactions?
How to Create Insanely Cool UX Designs Using Micro-interactions?How to Create Insanely Cool UX Designs Using Micro-interactions?
How to Create Insanely Cool UX Designs Using Micro-interactions?Kaspar Lavik
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignJason Hando
 
UX, the buzz!
UX, the buzz!UX, the buzz!
UX, the buzz!Jebin BV
 
Lesson 5 advanced presentation skills
Lesson 5 advanced presentation skillsLesson 5 advanced presentation skills
Lesson 5 advanced presentation skillsEmmanuelaSernicul
 

Similaire à Mobile Apps Design Principles (20)

Android Design Guidelines 4.0
Android Design Guidelines 4.0Android Design Guidelines 4.0
Android Design Guidelines 4.0
 
20 Principles: UI Design
20 Principles: UI Design20 Principles: UI Design
20 Principles: UI Design
 
UI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignUI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface Design
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
 
UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015UX Tools, Tips & Tricks for Code(Her) Conference 2015
UX Tools, Tips & Tricks for Code(Her) Conference 2015
 
UI Design
UI DesignUI Design
UI Design
 
Major Work_FunkItUp editor_interactive
Major Work_FunkItUp editor_interactiveMajor Work_FunkItUp editor_interactive
Major Work_FunkItUp editor_interactive
 
2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions
 
Tablet Design Tips
Tablet Design TipsTablet Design Tips
Tablet Design Tips
 
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
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
UIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxUIUX Design - report on summer training.docx
UIUX Design - report on summer training.docx
 
User Experience Design for Tablets
User Experience Design for TabletsUser Experience Design for Tablets
User Experience Design for Tablets
 
Intro to user experience design
Intro to user experience designIntro to user experience design
Intro to user experience design
 
User interface design for touch screen displays
User interface design for touch screen displaysUser interface design for touch screen displays
User interface design for touch screen displays
 
Webinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco MarcellinoWebinar UI/UX by Francesco Marcellino
Webinar UI/UX by Francesco Marcellino
 
How to Create Insanely Cool UX Designs Using Micro-interactions?
How to Create Insanely Cool UX Designs Using Micro-interactions?How to Create Insanely Cool UX Designs Using Micro-interactions?
How to Create Insanely Cool UX Designs Using Micro-interactions?
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
UX, the buzz!
UX, the buzz!UX, the buzz!
UX, the buzz!
 
Lesson 5 advanced presentation skills
Lesson 5 advanced presentation skillsLesson 5 advanced presentation skills
Lesson 5 advanced presentation skills
 

Dernier

Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe 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
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 

Dernier (20)

Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
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
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

Mobile Apps Design Principles

  • 1. Mobile Apps Design Principles Mohamad Sani sani@msani.net
  • 2. Main Principles 1. Enchant me Just like a well-made tool, your app should strive to combine beauty, simplicity and purpose to create a magical experience that is effortless and powerful 2. Simplify my life – Easy to understand – When people use your app for the first time, they should intuitively grasp the most important features – Simple tasks never require complex procedure – Never overwhelmed by too many choices or irrelevant flash 3. Make me amazing – Empower people to try new things and to use apps in inventive new ways – Feel personal, giving people access to superb technology with clarity and grace
  • 3. Beauty is more than skin deep. Mobile apps should be sleek and aesthetically pleasing on multiple levels. Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works of art in their own right. Just like a well-made tool, your app should strive to combine beauty, simplicity and purpose to create a magical experience that is effortless and powerful. ENCHANT ME
  • 4. Delight Delight me in surprising ways A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.
  • 5. Real Object Real objects are more fun than buttons and menus Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.
  • 6. Personal Let me make it mine People love to add personal touches because it helps them feel at home and in control. Provide sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder primary tasks.
  • 7. Learn Preference Get to know me Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.
  • 8. Mobile apps make life easier and are easy to understand. When people use your app for the first time, they should intuitively grasp the most important features. The design work doesn't stop at the first use, though. Mobile apps remove ongoing chores like file management and syncing. Simple tasks never require complex procedures, and complex tasks are tailored to the human hand and mind. People of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or irrelevant flash. SIMPLIFY MY LIFE
  • 9. Short Text Keep it brief Use short phrases with simple words. People are likely to skip sentences if they're long.
  • 10. Picture Pictures are faster than words Consider using pictures to explain ideas. They get people's attention and can be much more efficient than words.
  • 11. Predict & Confirm Decide for me but let me have the final say Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo‘.
  • 12. Display Few Only show what I need when I need it People get overwhelmed when they see too much at once. Break tasks and information into small, digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.
  • 13. Navigation I should always know where I am Give people confidence that they know their way around. Make places in your app look distinct and use transitions to show relationships among screens. Provide feedback on tasks in progress.
  • 14. Save Works Never lose my stuff Save what people took time to create and let them access it from anywhere. Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.
  • 15. Look Same If it looks the same, it should act the same Help people discern functional differences by making them visually distinct rather than subtle. Avoid modes, which are places that look similar but act differently on the same input
  • 16. Interrupt Only If Important Only interrupt me if it's important Like a good personal assistant, shield people from unimportant minutiae. People want to stay focused, and unless it's critical and time- sensitive, an interruption can be taxing and frustrating
  • 17. It's not enough to make an app that is easy to use. Good mobile apps empower people to try new things and to use apps in inventive new ways. Smartphones lets people combine applications into new workflows through multitasking, notifications, and sharing across apps. At the same time, your app should feel personal, giving people access to superb technology with clarity and grace. MAKE ME AMAZING
  • 18. Tricks Give me tricks that work everywhere People feel great when they figure things out for themselves. Make your app easier to learn by leveraging visual patterns and muscle memory from other mobile apps. For example, the swipe gesture may be a good navigational shortcut
  • 19. Gentle Error It's not my fault Be gentle in how you prompt people to make corrections. They want to feel smart when they use your app. If something goes wrong, give clear recovery instructions but spare them the technical details. If you can fix it behind the scenes, even better
  • 20. Sprinkle Sprinkle encouragement Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow. Drag & drop is a good practice
  • 21. Heavy Lifting Do the heavy lifting for me Make novices feel like experts by enabling them to do things they never thought they could. For example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in only a few steps
  • 22. Make Important Fast Make important things fast Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player.
  • 24. 48 px Rhythm • 48 pixels for touchable UI components • Why 48 px? – On average, 48 px translate to a physical size of about 9mm (with some variability). This is comfortably in the range of recommended target sizes (7-10 mm) for touch screen objects and users will be able to reliably and accurately target them with their fingers. – If you design your elements to be at least 48 px high and wide you can guarantee that: 1. your targets will never be smaller than the minimum recommended target size of 7mm regardless of what screen they are displayed on. 2. you strike a good compromise between overall information density on the one hand, and targetability of UI elements on the other.
  • 25. 48 px Rhythm Mind the gaps • Spacing between each UI element is 8dp.
  • 26. 48 px Rhythm Examples
  • 27. Color • Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast between visual components. • Red and green may be indistinguishable to color-blind users.
  • 28. Color for Contextual Icon • Use non-neutral colors sparingly and with purpose. • For example, Gmail uses yellow in the star icon to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with the background.
  • 29. 1. Find ways to display useful content on your start screen. 2. Use action bars to provide consistent navigation. 3. Keep your hierarchies shallow by using horizontal navigation and shortcuts. 4. Use multi-select to allow the user to act on collections of data. 5. Allow for quick navigation between detail items with swipe views. APP STRUCTURE CHECKLIST
  • 30. App Structure 1 Find ways to display useful content on your start screen.
  • 31. App Structure 2 Use action bars to provide consistent navigation
  • 32. App Structure 3 Keep your hierarchies shallow by using horizontal navigation and shortcuts
  • 33. App Structure 4 Use multi-select to allow the user to act on collections of data
  • 34. App Structure 5 Allow for quick navigation between detail items with swipe views
  • 35. 1. Brief 2. Simple 3. Friendly 4. Most Important First 5. Only The Necessary 6. Avoid Repetition WRITING STYLE
  • 36. Keep it brief Be concise, simple and precise. Start with a 30 character limit (including spaces), and don't use more unless absolutely necessary.
  • 37. Keep it simple Pretend you're speaking to someone who's smart and competent, but doesn't know technical jargon and may not speak English very well. Use short words, active verbs, and common nouns.
  • 38. Be friendly • Use contractions. • Talk directly to the reader using second person ("you"). • If your text doesn't read the way you'd say it in casual conversation, it's probably not the way you should write it. • Don't be abrupt, make the user feel safe, happy and energized.
  • 39. Put the most important thing first The first two words (around 11 characters, including spaces) should include at least a taste of the most important information in the string. If they don't, start over.
  • 40. Only The Necessary Describe only what's necessary and no more. Don't try to explain subtle differences. They will be lost on most users.
  • 41. Avoid repetition If a significant term gets repeated within a screen or block of text, find a way to use it just once