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?

1. HHooww AApppp UUssaabbiilliittyy,,
FFuunnccttiioonnaalliittyy,, aanndd AAnnaallyyssiiss
aarree CChhaannggiinngg wwiitthh MMoobbiillee
Dan Hermes
Founder and Mobile Consultant
Lexicon Systems
www.lexiconsystemsinc.com

2. KKeeyy TTaakkeeaawwaayyss
Mobile Is Becoming the New PC
Responsive 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

3. MMoobbiillee UUII TTaakkeeaawwaayyss
Learn the Mobile UI Patterns and Terms
Avoid Creativity (in the meantime)
Gestures not Point-and-Click
Learn About Mobile Features
◦ Location
◦ Offline Use
◦ iBeacons / Bluetooth
◦ Camera
◦ Graphics and Animation

4. WWhhyy mmoobbiillee??
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

5. AAnndd wwhhaatt aabboouutt ttaabblleettss??
When we were an agrarian nation, all cars were
trucks. But as people moved more towards urban
centers, people started to get into cars. I think
PCs are going to be like trucks. Fewer people will
need them. And this transformation is going to
make some people uneasy... because the PC has
taken us a long way.
Steve Jobs, 2010

6. Post-PC Era: 2015
Mobile 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)

7. TThhee UUppsshhoott
Data 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

8. WWhhaatt DDoo DDaattaa CCoonnssuummeerrss NNeeeedd??

9. RReessppoonnssiivvee DDeessiiggnn
Images courtesy of Beacon Technologies and Arcplan

10. RReessppoonnssiivvee DDeessiiggnn ##FFAAIILL
Image courtesy of moxy ox

11. RReessppoonnssiivvee DDeessiiggnn ##WWIINN
Image courtesy of moxy ox

12. RReessppoonnssiivvee DDeessiiggnn ##WWIINN

13. RReessppoonnssiivvee DDeessiiggnn ##WWIINN

14. TThhee RReessppoonnssiivvee EExxppeerriieennccee
Image courtesy of responsivedesign.ca

15. EEaassiieesstt RRoouuttee ttoo RReessppoonnssiivvee DDeessiiggnn::
Mobile Web Apps
Run on a device in a browser
Best When:
◦ the app is SIMPLE and
◦ user expectation is LOW
What is a website?
a SIMPLE app

16. LLiimmiittaattiioonnss ooff MMoobbiillee WWeebb AAppppss
((iinn tthhee HHaannddss ooff MMoosstt DDeevveellooppeerrss))
Reduced Functionality
Poor Performance
Decreased User Experience
The Real Risk?

18. MMoobbiillee WWeebb AApppp ##FFAAIILL
Older Facebook app written in HTML5

19. SSoolluuttiioonn##11:: EEssccaappee HHaattcchh
1. Escape Hatch / Full Screen Button
◦ Goes to full-screen web app
◦ May or may not be useable
◦ Doesn’t address experience
or performance

20. SSoolluuttiioonn##22:: NNaattiivvee MMoobbiillee AApppp
Go Where the People Are
◦ App Store Stats
Better Performance
Optimal User Experience

21. CCaassee SSttuuddyy::
PPCCRR EEsssseennttiiaallss
Finalist in Xammy Awards
Google Play Store and iTunes
Written in Xamarin for

29. MMoobbiillee AApppp TTyyppeess
Mobile Web
◦ Browser-based
Native
◦ iOS, Android, OR Windows
Hybrid
◦ Web app wrapped in a native app
Cross-platform
◦ iOS, Android, AND Windows

30. MMoobbiillee AApppp TToooollss
Mobile Web/Responsive
◦ HTML5, CSS, and JavaScript,
(C#, Java, PHP, etc.)
Native
◦ Objective-C, Java, or C#
Hybrid
◦ PhoneGap, Titanium
Cross-platform
◦ Xamarin (C#)

31. SSmmaarrttpphhoonnee OOSS MMaarrkkeett SShhaarree
((QQ11 22001144))
Android – 81%
iOS – 15%
Windows Phone – 3%
Source: International Data Corporation (IDC)
What does this mean?
Single platform apps are risky

32. HHyybbrriidd AAppppss
Web app wrapped in a native app
◦ PhoneGap
◦ Appcelerator Titanium
Yes, it’s in the app stores
No, it’s not really a native app

33. CCrroossss--ppllaattffoorrmm AAppppss
◦ Shared Code
 Code reuse
◦ One technology stack
 Instead of several
◦ Native app quality
◦ Native app performance
◦ Native phone functionality (location, camera, etc.)

34. CCrroossss--ppllaattffoorrmm DDeevveellooppmmeenntt

35. CCrroossss--ppllaattffoorrmm AAppppss
High-performance
Great user experience
Fully native executable
Reusable code
Just one dev team

36. GGaarrttnneerr SSttrroonnggllyy RReeccoommmmeennddss
XXaammaarriinn
“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

37. TThhee UUsseerr IInntteerrffaaccee
USER
INTERFACE

38. Mobile vs. PC
◦ Small and varied
real estate
◦ Touchscreen
◦ Proportion
◦ Self-contained
◦ Miniaturized
◦ Sensory and aware
Image courtesy of Forbes.com

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

40. Navigation
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil

41. TThhee HHaammbbuurrggeerr
aanndd ootthheerr sslliiddiinngg nnaavviiggaattiioonn ppaanneellss

42. Forms
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil

43. Principles
◦ Simplicity
 UI shorthand
 Fields that matter
◦ Call to Action
 Big Dumb Button
◦ Mobilisms: Icons and Gestures
◦ Complexity:
Calculated,
not Accidental

44. MMoobbiilliissmmss
Standard
◦ navigation icons
◦ screen layouts
◦ multi-screen flows
Inline labels instead of side labels
Animation

45. Anti-Patterns
Novel Notions
PCisms
Wrong Icon
Idiot Box
Oceans Of Buttons

46. Anti-Pattern: Novel Notions

47. Anti-Pattern: PCisms
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil

48. Anti-Pattern: Wrong Icon

49. Idiot Box

50. Oceans of Buttons

51. Anti-Pattern Advice:
AVOID CREATIVITY
Until you know mobile UI standards…

52. PPCC IInntteerraaccttiioonn:: TThhee MMoouussee
Click
Double Click
Drag and Drop
Slide
Mouse roller

53. MMoobbiillee IInntteerraaccttiioonn::
GGeessttuurreess nnoott PPooiinntt--aanndd--CClliicckk
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

54. MMoobbiillee FFeeaattuurreess
Location
Camera
Graphics and Animation

55. OOfffflliinnee UUssee
Does it still need to work offline?
What does it need to do?
Read/write from local files or database
Synchronization
The Cloud Isn’t Free

56. LLooccaattiioonn
GPS
Cell Triangulation
iBeacons – Bluetooth

57. KKeeyy TTaakkeeaawwaayyss
Mobile Is Becoming the New PC
Responsive 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

58. MMoobbiillee UUII TTaakkeeaawwaayyss
Learn the Mobile UI Patterns and Terms
Avoid Creativity (in the meantime)
Gestures not Point-and-Click
Learn About Mobile Features
◦ Location
◦ Offline Use
◦ Camera
◦ Graphics and Animation

59. MMyy BBiigg MMoobbiillee BBooookk
Available for Pre-order on Amazon

60. MMyy LLiittttllee SSooffttwwaarree BBooookkss
Available Here Today

61. HHooww AApppp UUssaabbiilliittyy,,
FFuunnccttiioonnaalliittyy,, aanndd AAnnaallyyssiiss
aarree CChhaannggiinngg wwiitthh MMoobbiillee
By Dan Hermes, Lexicon Systems
www.lexiconsystemsinc.com
“Mobile, Xamarin, and .NET Development”
Dan Hermes
Mobile Consultant
dan@lexiconsystemsinc.com
Twitter: @lexiconsystems
(774)614-9423
Jonathan LaMaster
Director of Sales
jonathan@lexiconsystemsinc.com
(617)833-5816