UX Patterns for Cross-Platform Mobile #xamarin

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

“As we talk customers…”  “Maniacally focused on great user experiences…” Rod Smith IBM

Slide 8

Slide 8 text

What’s a UX Pattern?

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

“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.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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:

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Culture

Slide 21

Slide 21 text

Symbols

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Values

Slide 24

Slide 24 text

Norms Take a Screenshot

Slide 25

Slide 25 text

Norms Take a Screenshot

Slide 26

Slide 26 text

Sanctions

Slide 27

Slide 27 text

Understanding platform culture is really listening to and understanding people.

Slide 28

Slide 28 text

So, what people?

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Patterns

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Back or Up Pocket: The Accidental Archive

Slide 38

Slide 38 text

Navigation Springboard

Slide 39

Slide 39 text

Navigation List Menu

Slide 40

Slide 40 text

Navigation Tab Menu

Slide 41

Slide 41 text

Navigation Dashboard

Slide 42

Slide 42 text

Navigation Gallery

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Navigation Off Canvas

Slide 46

Slide 46 text

Segmented vs Spinner

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Gestures

Slide 49

Slide 49 text

Gestures

Slide 50

Slide 50 text

Onboarding

Slide 51

Slide 51 text

“…user testing showed that users skip or otherwise ignore dialogs, tours, video demos and transparencies. At best, users ﬁnd them a minor inconvenience. At worst, the patterns signiﬁcantly aggravate new users who are trying to get into the app.” Theresa Neil, Rich Malley Rethinking Mobile Tutorials: Which Patterns Really Work?

Slide 52

Slide 52 text

Onboarding

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

Choosing Patterns

Slide 55

Slide 55 text

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; speciﬁcally, 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.

Slide 56

Slide 56 text

Facebook YouTube Google Play Google Search Pandora Google Maps Gmail Instagram Apple Maps Yahoo Stocks 0 20000 40000 60000 80000 100000 120000 Top Apps

Slide 57

Slide 57 text

Top Apps

Slide 58

Slide 58 text

Observe

Slide 59

Slide 59 text

Additional Reading

Slide 60

Slide 60 text

Xamarin.Forms

Slide 61

Slide 61 text

Tabbed Nav

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Equivalents

Slide 64

Slide 64 text

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