UX Book — Mobile First by Luke Wroblewski
When it comes to responsive design, people start to wonder we should we do mobile-first or desktop-first.
Here are some reasons that the book “Mobile First” suggests, just like its name, do mobile-first.
Smartphones were boldly predicted to out-ship the combined global market of the laptop, desktop, and notebook computers in 2012.
As further proof, consider that in November 2010 visitors to web-based email sites declined 6%, but visitors accessing email with their mobile devices grew by 36%
PayPal is seeing up to $10 million in mobile payment volume per day (http://bkaprt.com/mf/11).
eBay’s global mobile sales generated nearly $2 billion in 2010 (http://bkaprt.com/mf/12).
Google’s mobile searches grew 130% in the third quarter of 2010 (http://bkaprt.com/mf/13).
Of Pandora’s total user base, 50% subscribe to the service on mobile (http://bkaprt.com/mf/12)
As for the native mobile app, it can provide you much more than a PC browser.
Native mobile applications give you robust access to hardware capabilities that you currently can’t get through mobile web browsers. Core features like access to the address book, SMS, camera, audio inputs, and other built-in sensors are mostly unavailable. Also absent is the ability to run processes in the background and easily monetize through mobile app stores or in-app purchases.
Even though the mobile device is convenient for the users, there are some constraints for the design.
Small screen (1024×768 v.s. 320×480): You have to make sure that what stays on the screen is the most important set of features for your customers and your business. There simply isn’t room for any interface debris or content of questionable value. You need to know what matters most.
Ex: When it came time to design their mobile web experience, the Flickr team was able to focus these 60 plus options into six. How did they do it? By knowing what their customers did on the site and why. Most Flickr users like to check in and see what’s happening with their photos; see new photos from people they know; and explore interesting images from across the site. The mobile website puts the focus on these key actions front and center.
2. Performance: Designing for mobile means designing for this reality. Different mobile devices, wifi connections, smaller storage, simple CSS grid usually affect the mobile experience.
3. Time & Place: When using a desktop, we usually sit on a comfortable chair indoor with good power & wifi support. However, when using a mobile device, we are usually under different circumstances like waiting for Uber, eating in a restaurant, or hiking…
EX: When many people first imagine designing for mobile, they picture a hurried businessman on the street.
84% use them at home
80% use them during miscellaneous downtime throughout the day
74% use them while waiting in lines or waiting for appointments
69% use them while shopping
64% use them at work
2% use them while watching TV (a different study claims 84%)
47% use them during their commute
Capabilities for Mobile is
It can detect where the user is and provide real-time information just tailor to the user.
When it comes to Augmented Reality, it can filter the information according to what your camera detects your interest and location.
Allow you to use only your thumb to control and different intuitive gestures enhance the experience.
When it comes to 360 views, you can move your mobile device in any direction to pan these images 360 degrees.
Here are some features in mobile design.
Direction: from a digital compass
Gyroscope: 360 degrees of motion
Audio: input from a microphone; output to a speaker
Video and image: capture and input from a camera
Dual cameras: front and back
Device connections: through Bluetooth
Proximity: device closeness to physical objects
Ambient light: light/dark environment awareness
NFC: Near Field Communications through RFID readers
Here are some tips for designers to design a great Mobile First App.
Align with how people use their mobile devices and why (What’s the primary action/behavior for your user?)
Emphasize content over navigation
Provide relevant options for exploration and pivoting
Maintain clarity and focus
When it comes to touch/action
Go big with appropriately sized and positioned touch targets.
Learn the language of touch by familiarizing yourself with common touch gestures and how they are used to navigate and interact with objects and screens.
Don’t be afraid to push toward natural user interfaces (NUIs) that make content (not chrome) the focus of people’s actions.
Transition your on-hover menus to mobile using the most appropriate solution for your site.
Remember to consider non-touch and hybrid devices when designing your mobile web interactions.
Input field for Mobile Device:
Actively encourage input and allow people to contribute and create using their mobile devices.
Make sure your questions are clearly presented with mobile-optimized labels.
Get rid of the pain associated with accurate mobile inputs by using input types, attributes, and masks in your designs where possible.
Consider using custom input controls if they really help people provide accurate answers without a lot of work.
Lay input possibilities out appropriately for sequential, non-linear, and in-context contributions.
Take advantage of mobile device capabilities to capture input in new ways.
Layout Design for Mobile Design:
Come to terms with the fact that mobile is going to change at a breakneck pace for the foreseeable future.
Let mobile browsers know you are creating designs that fit them.
Be flexible, fluid, and responsive in your layouts. • Know where to sketch the lines between device experiences.
Reduce to the minimum amount necessary.
