Tapping into Mobile UI with HTML5


Published on

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Introduce Yael and Luke. Designer? Developer? Introduce Yapp.Quick talk overview.
  • There are many more but we chose the ones we think are most important to UX on Mobile
  • Ppl interact directlywith the screen. The use of gestures help ppl understand the results of their actions. Tap, drag, flick, pinch, spread are example to gestures users perform when touching the screen.
  • Ppl expect immediate feedback when they operate a control.tap color or a subtle animation for a gesture provides them a meaningful feedback.
  • Consistency means that ppl can transfer their knowledge and skills from one app to another. They also know what to expect when they operate a control.
  • Give ppl confidence that they know the way around your app.
  • Ppl get overwhelmed when they see too much at once. Focus on the primary task you need users to perform in your app and design your information accordingly.
  • Device keyboard is small. Make ppl type as less as possible.
  • Buttons are positions on side of the title bar (ios), and on the action bar (android). Always keep the left position of the Back button on ios for consistent behavior across apps.
  • Frames ios vs. no frames (android). The use of icons and words. Look & feel of a physical button (ios) vs. flat design on Android.
  • ios: you know where you came from. The button indicates your pathandroid: no need for a Cancel button, you simply go back to previous screen.
  • We could not get the same level of accuracy with CSS and performance was slower.
  • A library to help with this:https://github.com/cheeaun/tappable from Lim CheeAun in Singapore.
  • Highlight on touchstart for feedback. It’s more complicated than this, though. You need to make sure the touchend was on the same button the touchstart was on, and/or that the user didn’t move her finger in a way indicative of a scrolling. And you may need to account for a long-hold differently.
  • Test for touch support and decide whether to listen for touch events or mouse events, or try the new feature in Chrome Canary dev channel
  • I’ve dreamed about what a Javascript library to do this automatically might look like.
  • varisAndroid = (/android/gi).test(navigator.appVersion);if (isAndroid) $('body').addClass('android');
  • Bottom onios, top on Android
  • Consider the # of sections in your app.Ios: more buttonAndroid: scrollable tabs / icon bar that can fit more tabs
  • Not to confuse actions and navigation.
  • You get vectors, which means you get sharp results on any pixel density and can scale using font-size for cross-platform differences like 44px vs 48px
  • You get vectors, which means you get sharp results on any pixel density and can scale using font-size for cross-platform differences like 44px vs 48px
  • Send the action after a brief delay to allow the browser a cycle to renderthe UX feedback resulting from the isActive property change. In testing inMobile Safari on an iPhone 4, a delay of less 10ms resulted in the highlight statenot being rendered.
  • Tab bar is moved to the top of the page on Android. No back button on Android
  • Main menu page: more drill downs, not know where you areFacebook: still an extra step but I see where I was before. Swipe gesture is more intuitive.Pinterest: reveal and hide tab bar based on user’s task.
  • On Android there is no indication where you are because of the hardware back button.
  • Slide animation
  • Note that the highlight state stays onImage from Lim CheeAunSencha Touch Navigation View
  • http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chromehttp://www.slideshare.net/mattmccarthy_nflx/netflix-webkitbased-ui-for-tv-devices-9168822
  • Android are using the tabs system and spinners to show different views of the content
  • iScroll with snap option: http://cubiq.org/iscrollZyngascroller with snapping option: https://github.com/zynga/scrollerMore on scrolling in the next section.
  • Moneybook
  • Camera+
  • Apple Find My Friends
  • The Early Edition
  • iPad virtual keyboard. Note the “bumps” on the F & J keys.
  • KorgiElectribe
  • Obsolete media orsave icon?
  • iDial
  • iScroll: http://cubiq.org/iscrollZyngascroller: https://github.com/zynga/scroller
  • A good library will use the Hardware Accelleration techniques we talked about earlier.You will need to keep it informed when the height of your content changes. iScroll#refresh, scroller#setDimensionsEither library can implemented the overshoot content that Yael showed, but Zyngascroller has a pull-to-refresh implementation you can plug into.iScroll: http://cubiq.org/iscrollZyngascroller: https://github.com/zynga/scroller
  • Things related to text input are a tough spot for mobile web apps.
  • Things related to text input are a tough spot for mobile web apps.
  • Both try to scroll and zoom
  • To Yael’s specific recommendations:
  • Autocomplete is trickier. These attributes suppress default behavior on iOS, but Android’s can’t be suppressed.
  • 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