ui/ux best practices for designing amazing web apps€¦ · ui/ux best practices for designing...
Post on 20-May-2020
14 Views
Preview:
TRANSCRIPT
Michael Gaigg & Allan Laframboise
UI/UX Best Practices for Designing Amazing Web Apps
What makes an app “amazing”?
• UX design is more than gathering requirements• Importance of understanding your user• How to align design with your current process• Apply Map UI Patterns best practices• Case Study: Design of the VT Style Editor
More than only gathering requirementsUX Design
Who are your users and what do they need?Understanding Your User
Friday
Friday, 13th 2020
Next trash pickup:
Fridays
Cost
HighLow
Conceptual Model vs Mental Model
Usability
vs
How do you define success?
Personas are
• Fictional character created to represent a set of users• Grouped by behavioral characteristics (how tasks are performed)• Ideally derived from research• Personas are NOT roles (the types of tasks performed)
Persona User Needs Data Needs App Needs App Type
insights detailed / in-depth flexible / elaborate Enterprise
analytical tools complete / comprehensive methodical Analysis
performance indicators
strategic / calculated tactical Dashboard
answers relevant / specific applicable Focused
directions precise / real-time accurate Mobile
Expert / SME
Analyst
Executive
Public
Mobile
Enterprise
Analysis
Dashboard
Focused
Mobile
Persona Attention Focus Scale App Type
Enterprise
Analysis
Dashboard
Focused
Mobile
Expert / SME
Analyst
Executive
Public
Enterprise
Analysis
Dashboard
Focused
Mobile
Tim
e sp
ent
High
LowC
ente
r o
f int
eres
t or
activ
ity
Wide
Narrow
Are
a o
f Int
eres
t
Small
LargeMobile
How to align design with your current processDesign Process
Guy Carpenter
US CensusGeoPlanner for ArcGIS
Abu Dhabi
Are these good designs?
Research
AnalysisDesign
Validation
Design is a continuous Process
Interviews
Personas
Wireframes
Usability Testing
Iterations of Wireframes
Version 1
Version 2
Version 3
Mockup
Measure Success
“This is exciting!”
“Our design is on the big stage!”
“It works great!”
Better design through Map UI PatternsBest Practiceshttps://www.mapuipatterns.com
Map UI Patterns
• Describe solutions to observed and recurring design problems• Provide a language for planning and building map apps• Basis for new components of a Design System• Defined as Problem, Context, Solution
Data visualization with straight or geodesic lines have visual limitations
https://mapuipatterns.com/flowmap/“Flowmap” https://github.com/sarahbellum/Canvas-Flowmap-Layer
Empty State
Task Oriented
Layouts
Map is the focus & the core valueFull Map
Map and content equally important & workflow drivenPartial Map
For navigation & reference purposesReference Map
No MapTask doesn’t require a map but utilizes power of GIS
Toggle between Full Map and Reference MapFocus on the Subject
Partial map on mobile difficult
Toggle between reference map & full map
Mobile
Full Map Partial Map Reference Map
Level of Detail high high low to mediumLevel of Control high medium to high none to lowTools advanced in workflows none/fewInteraction advanced advanced ok limitedCartography very important important limit distractions
Layouts Summary
Map UI Patterns in Practice
Old Version Version 1
Unified SearchLocate Me
Home Button
Placemarks Choropleth Map
Feature SelectionBrowse Geographies
Task Oriented
Version 1 Version 2
Legend
Dashboard
Layer List
Problem: Too many features
Markers Aggregation Application
Simple Marker
Cluster Marker
Proportional Marker
Heatmap
Dot Density Map
Choropleth Map
Spatial Filter
Attribute Filter
Theme Toggle
More Best Practices
• Interactions between App & Map- Marker List https://mapuipatterns.com/marker-list- List & Details https://mapuipatterns.com/list-details- Extent-driven Content https://mapuipatterns.com/extent-driven-content- Store Locator https://mapuipatterns.com/store-locator
• UI Foundations (Design Lab) https://esriurl.com/DesignLab• Calcite-React Component Library https://calcite-react.netlify.com/
ArcGIS Vector Tile Style EditorCase Studyhttps://developers.arcgis.com/vector-tile-style-editor/
ArcGIS Vector Tile Style Editor
Part II: ArcGIS Vector Tile Style Editorhttps://slides.com/alaframboise/designing-the-vector-tile-style-editor/#/
Thank You!
• Map UI Patterns https://www.mapuipatterns.com• ArcGIS Vector Tile Style Editor https://developers.arcgis.com/vector-tile-style-editor• Design Lab (Foundations) https://esriurl.com/DesignLab• Canvas Flowmap Layer https://github.com/sarahbellum/Canvas-Flowmap-Layer• Balsamiq Wireframes http://www.balsamiq.com/• Calcite-React https://calcite-react.netlify.com/
top related