$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by David Ortinau

Other Decks in Design

Transcript

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

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. “You live or die by the experience you give
    your customers.”
    Florin Rotar
    Avanade

    View Slide

  7. “As we talk customers…”

    “Maniacally focused on great user experiences…”
    Rod Smith
    IBM

    View Slide

  8. What’s a UX Pattern?

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  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.

    View Slide

  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

    View Slide

  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:

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Culture

    View Slide

  21. Symbols

    View Slide

  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

    View Slide

  23. Values

    View Slide

  24. Norms
    Take a Screenshot

    View Slide

  25. Norms
    Take a Screenshot

    View Slide

  26. Sanctions

    View Slide

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

    View Slide

  28. So, what people?

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. Patterns

    View Slide

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

    View Slide

  36. Back
    Subtitle
    76.1 million (US)
    62.6 million (US)

    View Slide

  37. Back or Up
    Pocket: The Accidental Archive

    View Slide

  38. Navigation
    Springboard

    View Slide

  39. Navigation
    List Menu

    View Slide

  40. Navigation
    Tab Menu

    View Slide

  41. Navigation
    Dashboard

    View Slide

  42. Navigation
    Gallery

    View Slide

  43. View Slide

  44. View Slide

  45. Navigation
    Off Canvas

    View Slide

  46. Segmented vs Spinner

    View Slide

  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

    View Slide

  48. Gestures

    View Slide

  49. Gestures

    View Slide

  50. Onboarding

    View Slide

  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?

    View Slide

  52. Onboarding

    View Slide

  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.

    View Slide

  54. Choosing Patterns

    View Slide

  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.

    View Slide

  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

    View Slide

  57. Top Apps

    View Slide

  58. Observe

    View Slide

  59. Additional Reading

    View Slide

  60. Xamarin.Forms

    View Slide

  61. Tabbed Nav

    View Slide

  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 ();
    });
    }
    }

    View Slide

  63. Equivalents

    View Slide

  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

    View Slide

  65. Downloads Per Month
    35%
    66%
    No Apps 1-8+ Apps

    View Slide

  66. Thank You!
    David Ortinau
    @davidortinau

    View Slide