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.

Transcript

1. UX Patterns for Cross-Platform Mobile Co-Founder, Rendr @davidortinau David Ortinau
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?
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:
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?
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
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