USER EXPERIENCE and INTERFACE DESIGN for MAP APPSMichael Gaigg & Allan Laframboise@michaelgaigg @al_laframboise

March 811, 2016 | Palm Springs, CAEsri Developer Summit

Good morning. This is the session User Experience and Interface Design for Map Apps and I want to thank you all for coming. 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.

1

What is good Design?

Our goal for today is to teach you the principles of good design. I want you to go home and improve your existing application or make better choices on your next project.

2

This is it. This is all you ever wanted to know about design but were afraid to ask. This also serves as lesson number 1 that icons without labels are really difficult to understand. But well get there in a little bit.

3

PROBLEMGOOD UIsolves a

A good UI solves a problem. While this doesnt come as a surprise its all too easy to forget about that when we get into the weeds of requirements and implementation.

4

PROBLEM

At the bottom lies the problem.5

User NeedsBusinessNeedsWhere the %*@ is this meeting room and how do I get there?We must support our employees to save them time and agony.PROBLEM

The problem is based on two needs, the true end user need and/or a business need. The user need is I need to accomplish or solve something and the business need is typically to save or earn money.

Lets look at an example to illustrate this.

The user need is to locate an unknown place on the campus and the business need is to help their employees, well and to save money.

So as a designer, how do we tackle this problem?

6

1. We need a Map

2. Add positioning

3. Search employees

4. Select Bldg/Floor

5. Basemap Gallery

6. Legend

7. Overview Map

8. Measure Tool

9. Add 3D Map

10. Add Swipe Tool

REALLY ??

Im using a software called Balsamiq to sketch out my design ideas. Im thinkingFirst we need a map.Then we add positioning in the form of tabs to enter the start and end point and see the route.We need a search to find employees and dropdowns to select the building and the floor.In that moment the project manager walks into my office. He really enjoys this exercise. So we add a basemap gallery, a legend, and an overview map. Measure tool? Why not.Because the DevSummit is around the corner, it would be really cool to do all of this in 3D and because we dont want to lose the 2D functionality we add a swipe tool.What just happened?

7

We lost focus on our problem. And this comes with a price. Do we really need a laser pointer, flashlight, whistle and cigar cutter?8

So I call up my buddy Allan to ask for his input and he says, dude, why dont you check out some of the new template? While this might sound like a good idea, in our case I dont think that a template would cut it.

9

Have a look at these pictures. What do they have in common?All 3 pictures show people in a very special environment and situation. They are all working on a task and they need a very special tool to be successful.A surgeon has a scalpel, a barber a barber knife and the swiss soldier a, well swiss army knife which at that time at around 1900 still had the essential functions of a blade, can opener, reamer and a screw driver to fix their guns.It is essential to have the right tool at the right moment.

10

TASKPROBLEMinforms

The problem informs the task.11

User(Human)Interface(Device)Context(Situation)TASKPROBLEM

Employee at EsriIn a rush & on the goMost likely mobile

And the task has three key players: the User, the interface and the context.In our example the user is an Esri employee that needs the route immediately and on the go. This means our interface will most likely have to be mobile.12

ARE

WE

THERE

YET?

With this insight on hand lets redesign our routing app. Is it enough to just change the screen resolution? Maybe remove some of the functionality? As you can see the tabs are still there just smaller.13

PositioningStarting pointDestinationTASKS

The short answer is no. Remember the importance of designing for a task? Our app has two main tasks really, positioning and navigation. Positioning itself requires to define a start point and a destination14

PositioningStarting pointDestinationTASKS

NavigationOn the mapTurn by turn

So now Im on my way, I see the route.15

User(Human)Interface(Device)Context(Situation)TASKGOOD UI

responds toreally

The application starts taking on shape. Looking good? Well, really good UI is when the design is responsive. When it responds not only to the interface, but to the whole experience.16

Responsive to UserExpertiseEmotionsPreferences

17

Responsive to InterfaceResolutionInput devicesCapabilities

18

Responsive to ContextEnvironmentSituationState of mind

Context is probably the most overlooked aspect of responsive design but it has high impact on the experience. Take for example the navigation task during daylight.19

Responsive to ContextEnvironmentSituationState of mind

Here is another example that shows how the map becomes more detailed as we get closer to destination that is less known to us.20

TASKGOOD UI

PROBLEM

Good UI solves a problem.The problem informs the task.Good UI responds to the three elements of a task, the user, the interface, and the context.21

GOOD UI

Next Im going to show you three practical examples of good UI. 22

Familiar &EngagingGOOD UIUse platform guidelines & familiar patterns

Follow well established domain conventions & rules

Emotions & Humor

I often hear that the UI should be intuitive and while I do understand what this request means, nobody is born with this innate intuition on how to use an interface. So its better to use patterns that are familiar and follow well established conventions, guidelines and rules.

23

Recently I was asked to look at this site and polish it up, beautify it. I ask you, does this page speak to you, invite you, engage with you in any way? There is not title, tagline, call to action. The icons don't represent a familiar navigation mechanism, icon plus label would already be better. I see 3 different types of searches. And the map is highly overrepresented, not to say meaningless at this point. Fulfilling the request to polish this site would mean sending a broken car to the carwash. This site needs a major overhaul.

24

Poor data-ink ratio

Here you can see title, tagline, clear search options, we chose showing a workflow instead of a menu, and there is a less prominent map. But there are still some problems with the cartography of this map though. Because Alaska and Hawaii are remote states to the continental United States, we end up using lots of space for something that is not relevant to our application. The problem is that we are using to much ink to plot unnecessary data.

25

Precise & accurate, but cartographically incorrect

Zooming in on the map you can see that each state has two senators. If both senators are democratic then the state is blue, if both are republican, the state is red. For the case when a state has both a democratic and a republican senator the author of the map chose to hash the state red/blue. This doesn't only hurt my eyes it also goes against well-established domain conventions. Another problem stems from the choice of basemap which makes the great lakes look gray while the surrounding blue states appear to be the actual waterbody. This violates well established cartographic rules.This map is precise and accurate but cartographically incorrect.

26

So how can we fix all these problems? We moved Alaska and Hawaii closer to the mainland, removed non-US content and modified the cartography. The map became an alternative means of navigation, its suggested affordance to be clicked on helps to engage the user.

27

Familiar &EngagingClear &DigestibleGOOD UIEdit & curate

Organize & structure

Guide users to help them make better decisions

My next example shows you the importance of spending time on your data. For a moment imagine a scene out of an Indiana Jones movie where Indy jumps from a truck full of Egyptian mummies to a stack of boxes with Peruvian tummies, barely holding on to some French or German paintings. This is not what you want for your webpage. You want a museum with select artefacts that are organized and structured and ideally with somebody that guides you through section you are interested in.28

This is the Food Compass for the United States 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).

29

Unified SearchPlacemarksThematic Map

Browse GeographiesHome Button

Familiar &EngagingClear &DigestibleTrustworthy& DelightfulGOOD UIClear intentions lead to higher approval

Satisfy expectations & surprise with simple solutions

Invisible

Your site needs to be trustworthy and delightful, we call that invisible. Every time a user is confused, it adds friction. So the goal is to use clear visuals, simple user flows, and create an interaction system that naturally aligns with the users mental model. The mental model is how the user thinks of the things and not how we store or process them.

31

33

Map UI PatternsSolutions to common design problems

Defined as Problem / Context / Solution

Language for map app developershttp://www.designingmapinterfaces.com/patterns/

PopupWhat problem does it solve?Too much information on the map.Needs user interaction to disclose.

http://www.designingmapinterfaces.com/patterns/info-window

Popup

PopupWhats the solution?Show useful information.Include contextual actions. (e.g. buttons, links)Avoid displaying default column names and meaningless data like IDs or Lat/Long.

Desert Fog ProblemWhat problem does it solve?

In multi-scale systems it is increasingly easy to get lost.Lack of clues to orient oneself.http://www.designingmapinterfaces.com/patterns/desert-fog-problem

Desert Fog ProblemWhats the solution?Provide clear & legible labels.Add landmarks or natural features (rivers, mountains).Add Home Button or Overview Map.

http://www.designingmapinterfaces.com/patterns/overview-map

Layout Patternshttp://www.designingmapinterfaces.com/patterns/topics/layout

Full MapPartial MapReference MapNo Map

Full MapMap is the focus & the core value

Partial MapMap and content equally important & workflow driven

Reference MapFor navigation & reference purposes

No MapTask doesnt require a map but utilizes power of GIS

Toggle between no map & full map

Mobile

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

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

Applying Design Principles in the real Worldhttp://alaframboise.github.io/calcite-maps/extras/index.html

THANK YOU@MichaelGaigg @Al_Laframboise

Please fill out the survey...

50

51