Notes from Mobile First

I read Luke Wroblewski's Mobile First over the weekend. Here are my (unedited) notes:

Usage

• Mobile opens up new opportunities & introduces new constraints
• Forces you to focus products & interfaces
• Desktop users = deep sea diving
• Mobile users = snorkelling

Advantages of Native Mobile Experience:

1. Better access to system resources
2. Robust access to hardware capabilities
3. Core features like access to address book / photos / camera / audio / notifications etc.
4. In-app sales

Advantages of Mobile Web Experience:

1. No updates to download
2. Less expensive
3. Can be used by all mobiles
4. Improved share-ability. [Marco Arment wrote an interesting piece about this.]
5. Easier to A/B test

Constraints

• Reduced screen size
• Means a reduction in interface debris, complimentary content, ads and unnecessary calls to action
• Forces us to focus

Performance is V.Important

Google research shows an additional 200ms can disrupt engagement and effect bounce rates [more so, on mobile]

Some measures to take:

• Use image sprites
• Bundle together and minify CSS & JS
• Limit the use of CSS grid systems
• Use proper HTTP headers to ensure files are appropriately cached in the browser's memory.
• Where appropriate, take advantage of modern browser capabilities like:

1. Canvas
2. Appcache

Locations:

• 84% home
• 80% misc downtime
• 74% waiting in a queue for something
• 69% while shopping
• 64% while at work
• 62% while watching television
• 47% during commute

More distributed spread of usage across the day. Does this create new opportunities for user engagement?

Capabilities

As well as introducing constraints, it's important to maximise potential on mobile by pushing capabilities.

• Most important features come through satisfying a customer's vs. the use of a specific hardware tool
• Can access GPS / accelerometer through web browser on iPhone
• Audio interfaces?
• Proximity?
• can we build on new / mobile capabilities to better meet our customers' needs?

Case in point: London underground

• Desktop > browser > url > find maps page > download map > find nearest station
• Mobile > open app > app finds nearest station

Organisation

• Align with how people use their mobiles and why
• Emphasise content over navigation
• Options for exploring and pivoting
• Pivoting: Navigation points at the end of the page. More contextual over global
• Anchor to bottom of page = a smart navigation patter.
• Controls at the bottom of the screen are easier to work with: But these contend with browser chrome.
• Maintain clarity and focus; a là Yahoo!'s email compose screen

Most mobile usage reflects:

1. Lookup / find (urgent info, local)
2. Explore / play (bored, local)
3. Check in/ status (repeat, micro-tasking)
4. Edit / create (urgent change / micro tasking)

Actions

• Go small by going big
• Consider swipe interactions
• Explore NUI's (Natural user interfaces)
• [Page 76] for conventional gestures to open options / delete / refresh screens
• Hover is dead. Though can be used as a click action (no JS required)
• Yahoo!'s swipe for email options

Inputs

• Embrace mobile as an opportunity for our users to contribute whenever inspiration strikes
• Keep labels on top and outside of form fields
• Mobile optimised labels and placeholders
• Select/options are tap inefficient. Consider input[type="number"] for tap up and down figures etc.
• Speed up task by making smart defaults on good assumptions
• Reduce validation problems with input masks. Best practice shows the mask beforehand, and persists throughout input
• Be brutal and trim trim trim trim trim
• Hide away other elements on non-linear forms such as editing profile > pop open when needed
• Where we wanted improved contributions, use in-context inputs for speed and little effort
• New opportunities NFC inputs, audio interfaces, cameras for scanning, GPS etc (nearest hotel crosshair tab)
• Make it obvious and easy for users!