Tapping into Mobile UI with HTML5

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 30px Android ---------------------------------- UI principles: • Ergonomics

Designer says:Position on screeniOS Android ------------------------------------ UI principles: • Be consistent with platform conventions • Immediate feedback

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

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

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

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 differences in CSS.

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

Tab bars[ used to navigate through the sections of your app]

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

Designer says: Bar height.50px on iOS, 48px on Android iOS Android50px 48px ------------------------------ UI principles: • Ergonomics

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

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 them inconsistency withplatform.

Cross platform solution with CSSYappUI implementation oniOS and Android.Identifying commonelements andpositioning them inconsistency withplatform.

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

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 ---------------------------- UI principles: • I should always know where I am • Immediate feedback

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

Designer says:• Animated feedback• Information hierarchy -------------------------------- UI principles: • Immediate feedback

Developer says_Title bar and body animatedifferently350mseaseInOutQuint

Developer says_Animation tips1) Avoid DOM changes or other callbacks firingduring animation2) Use hardware-accelerated animations

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 ------------------------------- UI principles: • I should always know where I am • Immediate feedback

[ 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 bar) ------------------------------- UI principles: • I should always know where I am • Immediate feedback

Developer says_ Tab bar tips apply. Use a scrolling library with snap-to for horizontal scrolling on Android.

Interlude A word aboutSkeumorphic UI

Scrollbars

Designer says: Scrollbars appear only when you need them ----------------------------------- UI principles: • Show me what I want to see when I need it

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

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

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 ------------------------------- UI principles: • Don’t make me type

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):

@lukemelia @yaelsahar @yapphttp://yapp.uswe are hiring!

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

http://www.lukemelia.com	2694
http://www.scoop.it	587
http://join5works.com	18
http://kimelia.com	11
http://blaze.apphb.com	7
http://www.kimelia.com	6
http://translate.googleusercontent.com	3
http://newsblur.com	1

Tapping into Mobile UI with HTML5

by Yael Sahar on Mar 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 3,327

Statistics

Tapping into Mobile UI with HTML5 Presentation Transcript