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 BeforeNow 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 site is designed and built after the PC version is complete. Here's three reasons why Web applications should be designed for mobile first instead.  Mobile is exploding  Mobile forces you to focus  Mobile extends your capabilities 4/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 Navigation 02 Forms 03 Tables and Lists 04 Search, Sort and Filter 05 Tools 06 Charts 07 Invitations 08 Feedback 09 Help 10 Anti-Patterns

01 Navigation 02 Forms 03 Tables and Lists 04 Search, Sort and Filter 05 Tools 06 Charts 07 Invitations 08 Feedback 09 Help 10 Anti-Patterns

Navigation

Primary Navigation SpringboardList MenuTab MenuGallery Mega MenuMetaphorDashboard 10/25

Springboard Pattern is OS neutral. Use a grid layout for items of equal importance, or an irregular layout to emphasize some items more than others. Consider personalization and customization options. 11/25

List Menu Pattern work well for long titles or those that require sub text. Applications using List Menu should offer an option on all internal screens for returning to the 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 own guidelines for tab location and design. Clearly indicate the selected menu item by visually differentiating the selected tab from the others 13/25

Gallery The Gallery pattern surfaces individual pieces of 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’t overload the dashboard; conduct research to determine the key metrics to include. 15/25

Metaphor Use the Metaphor pattern judiciously, as a poorly implemented metaphor can look a lot like the Novel Notation anti-pattern 16/25

Mega Menu Determine your information architecture before choosing the navigation pattern. Choose a more appropriate pattern, like Tabs, if there are only 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