how app usability, functionality, and analysis are changing with mobile
DESCRIPTION
Now we’re building apps for Android, iOS, Windows phone, and mobile web but is requirements gathering really any different? This talk will cover mobile mock-ups, usability, and important differences between PC web browser and mobile application analysis. Many of the fundamental concepts remain the same, so how do we leverage what we know? Wireframing certainly won’t go away but mobile UI patterns change our approach. A touchscreen isn’t a mouse at all. Instead of drag and click we have tap, swipe, pinch, press, and rotate. What about offline use? With mobile it’s standard practice. Learn how apps should work even when the connection is down. Desktop PCs don’t move around like mobile phones do – so location services are a key difference: GPS, cell triangulation, to the newest location technique: iBeacons. Enterprise apps are now a family of apps: web, mobile web, and mobile native, for as many as 4+ platforms! Some are HTML5 and some are native. What are the differences and how do we approach these differently from an analysis standpoint? Lastly, what technologies are available to develop all these apps and when should we use what?TRANSCRIPT
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 [email protected]: @lexiconsystems(774)614-9423
Jonathan LaMasterDirector of [email protected](617)833-5816