User Experience & Interface Design for Map Apps

@MichaelGaigg@AL_Laframboise

My name is Michael Gaigg. I work in Professional Services where I lead the UI Engineering team. My job is to create compelling, easy to use and useful applications.I am originally from Austria, a small but beautiful country in the heart of the Alps. My grand dad was a carpenter, he learned the craft as an apprentice of a local carpenter before being able to open his own shop. He became the house carpenter at a company called Phillips where he built custom furniture for its employees. He built his own house from the ground up, he did everything from floors to ceilings to doors and furniture. I remember vividly the many times we sat around a big table in the living room talking, laughing and discussing.When I decided that I wanted to study Computer Science I told my grandma who replied: "Oh, I don't believe in that." as if it was a religion and my granddad continued to tell me that people don't produce the same quality as they used to. I often felt offended by these words. I never understood why he would say that since we have way better machines and better processes and better knowledge today than in the olden days. 1

It wasn't until he passed away and I returned to the house again when I saw all the furniture he had made with the old-fashioned woods and ornaments. Thats when I realized that two types of people exist in this world, builders that create things and users that use these things. My granddad knew exactly for who he built the furniture and I can still see the soul of my grandparents in them. I started to understand what he was trying to tell all the time, we don't produce the same quality anymore because builders don't know their users anymore, we became detached.

2

This is Salzburg, the city I grew up. Its a beautiful baroque city with Romanesque, Gothic, and Renaissance influences. You can follow the tunes of Sound of Music and visit the birth house of Wolfgang Amadeus Mozart.

3

As you continue walking the tiny streets of old town you start seeing signs hanging over the streets from the stores advertising their services and goods. These signs had a function. At a time when literacy was low a shoe or a key were meaningful matters of communication. Well, an M maybe not so much. But it is astounding how beautifully crafted these signs were. We say Form follows function and we actually believe it, but its not true, because Form IS a function.So my story can teach you two fundamental insights: (1) Get to know your user, talk to them. And (2) be authentic, dont worry about removing all the ornaments just to be shiny and clean like Apple or Bauhaus. Be yourself now, you dont need to be timeless. 4

michaelgaigg.com/blogMaterials & References

@MichaelGaigg@AL_Laframboise

I want you to go home with a couple of things in your bag but I also want you to be able to focus on this talk so please remember this url or take a quick picture. Im going to post all the materials and references from this talk on my blog. Its at http://www.michaelgaigg.com/blog

5

Design ChallengeOneSheet

Lets start with the Design Challenge OneSheet.

6

Original Version

Imagine this situation. Youve been given an existing app with the request to make it a model GIS that is modern, highly polished, professional looking, easy to use, and mobile-friendly.As we talk with our client they tell us that current pain points include difficult to understand, cant find stuff, UI not obvious.Users are citizens that want to look up anything, realtors interested in zoning, evacuation zones, road ownership, mortgage underwriters, the rest of the world and naturally internal staff to do all of the above. The question is: should we create one app which we have already done and seen failing or 35 focused apps using Web AppBuilder?What to do? Where to start? Do you accept the Design challenge?

7

PROBLEMTASKSEXPERTISE &EXPERIENCENOTES &DESIGN

Lets use my cheat sheet. It has 4 sections: Expertise, Experience, the Problem, the Tasks and space for scribbles and doodles.

8

EXPERTISE &EXPERIENCE Where am I now?Pain Points Where do I want to be?Desired Outcome How do I get there?Strategy How do I measure it?Success

In our first section we ask questions like Pain Points may require researchDesired Outcome is very different to Output that is being deliveredGoals & Strategy How to measure success

9

PROBLEM What is the problem we are trying to solve? Business Needs? End-user Needs?

Make informed decisions about a parcel/property and its surroundings.

Whenever I feel lost during a walk-through, demo or sales presentation I remember to ask this single most important question.We also need to understand the business needs and end-user needs. This requires lots of talking with SMEs and real users as much as possible.In the case of Bay County we were able to identify our problem that was true across all users: Make informed decisions about a parcel/property and its surroundings.

10

TASKS When? Context Who? User What? Action Why? Purpose

When a new resident triesto purchase a house theyneed to first understandthe property and itsneighborhood.

The better we understand the problem the more focused we can define our tasks. We ask When? Who? What? and Why?I recommend formulating the task similar to a user story but starting with When. This adds crucial information about the context and the purpose. We are not so worried about the How at this time yet.

11

By now you are probably wondering what happened to our app. Here it is. We trimmed it down to a Unified Search, a Legend and a Drawer Navigation. Our assumption was that people are used to searching, as the user starts typing we return the results and depending on the type of result clicked we kick the user into the appropriate workflow. In the case of an address the details of the property with option to analyze its surroundings. Sounds familiar?Tugged away in the drawer we have groups of layers with default selections we thought were meaningful and still clean on the map. Let me toggle to satellite view. Sweet.Mobile? Hey, almost for free.

12

Iterate

I know exactly what you are thinking: Lets say we won the Design Challenge and we have great wireframes would that guarantee a good looking app? Lets think about that for a moment.

13

This is the Food Compass for the US Department of Agriculture named Know your Farmer, know your food. It allows the general public and potential applicants to a food program to explore existing programs of the USDA or any of their partners.So what is wrong with this site? I love my job

14

Old VersionVersion 1

So long story short, we did our homework, developed a UX strategy and concept and implemented the new site.Unified SearchCall to actionChoropleth (thematic) mapRemoved logoGot push back on the intro text which also meant that important functionality to select a geography was pushed below the fold.

15

Version 1Version 2

We felt really good about Version 1, we thought it was a great improvement, wouldnt you agree?After roughly a year we had the chance and pleasure to work with USDA again and to improve some of the workflows based on experience they had gained. We also used the opportunity to improve the look, here is Version 2We introduced a side panel on the map and moved layer information from below the fold closer to the map. The legend formerly hidden behind buttons is now prominently displayed.Selecting California will zoom to the state and start showing the actual data.

16

Version 1Version 2

@michaelgaigg

The layer list and legend from the old version became a dashboard-like feature.Which version do you like better? Show hands!Why? Tweet me!We invested lots of time into UX design and wireframes but we struggled to get it done. We tried to fit in. We implemented according to the design guidelines, blue buttons and accordions, gray backgrounds. Iteration 2 allowed us to give it a fresh look and break free. This is absolutely necessary; we could have been happy with Version 1 but kudos to our client for revisiting the app.

17

Innovate

Im excited because this is one of the rare occasion when I can show and you can see an enterprise map application. All the data is mocked sample data. The app uses tabs to tailor to different target audiences and not every user sees every tab. Lets assume Im an internal analyst and I want to see how a catastrophic event affects my portfolio of policies.The legend is key to understanding the data and therefore in the prominent top-left corner. We can visualize the data in different ways, by location, using a heatmap, a hex grid, or by political boundary like state. The metric I'm showing is TIV, total insured value.On the events tab I can add an event like superstorm Sandy. Lets zoom in to where the storm hits landfall and change the display metric to Gross AAL (annual average loss) per county. Now we see a different kind of map, TIV was blue, loss is bad - red.The info window is the primary way for a user to talk with the application so we spent a lot of time making this meaningful. You can draw a lasso and add it as a filter, select from a dropdown what you meant to select when clicking on the map and have contextual action buttons like jumping into the underwriting workflow.19

Map UI Patterns

Another way to make better apps is using UI Patterns20

http://www.designingmapinterfaces.comSolutions to common design problems

Defined as ProblemContextSolution

Language for map app developers

UI Patterns are the closest you can get to Best Practices. They describe solutions to common design problems. On the site designingmapinterfaces.com Im collecting and curating patterns I encounter on a daily basis. UI Patterns give you a common language, how easy is it to say lets use breadcrumbs or how about we add a swipe21

Desert Fog Problem

What problem does this solve?

In multi-scale systems it is increasingly easy to get lost.

Lack of clues to orient oneself.

Desert Fog Problem

Whats the solution?

Provide clear & legible labels.Add landmarks or natural features (rivers, mountains).Add Home Button or Overview Map.

Data-Ink Ratio

Data InkTotal Ink= Data Ink Ratio

What problem does this solve?

Large share of ink (pixels)is used for something notrelevant to the task.

Data-Ink Ratio

Whats the solution?

Increase the data-ink ratio.

Use alternative Basemaps & UI Patterns like Placemarks.

http://www.designingmapinterfaces.comLayouts

Full MapPartial MapReference MapNo Map

Focus on the SubjectMobile

Map is the focus & the core valueFull Map

Map and content equally important & workflow driven

Partial Map

but you typically have a side panel that holds content and allows users to work through tasks.30

For navigation & reference purposes

Reference Map

A reference map can be used for navigation but exists mostly only for reference purposes. It has limited interaction and is auxiliary to the content31

No MapTask doesnt require a map but utilizes power of GIS

Here the example of Community Maps we did some while back and uses Reviewer Server and other GIS technology to check and report the quality of the uploaded data32

Toggle between Full Map and Reference MapFocus on the Subject

Just because you chose one layout type doesnt mean you are stuck. 33

No partial map on mobile!Toggle between reference map & full mapMobile

There is no partial map on mobile for the main reason that the map would have this slippery effect when you try scrolling the page but get stuck panning the map instead.34

Full MapPartial MapReference MapLevel of Detailhighhighlow to mediumLevel of Controlhighmedium to highnone to lowToolsadvancedin workflowsnone/fewInteractionadvancedadvanced oklimitedCartographyvery importantimportantlimit distractions

Layouts Summary

http://www.designingmapinterfaces.com

Flowmap

What problem does this solve?

Data visualization with straight or geodesic lines have visual limitations.

A flowmap illustrates connections between points, for example supply chains or travel patterns.37

Conventional lines can get messy, even though Submarine Cable Map found a really elegant solution by running the lines in parallel.38

The Leaflet Migration Layer has nice animations to show the flow this might work well for flights but you gotta be careful because it can easily look like Los Angeles is nuking the whole country39

https://github.com/sarahbellum/Canvas-Flowmap-Layer

The Canvas Flowmap Layer is a really nice and refreshing alternative. Its recent development by Sarah Bell from our Cartography lab and Jacob Wasilkowski from our dev team. It uses Bezier curves, subtle symbology and a nice animation to show flow. Check out their demo site.40

Flowmap

Whats the solution?

Map connections using directional Bezier curves.Add animation.Label start & end points.

Basemap

What problem does this solve?

Users need a geographical reference in order to understand and relate to the information displayed on top of it.

We all know basemaps, they give users geographical reference.42

But the really interesting lesson for all you vector tile people out there is this story. Billie Leff from our Cartography lab started thinking about colors for a custom basemap for Abu Dhabi. What comes to mind are brownish pastel colors maybe mixed with some greenish color. And thats all fine for larger scales.43

But what we have learned is that people in the middle East perceive cities as cool and refreshing oases that should be represented in blue. Combined with the grayish color palette of the client the basemap at a larger scale looks dramatically different. See how we used graduated colors and how we highlighted highrise buildings in the downtown area with darker blue colors.44

Basemap

Whats the solution?

Use well established cartographic rules.Think in your target audience.Consider the style of operational data on top.

Always apply well established cartographic rulesPut yourself in the shoes of the target audience and consider the operational data that will show up on top of the basemap.45

Total User Experience

I want to leave you with one more thought: Design with the Total Experience in mind46

Wife asks me to plan a hiking trip for the weekendarrived at the trail headhiking happilyleft turn or right turn?back at the car eating remaining snacksdriving home, kids are sleeping, wife is happy checking her facebook

not sure if I should select trail A or B

Wife asks to plan the next trip

For me the total user experience is not only thinking about what happens during the event but also considering the before and after. Picture this scene: Friday night, my family and I are sitting around the table eating dinner, I just started thinking in having some beers and sleeping in when my wife asks to plan a hiking trip over the weekend. So I go online and start searching for trails. I do find some but I dont know which trail is better, trail A or trail B Im getting a little frustrated. Anyway, I pick one, we go, everybody is happy.We have at least 3 moments in here where an application could turn a frowning face into a smiling face: deciding on a trail, navigation, recommendations How could deciding on a trail work? We know from apps like airBnB how important user comments, feedback and pictures are. Could we build this into the app?47

The German company con terra, a part of the Esri Germany group, thinks yes. They recognized that depending on situation the user is in they need different input mechanisms so they developed a suite of apps that utilize a watch to capture points of interest, hands-free if you want. When the user takes a break the cellphone comes in handy to add descriptions and classify the category. Once the user is at home they probably prefer a desktop to preview or replay trails and user feedback. This eco-system of apps let the crowd collect the data that is then used to make decisions on trails. Back in the car my wife uploads photos while sharing them on Facebook and the app automatically recommends new trails. Im really happy now.48

Demo

What do you think Al?49

Please Take Our Survey! Download the Esri Events app and go to DevSummitSelect the session you attendedScroll down to the Feedback sectionComplete Answers, add a Comment, and Select Submit

51