Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Tapping into Mobile UI     with HTML5      Luke Melia + Yael Sahar
Mobile UXprinciples
Direct manipulation
Ergonomics:Operated with a single hand.      Finger tip size.
Immediate feedback
Be consistentwith platform conventions
“I should always know     where I am”
“Show me what I want to seewhen I need it”
“Don’t make me type”
The HTML5 tradeoff
You get a single code basein exchange for implementing    all UI elements yourself
Mobile UIpatterns
Buttons[ used for actions ]
Designer says:Touch target size: 44px on iOS, 48px on Android                    iOS             44px                     ...
Designer says:Position on screeniOS                  Android                               -------------------------------...
Designer says:Visual appearance (frames on iOSvs. no frame on   Android, use system fonts)   iOS                          ...
Designer says:Back / Cancel actions on iOSuse a button vs. the   hardware Back button on Android.    iOS                  ...
Designer tip: how to create an iOS looking button               Challenge: have a single button image background          ...
Developer says_The #1 reason that manymobile web apps feelslow:
Developer says_Instead,respond immediately!
Developer says_“What aboutdeveloping on my laptop???”Implement a mouse-friendly path... ...or emulate!
Developer says_                  Touch targets           Handle them case-by-case                   with CSS
Developer says_        Cross-platform visual            conventionsHelp yourself with some Javascript, and handle visual  ...
AlternativesDirect manipulation of content is usually betterCamera                       Flipboard                 ClearZo...
Tab bars[ used to navigate through the sections of your app]
Designer says:Position on screeniOS                  Android                               ---------------------------    ...
Designer says: Bar height.50px on iOS, 48px on Android  iOS                     Android50px                        48px   ...
Designer says:#of tabs in view: 5on iOS, 3 words on AndroidiOS                      Android                               ...
Designer says:       Do not use the tab         bar for actions
Developer says_   Position and size your tab bar for each platform                       using CSS
Developer says_         @font-face      A custom web font for your icons             can be good, bro.
Developer says_Tab bar icons works like“push” buttons.As soon as you tapthem, they highlight andactivate.Easy, right?
Developer says_Give the browser time to render the highlight.
Cross platform solution with CSSTwitterApp UI implementationon iOS and AndroidIdentifying commonelements andpositioning th...
Cross platform solution with CSSYappUI implementation oniOS and Android.Identifying commonelements andpositioning them inc...
AlternativesMain Menu page:               Facebook                       Pinterest:Creates more drill downs      Side menu...
Drilling down[ used to navigate to sub sections ]
[ Drill downs on iOS and Android]
Designer says:Show user’s path and current location (title barand Back button) iOS                        Android         ...
Designer says:#of drill downs (more than 2-3 feels like too much   drilling especially if you don’t use a tab bar to   nav...
Designer says:• Animated feedback• Information hierarchy                          --------------------------------        ...
Developer says_Title bar and body animatedifferently350mseaseInOutQuint
Developer says_Animation tips1) Avoid DOM changes or other callbacks firingduring animation2) Use hardware-accelerated ani...
Developer says_Show compositingbordersdefaults writecom.apple.SafariIncludeInternalDebugMenu 1
AlternativesFacebookModalSlide up toDrill intocontent
Segmented controls / tabs & spinners [ used to show different vies     of the same content]
Designer says:Use segmented controls to avoid a level ofdrill downs                                      -----------------...
[ Tab controls or drop down menus on Android ]                                            Spinner
Designer says:iOS: use on app’s main   sections where back   button is not needed   Highlight current   segment (no title ...
Developer says_                  Tab bar tips apply.     Use a scrolling library with snap-to for        horizontal scroll...
Interlude A word aboutSkeumorphic UI
Scrollbars
Designer says:          Scrollbars appear only         when you need them                            ---------------------...
Designer says:     Make sure scrollbar is visible on any   background. (ios uses a semi transparent     black scrollbar wi...
Designer says:        Overshoot animation (ios) vs.  overscrollcolor (android). Overshoot on ios    created a new UI layer...
Overshoot:below the ZERO line Pull to refresh             Yapp Gesture action discovered   Promo message at overshoot
Developer says_        Duuuude, really?                  Unfortunately, yes.         No usable native scrolling yet.
Developer says_                  Use a library.              iScroll, Zyngascroller
Text Fields
Designer says:• Auto-populate text field and auto-complete• Use text field Clear button                                   ...
Developer says_    No browser events for  keyboard hiding/showing.
Developer says_             Doesn’t work
Developer says_          Virtual keyboard     Resizes          Overlays    viewport          window
Developer says_                  Clear field  Position the icon with CSS, clear      the text with Javascript
Developer says_  When you need to implement your own        autocomplete (iOS only):
Q&A
@lukemelia @yaelsahar  @yapphttp://yapp.uswe are hiring!
ResourcesApple Human Interface Guidelines:https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual...
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
Tapping into Mobile UI with HTML5
Upcoming SlideShare
Loading in …5
×

Tapping into Mobile UI with HTML5

15,560 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

Tapping into Mobile UI with HTML5

  1. 1. Tapping into Mobile UI with HTML5 Luke Melia + Yael Sahar
  2. 2. Mobile UXprinciples
  3. 3. Direct manipulation
  4. 4. Ergonomics:Operated with a single hand. Finger tip size.
  5. 5. Immediate feedback
  6. 6. Be consistentwith platform conventions
  7. 7. “I should always know where I am”
  8. 8. “Show me what I want to seewhen I need it”
  9. 9. “Don’t make me type”
  10. 10. The HTML5 tradeoff
  11. 11. You get a single code basein exchange for implementing all UI elements yourself
  12. 12. Mobile UIpatterns
  13. 13. Buttons[ used for actions ]
  14. 14. Designer says:Touch target size: 44px on iOS, 48px on Android iOS 44px 30px Android ---------------------------------- UI principles: • Ergonomics
  15. 15. Designer says:Position on screeniOS Android ------------------------------------ UI principles: • Be consistent with platform conventions • Immediate feedback
  16. 16. Designer says:Visual appearance (frames on iOSvs. no frame on Android, use system fonts) iOS Android ------------------------------------ UI principles: • Be consistent with platform conventions • Ergonomics • Immediate feedback
  17. 17. Designer says:Back / Cancel actions on iOSuse a button vs. the hardware Back button on Android. iOS Android ------------------------------------ UI principles: • Be consistent with platform conventions • I should always know where I am • Immediate feedback
  18. 18. Designer tip: how to create an iOS looking button Challenge: have a single button image background across all app themes Button background image: • Button height: 60px (30px actual) -> image is double size for high retina display • Shape: rounded rectangle, 12px round corner (6px actual) • Drop shadow: white @45% opacity; Angle: 90; Blend mode: normal; Distance: 2; Spread: 0; Size: 0 • Inner shadow: black @65% opacity; Angle: 90; Blend mode: Normal; Distance: 3; Choke: 0; Size: 1 • Stroke: 1 px, black @65% opacity • Gradient overlay: 30% opacity white to full transparency; linear gradient; Angle: 90 Button font: • Helvetica bold white, 11pt. • Drop shadow: black @65% opacity; angle -90; distance 1; spread 0; size 1
  19. 19. Developer says_The #1 reason that manymobile web apps feelslow:
  20. 20. Developer says_Instead,respond immediately!
  21. 21. Developer says_“What aboutdeveloping on my laptop???”Implement a mouse-friendly path... ...or emulate!
  22. 22. Developer says_ Touch targets Handle them case-by-case with CSS
  23. 23. Developer says_ Cross-platform visual conventionsHelp yourself with some Javascript, and handle visual differences in CSS.
  24. 24. AlternativesDirect manipulation of content is usually betterCamera Flipboard ClearZoom In / Out with Pinch & Flip Pages with a swipe No Buttons. All actions arespread gestures gesture done with gestures
  25. 25. Tab bars[ used to navigate through the sections of your app]
  26. 26. Designer says:Position on screeniOS Android --------------------------- UI principles: • Be consistent with platform conventions • I should always know where I am • Show me what I need when I need it
  27. 27. Designer says: Bar height.50px on iOS, 48px on Android iOS Android50px 48px ------------------------------ UI principles: • Ergonomics
  28. 28. Designer says:#of tabs in view: 5on iOS, 3 words on AndroidiOS Android --------------------------------- - UI principles: • I should always know where I am • Show me what I need when I need it
  29. 29. Designer says: Do not use the tab bar for actions
  30. 30. Developer says_ Position and size your tab bar for each platform using CSS
  31. 31. Developer says_ @font-face A custom web font for your icons can be good, bro.
  32. 32. Developer says_Tab bar icons works like“push” buttons.As soon as you tapthem, they highlight andactivate.Easy, right?
  33. 33. Developer says_Give the browser time to render the highlight.
  34. 34. Cross platform solution with CSSTwitterApp UI implementationon iOS and AndroidIdentifying commonelements andpositioning them inconsistency withplatform.
  35. 35. Cross platform solution with CSSYappUI implementation oniOS and Android.Identifying commonelements andpositioning them inconsistency withplatform.
  36. 36. AlternativesMain Menu page: Facebook Pinterest:Creates more drill downs Side menu. Still requires an Tab bar disappears whenI always need to go back in extra tap to go back to scrolling down and appearsorder to navigate menu. I know where I was. when scrolling up
  37. 37. Drilling down[ used to navigate to sub sections ]
  38. 38. [ Drill downs on iOS and Android]
  39. 39. Designer says:Show user’s path and current location (title barand Back button) iOS Android ---------------------------- UI principles: • I should always know where I am • Immediate feedback
  40. 40. Designer says:#of drill downs (more than 2-3 feels like too much drilling especially if you don’t use a tab bar to navigate) --------------------------- UI principles: • I should always know where I am • Show me what I need when I need it
  41. 41. Designer says:• Animated feedback• Information hierarchy -------------------------------- UI principles: • Immediate feedback
  42. 42. Developer says_Title bar and body animatedifferently350mseaseInOutQuint
  43. 43. Developer says_Animation tips1) Avoid DOM changes or other callbacks firingduring animation2) Use hardware-accelerated animations
  44. 44. Developer says_Show compositingbordersdefaults writecom.apple.SafariIncludeInternalDebugMenu 1
  45. 45. AlternativesFacebookModalSlide up toDrill intocontent
  46. 46. Segmented controls / tabs & spinners [ used to show different vies of the same content]
  47. 47. Designer says:Use segmented controls to avoid a level ofdrill downs ------------------------------- UI principles: • I should always know where I am • Immediate feedback
  48. 48. [ Tab controls or drop down menus on Android ] Spinner
  49. 49. Designer says:iOS: use on app’s main sections where back button is not needed Highlight current segment (no title bar) ------------------------------- UI principles: • I should always know where I am • Immediate feedback
  50. 50. Developer says_ Tab bar tips apply. Use a scrolling library with snap-to for horizontal scrolling on Android.
  51. 51. Interlude A word aboutSkeumorphic UI
  52. 52. Scrollbars
  53. 53. Designer says: Scrollbars appear only when you need them ----------------------------------- UI principles: • Show me what I want to see when I need it
  54. 54. Designer says: Make sure scrollbar is visible on any background. (ios uses a semi transparent black scrollbar with a white outline) ----------------------------------- UI principles: • Immediate feedback
  55. 55. Designer says: Overshoot animation (ios) vs. overscrollcolor (android). Overshoot on ios created a new UI layer for actions and messages that occur below the Zero line ----------------------------------- UI principles: • Show me what I want to see when I need it • Discoverability
  56. 56. Overshoot:below the ZERO line Pull to refresh Yapp Gesture action discovered Promo message at overshoot
  57. 57. Developer says_ Duuuude, really? Unfortunately, yes. No usable native scrolling yet.
  58. 58. Developer says_ Use a library. iScroll, Zyngascroller
  59. 59. Text Fields
  60. 60. Designer says:• Auto-populate text field and auto-complete• Use text field Clear button ------------------------------- UI principles: • Don’t make me type
  61. 61. Developer says_ No browser events for keyboard hiding/showing.
  62. 62. Developer says_ Doesn’t work
  63. 63. Developer says_ Virtual keyboard Resizes Overlays viewport window
  64. 64. Developer says_ Clear field Position the icon with CSS, clear the text with Javascript
  65. 65. Developer says_ When you need to implement your own autocomplete (iOS only):
  66. 66. Q&A
  67. 67. @lukemelia @yaelsahar @yapphttp://yapp.uswe are hiring!
  68. 68. ResourcesApple Human Interface Guidelines:https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.htmlAndroid Interface Guidelines:http://developer.android.com/design/index.htmlLuke WroblewskiBlog: http://www.lukew.com/ffBook: Mobile First: http://www.lukew.com/resources/mobile_first.aspTouch Gesture Reference Guide: http://www.lukew.com/ff/entry.asp?1071Quirksmodehttp://caniuse.com/Coachmarks:http://pttrns.com/coachmarks

×