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

UX Patterns for Cross-Platform Mobile #xamarin

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.

David Ortinau

October 08, 2014

More Decks by David Ortinau

Other Decks in Design


  1. “You live or die by the experience you give your

    customers.” Florin Rotar Avanade
  2. “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.
  3. 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
  4. 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:
  5. 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
  6. 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
  7. “…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?
  8. 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.
  9. 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.
  10. Facebook YouTube Google Play Google Search Pandora Google Maps Gmail

    Instagram Apple Maps Yahoo Stocks 0 20000 40000 60000 80000 100000 120000 Top Apps
  11. 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 (); }); } }
  12. 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