Mobile first approach
-
Upload
webonise-lab -
Category
Design
-
view
193 -
download
0
Transcript of Mobile first approach
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