ui/ux best practices for designing amazing web apps · pdf file ui/ux best practices for...

Click here to load reader

Post on 20-May-2020

5 views

Category:

Documents

0 download

Embed Size (px)

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 requirements UX 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

    Ti m

    e sp

    en t

    High

    Low C

    en te

    r o

    f i nt

    er es

    t o r

    ac tiv

    ity

    Wide

    Narrow

    A re

    a o

    f I nt

    er es

    t

    Small

    Large Mobile

  • How to align design with your current process Design Process

  • Guy Carpenter

    US Census GeoPlanner for ArcGIS

    Abu Dhabi

    Are these good designs?

  • Research

    Analysis Design

    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 Patterns Best Practices https://www.mapuipatterns.com

    https://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

    https://www.mapuipatterns.com/

  • Empty State

  • Task Oriented

  • Layouts

  • Map is the focus & the core value Full Map

  • Map and content equally important & workflow driven Partial Map

  • For navigation & reference purposes Reference Map

  • No Map Task doesn’t require a map but utilizes power of GIS

  • Toggle between Full Map and Reference Map Focus 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 medium Level of Control high medium to high none to low Tools advanced in workflows none/few Interaction advanced advanced ok limited Cartography very important important limit distractions

    Layouts Summary

  • Map UI Patterns in Practice

  • Old Version Version 1

    Unified Search Locate Me

    Home Button

    Placemarks Choropleth Map

    Feature Selection Browse 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/

    http://mapuipatterns.com/marker-list https://mapuipatterns.com/list-details https://mapuipatterns.com/extent-driven-content https://mapuipatterns.com/store-locator https://esriurl.com/DesignLab https://calcite-react.netlify.com/

  • ArcGIS Vector Tile Style Editor Case Study https://developers.arcgis.com/vector-tile-style-editor/

    https://developers.arcgis.com/vector-tile-style-editor/

  • ArcGIS Vector Tile Style Editor

    Part II: ArcGIS Vector Tile Style Editor https://slides.com/alaframboise/designing-the-vector-tile-style-editor/#/

    https://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/

    https://www.mapuipatterns.com/ https://developers.arcgis.com/vector-tile-style-editor https://esriurl.com/DesignLab https://github.com/sarahbellum/Canvas-Flowmap-Layer http://www.balsamiq.com/ https://calcite-react.netlify.com/

  • UI/UX Best Practices for �Designing Amazing Web Apps What makes an app “amazing”? UX Design Slide Number 4 Slide Number 5 Understanding Your User Slide Number 7 Slide Number 8 Conceptual Model vs Mental Model Personas are Slide Number 11 Slide Number 12 Slide Number 13 Design Process Are these good designs? Design is a continuous Process Iterations of Wireframes Measure Success Best Practices Map UI Patterns Slide Number 21 Empty State Slide Number 23 Slide Number 24 Task Oriented Slide Number 26 Slide Number 27 Layouts Slide Number 29 Slide Number 30 Slide Number 31 Slide Number 32 Slide Number 33 Slide Number 34 Slide Number 35 Map UI Patterns in Practice Slide Number 37 Slide Number 38 Slide Number 39 Problem: Too many features Slide Number 41 Slide Number 42 More Best Practices Case Study Part II: ArcGIS Vector Tile Style Editor Thank You! Slide Number 47

View more