SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & DevelopmentRonnie Liew
 
Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interfaceThomas Byttebier
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface designZdeněk Lanc
 
Don Norman "Design of everyday things" - UX Book Club
Don Norman "Design of everyday things" - UX Book ClubDon Norman "Design of everyday things" - UX Book Club
Don Norman "Design of everyday things" - UX Book ClubWojciech Staszczyk
 
Brand Identity in UI/UX Design
Brand Identity in UI/UX DesignBrand Identity in UI/UX Design
Brand Identity in UI/UX DesignAdryan Putra
 
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
 
UI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User ExperienceUI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User ExperienceCloud Analogy
 
Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)RJNithin
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Developmentshikishiji
 
Mobile Application Development With Android
Mobile Application Development With AndroidMobile Application Development With Android
Mobile Application Development With Androidguest213e237
 
Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDan Moriarty
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introductionIsmail Norri
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application DevelopmentTharindu Dassanayake
 

Was ist angesagt? (20)

What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
Introduction to Figma
Introduction to FigmaIntroduction to Figma
Introduction to Figma
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interface
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
Don Norman "Design of everyday things" - UX Book Club
Don Norman "Design of everyday things" - UX Book ClubDon Norman "Design of everyday things" - UX Book Club
Don Norman "Design of everyday things" - UX Book Club
 
Brand Identity in UI/UX Design
Brand Identity in UI/UX DesignBrand Identity in UI/UX Design
Brand Identity in UI/UX Design
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
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)
 
UI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User ExperienceUI vs UX: Comparison Between User Interface and User Experience
UI vs UX: Comparison Between User Interface and User Experience
 
Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)
 
Design process
Design processDesign process
Design process
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
Mobile Application Development With Android
Mobile Application Development With AndroidMobile Application Development With Android
Mobile Application Development With Android
 
Designing Websites With a Mobile First Approach
Designing Websites With a Mobile First ApproachDesigning Websites With a Mobile First Approach
Designing Websites With a Mobile First Approach
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 

Andere mochten auch

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
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile AppsKamil Zieba
 
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
 
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
 

Andere mochten auch (13)

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
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
 
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
 
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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
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
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
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
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
"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
 
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
 
"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
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
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
 
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
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
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
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
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
 

Kürzlich hochgeladen (20)

What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
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
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
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
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
"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
 
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
 
"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
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
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!
 
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
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
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
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
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
 

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