Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HHooww AApppp UUssaabbiilliittyy,, 
FFuunnccttiioonnaalliittyy,, aanndd AAnnaallyyssiiss 
aarree CChhaannggiinngg wwiitthh...
KKeeyy TTaakkeeaawwaayyss 
Mobile Is Becoming the New PC 
Responsive Design is fast and cheap 
◦ Good for websites 
◦ OK...
MMoobbiillee UUII TTaakkeeaawwaayyss 
Learn the Mobile UI Patterns and Terms 
Avoid Creativity (in the meantime) 
Gestu...
WWhhyy mmoobbiillee?? 
Americans used smartphone and tablet apps 
more than PCs to access the Internet. 
Source: CNN, Janu...
AAnndd wwhhaatt aabboouutt ttaabblleettss?? 
When we were an agrarian nation, all cars were 
trucks. But as people moved m...
Post-PC Era: 2015 
Mobile Phones > first world population 
◦ 1.9B devices 
Tablets > PC sales 
◦ 320M tablets vs. 316M P...
TThhee UUppsshhoott 
Data Consumers (Conclusive) 
◦ Mobile phones and tablets 
Data Producers (Jury is still out) 
◦ PCs...
WWhhaatt DDoo DDaattaa CCoonnssuummeerrss NNeeeedd??
RReessppoonnssiivvee DDeessiiggnn 
Images courtesy of Beacon Technologies and Arcplan
RReessppoonnssiivvee DDeessiiggnn ##FFAAIILL 
Image courtesy of moxy ox
RReessppoonnssiivvee DDeessiiggnn ##WWIINN 
Image courtesy of moxy ox
RReessppoonnssiivvee DDeessiiggnn ##WWIINN
RReessppoonnssiivvee DDeessiiggnn ##WWIINN
TThhee RReessppoonnssiivvee EExxppeerriieennccee 
Image courtesy of responsivedesign.ca
EEaassiieesstt RRoouuttee ttoo RReessppoonnssiivvee DDeessiiggnn:: 
Mobile Web Apps 
Run on a device in a browser 
Best ...
LLiimmiittaattiioonnss ooff MMoobbiillee WWeebb AAppppss 
((iinn tthhee HHaannddss ooff MMoosstt DDeevveellooppeerrss)) 
...
MMoobbiillee WWeebb AApppp ##FFAAIILL 
Older Facebook app written in HTML5
SSoolluuttiioonn##11:: EEssccaappee HHaattcchh 
1. Escape Hatch / Full Screen Button 
◦ Goes to full-screen web app 
◦ May...
SSoolluuttiioonn##22:: NNaattiivvee MMoobbiillee AApppp 
Go Where the People Are 
◦ App Store Stats 
Better Performance ...
CCaassee SSttuuddyy:: 
PPCCRR EEsssseennttiiaallss 
Finalist in Xammy Awards 
Google Play Store and iTunes 
Written in ...
MMoobbiillee AApppp TTyyppeess 
Mobile Web 
◦ Browser-based 
Native 
◦ iOS, Android, OR Windows 
Hybrid 
◦ Web app wrap...
MMoobbiillee AApppp TToooollss 
Mobile Web/Responsive 
◦ HTML5, CSS, and JavaScript, 
(C#, Java, PHP, etc.) 
Native 
◦ O...
SSmmaarrttpphhoonnee OOSS MMaarrkkeett SShhaarree 
((QQ11 22001144)) 
Android – 81% 
iOS – 15% 
Windows Phone – 3% 
Sou...
HHyybbrriidd AAppppss 
Web app wrapped in a native app 
◦ PhoneGap 
◦ Appcelerator Titanium 
Yes, it’s in the app stores...
CCrroossss--ppllaattffoorrmm AAppppss 
◦ Shared Code 
 Code reuse 
◦ One technology stack 
 Instead of several 
◦ Native...
CCrroossss--ppllaattffoorrmm DDeevveellooppmmeenntt
CCrroossss--ppllaattffoorrmm AAppppss 
High-performance 
Great user experience 
Fully native executable 
Reusable code...
GGaarrttnneerr SSttrroonnggllyy RReeccoommmmeennddss 
XXaammaarriinn 
“Xamarin's architectural approach provides 
complete...
TThhee UUsseerr IInntteerrffaaccee 
USER 
INTERFACE
Mobile vs. PC 
◦ Small and varied 
real estate 
◦ Touchscreen 
◦ Proportion 
◦ Self-contained 
◦ Miniaturized 
◦ Sensory a...
Visual Design Patterns 
◦ Navigation 
◦ Forms 
◦ Tables and Lists 
◦ Search, Sort, and Filter 
◦ Tools 
◦ Charts 
◦ Invita...
Navigation 
Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
TThhee HHaammbbuurrggeerr 
aanndd ootthheerr sslliiddiinngg nnaavviiggaattiioonn ppaanneellss
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 an...
MMoobbiilliissmmss 
Standard 
◦ navigation icons 
◦ screen layouts 
◦ multi-screen flows 
Inline labels instead of side ...
Anti-Patterns 
Novel Notions 
PCisms 
Wrong Icon 
Idiot Box 
Oceans 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…
PPCC IInntteerraaccttiioonn:: TThhee MMoouussee 
Click 
Double Click 
Drag and Drop 
Slide 
Mouse roller
MMoobbiillee IInntteerraaccttiioonn:: 
GGeessttuurreess nnoott PPooiinntt--aanndd--CClliicckk 
Gesture Action Mouse 
Tap I...
MMoobbiillee FFeeaattuurreess 
Location 
Camera 
Graphics and Animation
OOfffflliinnee UUssee 
Does it still need to work offline? 
What does it need to do? 
Read/write from local files or da...
LLooccaattiioonn 
GPS 
Cell Triangulation 
iBeacons – Bluetooth
KKeeyy TTaakkeeaawwaayyss 
Mobile Is Becoming the New PC 
Responsive Design is fast and cheap 
◦ Good for websites 
◦ OK...
MMoobbiillee UUII TTaakkeeaawwaayyss 
Learn the Mobile UI Patterns and Terms 
Avoid Creativity (in the meantime) 
Gestu...
MMyy BBiigg MMoobbiillee BBooookk 
Available for Pre-order on Amazon
MMyy LLiittttllee SSooffttwwaarree BBooookkss 
Available Here Today
HHooww AApppp UUssaabbiilliittyy,, 
FFuunnccttiioonnaalliittyy,, aanndd AAnnaallyyssiiss 
aarree CChhaannggiinngg wwiitthh...
  How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile
  How App Usability, Functionality, and Analysis are Changing with Mobile
Upcoming SlideShare
Loading in …5
×

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

1,007 views

Published on

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?

Published in: Mobile, Technology
  • Be the first to comment

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

  1. 1. HHooww AApppp UUssaabbiilliittyy,, FFuunnccttiioonnaalliittyy,, aanndd AAnnaallyyssiiss aarree CChhaannggiinngg wwiitthh MMoobbiillee Dan Hermes Founder and Mobile Consultant Lexicon Systems www.lexiconsystemsinc.com
  2. 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. 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. 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. 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. 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. 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. 8. WWhhaatt DDoo DDaattaa CCoonnssuummeerrss NNeeeedd??
  9. 9. RReessppoonnssiivvee DDeessiiggnn Images courtesy of Beacon Technologies and Arcplan
  10. 10. RReessppoonnssiivvee DDeessiiggnn ##FFAAIILL Image courtesy of moxy ox
  11. 11. RReessppoonnssiivvee DDeessiiggnn ##WWIINN Image courtesy of moxy ox
  12. 12. RReessppoonnssiivvee DDeessiiggnn ##WWIINN
  13. 13. RReessppoonnssiivvee DDeessiiggnn ##WWIINN
  14. 14. TThhee RReessppoonnssiivvee EExxppeerriieennccee Image courtesy of responsivedesign.ca
  15. 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. 16. LLiimmiittaattiioonnss ooff MMoobbiillee WWeebb AAppppss ((iinn tthhee HHaannddss ooff MMoosstt DDeevveellooppeerrss)) Reduced Functionality Poor Performance Decreased User Experience The Real Risk?
  17. 17. MMoobbiillee WWeebb AApppp ##FFAAIILL Older Facebook app written in HTML5
  18. 18. 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
  19. 19. SSoolluuttiioonn##22:: NNaattiivvee MMoobbiillee AApppp Go Where the People Are ◦ App Store Stats Better Performance Optimal User Experience
  20. 20. CCaassee SSttuuddyy:: PPCCRR EEsssseennttiiaallss Finalist in Xammy Awards Google Play Store and iTunes Written in Xamarin for
  21. 21. 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
  22. 22. 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#)
  23. 23. 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
  24. 24. 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
  25. 25. 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.)
  26. 26. CCrroossss--ppllaattffoorrmm DDeevveellooppmmeenntt
  27. 27. CCrroossss--ppllaattffoorrmm AAppppss High-performance Great user experience Fully native executable Reusable code Just one dev team
  28. 28. 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
  29. 29. TThhee UUsseerr IInntteerrffaaccee USER INTERFACE
  30. 30. Mobile vs. PC ◦ Small and varied real estate ◦ Touchscreen ◦ Proportion ◦ Self-contained ◦ Miniaturized ◦ Sensory and aware Image courtesy of Forbes.com
  31. 31. Visual Design Patterns ◦ Navigation ◦ Forms ◦ Tables and Lists ◦ Search, Sort, and Filter ◦ Tools ◦ Charts ◦ Invitations, Feedback, and Help ◦ Anti-Patterns
  32. 32. Navigation Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  33. 33. TThhee HHaammbbuurrggeerr aanndd ootthheerr sslliiddiinngg nnaavviiggaattiioonn ppaanneellss
  34. 34. Forms Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  35. 35. Principles ◦ Simplicity  UI shorthand  Fields that matter ◦ Call to Action  Big Dumb Button ◦ Mobilisms: Icons and Gestures ◦ Complexity: Calculated, not Accidental
  36. 36. MMoobbiilliissmmss Standard ◦ navigation icons ◦ screen layouts ◦ multi-screen flows Inline labels instead of side labels Animation
  37. 37. Anti-Patterns Novel Notions PCisms Wrong Icon Idiot Box Oceans Of Buttons
  38. 38. Anti-Pattern: Novel Notions
  39. 39. Anti-Pattern: PCisms Images courtesy of Mobile Design Pattern Gallery by Theresa Neil
  40. 40. Anti-Pattern: Wrong Icon
  41. 41. Idiot Box
  42. 42. Oceans of Buttons
  43. 43. Anti-Pattern Advice: AVOID CREATIVITY Until you know mobile UI standards…
  44. 44. PPCC IInntteerraaccttiioonn:: TThhee MMoouussee Click Double Click Drag and Drop Slide Mouse roller
  45. 45. 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
  46. 46. MMoobbiillee FFeeaattuurreess Location Camera Graphics and Animation
  47. 47. 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
  48. 48. LLooccaattiioonn GPS Cell Triangulation iBeacons – Bluetooth
  49. 49. 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
  50. 50. 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
  51. 51. MMyy BBiigg MMoobbiillee BBooookk Available for Pre-order on Amazon
  52. 52. MMyy LLiittttllee SSooffttwwaarree BBooookkss Available Here Today
  53. 53. 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

×