mobile first approach uiux meetup

Mobile FirstThe key to cross platform interface design

91%of all people on earth have a mobile phone

56%of people own a smartphone out of the total no. of people

a owning mobile phone

75%of mobile users use their

mobile for shopping

75%

Over

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

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

80%of time on mobile is spent inside apps

2014By

mobile internet usage may have overtaken desktop internet usage

1.3millionAndroid and iOS devices

alone are being sold everyday

About

50%of mobile phone usersuse mobile as theirprimary internet source

91%

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

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 Website

Native App

Desktop Website

Mobile Site

Responsive Site Desktop Website

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 exp all screen sizes/ devices

○ Ensure ease of usability across various platforms

● Streamlined Content considering physical constraints of the device

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

Touch Gestures

Tap Double Tap Drag & Flick

Pinch

Touch and Hold

RotateScroll

Foursquare Tinder

Geolocation

QR Droid

Barcode/QR code scanning

Skype Nearest Tube

Camera Front & Back

GyroscopeFacebook Paper

Runkeeper Historical Landings game on Android

Accelerometer

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

Bluetooth & NFC

Google Now Evernote

Audio (Microphone & Speaker)

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

Tabbed Navigation in Native app

Menu and Navigation

Scrolls & Accordians

Thanks

Would Love to answer your queries…