Choosing the right ArcGIS app builder: A UX & UI design perspective, Part 2

September 26, 2023

Jonathan Van Dusen

How do you choose between the ArcGIS app builders and templates based on the type of interface you want to build? How do you know what sort of interface is useful in the first place? It’s helpful to think about the app builders in terms of established UI design patterns, and to place them within a larger UX design process.

Introduction

“Everything is best for something and worst for something else. The trick is knowing what is what, for what, when, for whom, where, and most importantly, why.”

–Bill Buxton, Microsoft Research (source)

When you’re designing and developing an app in the ArcGIS system, there are multiple app builders available that allow you to develop apps without writing any code, including ArcGIS Instant Apps, ArcGIS Dashboards, and ArcGIS Experience Builder, and the soon-to-be-retired ArcGIS Web AppBuilder. These app builders have different areas of focus, but they also provide different options for your app’s user interface (UI). How should you choose between them?

In the previous post in this two-part series, we looked at five design patterns for mapping app UIs, described by Michael Gaigg at Esri Inc. These patterns provide useful ways of thinking about what types of layouts are suitable for the apps you might design. As a quick summary:

Full Map: Useful for showcasing a map or for creating an app where advanced GIS users can perform open-ended analysis.
Partial Map: Suitable for “task-oriented” apps where users need important tools to be immediately accessible and findable. Tools are displayed beside the map (e.g., in a sidebar).
Reference Map and Embedded Map: These present the map alongside graphs, text, or multimedia (such as in a dashboard or story map).
No Map: No map is visible on-screen, but there’s still some connection to a GIS in the background (e.g., to query data or to display graphs or statistics).

I recommend thinking through which pattern you want to use before looking at Esri’s app builders and templates – you can sketch some ideas on paper, show the sketches to some of your users for feedback, and experiment with the app builders to see what gets you closest to the design that works best.

As well, if you’re unfamiliar with the different app builders and their capabilities, I’d recommend reading this great blog post from Esri with advice on choosing an ArcGIS app builder.

In this post, we’re going to look at Esri’s app builders in terms of the different types of interfaces that they allow you to build, thinking about how to apply the design patterns above. While most of the app builders and templates allow you to build apps using any of these design patterns, they each provide different levels of customization for implementing them.

ArcGIS Instant Apps

This is the first place I would look when creating a new app. Instant Apps are app templates that have been designed by Esri for specific use cases (e.g., Portfolio, Interactive Legend, and Nearby) or as simple ways of sharing Web maps (e.g., Basic, 3D Viewer, and Sidebar).

Most Instant App templates use a Full Map or Partial Map design pattern, depending on their intended use case. For example, the Basic template uses a Full Map pattern to showcase the map itself. Widgets do not need to be used often and so are available via buttons at the corners of the map. By contrast, the Nearby template uses a Partial Map pattern to keep the tools for searching for closest facilities always visible alongside the map.

The Instant Apps landing page displays thumbnails of each template and walks you through some questions to find one that meets your needs:

Screenshot of the Instant Apps landing page, showing guided questions on the left and thumbnails of each template on the right

The Instant Apps landing page, with guided questions for selecting an app template

Most of the Instant App templates are designed for a single purpose, but one major exception is the Sidebar template, perhaps one of the best-kept secrets in the entire ArcGIS system. It uses the Partial Map design pattern and has a collection of widgets that you can choose to include in a prominent side panel, such as Legend, Editing, and Pop-ups. If you’re developing an app where several tools like these need to be immediately accessible to the user without covering the map, and where only one tool is needed at a time, I highly recommend checking out the Sidebar template before using any of Esri’s other app builders or templates.

Screenshot of a Sidebar Instant App, with an informational sidebar on the left-hand side and the Web map filling the rest of the window

An example of a Sidebar Instant App with the “Pop-up” widget currently active, displaying attribute information for the currently selected map features (Source: Esri)

ArcGIS Dashboards

The primary use case of Dashboards is data-driven information displays, but it can also be used to create a basic app with a custom layout when the functionality or customizability of Experience Builder isn’t needed.

Dashboards uses a Full Map pattern by default, with only a title bar and a map widget. Adding functional elements to the sides, such as a map legend or a Survey123 form, or using Dashboards’ built-in sidebar component (with text boxes and data filters), can change it to the Partial Map pattern. Adding informational elements that the map helps to interpret, such as graphs, indicators, or lists, can change it to the Reference Map pattern. This is perhaps the most common design pattern with dashboards, as in the example of the Johns Hopkins COVID-19 Map.

Screenshot of an ArcGIS Dashboard showing a Web map with point locations for different types of sounds in a national park

Example of an ArcGIS Dashboard that uses the Partial Map design pattern: the built-in sidebar component on the left contains explanatory text and data filters, and the list and indicator elements on the right provide further information about the map data. (Source: Sequoia & Kings Canyon National Parks)

While designing your dashboard, when you insert and resize elements, each element takes up a given percentage of the dashboard’s total height and width – so if the whole dashboard is resized to a smaller size, scrollbars might be added to some of the elements. ArcGIS Experience Builder, described in the next section, allows you to set absolute heights and widths in pixels, or automatic heights and widths based on the widgets’ content, so it may be a better option if you need more layout flexibility.

Finally, you can organize dashboard elements into tabs by stacking them (and optionally grouping them together first). This is useful if you want to include elements that are of secondary importance and do not need to be part of the dashboard’s main layout, or if you want to create a dashboard with multiple “pages”.

ArcGIS Experience Builder

If you’re familiar with Web AppBuilder, you can think of Experience Builder as essentially the next generation of Web AppBuilder. In addition to creating map-centric apps, it allows you to create more open-ended apps and websites. Experience Builder also gives you the flexibility to drag and drop the components of your app anywhere you want, instead of having to work from fixed themes like with Web AppBuilder.

In general, I would recommend using Experience Builder instead of Web AppBuilder because of its flexibility but also because Web AppBuilder is being retired between 2024 and 2025. Web AppBuilder is based on an older branch of Esri’s JavaScript technology (the ArcGIS API for JavaScript 3.x), whereas Experience Builder uses the latest branch (the ArcGIS Maps SDK for JavaScript 4.x), and thus offers faster rendering and full compatibility with the new ArcGIS Online Map Viewer. While Experience Builder does not yet have all of the widgets available in Web AppBuilder, this is improving with each release (see roadmap).

When you open Experience Builder, you can choose to start with a blank app layout or use one of the many layout templates:

Screenshot of the ArcGIS Experience Builder start screen, with a grid of thumbnails showing some of the different app layout templates

ArcGIS Experience Builder start screen, displaying the templates available

You can use the filters at the top of this page to narrow down the templates based on whether you need to build a Web AppBuilder–style app, another sort of map-centric app, or a non-map-centric app or website. The thumbnails and descriptions will give you a sense of which design pattern each template follows.

Experience Builder makes it easy to implement the Partial Map or Reference Map design patterns, since you can insert widgets anywhere in the app and make them any size. For example, you might choose to integrate text boxes, a map legend, or a directions widget directly into your app layout so they are always accessible. It also offers handy layout elements for this, such as Fixed Panel, Row, Column, and Grid, as well as a Sidebar that you can customize. For the sidebar, you can set whether this should be open or closed by default (I recommend open) and whether the user should be able to hide or resize it. You can also combine multiple widgets inside the sidebar, which works well when there are multiple tools that users need to use as part of the same workflow. This is a contrast to Web AppBuilder, where sidebars could only show one widget at a time.

Experience Builder also includes Section and Views Navigation widgets, which allow you to create tabbed sections of your app. You can even use these to create a tabbed sidebar, where each tab contains a different widget or group of widgets.

Screenshot of an ArcGIS Experience Builder app with a sidebar on the left providing information about the Web map and other tools

An example of an ArcGIS Experience Builder app with a custom, tabbed sidebar

For more examples and guidance on designing user interfaces for ArcGIS Experience Builder, stay tuned for an upcoming tutorial on our Esri Canada Higher Education Resource Finder.

ArcGIS Web AppBuilder

Web AppBuilder might be the option you’re most familiar with for developing no-code/low-code ArcGIS Web apps. However, I would only recommend using Web AppBuilder if there is functionality not yet present in Experience Builder that you urgently need.

Since Web AppBuilder’s layout options are more limited than Experience Builder’s, it is especially important to be mindful of which options you choose, in order to make your app’s functionality easily findable and usable. For more information, please see the documentation for Web AppBuilder’s layout “themes” – the thumbnail images on this page indicate which design pattern each theme follows.

Final Thoughts

In this post, we looked at some of the user-interface options available with Instant Apps, Dashboards, Experience Builder, and Web AppBuilder based on the design patterns and guiding questions from Part 1 of this two-part series. When you’re deciding which app builder to use, part of it will depend on the different types of functionality they offer, but part of it will also depend on how much design flexibility you need and the design required.

While building an app, it’s tempting to jump in and immediately start adding all the functionality you want, but this does not necessarily lead to a good user experience. It is important to spend some time beforehand thinking about what types of workflows your app needs to accommodate, how the users’ interactions with the app will be sequenced, and what the most efficient ways are for your users to discover and access the functionality they need.

If you’re interested in learning more about UX and UI design principles, and how these relate to mapping applications, check out the User-Interface Design Learning Path on our Higher Education Resource Finder, with more resources to be added this year. We’re also planning to publish more blog posts on optimizing your apps for greater usability.

Until then, happy designing!