Michael Gaigg & Allan Laframboise

Improving your Web App through UI/UX Best Practices – Part I

Problem Ship

Definition

“The purpose of software development is to ship products that solve a problem”

Defin

ition

Problem Ship

“Finding the best solution requires to discover possible ideas”

• Conceptual Design (Wireframes)• Visual Design (Mockups)• Prototyping• Front-End Dev (Code)• Usability Testing (Reports)

UI

Defin

ition

Problem Ship

“Framing the right problem to solve is the actual design challenge.”

• Conceptual Design (Wireframes)• Visual Design (Mockups)• Prototyping• Front-End Dev (Code)• Usability Testing (Reports)

UIUX

• Empathy• Interviews (Personas)• Surveys• Journey Mapping (Scenarios)• Workshops (Strategy)

Finding the Problem Finding the Solution

WHY / HOW WHAT

DISCOVERinsights into the problem

DEFINEthe area to focus upon

Research Strategy

DEVELOPpotential solutions

DELIVERsolutions that work

Design Implementation

Problem Ship

Defin

ition

UX UI

• Empathy• Interviews (Personas)• Surveys• Journey Mapping (Scenarios)• Workshops (Strategy)

• Conceptual Design (Wireframes)• Visual Design (Mockups)• Prototyping• Front-End Dev (Code)• Usability Testing (Reports)

UX Strategy (aka What is good Design?)

• Who is using it?

• What do they want to do?

• Are the users able to accomplish their tasks?

• Are the users happy?

• Do we meet business needs?

• Was it successful?

=> Purpose

End Users

End User Needs

Usability

User Experience

Business Needs

Success Criteria

UI Design

• Sketch, sketch, sketch

• Study design basics for apps

• Apply best practices for map apps

Wireframes

Design Lab http://esriurl.com/DesignLab

Map UI Patterns http://mapuipatterns.com

http://balsamiq.com

http://mapuipatterns.comMap UI Patterns

What is good Design?

Old Version Version 1

Unified SearchLocate Me

Home Button

Placemarks Thematic Map

Feature SelectionBrowse Geographies

Task Oriented

Version 1 Version 2

Legend

Dashboard

Layer List

Common Problems solved by Map UI Patterns

• Too much data- Thematic Map http://mapuipatterns.com/thematic-map- Attribute Filter http://mapuipatterns.com/attribute-filter- Spatial Filter http://mapuipatterns.com/spatial-filter

• Interactions between App and Map- Marker List http://mapuipatterns.com/marker-list- List & Details http://mapuipatterns.com/list-details- Extent-driven Content http://mapuipatterns.com/extent-driven-content- Store Locator http://mapuipatterns.com/store-locator

• Layouts http://mapuipatterns.com/category/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

Mobile

No partial map on mobile!

Toggle betweenreference map

& full map

User Study & 3DArcGIS Indoors

User Study

• Objectives:- Is the map always the best approach?- Is familiarity with the environment or technology an influential factor?

• Method:- Remote, asynchronous study with instrumented app- Upfront questions about user- Short & pre-defined tasks- A/B testing (initial extent & basemap)

Task: Save your office as the home location

Data Collection

• Elasticsearch storage

• Kibana dashboard visualizations

User Flow & Analysis

• High map usage (for all groups of users)- 13% made use of the search bar- 7% made use of the “explore” sidebar

A/B Testing: Extents

Familiar Less familiar High GIS rating Low GIS rating

Campus

Building Q Pan Zoom Out Zoom Out a bit + Pan Zoom Out

Zoom In Zoom In + Pan Zoom In + Pan Zoom In + Pan

Familiar with Campus Less Familiar with Campus

Task: Retrieve step-by-step instructions from the café to Mike Gaigg’s office

• 47% opened the “Directions” sidebar

• 36% used the search bar in the header

• 17% selected a location (café or office) from the mapAll of them rated their GIS or campus familiarity with a score higher than 4

• Typing in source & destination in the

directions widget is the most convenient way

Task-focused Workflow

More Insights: 3D

• Users did not make use of 3D- Either were happy with 2D for the required tasks or- Did not see the option (poor design)

• So why do we need 3D?- Practice Lead: “It’s a must”- 3D Team: “You still do 2D? You are so yesterday!”- Clients: “We want to see our PDF maps online”

• Challenge:- Understand the problem to the solution

Better Design: 2D/3D Toggle

• Get inspiration

• Games have solved this for ages

• Mini-Map marries best of both worlds

Key Takeaways

• UX & UI cannot be after-thoughts

• Sketch, Sketch, Sketch

• Ask: - Who is using it? - What do they want to do?- Was it successful?

• Use Map UI Patterns