View
14.523
Download
1
Category
Preview:
Citation preview
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
Recommended