Mobile First Approach - The key to cross platform interface design
35
Who Am I? A Weboniser and Rubyist A Blogger(vparihar01.github.com) An Aesthetics Geek An Aspiring Tech Innovator DevOps Guy Tweet with @vparihar
-
Upload
vivek-parihar -
Category
Design
-
view
358 -
download
1
description
Mobile first design has been taking centrestage in the consumer internet media stage. This makes it extremely important for the Design/development community to understand the intricacies, pitfalls and the right practices about it. From my own experiments, I have elicited few interesting protcols and practices for the same. The presentation aims to share the results of the successful experiments and open up discussion on what the best way forward can be. Outline of the talk: 1. Understanding the need for mobile sites 2. Going through the basics of a fluid interface; differences between responsive sites and mobile sites 3. Bottom up approach - first build minimum features for the smaller screens. It helps keep the lean approach alive. 4. Optimized content structuring - limited size on small screens calls for relevant and optimized content layouts 5. Ensuring the right experience on small screen devices via optimized front end
Transcript of Mobile First Approach - The key to cross platform interface design
Who Am I?A Weboniser and Rubyist
A Blogger(vparihar01.github.com)
An Aesthetics Geek
An Aspiring Tech Innovator
DevOps Guy
Tweet with @vparihar
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
ThanksWould Love to answer your queries…
Vivek Parihar@vparihar
