SlideShare une entreprise Scribd logo
1  sur  109
Télécharger pour lire hors ligne
BEST MOBILE UI
  PRACTICES

 September 18, 2010
      Boris Chan
      Xtreme Labs
ABOUT ME
ABOUT XTREME LABS
A QUICK SURVEY...
IF YOU’RE ON TWITTER




       #FITC

  @UNDERPUNCHES
WHAT WE’RE TALKING ABOUT



• Know    Your Users, Know Your Platforms

• UI   Guidelines

• Best   Practices
KNOW YOUR USERS
Phones are all becoming smartphones.
          (Even in Canada)
Phones are all becoming smartphones.
100 MILLION MOBILE USERS IN FEB. 2010
          (53% INCREASE IN 6 MONTHS)
  SOURCE: CHAMATH PALIHAPITIYA , VP USER GROWTH, MOBILE AND
                      INTERNATIONAL
Best Mobile UI Practices - FITC Mobile 2010
MORE PEOPLE ARE USING
 SMARTPHONES TO DO
  MORE COMPLICATED
       THINGS.
THE GAME IS CHANGING

• iOS   (4.1/4.2)

• Android   (2.2 Froyo/3.0/Tablet/GoogleTV)

• BlackBerry   (OS 6.0/new models)

• Symbian3

• Windows     Phone 7
Source: AdMob, May 2010
“If you know the enemy and know yourself,
you need not fear the result of a hundred
battles... If you know neither the enemy nor
yourself, you will succumb in every battle.”
                            - Sun Tzu, The Art of War
LEARN HOW PHONES
      WORK.
LEARN HOW USERS
     WORK.
WIN YOUR HUNDRED
     BATTLES.
KNOW YOUR PLATFORMS.
READ THESE!

• Apple’s   iPhone Human Interface Guidelines

• RIM’s   BlackBerry Developer Docs.

• Windows      Phone 7 Series UI Design and Interaction Guide

• Android    Best Practices - UI Guidelines

• (and   in general...)
USE THE PHONES


• Who  should? artists, designers, product managers, developers,
 bizdev (everyone)

• You   will see what’s wrong and what’s right very quickly

• Dog   food...
SMARTPHONES ARE
 ALL DIFFERENT.
WORSE, SMARTPHONES ON THE
  SAME PLATFORM CAN BE
        DIFFERENT!
 (JUST ASK A BLACKBERRY OR ANDROID DEVELOPER)
STICKING TO CONVENTION MEANS...
SOMETHING COMPLETELY
   DIFFERENT ON EVERY
        PLATFORM.

         (SO RTFM)
Best Mobile UI Practices - FITC Mobile 2010
WHAT WE’RE TALKING ABOUT



• Know    Your Users, Know Your Platforms

• UI   Guidelines

• Best   Practices
WHAT WE’RE TALKING ABOUT




  UI GUIDELINES
IN GENERAL...

• Use   consistent metaphors

• Follow   user’s mental models

• Feedback

• Forgiveness

• Aesthetic   integrity
ISN’T THIS JUST FLUFF?


• Consider:

 • Consistent     user experience

 • Learnability

 • Better   reception, reviews
CONSIDER THE FORM
         FACTOR
•   smaller screens

•   slower processors

•   slower wireless/carrier networks

•   have less available memory

•   display one screen at a time
       source: BlackBerry UI Guidelines, 2009
BLACKBERRY HIGHLIGHTS
•   Use or extend given UI components               •   Minimize the number of times that users
                                                        need to click the trackwheel, trackball,
•   Follow the standard navigation model as             trackpad, or touch screen to complete a
    closely as possible to produce consistent           task.
    results across applications.
                                                    •   Design your UI to allow users to change
•   Stay focused on users' immediate task.              their mind and undo commands. (Not
    Display what the user needs.                        direct manipulation)

•   Verify that the actions that are available in
    the menu are relevant to users' current
    context.
ANDROID HIGHLIGHTS

• Place   most frequently used actions first

• Context    Menus should be shortcuts

• Separate   specific from global commands

• Don’t   take over the BACK key

• Use   the notifications system
IPHONE GUIDELINES
“Figure out the absolute least you need to do to implement the idea,
     do just that, and then polish the hell out of the experience.”
                            – John Gruber
EACH SCREEN SHOULD DISPLAY
    ONE THING AT A TIME.




   (That “thing” may be a list, but it should just be a list.)
EACH SCREEN SHOULD DISPLAY
    ONE THING AT A TIME.




   (That “thing” may be a list, but it should just be a list.)
MINIMIZE THE NUMBER
   OF ON-SCREEN
     ELEMENTS.
Best Mobile UI Practices - FITC Mobile 2010
MAKE UI ELEMENTS LARGE ENOUGH TO BE
               EASY TO TAP
(Place them far enough apart that there is little risk of tapping the wrong target by mistake.)
MAKE UI ELEMENTS LARGE ENOUGH TO BE
               EASY TO TAP
(Place them far enough apart that there is little risk of tapping the wrong target by mistake.)
ESCHEW PREFERENCES AS MUCH AS
           POSSIBLE
(AND ASSUME THAT NEARLY ALL USERS WILL USE THE
              DEFAULT SETTINGS)
AS YOU SHOW MORE DETAIL,
   CONCEPTUALLY YOU MOVE FROM LEFT
             TO RIGHT —




but it’s best to minimize how deep you can get while
                drilling down to the right.
AS YOU SHOW MORE DETAIL,
   CONCEPTUALLY YOU MOVE FROM LEFT
             TO RIGHT —




but it’s best to minimize how deep you can get while
                drilling down to the right.
AS YOU SHOW MORE DETAIL,
   CONCEPTUALLY YOU MOVE FROM LEFT
             TO RIGHT —




but it’s best to minimize how deep you can get while
                drilling down to the right.
AS YOU SHOW MORE DETAIL,
   CONCEPTUALLY YOU MOVE FROM LEFT
             TO RIGHT —




but it’s best to minimize how deep you can get while
                drilling down to the right.
AS YOU SHOW MORE DETAIL,
   CONCEPTUALLY YOU MOVE FROM LEFT
             TO RIGHT —




but it’s best to minimize how deep you can get while
                drilling down to the right.
AS YOU SHOW MORE DETAIL,
   CONCEPTUALLY YOU MOVE FROM LEFT
             TO RIGHT —




but it’s best to minimize how deep you can get while
                drilling down to the right.
Best Mobile UI Practices - FITC Mobile 2010
KNOW YOUR
PLATFORMS.
WHAT WE’RE TALKING ABOUT



• Know    Your Users, Know Your Platforms

• UI   Principles & Guidelines

• Best   Practices
WHAT WE’RE TALKING ABOUT




 BEST PRACTICES
BEST PRACTICES


• Making   a Case for Native Elements

• Applying   UI Principles/Guidelines

• Keeping   Navigational State

• Bonus: The   Need for Speed
A CASE FOR NATIVE
    ELEMENTS
A CASE FOR NATIVE
    ELEMENTS
    (Where possible...)
WHERE TROUBLE STARTS...

• Wireframes   and Mocks

 • Wrong    fonts/UI elements

 • Implying   impossible flow

 • Not   appropriate for resolution

• Somock using correct elements, correct flow, and check it on
 a phone
Best Mobile UI Practices - FITC Mobile 2010
Standard Typefaces
STANDARD TYPEFACES

Standard Typefaces
TABLE OF STANDARD FONTS
                American Typewriter, American Typewriter, Condensed
    iPhone      Arial, Arial Rounded MT Bold, Courier New, Georgia,
                 Helvetica, Marker Felt, Times New Roman, Trebuchet
                                 MS, Verdana, Zapfino
                BBAlpha Sans, BBAlpha Serif, BBCapitals, BBCasual, BBClarity,
                  BBCondensed, BBMillbank, BBMillbankTall, BBSansSerif,
   BlackBerry        BBSansSerifSquare, BBSerif, BBSerifFixed, System


                  Droid Sans, Droid Serif, Droid Sans
    Android
                                Mono

    WinMo       MS Tahoma, Courier, MS Segoe, MS Nina
STICKING TO CONVENTION


• Avoid   over-designing

• Don’t   let branding get in the way

• Follow   Expectations
AVOID OVER-DESIGNING
DEVELOPER’S PERSPECTIVE

• Features   instead of custom UI elements

    • necessary    evils exist

• Users   are getting a familiar a.k.a. not broken experience

• Have    to deal with issues like localization
DESIGNER’S PERSPECTIVE

• Need  to work with UX/UI folks to create a design and a
 layout that is doable

• Might
      have design compromised by limitations of native
 elements

• Managing   expectations about branding and identity
DON’T LET BRANDING GET
         IN THE WAY.

• Brand     colors

  • If   red is integral to your design...

• Particular   wording...

  • If
     you don’t want to use the word search, favorites/
    bookmarks...
Best Mobile UI Practices - FITC Mobile 2010
Best Mobile UI Practices - FITC Mobile 2010
FOLLOW EXPECTATIONS


• Existing
         mental models– they will already have intuition before
 they use your application

• Provides   expected affordances and hinting

• So   use and extend UI elements when possible.
Birdfeed -       iPhone -
                                Airfight
Twitter Client   Settings.app
Best Mobile UI Practices - FITC Mobile 2010
RULES WERE MADE TO BE
               BROKEN...
•   Innovative interfaces

•   Extra polish

•   Poor native elements
BUT CONSIDER THIS...


• remember      that platforms are constantly evolving

• if   you handle things in a custom manner...

  • example: touch     on BlackBerry
PLEASE... USE NATIVE
    ELEMENTS.
APPLYING UI GUIDELINES
APPLYING UI GUIDELINES

•   Exposing functionality

•   Building discoverability

•   Enabling customization

•   Mapping Functionality

•   Providing feedback

•   Building in forgiveness
EXPOSING FUNCTIONALITY

• iPhone

 • 1:1   screen/functionality mapping

• BlackBerry

 • context   menu, keyboard shortcuts

• Android

 • menu, drawer, notifications
DISCOVERABILITY

•   iPhone/Android

    •   Gestures, context-
        switching buttons/screens

•   BlackBerry

    •   Menus, keyboard shortcuts
CUSTOMIZATION

• Provide   intelligent defaults

• iPhone: avoid   if possible and use the Settings.app

  • Two   schools of thought on this...

• BlackBerry/Android/Other: provide       Options/Settings if
 possible
MAPPING FUNCTIONALITY

• iPhone/Android   - to onscreen elements/buttons

• BlackBerry/Symbian
                   - limit onscreen clickable items, map to
 menu items where appropriate

• Android - to onscreen elements/provide context menu as
 shortcuts/drawer items as appropriate
PROVIDING FEEDBACK

• iPhone   - Direct Manipulation wherever possible

 • animation, sounds, hint   with colours

• Android

 • add   vibrations, notifications

• BlackBerry   - Prompt for saving, LED, icons, dialog boxes
FORGIVENESS

• Blackberry/Symbian: prompt     for saving/deleting, layout
 focusable items intelligently

• iPhone/Android:

 • keep   DM actions easily reversible

 • layouttouch elements + provide smart padding when
   necessary,

 • spend    time tweaking touch
STAYING CONSISTENT

• Back   button should do what you think it does

• Your   UI elements should behave like standard UI elements

• Providing   keyboard shortcuts/gestures

• Use menus, action sheets, drawers, etc. appropriate and place
 in expected locations
KEEPING NAVIGATIONAL
        STATE
NAVIGATIONAL STATE


• sometimes it makes sense to keep track of the states for what
 users are doing in your application

• Example: Facebook   app...

• Bonus: betterinformation organization, device integration,
 users can’t get lost
HOW?


• Android: Activity   config (i.e. android:alwaysRetainTaskState)

• iPhone: URL  mapping for Controllers, persisting last state on
 application termination, handling multitasking methods

• BlackBerry: think   about how your application is invoked, but
 less important
WHAT WE TALKED ABOUT



• Know    Your Users, Know Your Platforms

• UI   Principles & Guidelines

• Best   Practices
SUMMARY: BEST PRACTICES


• use   native elements

• apply   UI guidelines/principles according to platform

• make    the app learnable from existing mental models

• don’t   let the user get lost
BONUS:
THE NEED FOR SPEED
THE NEED FOR SPEED



• Drawing   efficiently

• Do   things at the right time
DRAWING EFFICIENTLY
IN GENERAL

• Avoid   unnecessary nesting of views

  • when the OS tries to figure out what to draw, it has to do a
   lot more work

• Solution: flat   hierarchies

  • what   does this mean?

  • what   happens? (faster layout code, faster blending, etc.)
ANDROID: THE PROBLEMS



• Using   an inefficient layout can lead to complex layout trees

• inflation   is also a problem



           Refer to http://developer.android.com/resources/articles/layout-tricks-efficiency.html
ANDROID: WHAT TO DO


• use   the right layout

  • i.e. use   RelativeLayout instead of LinearLayout if applicable

• inflate   where optimal

  • i.e. use   a ViewStub if it makes sense

           Refer to http://developer.android.com/resources/articles/layout-tricks-efficiency.html
ANDROID: WHY IT WORKS




  Refer to http://developer.android.com/resources/articles/layout-tricks-efficiency.html
IPHONE: THE PROBLEMS

• Blending         of UIView layers is very slow on the iPhone

   • (anything          with alpha)

• Typical       layouts need to blend multiple stacked layers

   • either       through manually adding subviews

   • or     through Interface Builder

Refer to http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/ or Apple’s TableSuite demo
IPHONE: WHAT TO DO


• Fordrawing views that require high-performance, (i.e. drawing
 thousands of table view cells in a list) use one custom view
 where you do all the drawing, instead of adding subviews

• Pre-blend         this view using CoreGraphics


  Refer to http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/ or Apple’s TableSuite demo
IPHONE: WHY IT WORKS



• One     layer means no blending (or pre-blending)

• just “one       big, opaque texture”



  Refer to http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/ or Apple’s TableSuite demo
BLACKBERRY: THE PROBLEM


• Repainting   a whole manager is expensive

• Costs   associated with:

  • add, delete, replace, etc.
BLACKBERRY: WHAT TO DO

• Paint   only what’s visible (override subpaint(), etc.)

• Minimize    the nesting of layouts (paint if it makes sense)

• Minimize    calls that trigger sublayout

  • i.e. don’t   add lots of items to visible managers

  • instead: override    add/sublayout (hard) or use a temporary
   manager (easy)
BLACKBERRY: WHY IT WORKS


• Mostly working around the default behaviour of Managers/
 Fields on BlackBerry

• Tip: use   a profiler to see where the time is spent in your code

  • chances    are sublayout is being called a lot
DO THINGS AT THE RIGHT
        TIME
“ALL THINGS ENTAIL RISING AND
FALLING TIMING. YOU MUST BE ABLE
TO DISCERN THIS.”
                     — Mushashi Miyamoto
DO THINGS AT THE RIGHT
               TIME

• If
   you can hide complexity from the user, or do things while
  out of sight, then things will feel fast

• If   you can avoid extra work, that’s also great

  • be    smart in the interaction design

  • (but    caching is a whole separate talk!)
EXAMPLE: GETTING A USER’S
       LOCATION



• Why    does this benefit the most from doing it at the right
 time?




     Refer to http://developer.android.com/guide/topics/location/obtaining-user-location.html
THE TIMELINE FOR GETTING
       LOCATION




 Refer to http://developer.android.com/guide/topics/location/obtaining-user-location.html
SUGGESTIONS
• Start   getting a location as the app starts

• Use   a cached location if it is a recent/good location




        Refer to http://developer.android.com/guide/topics/location/obtaining-user-location.html
LEARN THE PLATFORMS.
ALL IN ALL...


• Learn    your platforms, phones

• Design    to platforms, guidelines

• Stick   to convention, conviction


      Refer to http://developer.android.com/guide/topics/location/obtaining-user-location.html
“TRUE COMFORT IS THE
ABSENCE OF AWARENESS.”
     – BILL STUMPF
THANK YOU!
QUESTIONS?

  Twitter: @underpunches

Email: boris@xtremelabs.com

Contenu connexe

Tendances

Overview Of Existing Products Of Interest. Presentation.
Overview Of Existing Products Of Interest. Presentation.Overview Of Existing Products Of Interest. Presentation.
Overview Of Existing Products Of Interest. Presentation.University of Limerick
 
These mobile apps will let you totally rethink hybrid app development
These mobile apps will let you totally rethink hybrid app developmentThese mobile apps will let you totally rethink hybrid app development
These mobile apps will let you totally rethink hybrid app developmentIvano Malavolta
 
Guide Dogs and Digital Devices
Guide Dogs and Digital DevicesGuide Dogs and Digital Devices
Guide Dogs and Digital DevicesXamarin
 
Mobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devicesMobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devicesAntony Ribot
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyDániel Góré
 
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 User Experience
Mobile User ExperienceMobile User Experience
Mobile User ExperienceDonna Lichaw
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)Mohammad Khalil
 
Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2GeneXus
 
GUIDE_Series_Mobilize_Your_Nonprofit
GUIDE_Series_Mobilize_Your_NonprofitGUIDE_Series_Mobilize_Your_Nonprofit
GUIDE_Series_Mobilize_Your_Nonprofitguidecreative
 
Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel PublishingJoe Welinske
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success enAcrmnet s.r.l.
 
Games and Java ME - Have fun and earn some money
Games and Java ME - Have fun and earn some moneyGames and Java ME - Have fun and earn some money
Games and Java ME - Have fun and earn some moneyMarcelo Quinta
 
How to write mobile optimized content for your app
How to write mobile optimized content for your appHow to write mobile optimized content for your app
How to write mobile optimized content for your appPaperlit
 
Heuristic Evaluation
Heuristic EvaluationHeuristic Evaluation
Heuristic EvaluationEric Bollman
 
Mobile web vs. native apps: It's not about technology, it's about psychology
Mobile web vs. native apps: It's not about technology, it's about psychologyMobile web vs. native apps: It's not about technology, it's about psychology
Mobile web vs. native apps: It's not about technology, it's about psychologyiQcontent
 
Hands-free but not Eyes-free: A Usability Evaluation of Siri while Driving
Hands-free but not Eyes-free: A Usability Evaluation of Siri while DrivingHands-free but not Eyes-free: A Usability Evaluation of Siri while Driving
Hands-free but not Eyes-free: A Usability Evaluation of Siri while DrivingToine Bogers
 

Tendances (20)

Overview Of Existing Products Of Interest. Presentation.
Overview Of Existing Products Of Interest. Presentation.Overview Of Existing Products Of Interest. Presentation.
Overview Of Existing Products Of Interest. Presentation.
 
These mobile apps will let you totally rethink hybrid app development
These mobile apps will let you totally rethink hybrid app developmentThese mobile apps will let you totally rethink hybrid app development
These mobile apps will let you totally rethink hybrid app development
 
Guide Dogs and Digital Devices
Guide Dogs and Digital DevicesGuide Dogs and Digital Devices
Guide Dogs and Digital Devices
 
Mobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devicesMobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devices
 
M3 conf
M3 confM3 conf
M3 conf
 
Usability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt Academy
 
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 User Experience
Mobile User ExperienceMobile User Experience
Mobile User Experience
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)
 
Ux ui presentation2
Ux ui presentation2Ux ui presentation2
Ux ui presentation2
 
GUIDE_Series_Mobilize_Your_Nonprofit
GUIDE_Series_Mobilize_Your_NonprofitGUIDE_Series_Mobilize_Your_Nonprofit
GUIDE_Series_Mobilize_Your_Nonprofit
 
Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel Publishing
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
 
Games and Java ME - Have fun and earn some money
Games and Java ME - Have fun and earn some moneyGames and Java ME - Have fun and earn some money
Games and Java ME - Have fun and earn some money
 
How to write mobile optimized content for your app
How to write mobile optimized content for your appHow to write mobile optimized content for your app
How to write mobile optimized content for your app
 
Creativity in business 7
Creativity in business 7Creativity in business 7
Creativity in business 7
 
Heuristic Evaluation
Heuristic EvaluationHeuristic Evaluation
Heuristic Evaluation
 
Mobile web vs. native apps: It's not about technology, it's about psychology
Mobile web vs. native apps: It's not about technology, it's about psychologyMobile web vs. native apps: It's not about technology, it's about psychology
Mobile web vs. native apps: It's not about technology, it's about psychology
 
Hands-free but not Eyes-free: A Usability Evaluation of Siri while Driving
Hands-free but not Eyes-free: A Usability Evaluation of Siri while DrivingHands-free but not Eyes-free: A Usability Evaluation of Siri while Driving
Hands-free but not Eyes-free: A Usability Evaluation of Siri while Driving
 
Mobile operating systems
Mobile operating systemsMobile operating systems
Mobile operating systems
 

En vedette

Designing the mobile user experience
Designing the mobile user experienceDesigning the mobile user experience
Designing the mobile user experienceIntergen
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesOXD
 
July 2012 Newsletter
July 2012 NewsletterJuly 2012 Newsletter
July 2012 NewsletterFelix Ortiz
 
Our back to school album
Our back to school albumOur back to school album
Our back to school albumLisa Baird
 
What is Effective Technology Integration for 21st Century Learners?
What is Effective Technology Integration for 21st Century Learners?What is Effective Technology Integration for 21st Century Learners?
What is Effective Technology Integration for 21st Century Learners?Jessica Watson
 
D:\งานส่ง\G48 53011810075
D:\งานส่ง\G48 53011810075D:\งานส่ง\G48 53011810075
D:\งานส่ง\G48 53011810075BenjamasS
 
Top+5+world+flatness
Top+5+world+flatnessTop+5+world+flatness
Top+5+world+flatnessIUisawesome
 
Hire Immigrants Halifax Allies Report 2010
Hire Immigrants Halifax Allies Report 2010Hire Immigrants Halifax Allies Report 2010
Hire Immigrants Halifax Allies Report 2010Halifax Partnership
 
Stop overusing regular expressions!
Stop overusing regular expressions!Stop overusing regular expressions!
Stop overusing regular expressions!Franklin Chen
 
Rapid Web Development with Python for Absolute Beginners
Rapid Web Development with Python for Absolute BeginnersRapid Web Development with Python for Absolute Beginners
Rapid Web Development with Python for Absolute BeginnersFatih Karatana
 
Beyond xUnit example-based testing: property-based testing with ScalaCheck
Beyond xUnit example-based testing: property-based testing with ScalaCheckBeyond xUnit example-based testing: property-based testing with ScalaCheck
Beyond xUnit example-based testing: property-based testing with ScalaCheckFranklin Chen
 
Physical Science: Chapter 5, sec3
Physical Science: Chapter 5, sec3Physical Science: Chapter 5, sec3
Physical Science: Chapter 5, sec3mshenry
 
Tmh5 rahasia-kitab-tujuh
Tmh5 rahasia-kitab-tujuhTmh5 rahasia-kitab-tujuh
Tmh5 rahasia-kitab-tujuhRidwan Gucci
 
Boris Chan - AndroidTO - Becoming Social by Default on Android
Boris Chan - AndroidTO - Becoming Social by Default on AndroidBoris Chan - AndroidTO - Becoming Social by Default on Android
Boris Chan - AndroidTO - Becoming Social by Default on AndroidBoris Chan
 
Gender in NTFP value chains in the Congo Basin
Gender in NTFP value chains in the Congo BasinGender in NTFP value chains in the Congo Basin
Gender in NTFP value chains in the Congo BasinVerina Ingram
 

En vedette (20)

Designing the mobile user experience
Designing the mobile user experienceDesigning the mobile user experience
Designing the mobile user experience
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
 
July 2012 Newsletter
July 2012 NewsletterJuly 2012 Newsletter
July 2012 Newsletter
 
Pirmā tikšanās ar bibliotēku _MD
Pirmā tikšanās ar bibliotēku _MDPirmā tikšanās ar bibliotēku _MD
Pirmā tikšanās ar bibliotēku _MD
 
Our back to school album
Our back to school albumOur back to school album
Our back to school album
 
What is Effective Technology Integration for 21st Century Learners?
What is Effective Technology Integration for 21st Century Learners?What is Effective Technology Integration for 21st Century Learners?
What is Effective Technology Integration for 21st Century Learners?
 
D:\งานส่ง\G48 53011810075
D:\งานส่ง\G48 53011810075D:\งานส่ง\G48 53011810075
D:\งานส่ง\G48 53011810075
 
Windows 8
Windows 8Windows 8
Windows 8
 
Portfolio
PortfolioPortfolio
Portfolio
 
Rene descartes
Rene descartesRene descartes
Rene descartes
 
Top+5+world+flatness
Top+5+world+flatnessTop+5+world+flatness
Top+5+world+flatness
 
Hire Immigrants Halifax Allies Report 2010
Hire Immigrants Halifax Allies Report 2010Hire Immigrants Halifax Allies Report 2010
Hire Immigrants Halifax Allies Report 2010
 
Stop overusing regular expressions!
Stop overusing regular expressions!Stop overusing regular expressions!
Stop overusing regular expressions!
 
Rapid Web Development with Python for Absolute Beginners
Rapid Web Development with Python for Absolute BeginnersRapid Web Development with Python for Absolute Beginners
Rapid Web Development with Python for Absolute Beginners
 
Beyond xUnit example-based testing: property-based testing with ScalaCheck
Beyond xUnit example-based testing: property-based testing with ScalaCheckBeyond xUnit example-based testing: property-based testing with ScalaCheck
Beyond xUnit example-based testing: property-based testing with ScalaCheck
 
Physical Science: Chapter 5, sec3
Physical Science: Chapter 5, sec3Physical Science: Chapter 5, sec3
Physical Science: Chapter 5, sec3
 
Tmh5 rahasia-kitab-tujuh
Tmh5 rahasia-kitab-tujuhTmh5 rahasia-kitab-tujuh
Tmh5 rahasia-kitab-tujuh
 
Boris Chan - AndroidTO - Becoming Social by Default on Android
Boris Chan - AndroidTO - Becoming Social by Default on AndroidBoris Chan - AndroidTO - Becoming Social by Default on Android
Boris Chan - AndroidTO - Becoming Social by Default on Android
 
Pres
PresPres
Pres
 
Gender in NTFP value chains in the Congo Basin
Gender in NTFP value chains in the Congo BasinGender in NTFP value chains in the Congo Basin
Gender in NTFP value chains in the Congo Basin
 

Similaire à Best Mobile UI Practices - FITC Mobile 2010

UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design TipsLuis Abreu
 
Common Design Patterns for Mobile (part 2)
Common Design Patterns for Mobile (part 2)Common Design Patterns for Mobile (part 2)
Common Design Patterns for Mobile (part 2)Ivano Malavolta
 
Fred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UIFred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UIAxway Appcelerator
 
Designing a Great UI
Designing a Great UIDesigning a Great UI
Designing a Great UIFred Spencer
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile AppsKamil Zieba
 
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1Violeta Salas
 
A11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile appsA11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile appsAshton Williams
 
Mobile product - "Build great apps!" at ProductTank Paris #17
Mobile product - "Build great apps!" at ProductTank Paris #17Mobile product - "Build great apps!" at ProductTank Paris #17
Mobile product - "Build great apps!" at ProductTank Paris #17Alexandre Jubien
 
Implementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryImplementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryFresche Solutions
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile appsIvano Malavolta
 
Going mobile writing content for mobile
Going mobile  writing content for mobileGoing mobile  writing content for mobile
Going mobile writing content for mobileMaya Irving-Regev
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsiOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsMartin Ebner
 
Designing for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersDesigning for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersOscar Gonzalez Garza
 
Design for Multitouch
Design for Multitouch Design for Multitouch
Design for Multitouch Robert Winters
 
Honeycomb Design For Developers
Honeycomb Design For DevelopersHoneycomb Design For Developers
Honeycomb Design For DevelopersMutual Mobile
 
Devmento발표100525
Devmento발표100525Devmento발표100525
Devmento발표100525jinwook shin
 
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerT3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerRobert Zinner
 

Similaire à Best Mobile UI Practices - FITC Mobile 2010 (20)

UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 
Common Design Patterns for Mobile (part 2)
Common Design Patterns for Mobile (part 2)Common Design Patterns for Mobile (part 2)
Common Design Patterns for Mobile (part 2)
 
Advanced titanium for i os
Advanced titanium for i osAdvanced titanium for i os
Advanced titanium for i os
 
Fred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UIFred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UI
 
Designing a Great UI
Designing a Great UIDesigning a Great UI
Designing a Great UI
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
 
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1
 
A11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile appsA11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile apps
 
Mobile product - "Build great apps!" at ProductTank Paris #17
Mobile product - "Build great apps!" at ProductTank Paris #17Mobile product - "Build great apps!" at ProductTank Paris #17
Mobile product - "Build great apps!" at ProductTank Paris #17
 
Implementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryImplementing Modernization by Trevor Perry
Implementing Modernization by Trevor Perry
 
UI design for mobile apps
UI design for mobile appsUI design for mobile apps
UI design for mobile apps
 
Going mobile writing content for mobile
Going mobile  writing content for mobileGoing mobile  writing content for mobile
Going mobile writing content for mobile
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsiOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-Platforms
 
Designing for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersDesigning for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developers
 
Design for Multitouch
Design for Multitouch Design for Multitouch
Design for Multitouch
 
Honeycomb Design For Developers
Honeycomb Design For DevelopersHoneycomb Design For Developers
Honeycomb Design For Developers
 
Devmento발표100525
Devmento발표100525Devmento발표100525
Devmento발표100525
 
T3con10_html5_kosack_zinner
T3con10_html5_kosack_zinnerT3con10_html5_kosack_zinner
T3con10_html5_kosack_zinner
 

Dernier

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Dernier (19)

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Best Mobile UI Practices - FITC Mobile 2010

  • 1. BEST MOBILE UI PRACTICES September 18, 2010 Boris Chan Xtreme Labs
  • 5. IF YOU’RE ON TWITTER #FITC @UNDERPUNCHES
  • 6. WHAT WE’RE TALKING ABOUT • Know Your Users, Know Your Platforms • UI Guidelines • Best Practices
  • 8. Phones are all becoming smartphones. (Even in Canada)
  • 9. Phones are all becoming smartphones.
  • 10. 100 MILLION MOBILE USERS IN FEB. 2010 (53% INCREASE IN 6 MONTHS) SOURCE: CHAMATH PALIHAPITIYA , VP USER GROWTH, MOBILE AND INTERNATIONAL
  • 12. MORE PEOPLE ARE USING SMARTPHONES TO DO MORE COMPLICATED THINGS.
  • 13. THE GAME IS CHANGING • iOS (4.1/4.2) • Android (2.2 Froyo/3.0/Tablet/GoogleTV) • BlackBerry (OS 6.0/new models) • Symbian3 • Windows Phone 7
  • 15. “If you know the enemy and know yourself, you need not fear the result of a hundred battles... If you know neither the enemy nor yourself, you will succumb in every battle.” - Sun Tzu, The Art of War
  • 18. WIN YOUR HUNDRED BATTLES.
  • 20. READ THESE! • Apple’s iPhone Human Interface Guidelines • RIM’s BlackBerry Developer Docs. • Windows Phone 7 Series UI Design and Interaction Guide • Android Best Practices - UI Guidelines • (and in general...)
  • 21. USE THE PHONES • Who should? artists, designers, product managers, developers, bizdev (everyone) • You will see what’s wrong and what’s right very quickly • Dog food...
  • 22. SMARTPHONES ARE ALL DIFFERENT.
  • 23. WORSE, SMARTPHONES ON THE SAME PLATFORM CAN BE DIFFERENT! (JUST ASK A BLACKBERRY OR ANDROID DEVELOPER)
  • 24. STICKING TO CONVENTION MEANS... SOMETHING COMPLETELY DIFFERENT ON EVERY PLATFORM. (SO RTFM)
  • 26. WHAT WE’RE TALKING ABOUT • Know Your Users, Know Your Platforms • UI Guidelines • Best Practices
  • 27. WHAT WE’RE TALKING ABOUT UI GUIDELINES
  • 28. IN GENERAL... • Use consistent metaphors • Follow user’s mental models • Feedback • Forgiveness • Aesthetic integrity
  • 29. ISN’T THIS JUST FLUFF? • Consider: • Consistent user experience • Learnability • Better reception, reviews
  • 30. CONSIDER THE FORM FACTOR • smaller screens • slower processors • slower wireless/carrier networks • have less available memory • display one screen at a time source: BlackBerry UI Guidelines, 2009
  • 31. BLACKBERRY HIGHLIGHTS • Use or extend given UI components • Minimize the number of times that users need to click the trackwheel, trackball, • Follow the standard navigation model as trackpad, or touch screen to complete a closely as possible to produce consistent task. results across applications. • Design your UI to allow users to change • Stay focused on users' immediate task. their mind and undo commands. (Not Display what the user needs. direct manipulation) • Verify that the actions that are available in the menu are relevant to users' current context.
  • 32. ANDROID HIGHLIGHTS • Place most frequently used actions first • Context Menus should be shortcuts • Separate specific from global commands • Don’t take over the BACK key • Use the notifications system
  • 34. “Figure out the absolute least you need to do to implement the idea, do just that, and then polish the hell out of the experience.” – John Gruber
  • 35. EACH SCREEN SHOULD DISPLAY ONE THING AT A TIME. (That “thing” may be a list, but it should just be a list.)
  • 36. EACH SCREEN SHOULD DISPLAY ONE THING AT A TIME. (That “thing” may be a list, but it should just be a list.)
  • 37. MINIMIZE THE NUMBER OF ON-SCREEN ELEMENTS.
  • 39. MAKE UI ELEMENTS LARGE ENOUGH TO BE EASY TO TAP (Place them far enough apart that there is little risk of tapping the wrong target by mistake.)
  • 40. MAKE UI ELEMENTS LARGE ENOUGH TO BE EASY TO TAP (Place them far enough apart that there is little risk of tapping the wrong target by mistake.)
  • 41. ESCHEW PREFERENCES AS MUCH AS POSSIBLE (AND ASSUME THAT NEARLY ALL USERS WILL USE THE DEFAULT SETTINGS)
  • 42. AS YOU SHOW MORE DETAIL, CONCEPTUALLY YOU MOVE FROM LEFT TO RIGHT — but it’s best to minimize how deep you can get while drilling down to the right.
  • 43. AS YOU SHOW MORE DETAIL, CONCEPTUALLY YOU MOVE FROM LEFT TO RIGHT — but it’s best to minimize how deep you can get while drilling down to the right.
  • 44. AS YOU SHOW MORE DETAIL, CONCEPTUALLY YOU MOVE FROM LEFT TO RIGHT — but it’s best to minimize how deep you can get while drilling down to the right.
  • 45. AS YOU SHOW MORE DETAIL, CONCEPTUALLY YOU MOVE FROM LEFT TO RIGHT — but it’s best to minimize how deep you can get while drilling down to the right.
  • 46. AS YOU SHOW MORE DETAIL, CONCEPTUALLY YOU MOVE FROM LEFT TO RIGHT — but it’s best to minimize how deep you can get while drilling down to the right.
  • 47. AS YOU SHOW MORE DETAIL, CONCEPTUALLY YOU MOVE FROM LEFT TO RIGHT — but it’s best to minimize how deep you can get while drilling down to the right.
  • 50. WHAT WE’RE TALKING ABOUT • Know Your Users, Know Your Platforms • UI Principles & Guidelines • Best Practices
  • 51. WHAT WE’RE TALKING ABOUT BEST PRACTICES
  • 52. BEST PRACTICES • Making a Case for Native Elements • Applying UI Principles/Guidelines • Keeping Navigational State • Bonus: The Need for Speed
  • 53. A CASE FOR NATIVE ELEMENTS
  • 54. A CASE FOR NATIVE ELEMENTS (Where possible...)
  • 55. WHERE TROUBLE STARTS... • Wireframes and Mocks • Wrong fonts/UI elements • Implying impossible flow • Not appropriate for resolution • Somock using correct elements, correct flow, and check it on a phone
  • 58. TABLE OF STANDARD FONTS American Typewriter, American Typewriter, Condensed iPhone Arial, Arial Rounded MT Bold, Courier New, Georgia, Helvetica, Marker Felt, Times New Roman, Trebuchet MS, Verdana, Zapfino BBAlpha Sans, BBAlpha Serif, BBCapitals, BBCasual, BBClarity, BBCondensed, BBMillbank, BBMillbankTall, BBSansSerif, BlackBerry BBSansSerifSquare, BBSerif, BBSerifFixed, System Droid Sans, Droid Serif, Droid Sans Android Mono WinMo MS Tahoma, Courier, MS Segoe, MS Nina
  • 59. STICKING TO CONVENTION • Avoid over-designing • Don’t let branding get in the way • Follow Expectations
  • 61. DEVELOPER’S PERSPECTIVE • Features instead of custom UI elements • necessary evils exist • Users are getting a familiar a.k.a. not broken experience • Have to deal with issues like localization
  • 62. DESIGNER’S PERSPECTIVE • Need to work with UX/UI folks to create a design and a layout that is doable • Might have design compromised by limitations of native elements • Managing expectations about branding and identity
  • 63. DON’T LET BRANDING GET IN THE WAY. • Brand colors • If red is integral to your design... • Particular wording... • If you don’t want to use the word search, favorites/ bookmarks...
  • 66. FOLLOW EXPECTATIONS • Existing mental models– they will already have intuition before they use your application • Provides expected affordances and hinting • So use and extend UI elements when possible.
  • 67. Birdfeed - iPhone - Airfight Twitter Client Settings.app
  • 69. RULES WERE MADE TO BE BROKEN... • Innovative interfaces • Extra polish • Poor native elements
  • 70. BUT CONSIDER THIS... • remember that platforms are constantly evolving • if you handle things in a custom manner... • example: touch on BlackBerry
  • 71. PLEASE... USE NATIVE ELEMENTS.
  • 73. APPLYING UI GUIDELINES • Exposing functionality • Building discoverability • Enabling customization • Mapping Functionality • Providing feedback • Building in forgiveness
  • 74. EXPOSING FUNCTIONALITY • iPhone • 1:1 screen/functionality mapping • BlackBerry • context menu, keyboard shortcuts • Android • menu, drawer, notifications
  • 75. DISCOVERABILITY • iPhone/Android • Gestures, context- switching buttons/screens • BlackBerry • Menus, keyboard shortcuts
  • 76. CUSTOMIZATION • Provide intelligent defaults • iPhone: avoid if possible and use the Settings.app • Two schools of thought on this... • BlackBerry/Android/Other: provide Options/Settings if possible
  • 77. MAPPING FUNCTIONALITY • iPhone/Android - to onscreen elements/buttons • BlackBerry/Symbian - limit onscreen clickable items, map to menu items where appropriate • Android - to onscreen elements/provide context menu as shortcuts/drawer items as appropriate
  • 78. PROVIDING FEEDBACK • iPhone - Direct Manipulation wherever possible • animation, sounds, hint with colours • Android • add vibrations, notifications • BlackBerry - Prompt for saving, LED, icons, dialog boxes
  • 79. FORGIVENESS • Blackberry/Symbian: prompt for saving/deleting, layout focusable items intelligently • iPhone/Android: • keep DM actions easily reversible • layouttouch elements + provide smart padding when necessary, • spend time tweaking touch
  • 80. STAYING CONSISTENT • Back button should do what you think it does • Your UI elements should behave like standard UI elements • Providing keyboard shortcuts/gestures • Use menus, action sheets, drawers, etc. appropriate and place in expected locations
  • 82. NAVIGATIONAL STATE • sometimes it makes sense to keep track of the states for what users are doing in your application • Example: Facebook app... • Bonus: betterinformation organization, device integration, users can’t get lost
  • 83. HOW? • Android: Activity config (i.e. android:alwaysRetainTaskState) • iPhone: URL mapping for Controllers, persisting last state on application termination, handling multitasking methods • BlackBerry: think about how your application is invoked, but less important
  • 84. WHAT WE TALKED ABOUT • Know Your Users, Know Your Platforms • UI Principles & Guidelines • Best Practices
  • 85. SUMMARY: BEST PRACTICES • use native elements • apply UI guidelines/principles according to platform • make the app learnable from existing mental models • don’t let the user get lost
  • 87. THE NEED FOR SPEED • Drawing efficiently • Do things at the right time
  • 89. IN GENERAL • Avoid unnecessary nesting of views • when the OS tries to figure out what to draw, it has to do a lot more work • Solution: flat hierarchies • what does this mean? • what happens? (faster layout code, faster blending, etc.)
  • 90. ANDROID: THE PROBLEMS • Using an inefficient layout can lead to complex layout trees • inflation is also a problem Refer to http://developer.android.com/resources/articles/layout-tricks-efficiency.html
  • 91. ANDROID: WHAT TO DO • use the right layout • i.e. use RelativeLayout instead of LinearLayout if applicable • inflate where optimal • i.e. use a ViewStub if it makes sense Refer to http://developer.android.com/resources/articles/layout-tricks-efficiency.html
  • 92. ANDROID: WHY IT WORKS Refer to http://developer.android.com/resources/articles/layout-tricks-efficiency.html
  • 93. IPHONE: THE PROBLEMS • Blending of UIView layers is very slow on the iPhone • (anything with alpha) • Typical layouts need to blend multiple stacked layers • either through manually adding subviews • or through Interface Builder Refer to http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/ or Apple’s TableSuite demo
  • 94. IPHONE: WHAT TO DO • Fordrawing views that require high-performance, (i.e. drawing thousands of table view cells in a list) use one custom view where you do all the drawing, instead of adding subviews • Pre-blend this view using CoreGraphics Refer to http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/ or Apple’s TableSuite demo
  • 95. IPHONE: WHY IT WORKS • One layer means no blending (or pre-blending) • just “one big, opaque texture” Refer to http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/ or Apple’s TableSuite demo
  • 96. BLACKBERRY: THE PROBLEM • Repainting a whole manager is expensive • Costs associated with: • add, delete, replace, etc.
  • 97. BLACKBERRY: WHAT TO DO • Paint only what’s visible (override subpaint(), etc.) • Minimize the nesting of layouts (paint if it makes sense) • Minimize calls that trigger sublayout • i.e. don’t add lots of items to visible managers • instead: override add/sublayout (hard) or use a temporary manager (easy)
  • 98. BLACKBERRY: WHY IT WORKS • Mostly working around the default behaviour of Managers/ Fields on BlackBerry • Tip: use a profiler to see where the time is spent in your code • chances are sublayout is being called a lot
  • 99. DO THINGS AT THE RIGHT TIME
  • 100. “ALL THINGS ENTAIL RISING AND FALLING TIMING. YOU MUST BE ABLE TO DISCERN THIS.” — Mushashi Miyamoto
  • 101. DO THINGS AT THE RIGHT TIME • If you can hide complexity from the user, or do things while out of sight, then things will feel fast • If you can avoid extra work, that’s also great • be smart in the interaction design • (but caching is a whole separate talk!)
  • 102. EXAMPLE: GETTING A USER’S LOCATION • Why does this benefit the most from doing it at the right time? Refer to http://developer.android.com/guide/topics/location/obtaining-user-location.html
  • 103. THE TIMELINE FOR GETTING LOCATION Refer to http://developer.android.com/guide/topics/location/obtaining-user-location.html
  • 104. SUGGESTIONS • Start getting a location as the app starts • Use a cached location if it is a recent/good location Refer to http://developer.android.com/guide/topics/location/obtaining-user-location.html
  • 106. ALL IN ALL... • Learn your platforms, phones • Design to platforms, guidelines • Stick to convention, conviction Refer to http://developer.android.com/guide/topics/location/obtaining-user-location.html
  • 107. “TRUE COMFORT IS THE ABSENCE OF AWARENESS.” – BILL STUMPF
  • 109. QUESTIONS? Twitter: @underpunches Email: boris@xtremelabs.com

Notes de l'éditeur

  1. - why this talk is important: ubiquity of smartphones
  2. - software engineering, waterloo - but music/social media - producer/consumer
  3. Mobile Strategy & Development Award-winning apps for big brands Located here in Toronto
  4. This is happening even sooner.
  5. Kunal on the mobile lifestyle
  6. If you do it right...
  7. for mobile specifically... more specific during the talk
  8. so all in all...