Xamarin.Forms + UX DesignAndrew Cotten

© 2015 Bluetube, LLC

Why is UX Design important in Mobile Enterprise?Poor UX = Low Adoption

Higher tolerance in WEB than MOBILE Context is key

Help users perform tasks, NOT exploreWHO are the users? (Personas)WHAT are they trying to do? (Goals/Tasks)WHY do they want to do it? (Reasons/Drivers)

User Experience

© 2015 Bluetube, LLC

Strategize

© 2015 Bluetube, LLC

Strategy

FOCUS on enterprise User Motivations

ALIGN design decisions with User Goals

UTILIZEplatform-specific Best Practices

SOLUTION HELPS USER COMPLETE TASK(S)

EXPERIENCE IS ENJOYABLE AND SATISFYING

IMPLEMENTATION IS LOGICAL AND ATTAINABLE

How to approach Mobile UX:

© 2015 Bluetube, LLC

Designing WITH Xamarin Forms

Consider Xamarin.Forms’ capabilities…

DESIGN AND ASSIGN

PROBLEM-SOLVE UPFRONT

CONSIDER PERFORMANCE IN DECISION-MAKING

CUSTOMIZE WHERE VALUABLE

UNDERSTAND CROSS-PLATFORM PARADIGMS

NOT GUIDELINES TO RESTRICT

AS TOOLS TO EMPOWER

© 2015 Bluetube, LLC

Read the instructionsXamarin documentationiOS, Android, Windows Documentation (design/best practices)

Understand Xamarin.Forms building blocksPages (use cases/scenarios for page types)LayoutsControls

Getting Started

© 2015 Bluetube, LLC

Plan

© 2015 Bluetube, LLC

Planning Process

Start with an app map / IAUser/Screen Flow

High level overviewFunctionality groupings

Establish Navigation

App sections and relationshipsLevels and sub-nav considerationsShallow “depths”

X.FORMS STEP

ASSIGN PAGES

© 2015 Bluetube, LLC

App Map

© 2015 Bluetube, LLC

Assign Pages

© 2015 Bluetube, LLC

Design

© 2015 Bluetube, LLC

Screen Layout

FOCUS SIMPLIFY EVALUATE

Use the simplest combination of elements to define screen purpose and functionality.

X.FORMS STEPS

ASSIGN LAYOUTADD CONTROLS (VIEWS)

NOTESUtilize built-in controls

Avoid nested layoutsAvoid massive list views

Minimize custom cell layouts

© 2015 Bluetube, LLC

Assign Layouts

© 2015 Bluetube, LLC

Wireframe Examples

BEFORE AFTERAFTER BEFORE

© 2015 Bluetube, LLC

Test it out

Simple, “out-of-the-box” components based on design

Evaluate Navigation and flow – does it feel natural?

Is anything NOT working?

Prototyping

© 2015 Bluetube, LLC

Global ColorsBarsButtonsBackgrounds Text

FontsTitlesLabelsHeadersBodyButton text

Creative Design

© 2015 Bluetube, LLC

Wireframe Examples

WIREFRAME IOS ANDROID

© 2015 Bluetube, LLC

Questions?