UI/UX Best Practices for Designing Amazing Web Apps€¦ · UI/UX Best Practices for Designing...

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

https://www.mapuipatterns.com

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/