Xamarin.Forms UX Design by Andrew Cotten @ Bluetube

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


Strategize


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:


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


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

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

Getting Started


Plan


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


App Map


Assign Pages


Design


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


Assign Layouts


Wireframe Examples

BEFORE AFTERAFTER BEFORE


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


Global ColorsBarsButtonsBackgrounds Text

FontsTitlesLabelsHeadersBodyButton text

Creative Design


Wireframe Examples

WIREFRAME IOS ANDROID


Questions?

Xamarin.Forms UX Design by Andrew Cotten @ Bluetube

Software

Transcript of Xamarin.Forms UX Design by Andrew Cotten @ Bluetube