xamarin.forms ux design by andrew cotten @ bluetube
Post on 26-Jan-2017
697 Views
Preview:
TRANSCRIPT
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?
top related