Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX Patterns for Cross-Platform Mobile #xamarin

340d396deb6c4987147b061705edcb54?s=47 David Ortinau
October 08, 2014

UX Patterns for Cross-Platform Mobile #xamarin

From 2014 Xamarin Evolve, we look at what UX Patterns are and some common patterns we need to work through in designing and implementing cross platform designs.

340d396deb6c4987147b061705edcb54?s=128

David Ortinau

October 08, 2014
Tweet

Transcript

  1. UX Patterns for Cross-Platform Mobile Co-Founder, Rendr @davidortinau David Ortinau

  2. None
  3. None
  4. None
  5. None
  6. “You live or die by the experience you give your

    customers.” Florin Rotar Avanade
  7. “As we talk customers…”
 “Maniacally focused on great user experiences…”

    Rod Smith IBM
  8. What’s a UX Pattern?

  9. None
  10. None
  11. None
  12. None
  13. None
  14. “The elements of this language are entities called patterns. Each

    pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.” Christopher Alexander A Pattern Language: Towns, Buildings, Construction.
  15. User Experience (UX) vs User Interface (UI) UX • Overarching

    architecture of the app • Accounts for user’s needs and desires • Balances with business goals • Establishes the purposes • Describes the desired outcomes • Informed and guided by UX • Visual Design • Tactical UI
  16. Jane needs to be able move between her news feed,

    incoming friend requests, and recent notifications. Sometimes she’ll need to get to her profile, security settings, and privacy preferences. UX Says: We’ll design tabs that prioritize those menu items and allow for overflow. We’ll position them at the bottom on iOS and on top for Android. UI Says: UITabBarController on iOS.
 ActionBar with Tabs on Android.
 w00t! Xamarin.Forms FTW! Dev Says:
  17. None
  18. None
  19. None
  20. Culture

  21. Symbols

  22. IPA APK Springboard Launcher Backgrounding Widget Activity Language PPI DIP

    Root Jailbreak JIT Jelly Bean Toast Passcode PIN Control Center Siri Cortana Messages Switch Picker Spinner Toggle View Dialog Navigation Bar Action Bar
  23. Values

  24. Norms Take a Screenshot

  25. Norms Take a Screenshot

  26. Sanctions

  27. Understanding platform culture is really listening to and understanding people.

  28. So, what people?

  29. None
  30. None
  31. None
  32. None
  33. None
  34. Patterns

  35. Overview • Back • Navigation • Form Controls • Lists

    • Gestures • Onboard
  36. Back Subtitle 76.1 million (US) 62.6 million (US)

  37. Back or Up Pocket: The Accidental Archive

  38. Navigation Springboard

  39. Navigation List Menu

  40. Navigation Tab Menu

  41. Navigation Dashboard

  42. Navigation Gallery

  43. None
  44. None
  45. Navigation Off Canvas

  46. Segmented vs Spinner

  47. Lists iOS UITableView, UITableViewSource, UITableItem Grouped Reorder Edit Mode Animations

    Android ListView, Adapter, View Grouping - 3rd party Reorder - 3rd party Edit Mode - 3rd Party Animations - 3rd party
  48. Gestures

  49. Gestures

  50. Onboarding

  51. “…user testing showed that users skip or otherwise ignore dialogs,

    tours, video demos and transparencies. At best, users find them a minor inconvenience. At worst, the patterns significantly aggravate new users who are trying to get into the app.” Theresa Neil, Rich Malley Rethinking Mobile Tutorials: Which Patterns Really Work?
  52. Onboarding

  53. Keys to Good Onboarding Tutorials 101 • Use less text.

    • Don’t frontload. • Make it fun, rewarding. • Reinforce learning through play, use. • Listen to your players, users.
  54. Choosing Patterns

  55. Top Apps ComScore: The US Mobile App Report The ranking

    of top apps is dominated by app constellations of some of the largest digital media brands; specifically, Facebook, Google, Apple, Yahoo, Amazon and eBay. These six brands account for 9 of the top 10 most used apps, 16 of the top 25, and 24 of the top 50.
  56. Facebook YouTube Google Play Google Search Pandora Google Maps Gmail

    Instagram Apple Maps Yahoo Stocks 0 20000 40000 60000 80000 100000 120000 Top Apps
  57. Top Apps

  58. Observe

  59. Additional Reading

  60. Xamarin.Forms

  61. Tabbed Nav

  62. TabbedPage class TabbedPageDemoPage : TabbedPage { public TabbedPageDemoPage () {

    this.Title = "TabbedPage"; this.ItemsSource = new NamedColor[] { new NamedColor ("Red", Color.Red), new NamedColor ("Yellow", Color.Yellow), … }; this.ItemTemplate = new DataTemplate (() => { return new NamedColorPage (); }); } }
  63. Equivalents

  64. Components iOS • UIButton • UISwitch • UIStepper • UISlider

    • UISegmentedController • UIMenuController • UIDatePicker • UITextField / UITextView • UILabel • UIImageView • UITableView • UICollectionView • UINavigationBar • UIBarButtonItem • UITabBar • Button: Button, Checkbox, RadioButton • Switch • Button • SeekBar • Button • PopupMenu • DatePicker • EditText • TextView • ImageView • ListView • GridView • ActionBar • ActionItem • ActionBarTabs Android
  65. Downloads Per Month 35% 66% No Apps 1-8+ Apps

  66. Thank You! David Ortinau @davidortinau