• View

Category:User experience -> UX strategy -> Implement -> Mobile

Category:User experience -> UX strategy -> Implement -> Mobile

Mobile first (Luke Wroblewski, An Event Apart, Boston 2010)

1. Google is designing all web products for mobile first, even if no mobile version is planned.
2. The mobile web is out-pacing the desktop web by a factor of eight. Next year we’ll see smartphone devices will outsell desktop devices.
3. AT&T’s mobile data traf?c increased 50x in three years. Mobile may make up at much as 90% of all web traf?c by 2014.
4. Constraints = Focus
1. Focus on core actions, know your users, and use scalable design.
2. Screen sizes: on good mobile devices, the screen is 80% smaller. For a good example, check out Southwest Airlines sites. The mobile version is driven by the tasks that people need to do.
3. For Flickr, there are a lot of options (60!) on their standard website, but the mobile version only has eight things to choose from.
5. Why iPhone?
1. It takes 30 times the number of devices to get the web traffic one iPhone delivers on average.
2. Design matters on the iPhone.
3. What you can do is all on the screen, you have to put everything on the screen.
4. Not having menus makes the content the interaction point.
5. Don’t think just about screen size; think about screen density:
• The iPhone has 164ppi. The Palm Pre has 186ppi. The Pixie has 194pp. Android and others are well over 200ppi. The standard pixel density on something such as a cinema display is around 96ppi by comparison.
6. Touch targets: Apple recommends a minimum target size of 29px x 44 px. Microsoft says 34px; 26px minimum. Minimum spacing between elements is 8px. Visual size is 60-100% of the touch target size.
7. Core gestures: Tap, double-tap, drag, flick, pinch, spread, press, press-and-tap, press-and-drag, rotate (both directions). There is no hover.
6. Process:
1. Define device groups.
2. Create a default reference design.
3. Define rules for content and design adaptation.
4. Opt for web standards and a flexible layout.

Categories:

• User experience
  • UX strategy
• Implement