GIS and UI/UX Design — Improving the Experience of Cartographic Products

When it comes to experience when presenting a map, whether as a web map, an app, dashboard, or even a GIS software interface, the user comes across a variety of data and information that has to be processed by their mind in a quick and easy way.

How does UX/UI Design fit into all of this? Let’s start from the basis of defining a good user experience. According to Don Norman, “User experience” encompasses all aspects of the end-users interaction with the company, its services, and its products. Applied this concept to our field of interest, cartographic products become tools that show an integration of the product where aspects of the brand, design, function, usability, and accessibility are included.

As defined by Don Norman, UX Design encompasses all aspects of the end user’s interaction with the company, its services, and its products.

Let’s dig a little deeper into this topic…

GIS & UX — The buffer of two worlds

What makes a product generate a positive impact and produce greater user satisfaction? It is a question that all UX designers constantly have in our minds and, however, to reach a satisfactory answer, requires the application of different methodologies and processes that include different aspects of UX Design. It seems easy, right? No, it is not. To answer this question, it is necessary to resort to different methodologies of the design process (such as Design Thinking) and carry out various stages of development such as initial research, a stage of ideation, definition, prototyping, and testing with users. , among others. In short, all those aspects make for a good user experience.

But, back to our main topic: GIS and UX. When talking about maps, do users understand our maps? Are they satisfied with what they see? Is there a clear message in its content? Is its interface friendly and intuitive?

From the UX point of view, the maps and the way we present them (regardless of their format), respond to a design strategy that should include at least the following aspects:

• Vision: having a vision of the product will mark our initial path and will lead us (the entire team) to the same horizon, making our objectives clear. In short, it will define the essence of our business value and must reflect the clear message of the brand that we want to convey to our customers.
• User needs: here applies the famous phrase of one of the best brilliant minds of recent times:

“If I had an hour to solve a problem and my life depended on the solution, I would spend the first 55 minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes.”

Albert Einstein

Defining the user’s needs is a great starting point to better understand the problem we are facing before generating possible solutions in an “arbitrary” way. It helps us to clarify who our particular person is, what their needs are, and why they are so important to them. This gives us the green light to have a clear vision of the problem and metrically measure the success of our solutions throughout our design process.

• Business needs: Just as it is important to have a vision of the product, it is no less so that of the business. At the end of the day, ensuring that users have a positive experience of the product will make them feel identified with the brand and will be able to recommend it and share it with other potential users. Hence the importance of defining the essence and value of the business and that, in addition, helps to reflect a clear and convincing message to our clients.
• Technology: considering the needs of the user as well as those of the business, the adoption of technology according to the demand is a fundamental point. Think about who the users of your map are and what information they expect to receive from them. Do they need to visualize data on a web map? Or, will they check how to get to a place on their cell phone or, perhaps, on a Tablet? What is clear is that whatever the goal of our spatial product, it must reach all devices and be cross-platform, responsive and flexible.

All these aspects can be applied to our web maps, apps, dashboards and other GIS applications. Think of an app that has a spatial component, for example, Google Maps. If we look at its interface on the different devices, we see that it is not the same information that is shown on the app, the web or the Tablet. Each one of them responds to the different needs that the user has and what they expect to see on their device according to the context in which they are using it.

Figure 1. Google Maps application adapted to different devices.

Once again, our important point here is to understand who our users are, what their real needs are, what their motivations are, and how they can process the information offered by a map in a clear and consistent way. This brings us to the next big point of creating a great user experience: User Interface or better known as UI. And here’s a clarification: both the user experience and the way we visually represent the maps are equally important because…. What’s the point of having a nice graphical interface if the user cannot understand the data they are seeing? Or, why have the best data in the world if we are not capable of transmitting it in a clear and consistent way?

The geographic UI. Applying design to our maps

When we talk about Interface Design (or User Interface, UI) we refer both to the different elements that are part of the design of a product (typography, color, icons, images, etc.), as well as the devices where they can be displayed ( computer, tablets, smartphones, etc), which will define the type of interaction and communication that will be established between the user and our brand.

The maps are mainly composed of the following elements:

• A basemap (of course!), which makes our “geographic canvas”
• Navigation bar.
• A navigation panel(s), where you can see the different layers that are represented on a map as well as a data panel (dashboards) that are usually interactive with each other.
• Zoom In/Zoom Out buttons, allow us to scale our base map.
• Search button, to direct us to the place we want to explore ( it can be optional since many times we can get the same result by sliding with the mouse, pad or even tapping on a touch screen).

Figure 2. Covid-19 Tracker web map. Source: Urban Footprint, 2021. https://covid-19.urbanfootprint.com/

It is worth mentioning that, depending on the device in which we are using our geographic service, the elements that make up our interface may vary, prioritizing the type of information to be displayed. Here will come into play we want to show and we are going to do it.

In this sense, a web map or a GIS app will have icons, elements, components, styles, colors, fonts that will respond to different style guides, principles and patterns that in turn will also respond to the brand identity. Let’s look at an example…

Figure 3. Calcite Web. Design Model System developed by Esri. Source: https://esri.github.io/calcite-web/

Without promoting Esri, the company has developed its own web framework, Calcite Bootstrap, with the purpose of creating a design system that contains UI elements, typography, styles, the color model (the choice of color in a map is important since, according to the contrast between its colors, it will be more or less accessible to all people) and user interactions. It has a design grid, based on Boostrap, that adapts to different devices and allows layout of web pages, being able to use grid or flexbox to build the structure and distribution of web maps.

This example leads us to talk about another concept of UI Design: Design System or Design System. Design Systems are tools that consist of a set of reusable patterns and components that are guided by specific standards or norms, helping companies, mainly, to strengthen the product brand (since it provides consistency) and creating better user experiences.

If we return to the example of Google Maps mentioned at the beginning of the article, the Design System used for each device helps to give consistency to the product since each component or element of it is governed by a pre-established pattern, allowing effective brand communication. and, that, in turn, this coincides with the perception and representation that the user has in his mind of our product. Ultimately, you will know how to distinguish the different components of our maps regardless of the device you are viewing it on.

Geographic interaction: when maps are not just maps

• They can zoom in for more details
• Search for locations anywhere in the world they want
• Apply filters and perform different types of queries
• Interact with data, change colors
• Turn layers on and off to view information of interest

Lastly, I don’t want to leave out the importance of interactions on maps. When it comes to user experience, interactive maps generate different experiences giving the user the possibility to explore them in their own way, offering several options:

Figure 4. ArcGIS Online Interactive Map. Source: Esri.

Let’s take a look at the following example of a web map:

In this example, we see how the user can explore the map according to their needs. S/he can zoom, and consult a certain point which will return a drop-down panel with information, filter colors, and layers, among others.

In this way, map interactions become a good way to engage our product with the user, improving their experience by giving them different possibilities that allow them to be the protagonist of our map.

Conclusions

Although the design may not seem (or is not consciously perceived) and, above all, user experience design, it is present in any area of ​​our lives. In the case of Geographic Information Systems, applying the concepts of UX/UI Design to our maps opens up a world of possibilities to be able to represent them in a creative, interactive way that, in turn, responds to the needs of our users. By creating functional, informative, and accessible maps, we not only manage to improve the experience that our users have with our product but also know how to communicate them in an effective and attractive way makes us strengthen our brand, generating a commitment between our client and our business.

Originally published at https://medium.com on January 25, 2022.