How App Usability, How App Usability, Functionality, and Functionality, and Analysis Analysis are Changing with Mobileare Changing with Mobile

Dan HermesFounder and Mobile Consultant

Lexicon Systemswww.lexiconsystemsinc.com

Key TakeawaysKey TakeawaysMobile Is Becoming the New PCResponsive Design is fast and cheap

◦Good for websites ◦OK for some lightweight apps

Mobile Web Apps vs. Native Mobile Apps

Most serious mobile apps are native◦Cross-platform is often necessary◦Xamarin does cross-platform

Mobile UI TakeawaysMobile UI TakeawaysLearn the Mobile UI Patterns and TermsAvoid Creativity (in the meantime)Gestures not Point-and-Click

Learn About Mobile Features◦Location◦Offline Use◦iBeacons / Bluetooth◦Camera◦Graphics and Animation

Why mobile? Why mobile? Americans used smartphone and tablet apps more than PCs to access the Internet.

Source: CNN, January 2014 / corroborated by Marissa Mayer, CEO of Yahoo(Google isn’t telling.)

80-90% of U.S. adults now own a mobile phone. 50-60% of those are smartphones. Sources: various (Pew)

¼ to ½ of online searches take place on a mobile device Sources: various

And what about tablets?And what about tablets?When we were an agrarian nation, all cars weretrucks. But as people moved more towards

urbancenters, people started to get into cars. I thinkPCs are going to be like trucks. Fewer people

willneed them. And this transformation is going tomake some people uneasy... because the PC

hastaken us a long way.

Steve Jobs, 2010

Post-PC Era: 2015Mobile Phones > first world

population◦1.9B devices

Tablets > PC sales◦320M tablets vs. 316M PCs worldwide

Android devices > 3x Windows◦1.3B Android devices vs. 373M Windows

Ultramobile > 20% of PC sales◦MacBook Air, Surface Pro, etc.◦62M in 2015

Source: Gartner 2015 Device Shipment Projections (June 2014)

The UpshotThe UpshotData Consumers (Conclusive)

◦Mobile phones and tablets

Data Producers (Jury is still out)◦PCs and Ultrabooks◦Some tablets and phones◦The future of business machines

Android vs. Windows

◦Many unknowns here

What Do Data Consumers What Do Data Consumers Need?Need?

Responsive DesignResponsive Design

Images courtesy of Beacon Technologies and Arcplan

Responsive Design #FAILResponsive Design #FAIL

Image courtesy of moxy ox

Responsive Design #WINResponsive Design #WIN

Image courtesy of moxy ox

Responsive Design #WINResponsive Design #WIN

Responsive Design #WINResponsive Design #WIN

The Responsive The Responsive ExperienceExperience

Image courtesy of responsivedesign.ca

Easiest Route to Responsive Easiest Route to Responsive Design:Design:

Run on a device in a browserBest When:

◦the app is SIMPLE and ◦user expectation is LOW

What is a website?a SIMPLE app

Mobile Web Apps

Limitations of Mobile Web Limitations of Mobile Web AppsApps(in the Hands of Most Developers)(in the Hands of Most Developers)Reduced FunctionalityPoor PerformanceDecreased User Experience

The Real Risk?

Mobile Web App #FAILMobile Web App #FAIL

Older Facebook app written in HTML5

Solution#1: Escape HatchSolution#1: Escape Hatch

1. Escape Hatch / Full Screen Button

◦ Goes to full-screen web app◦ May or may not be useable◦ Doesn’t address experience

or performance

Solution#2: Native Mobile Solution#2: Native Mobile AppAppGo Where the People Are

◦App Store StatsBetter PerformanceOptimal User Experience

Case Study:Case Study:PCR EssentialsPCR Essentials

Finalist in Xammy AwardsGoogle Play Store and iTunesWritten in Xamarin for

Mobile App Mobile App TypesTypesMobile Web

◦Browser-basedNative

◦iOS, Android, OR WindowsHybrid

◦Web app wrapped in a native appCross-platform

◦iOS, Android, AND Windows

Mobile App Mobile App ToolsToolsMobile Web/Responsive

◦HTML5, CSS, and JavaScript, (C#, Java, PHP, etc.)

Native◦Objective-C, Java, or C#

Hybrid◦PhoneGap, Titanium

Cross-platform◦Xamarin (C#)

Smartphone OS Market Smartphone OS Market ShareShare(Q1 2014)(Q1 2014)Android – 81%iOS – 15%Windows Phone – 3%

What does this mean?

Source: International Data Corporation (IDC)

Single platform apps are risky

Hybrid AppsHybrid AppsWeb app wrapped in a native app

◦PhoneGap◦Appcelerator Titanium

Yes, it’s in the app storesNo, it’s not really a native app

Cross-platform AppsCross-platform Apps◦Shared Code

Code reuse

◦One technology stack Instead of several

◦Native app quality◦Native app performance◦Native phone functionality (location,

camera, etc.)

Cross-platform Cross-platform DevelopmentDevelopment

Cross-platform AppsCross-platform AppsHigh-performanceGreat user experienceFully native executableReusable codeJust one dev team

Gartner Strongly Gartner Strongly Recommends XamarinRecommends Xamarin

“Xamarin's architectural approach provides completely native UIs with better performance than other cross-

platform techniques... Xamarin uses multifaceted technology built by a cohesive team with a solid long-

term track record.”-Gartner, August 2013

Recognized as Mobile “Visionary” in 2013 Magic Quadrant for MADP

The User InterfaceThe User Interface

USER INTERFACE

Mobile vs. PC

◦Small and varied real estate

◦Touchscreen◦Proportion◦Self-contained◦Miniaturized ◦Sensory and aware

Image courtesy of Forbes.com

Visual Design Patterns◦Navigation◦Forms◦Tables and Lists◦Search, Sort, and Filter◦Tools◦Charts◦Invitations, Feedback, and Help◦Anti-Patterns

Navigation

Images courtesy of Mobile Design Pattern Gallery by Theresa Neil

The The HamburgerHamburgerand other sliding navigation panelsand other sliding navigation panels

Forms

Images courtesy of Mobile Design Pattern Gallery by Theresa Neil

Principles◦Simplicity

UI shorthand Fields that matter

◦Call to Action Big Dumb Button

◦Mobilisms: Icons and Gestures◦Complexity:

Calculated, not Accidental

MobilismsMobilismsStandard

◦navigation icons ◦screen layouts◦multi-screen flows

Inline labels instead of side labelsAnimation

Anti-PatternsNovel Notions PCismsWrong IconIdiot BoxOceans Of Buttons

Anti-Pattern: Novel Notions

Anti-Pattern: PCisms

Images courtesy of Mobile Design Pattern Gallery by Theresa Neil

Anti-Pattern: Wrong Icon

Idiot Box

Oceans of Buttons

Anti-Pattern Advice:

AVOID CREATIVITY

Until you know mobile UI standards…

PC Interaction: The MousePC Interaction: The MouseClickDouble ClickDrag and DropSlideMouse roller

Mobile Interaction: Mobile Interaction: Gestures not Point-and-ClickGestures not Point-and-Click

Gesture Action Mouse

Tap I want this Click / double-click

Swipe Next! Move, or Scroll

Click arrow, Drag slider

Press and Hold(Android)

Do Something Right-click

Slide Change Value Slide

Drag Move Object Drag

Pinch Zoom out Roller/slider

Spread Zoom in Roller/slider

Rotate um, Rotate. Roller/slider

Mobile FeaturesMobile FeaturesLocationCameraGraphics and Animation

Offline UseOffline UseDoes it still need to work offline?What does it need to do?Read/write from local files or databaseSynchronization

The Cloud Isn’t Free

LocationLocationGPSCell TriangulationiBeacons – Bluetooth

Key TakeawaysKey TakeawaysMobile Is Becoming the New PCResponsive Design is fast and cheap

◦Good for websites ◦OK for some lightweight apps

Mobile Web Apps vs. Native Mobile Apps

Most serious mobile apps are native◦Cross-platform is often necessary◦Xamarin does cross-platform

Mobile UI TakeawaysMobile UI TakeawaysLearn the Mobile UI Patterns and

TermsAvoid Creativity (in the meantime)Gestures not Point-and-Click

Learn About Mobile Features◦Location◦Offline Use◦Camera◦Graphics and Animation

My Big Mobile BookMy Big Mobile Book

Available for Pre-order on Amazon

My Little Software BooksMy Little Software Books

Available Here Today

How App Usability, How App Usability, Functionality, and Functionality, and Analysis Analysis are Changing with Mobileare Changing with MobileBy Dan Hermes, Lexicon Systemswww.lexiconsystemsinc.com

“Mobile, Xamarin, and .NET Development”

Dan HermesMobile Consultantdan@lexiconsystemsinc.comTwitter: @lexiconsystems(774)614-9423

Jonathan LaMasterDirector of Salesjonathan@lexiconsystemsinc.com(617)833-5816