UIE Web App Master’s Tour – Seattle, Washington – May 24, 2011
Convincing Clients to Care
Prediction in 2009 that smartphones would outsell PCs in 2012, it happened in 2010.
Home usage of PC since 2008 has decreased 20%
November 2010 – visits to web-based email sites decreased 7% and people accessing email on mobile devices increased 36%
Twitter – 40% of all tweets are sent via mobile; 16% of new users start on mobile. Top 2 Twitter mobile clients – twitter.com, m.twitter.com, sms
Facebook – 33% of users use mobile via Facebook mobile website, and clients on phones
Mobile phones will overtake PCs as the most common Web access devices worldwide by 2013
Shift from what was the personal computer (PC) to what is the personal computer (smart phone).
Capabilities & Constraints
Capabilities
Location Systems: GPS, WiFi, Cell Tower Triangulation
Location Detection capability
Constraints
- small screen
- battery
- inconsistent network
- fingers
- sensors
Flickr went from 60+ options to 8 when designing their mobile site.
Network constraints mean you need to send information every quickly.
Designing for mobile helps you design better because you have to determine what is really important.
Design Best Practices
Mobile Behaviors
- lookup/find
- explore/play
- check in/status
- edit/create
- Know what mobile is uniquely good at
- Adjust site organization accordingly
- Content first, navigation second
- Don’t dumb it down for mobile
Navigation Elements
small navigation elements don’t work
when users get to the end of the page, give them options to keep going, not a dead end
menu link at the top of the page can anchor to the menu at the bottom of the page
menu at the bottom of the page puts the menu in the comfortable reach zone for thumbs
in-context navigation vs global navigation
fixed bottom menu – requires javascript & eats up screen space (physical control proximity)
back button – don’t duplicate design elements
- avoid excessive navigation menus
- top navigation links for quick access
- bottom menu for pivoting & exploring
- in context actions & navigation
- avoid back buttons & fixed bottom positioning
Partial attention – picture designing for one eyeball, one thumb
Clarity & Focus
Maintain clarity – single navigation action to minimize errors
Touch Targets
Why Touch?
1,000,000 can access websites using their fingers
Make sure that interfaces are touchable
Touch Target Sizes 44px x 44px
It’s hard to fit everything in and still make touchpoints big enough to be easily tapped
Measuring physically is better than pixels because pixel density varies on different phones.
Think about the correct interaction element, link placement, form controls, etc.
- mobile devices moving to touch UI
- use appropriately sized tragets
- maintain spacing between targets
lukew.com/targets
Cover Hovers
A mouse hover is not intentional. Just because you’re near 7-eleven doesn’t mean you want a Slurpee.
In mobile, if it is important enough make it always visible or require tap or gesture.
If gestures are not discoverable, you need to provide instructions, but shouldn’t be core functionality.
- On Screen
- On Tap
- Swipe
- Separate Screen
- Drop It
What’s good for mobile tends to make the desktop version better.
Non-touch & hybrid devices that use scroll wheels & track pads need a :hover state to differentiate where the focus is on the page.
Viewports
device width viewport tag is important
- Two sets of images
- Large: 2x resolution
- Standard: 50%
- css3 media queries to target device-pixel-ratio of 2+
Stay away from images if you can and use css3
- border-radius
- rgba color
- text-shadow
- box-shadow
- gradients
- multiple backgrounds
Landscape Mode
Fluid Fills – make your design adapt to whatever size the display is
- Fluid grids
- Flexible images
- Media queries
Responsive Design
resolution breakpoints – allow the layout to change based on screen width
Reduce
- Push towards less on our screens
- less variations to manage
- less options for people to consider
Viewports
- Tell mobile browsers you are designing for them
- Account for pixel resolution with 2x images
- lean heavily on css3
- fluid layouts & responsive design
- trim, trim, trim
@lukew
www.lukew.com
Mobile First! books.alistapart.com
NOTE: These are my notes from The UIE Web App Master’s Tour presentations. They were great resources and you can find much more about them and by the presentations on demand at UIE. While I would love to add my thoughts and more details to these posts, I doubt that will ever happen.
Related articles
- Mobilizing Web Sites Foreword (lukew.com)
What do YOU think? Let me know...