Mobile FirstThe key to cross platform interface design

75%of mobile users use their

mobile for shopping

56%of people own a smart phone out of the total no. of people

owning a mobile phone

75%of mobile users respond to mobile-optimized sites when making purchases

Over

99%of smartphone owners use their mobile browser atleast once a day

2014mobile internet usage will overtake desktop internet usage

By

80%of time on mobile is spent inside apps

1.3millionAndroid and iOS devices alone are being sold everyday

About

91%of all people on earth have a mobile phone

50%of mobile phone usersuse mobile as theirprimary internet source

91% of adults have their mobiles phones within arm’s reach 24/7

What is the first thing you want end-users to see?

● The core idea should be the principle highlight.

● Users should be able to interact, consume, action upon that core idea using a mobile phone.

● Concentrate on the primary use cases

● Flesh out the most important feature/content and make sure that the user sees this as the first thing.

Why Mobile First?Using this method, questions like this come up a lot

What is the first thing you want end-users to see? (contd.)

● Place Content that is closest to conversion

● Facilitate user by providing proactive inputs using exclusive native hardware

● Precise directions/ questions to minimise user efforts

Why Mobile First?Using this method, questions like this come up a lot

Is it a better approach towards Responsive Web Design?● Conventional Top to Bottom approach -

Graceful Degradation makes life difficult as the content and the features may not adapt easily to the smaller sized devices

● Progressive Enhancement - Bottom to Top approach

○ Core features always stays in focus

○ Deliver an accessible experience to all screen sizes/ devices

○ Ensure ease of usability across various platforms

● Streamlined Content considering physical constraints of the device

Why Mobile First?Using this method, questions like this come up a lot

Mobile first philosophy allows use of new capabilities● Touch gestures (Tap, Double Tap, Drag, Pinch,

Spread, Tap & Hold, Rotate)

● Geolocation (apps like Foursquare, Tinder)

● Barcode/ QR code scanning (Platforms like Smarterplaces)

● Camera Front & Back ( Skype, Line, Instagram)

● Gyroscope (Facebook Paper)

● Accelerometer (Runkeeper)

● Ambient Light Sensor (Camera App)

● Bluetooth & NFC (Audio Streaming)

● Audio (Microphone & Speaker) (Skype,Tango)

Why Mobile First?Using this method, questions like this come up a lot

Touch Gestures

Tap Double Tap Drag & Flick Pinch

Touch and Hold RotateScroll

Geolocation

Foursquare Tinder

Barcode/ QR code scanning

QR Droid

Camera Front & Back

Skype Nearest Tube

Gyroscope

Facebook Paper

Accelerometer

Runkeeper Historical Landings game on Android

Bluetooth & NFC

Send : This app allows you to share files between NFC devices

Audio (Microphone & Speaker)

Skype Tango

The basics of a fluid interfaceVarious ways to go for a mobile first

01. Native app- A packaged application specific to mobile platforms

02. Mobile site- A website designed specifically for mobile browsers

03. Responsive site- A website adaptive to all screen sizes

Desktop Website

Desktop WebsiteNative App

Desktop WebsiteMobile Site

Responsive Site Desktop Website

Limited size on small screens, calls for relevant & optimised content layouts

01. Gesture & Behaviours - Gestures: Tap, Double Tap, Drag, Pinch, Spread, Tap & Hold, Rotate- Behaviours: Swipe to Left, Swipe to Right, Pull down, Pull up

02. Menus & Navigation- Following a pattern of design in all 3 types of mobile solutions

03. Scrolls & Accordions- For large amount of articles/content sites

04. Progressive Disclosure of Content- Let User decide what to consume rather than showing him everything upfront.

05. Carousals- Allow the user to interact with a group of similar elements within a fixed place Eg. Featured Images, Featured Videos, Testimonials

06. Avoid using Videos- Instead use more images

07. Do away with popups- Display the content in a new window

Optimised content structuring

Behaviours

Carousal

Menu and Navigation - Responsive site

Menu and Navigation - Tabbed Navigation in Native app

Scrolls & Accordians

Thank You