Tapping into Mobile UI with HTML5

Luke Melia + Yael Sahar

Mobile UX principles

Direct manipulation

Ergonomics: Operated with a single hand.

Finger tip size.

Immediate feedback

Be consistent with platform conventions

“I should always know where I am”

“Show me what I want to see when I need it”

“Don’t make me type”

The HTML5tradeoff

You get a single code base in exchange for implementing

all UI elements yourself

Mobile UIpatterns

Buttons [ used for actions ]

Touch target size: 44px on iOS, 48px on Android

----------------------------------UI principles:• Ergonomics

Designer says:

iOS

Android

44px 30px

Position on screen

------------------------------------UI principles:• Be consistent with

platform conventions • Immediate feedback

Designer says:

iOS Android

Visual appearance (frames on iOS vs. no frame on Android, use system fonts)

------------------------------------UI principles:• Be consistent with

platform conventions • Ergonomics• Immediate feedback

Designer says:

iOS Android

Back / Cancel actions on iOS use a button vs. the hardware Back button on Android.

------------------------------------UI principles:• Be consistent with

platform conventions • I should always know

where I am• Immediate feedback

Designer says:

iOS Android

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: 90Button font:• Helvetica bold white, 11pt.• Drop shadow: black @65% opacity; angle -90; distance 1;

spread 0; size 1

Designer tip: how to create an iOS looking button

Developer says_

The #1 reason that many mobile web apps feel slow:

Developer says_

Instead,respond immediately!

Developer says_

“What about developing on my laptop???”

Implement a mouse-friendly path...

...or emulate!

Developer says_

Touch targets

Handle them case-by-casewith CSS

Developer says_

Cross-platform visual conventions

Help yourself with some Javascript, and handle visual differences in CSS.

Direct manipulation of content is usually betterClear No Buttons. All actions are done with gestures

CameraZoom In / Out with Pinch & spread gestures

FlipboardFlip Pages with a swipe gesture

Alternatives

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

Position on screen

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

iOS Android

Bar height. 50px on iOS, 48px on Android

------------------------------UI principles:• Ergonomics

Designer says:

50px

48px

iOS Android

#of tabs in view: 5on iOS, 3 words on Android

----------------------------------UI principles:• I should always know

where I am• Show me what I

need when I need it

Designer says:

iOS Android

Do not use the tab bar for actions

Designer says:

Developer says_

Position and size your tab bar for each platform using CSS

Developer says_

@font-faceA custom web font for your icons

can be good, bro.

Developer says_

Tab bar icons works like “push” buttons.

As soon as you tap them, they highlight and activate.

Easy, right?

Developer says_

Give the browser time to render the highlight.

Cross platform solution with CSSTwitterApp UI implementation on iOS and Android

Identifying common elements and positioning them in consistency with platform.

YappUI implementation on iOS and Android.

Identifying common elements and positioning them in consistency with platform.

Cross platform solution with CSS

Main Menu page:Creates more drill downsI always need to go back in order to navigate

Facebook Side menu. Still requires an extra tap to go back to menu. I know where I was.

Pinterest:Tab bar disappears when scrolling down and appears when scrolling up

Alternatives

Drilling down [ used to navigate to sub sections ]

[ Drill downs on iOS and Android ]

Show user’s path and current location (title bar and Back button)

Designer says:

----------------------------UI principles:• I should always

know where I am• Immediate

feedback

iOS Android

#of drill downs (more than 2-3 feels like too much drilling especially if you don’t use a tab bar to navigate)

Designer says:

---------------------------UI principles:• I should always

know where I am

• Show me what I need when I need it

• Animated feedback

• Information hierarchy

Designer says:

--------------------------------UI principles:• Immediate feedback

Developer says_

Title bar and body animate differently

350mseaseInOutQuint

Developer says_

Animation tips

1) Avoid DOM changes or other callbacks firing during animation

2) Use hardware-accelerated animations

Developer says_

Show compositing borders

defaults write com.apple.Safari IncludeInternalDebugMenu 1

Alternatives

FacebookModal Slide up toDrill intocontent

Segmented controls / tabs & spinners

[ used to show different vies of the same content]

Use segmented controls to avoid a level of drill downs

-------------------------------UI principles:• I should always know

where I am• Immediate feedback

Designer says:

[ Tab controls or drop down menus on Android ]

Spinner

iOS: use on app’s main sections where back button is not needed

Highlight current segment (no title bar)

Designer says:

-------------------------------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.

InterludeA word about

Skeumorphic UI

Scrollbars

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. overscroll color (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

Designer says:

Overshoot: below the ZERO line

Pull to refreshGesture action discovered at overshoot

YappPromo message

Developer says_

Duuuude, really?

Unfortunately, yes.

No usable native scrolling yet.

Developer says_

Use a library.

iScroll, Zynga scroller

Text Fields

• Auto-populate text field and auto-complete

• Use text field Clear button

Designer says:

-------------------------------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 viewport

Overlays 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

@yapp

http://yapp.uswe are hiring!

ResourcesApple Human Interface Guidelines:https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Android Interface Guidelines:http://developer.android.com/design/index.html

Luke 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?1071

Quirksmodehttp://caniuse.com/

Coachmarks:http://pttrns.com/coachmarks