Mobile First

by Oleksandr Krasnokutskyi

SoftServe Inc.July 6, 2013

What We talk about?

o What does ‘mobile first’ mean?

o Why need use Mobile First?

o Some Design Patterns for Mobile Navigation Anti-Pattern’s

1/25

Mobile Phones

Before Now

2/25

Mobile vs. Desktop Visit Statistics

3/25

What does ‘mobile first’ mean?

More often than not, the mobile experience for a Web application or siteis designed and built after the PC version is complete. Here's three reasonswhy Web applications should be designed for  mobile first  instead.

Mobile is exploding

Mobile forces you to focus

Mobile extends your capabilities

http://goo.gl/OzqU4/25

Mobile first benefits

Applications/websites are made available to the

fastest growing section of internet users

Forces the developer and content creators to focus

on the most important data and actions

Allows an application to utilize the full range of

mobile device capabilities (location aware, multi

touch, device positioning)

5/29

Mobile Design Patterns

01 Navigation02 Forms03 Tables and Lists04 Search, Sort and Filter05 Tools06 Charts07 Invitations08 Feedback09 Help10 Anti-Patterns

01 Navigation02 Forms03 Tables and Lists04 Search, Sort and Filter05 Tools06 Charts07 Invitations08 Feedback09 Help10 Anti-Patterns

Navigation

Primary Navigation

Springboard List Menu Tab Menu Gallery

Mega MenuMetaphorDashboard10/25

Springboard

Pattern is OS neutral. Use a grid layout for items of equalimportance, or an irregular layout

to emphasize some items more thanothers. Consider personalization

and customization options.

11/25

List Menu

Pattern work well for long titles orthose that require sub text. Applicationsusing List Menu should offer an optionon all internal screens for returning tothe List Menu, usually a button in the

title bar with a list icon or world “menu”

12/25

Tab Menu

Pattern is not OS neutral since each OS has their ownguidelines for tab location and design. Clearly indicatethe selected menu item byvisually differentiating the

selected tab from the others

13/25

Gallery

The Gallery pattern surfaces individual piecesof content for navigation.

Pattern work best for frequently updated content that

people want to browse.

14/25

Dashboard

Pattern provide a roll-up of key performance indicators. But don’toverload the dashboard; conduct

research to determine the keymetrics to include.

15/25

Metaphor

Use the Metaphor pattern judiciously, as a poorly

implemented metaphor can look a lot like

the Novel Notationanti-pattern

16/25

Mega Menu

Determine your information architecture before choosing

the navigation pattern.Choose a more appropriate

pattern, like Tabs, if there areonly a few major

sections in the app.

17/25

Anti-Patterns

Metaphor Mismatch

19/25

Control Mismatch

20/25

Icon Mismatch

21/25

Idiot Box

22/25

Oceans of Buttons

23/25

Summary

o Applications/websites stands friendly for users comes from mobile

o Focus on the most important features

o Use full range of mobile device capabilities from early stage of development applications/websites

24/25

?

25/25