See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/317660257

User Interface and User Experience (UI/UX) Design

Article · January 2017

CITATIONS READS

0 5,362

1 author:

Robert E. Roth
University of Wisconsin–Madison
73 PUBLICATIONS   906 CITATIONS   

SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Web Mapping Curriculum View project

ICA Interactive Cartography Research Agenda View project

All content following this page was uploaded by Robert E. Roth on 17 November 2017.

The user has requested enhancement of the downloaded file.

Cite as: Roth, R. E. (2017). User Interface and User Experience (UI/UX) Design. The Geographic
Information Science & Technology Body of Knowledge (2nd Quarter 2017 Edition), John P. Wilson
(ed.). doi: 10.22224/gistbok/2017.2.5.

Abstract
Advances in personal computing and information technologies have fundamentally transformed how
maps are produced and consumed, as many maps today are highly interactive and delivered online or
through mobile devices. Accordingly, we need to consider interaction as a fundamental complement to
representation in cartography and visualization. UI (user interface) / UX (user experience) describes a set
of concepts, guidelines, and workflows for critically thinking about the design and use of an interactive
product, map-based or otherwise. This entry introduces core concepts from UI/UX design important to
cartography and visualization, focusing on issues related to visual design. First, a fundamental distinction
is made between the use of an interface as a tool and the broader experience of an interaction, a
distinction that separates UI design and UX design. Norman’s stages of interaction framework then is
summarized as a guiding model for understanding the user experience with interactive maps, noting how
different UX design solutions can be applied to breakdowns at different stages of the interaction. Finally,
three dimensions of UI design are described: the fundamental interaction operators that form the basic
building blocks of an interface, interface styles that implement these operator primitives, and
recommendations for visual design of an interface.

Definitions
 affordance: a signal to the user about how to interact with the interface
 feedback: a signal to the user about what happened as a result of the interaction
 interaction: the two-way question-answer or request-result dialogue between a human user and a
digital object mediated through a computing device
 interaction primitive: the fundamental components of interaction that can be combined to form
an interaction strategy
 interaction operator: a generic function implemented in an interactive tool that enables the user
to manipulate the display
 interface: a tool enabling a user to manipulate a digital object
 interface complexity: the total number of unique representations that can be created through the
interface (scope multiplied by freedom)
 interface flexibility: ability to complete the same objective with an interface through different
interaction strategies
 interface freedom: the precision by which each operator can be executed
 interface scope: the baseline number of operators implemented in an interactive tool
 interface style/mode: the manner by which user input is submitted to perform the operator
  user experience (UX) design: iterative set of decisions leading to a successful outcome with an
interactive tool, as well as a productive and satisfying process while arriving at this outcome
 user interface (UI) design: the iterative set of decisions leading to a successful implementation of
an interactive tool

Description
1. Introducing UI/UX

1.1 The User Interface versus the User Experience

Advances in personal computing and information technologies have fundamentally transformed how
maps are produced and consumed, as many maps today are highly interactive and delivered online or
through mobile devices. UI (user interface) / UX (user experience) describes a set of concepts, guidelines,
and workflows for critically thinking about the design and use of an interactive product (Garrett, 2010),
map or otherwise. UI/UX is a growing profession in the geospatial industry and broader technology sector
(Haklay, 2010), with UI/UX designers needed to engage with stakeholders and target users throughout
large software engineering and web design projects (see Additional Resources). This entry reviews the
conceptual principles behind UI/UX, emphasizing visual design following other entries in the
Cartography & Visualization section and complementing the technologically-oriented User Interfaces
entry spanning GIScience in the Programming & Development section.

UI and UX are not the same, separated in their focus on interfaces versus interactions. An interface is a
tool, and for digital mapping this tool enables the user to manipulate maps and their underlying
geographic information. An interaction is broader than the interface, describing the two-way question-
answer or request-result dialogue between a human user and a digital object mediated through a
computing device (Roth, 2012). Therefore, an interaction is both contingent—as the response is based on
the request, creating loops of interactivity—and empowering—giving the user agency in the mapping
process with changes contingent on his or her interests and needs (Sundar et al. 2014).

Therefore, humans use interfaces, but they experience interactions, and it is the experience that
determines the success of an interactive product (Norman, 1988). UI design describes the iterative set of
decisions leading to a successful implementation of an interactive tool while UX design describes the
iterative set of decisions leading to a successful outcome with the interactive, as well as a productive and
satisfying process while arriving at this outcome. Accordingly, UI/UX often is reversed as UX/UI to
emphasize the importance of designing the overall experience rather than just the interface.

1.2 Scholarly Influences on UI/UX Design in Cartography and Visualization

Within GIScience, interaction most commonly is treated by the research thrust of geographic visualization
(see Geovisualization). Interactivity supports visual thinking, enabling users to externalize their
reasoning by requesting a wide range of unique map representations (DiBiase, 1990), thus overcoming the
limitations of any single map design. Geovisualization encourages this interactive reasoning for the
purpose of exploration rather than communication (see Cartography & Science), with the goal of
generating new hypotheses and spontaneous insights about unknown geographic phenomena and
processes (MacEachren & Ganter, 1990; MacEachren, 1994). As a result, much of the early research on
interaction in cartography and visualization is specific to scientific discovery, considering expert
specialists as the target user groups.
Today, UI/UX design requires consideration of use cases beyond exploratory geovisualization and users
beyond expert researchers. Interaction allows users to view multiple (sometimes all) locations and map
scales as well as customize the representation to their interests and needs. Interaction also empowers users
in the cartographic design process, improving accessibility to geographic information and dissolving
traditional boundaries between mapmaker and map user (see Cartography & Power). Increasingly,
interaction enables geographic analysis, linking computing to cognition in order to scale the human mind
to the complexity of the mapped phenomenon or process (see Geovisual Analytics). Accordingly,
interaction has been suggested as a fundamental complement to representation in cartography, together
organizing contemporary cartographic scholarship and practice (Roth, 2013a; Figure 1). For discussion of
additional influences on UI/UX design in cartography and visualization, see Geocollaboration, Usability
Engineering, and Web Mapping.

Figure 1. Cartography traditionally has been divided by topics on mapmaking (see the Map Design Fundamentals topics)
versus map use (see Map Use). Advances in digital mapping technology require consideration of a second distinction:
representation versus interaction (separated in the Body of Knowledge under Map Design Techniques versus Interactive
Design Techniques). Research and design now draws from a blending of both dimensions. (adapted with permission from Roth,
2013a)

2. Designing the User Experience

2.1 Stages of Interaction

An interaction requires the user to employ perceptual, motor, and cognitive abilities as they view,
manipulate, and interpret an interactive map. Norman (1988) offers a useful framework for
conceptualizing a map interaction as a two-way dialogue or conversation, decomposing a single
interaction exchange into seven discrete and observable stages:
 1. Forming the goal: The goal is what the user is trying to achieve with the interface and therefore
represents the user’s motivation for using the interface (a need, interest, curiosity, etc.). Goals are
described as “high-level” tasks, and may include exploration, analysis, synthesis, and presentation
(see Geovisualization).

2. Forming the intention: The intention is the specific map reading objective that the user completes
in support of the goal. Accordingly, intentions are described as “low-level” tasks. Intentions
include identification of a map feature, comparison of two map features, ranking of a set of map
features, etc. Therefore, an intention yields a specific geographic insight, such as detection of a
difference, change, outlier, anomaly, correlation, trend, cluster, or spike.

3. Specifying an action: The user then must translate their intention to the functions (described
below as operators) implemented in the interface. The interface needs strong affordances―or
signals to the user about how to interact with the interface―for the user to specify which operator
best supports the intention before executing the action.

4. Executing an action: The user then must execute the specified action using input computing
devices, such as a pointing device (e.g., mouse, touchscreen), keying device (e.g., keyboard,
keypad), or other mode (e.g., gesture or speech recognition). Once the action is executed, the
computing device processes the request and, if successful, returns a new map representation to the
user.

5. Perceiving the system state: Once returned, the user then views the new representation. Here,
strong feedback―or signals to the user about what happened as a result of the interaction―is
needed to clarify how the map changed after the request. It is through this provision of feedback
that the map participates in the two-way interaction dialogue.

6. Interpreting the system state: After perceiving the change to the map representation through
feedback, the user then must make sense of the update. One way to describe this stage is
completion of the intention: once a new map is returned, it can be used to carry out the user’s
low-level task and, if successful, generate a new geographic insight.

7. Evaluating the outcome: The evaluation compares the insight with the expected result to
determine if the goal has been achieved. This includes critical evaluation of the insight ("does this
seem right?") and meta-evaluation of the overarching goal ("do I have my answer?"). Following
this evaluation, the user may revise their goal and initialize a new interaction exchange, restarting
the seven stage sequence.

Norman described breakdowns between the user and the map (Stages #1-4) as the “gulf of execution”, or
the mismatch between user tasks and supported operators, and breakdowns between the map and the user
as the “gulf of evaluation”, or the mismatch between the result of the operator and the user’s expected
result. Table 1 works through Norman’s seven stages of interaction and lists UX design solutions
available when a breakdown at a given stage is observed (adapted from Roth, 2013a).
Table 1. Norman (1988) reduced an interaction into seven discrete, observable stages. An observed breakdown at a given stage
suggests a specific set of UX solutions. (adapted from Roth, 2013a)
Stage Ex.1: Analog Door Ex.2: Digital Map Observe a Breakdown? Some UX Solutions?
Forming the “I want to get out of “I want to explore The user’s goal is not • Complete a needs assessment to
define user goals.
Goal here.” long-term patterns in supported by the interactive • Implement strategies to improve
tornado activity.” (Type I error), or the user does user expertise and motivation.
not think that the interactive
supports his or her goal (Type
II error).
Forming the “I will identify the “I will start by The user cannot complete one • Develop use case scenarios based
on low-level tasks.
Intention door I will use to determining if the or several low-level tasks or • Evaluate the interactive using
leave.” frequency of relies on map reading alone to benchmark tasks.
tornadoes has complete low-level tasks
changed since the without interacting.
1950s.”
Specifying “I will use the door “I will use the The user does not understand • Improve visual affordances.
• Implement startup and tooltip
an Action handle to open the sequencing controls how the provided interface help.
door.” to advance the functionality supports their • Configure the map with a smart
timeline by decade goals and intentions. default to show how the UI and
from the 1950s to map relate.
present.”
Executing “I pull the door "I use the mouse to The user does not understand • Improve flexibility to support
multiple input devices.
the Action handle.” move the slider how to submit information to • Reduce point mileage and
widget from the interface through the input workload to avoid errors.
beginning to end.” devices or incorrectly used the • Use accelerators to speed
input devices. interaction.
• Use visual metaphors drawn from
real-world interactions.
Perceiving “I feel that the door “I see that the map The user does not notice how • Improve visual feedback through
highlighting.
the System did not open.” now has more tornado the map changed due to the • Provide summary information to
State tracks on it.” interaction. compare before and after
interacting.
• Use breadcrumbs to remind the
user how they interacted.
Interpreting “I think this means “I think this means The user does not understand • Combine visualization with
statistical computation to
the System that I need to push there are more what the change in the map highlight significant insights (see
State the handle instead tornadoes today than means. Geovisual Analytics).
of pull it.” there were in the
1950s.”
Evaluating “This is a stupid “I now will modify The user does not receive • Provide visual provenance to
track interactions across
the Outcome door, but at least I my goal from a broad information from the exchanges.
know how to get out exploration of long- interaction that helped them • Support enabling operators (e.g.,
now. Good thing term patterns across achieve their goal. save, annotate, export) to collect
there wasn't a fire!” tornado activity to insights during interaction.
• Support collaboration to share
analysis of specific insights.
causes of the
increase.”

2.2 Additional UX Frameworks

A number of disciplines, professions, and knowledge areas contribute to UI/UX design, including
ergonomics, graphic design, human-computer interaction, information visualization, psychology, usability
engineering, and web design. Additional frameworks for understanding UX design have been offered as
UX becomes formalized conceptually and professionally (see Roth, 2013a, for a review). For instance,
Fitts’ (1954) law providing an early understanding of pointing interactions was based on psychology
studies about human bodily movement, Further, Foley et al.’s (1990; 2014) three design levels (the
conceptual, operational, and implementational levels, as discussed for mapping by Howard &
MacEachren, 1996) were derived from research on human-computer interaction while Garrett’s (2010)
five planes of design (the surface, skeleton, structure, scope, and strategy planes, as discussed for
mapping by Tsou, 2011) are offered from web design experience. Finally, most recommendations
describe UI/UX as a design process that includes multiple, user-centered evaluations, making use of
methods and measures established in Usability Engineering (see Usability Engineering).

3. Designing the User Interface

3.1 Interaction Operators

As with representation design and the visual variables (see Symbolization & the Visual Variables), an
interaction can be deconstructed into its basic building blocks (Figure 2). Interaction primitives describe
the fundamental components of interaction that can be combined to form an interaction strategy (Roth,
2012). Scholars in cartography (e.g., Cartwright et al., 2001) and related fields (e.g., Thomas & Cook,
2005) identify development of a taxonomy of interaction primitives as the most pressing need for the
understanding of interaction, as such a taxonomy articulates the complete solution space for UI/UX
design. Accordingly, there are now a range of taxonomies offered in the UI/UX literature, including
taxonomies specific to cartography and visualization (e.g., Dykes, 1997; MacEachren et al., 1999;
Crampton, 2002; Andrienko et al., 2003; Edsall et al., 2008).

Figure 2. Every interactive map can be deconstructed to its basic interaction primitives. Here, Google Maps is annotated
according to the supported interaction operators, with each click, tap, etc., related to its functional purpose. (image captured and
annotated from http://maps.google.com; February 2017)
Table 2. UI design relies upon interaction operator primitives. UI design recommendations specific to cartography and
visualization are beginning to emerge for each operator. (adapted from Roth, 2013b)
Operator Definition Interactive Map Example Some UI Design Recommendations?
Reexpress Set or change the displayed map “Reexpress from a choropleth map • Reexpress to a proportional symbol map type on web maps to
representation without changing the to a proportional symbol map.” overcome issues with normalization and Web Mercator.
information. • Reexpress cartograms as choropleth maps to support
identification tasks.
• Reexpress temporal sequences when interested in linear and
cyclical time.
• Reexpress between maps and non-map representations to
reveal anomalies present in different visual structures.
Sequence Generate and advance through an “Sequence by decade from 1950 to • Constrain the binning unit to intervals in space, time, or
ordered set of related maps, each present.” attributes that make sense for the use case scenario.
with different information. • Sequence all animations (temporal or otherwise) to give users
controls over the playback.
Overlay Change the feature types included in “Overlay bike lanes atop the map.” • Overlay only a small subset of context layers for general users
the map for additional context. (Also underlay: “Turn on the to avoid meaningless overplotting.
imagery basemap beneath the • Overlay custom layers (via import) for expert users to support
linework.”) association tasks (e.g., correlations, cause-effect relationships).
• Overlay visual benchmarks providing summary context (e.g.,
average, max-min) to support comparison and ranking tasks.
Resymbolize Set or change the design parameters “Resymbolize the choropleth map • Constrain resymbolization for general users to avoid
of a map without changing the map from five classes/colors to an misleading representations.
type. unclassed color ramp.” • Resymbolize all design parameters for expert users to manage
visual hierarchy while interacting.
• Resymbolize class breaks to support ranking and delineation
(e.g., clusters, spikes) tasks.
• Resymbolize through direct manipulation of the legend.
• Dynamically update the legend when resymbolizing.
Zoom Change the map scale. “Zoom from a city overview into a • Increase the level of detail in the map when zooming into the
local neighborhood.” map (i.e., “semantic” zoom).
• Consider conventional tileset zoom level map scales when
generalizing linework for mapping on the web.
• Zoom only to a subset of relevant map scales appropriate for
the level of detail of the linework.
• Include a widget to zoom out to the smallest/default map
scale.
• Support flexibility given the ubiquity of zooming on slippy
web maps (e.g., double-click, mousewheel, pinch-and-zoom,
zoom slider)
Pan Change the geographic center of the “Pan the map from the origin to the • Limit the mouse/pointer mileage needed to pan between map
map. destination of the route.” features for the goal of presentation and general users.
• Support flexibility given the ubiquity of panning on slippy web
maps (e.g., click-and-drag, direction keys, grab-and-drag)
Reproject Set or change the map projection “Reproject to show north as up on • Reproject when panning and zooming if not computationally
(beyond map scale and centering) the map.” restrictive.
• Rotate away from north-up for egocentric mobile applications
supporting navigation.
Filter Remove/highlight map features “Filter the map to show top-rated • Support filtering over searching for the goal of exploration and
within a feature type that do not restaurants only.” expert users.
meet one or a set of user-defined • Use slider widget to filter by numerical facets and
conditions. checkboxes/radio buttons to filter by categorical facets.
• Filter to complete complex ranking and delineation tasks.
• Require the user to click a “submit” button for complex
filtering taking longer than 100 milliseconds to avoid
perceived lags in interaction.
Search Add/highlight a map feature of “Search for the destination by • Support searching over filtering for the goal of presentation
interest. address.” and general users.
• Search to complete simple identification tasks.
• Support spatial search by the user’s location on mobile
devices.
Retrieve Request details on demand about a “Retrieve details about the State of • Retrieve details to complete simple identification tasks.
map feature of interest. Wisconsin.” • Layout the UI controls so that detail retrieval occurs after other
interactions that reduce the candidate map features to a subset
of interest (following Shneiderman’s mantra).
• Move from an information window that activates atop the map
to a docked information panel as the f information complexity
about the map features increases.
Arrange Manipulate the layout of maps, “Rearrange the legend atop the map • Constrain arrangement for the goal of presentation and general
coordinated views, and map to interpret the symbol.” users to avoid misleading representations.
elements. • Separate coordinated views into dialog windows for mobile.
Calculate Derive new information about a map “Calculate the distance to the next • Use persistent interfaces over nested interfaces when
feature of interest. city.” supporting complex calculations.
• Make visual as many components of calculations and models
through the interface.
Interaction primitive taxonomies differ by the stages of interaction they include. While UX design
considers primitives at all stages, UI design primarily focuses upon interaction operator primitives (Stage
#3: Specifying the Action), or the generic functions implemented in the interactive that enable the user to
manipulate the display. Operators include panning, zooming, and detail retrieval—functions common to
“slippy” web maps using tilesets (see Web Mapping)–as well as reexpression to different visual
overviews, overlay of context information, and filtering across multiple facets of the mapped dataset–
functions essential to Shneiderman’s (1996) information seeking mantra in big data visualizations (see
Big Data Visualization). Table 2 describes common operator primitives in cartography and visualization,
synthesizing UI/UX recommendations (adapted from Roth, 2013b).

Not all maps need to be interactive, and not all interactive maps require the same UI design. Interface
scope describes the baseline number of operators implemented in an interactive product (e.g., just panning
and zooming versus panning and zooming plus searching, filtering), while interface freedom describes
the precision by which each operator can be executed (e.g., zooming any map scale versus only ~20 pre-
processed scales). Together, scope and freedom determine the interface complexity, or the total number
of unique representations that can be created through the interface. Much like managing information
complexity in cartographic design (see Generalization), managing interface complexity is essential for
good UI/UX design. The appropriate balance of flexibility versus constraint in the UI/UX design
ultimately should be determined through user input and evaluation (see Usability Engineering).

3.2 Interface Styles

An operator is implemented in one of several interface styles, also called modes, or the manner by which
user input is submitted to perform the operator (Shneiderman & Plaisant, 2010 as discussed for mapping
by Howard & MacEachren, 1996). The same operator can be implemented multiple times through
different interface styles, allowing users to complete the same objective with an interface through
different interaction strategies, a design concept described as interface flexibility. In graphic user
interfaces (i.e., GUIs), the interface style is the widget, menu, or form that triggers an event when input is
received; the operator is the business logic that is executed after the event is handled.

Interface styles are defined by their level of directness in submitting input (Figure 3). Fully direct
manipulation enables probing, dragging, and other adjustments to graphic elements of the UI. For
cartography and visualization, direct manipulation can be applied to individual map features (common for
detail retrieval), the entire map (common for panning, zooming, and reprojection), map elements like a
legend (common for filtering and resymbolizing), a linked information graphic or visualization (common
for reexpression of overviews, filtering, and detail retrieval in a coordinated visualization), or simply a
custom widget such as buttons or slider bars (common for filtering, toggling overlays, and sequencing
through a map series or animation) (Roth, 2013a).

Less direct interface styles include menus, or the selection of one or more items from a list (common for
filtering), and forms, or the keying of characters into a blank textbox (common for searching). The move
towards mobile-first or post-WIMP (Windows, Icons, Menus, and Pointers) design in cartography has
substantially changed how direct interface styles are designed in order to support imprecise (finger-based)
touch interactions (see Mobile Mapping & Responsive Design). Command language and natural
language styles are indirect and non-graphic styles for implementing operators. Shneiderman & Plaisant
(2010) provide a comprehensive summary of the relative advantages and disadvantages of interface styles
for UI design.
Figure 3. Every interaction operator can be implementing using one of many interface styles or modes. For example: (a) detail
retrieval through direct manipulation of a map feature, (b) panning through direct manipulation of the entire map, (c) filtering
through direction manipulation of the map legend, (d) coordinated detail retrieval through direct manipulation of a linked
isomorph, (e) sequencing through direct manipulation of a slider interface widget, (f) filtering by indirect menu selection, (g)
annotating metadata through indirect form fill-in, (h) reexpression of a new map through indirect command line, and (i) detail
retrieval through natural language and gesture recognition, Additional details about the depicting interactive maps and
visualizations are included in Roth (2013a). (reproduced from Roth, 2013a, p88)

3.3 Visual Interface Design

As with paper or static cartographic design (see Aesthetics and Design), the visual look and feel of the
UI design is “more than just icing on the cake”: it sets the tone for the entire user experience, from setting
the mood and evoking an appropriate emotional response through improving usability and subjective
satisfaction. UI design is a highly creative process, and creation of a coherent and unique visual brand
relies on iterative refinement of global design decisions (e.g., interface layout and responsiveness,
application navigation, visual affordances and feedback, color scheme, typefaces) and local design
decisions (e.g., visual metaphors for direct manipulation interface widgets, specific text phrasing for
icons, tooltips, and information windows). Nielsen (1994) provides a useful set of usability heuristics for
guiding visual interface design.
Bibliography
Andrienko, N., Andrienko, G., & Gatalsky, P. (2003). Exploratory spatio-temporal visualization: an
analytical review. Journal of Visual Languages & Computing, 14(6), 503-541.
Cartwright, W., Crampton, J., Gartner, G., Miller, S., Mitchell, K., Siekierska, E., & Wood, J. (2001).
Geospatial information visualization user interface issues. Cartography and Geographic
Information Science, 28(1), 45-60.
Crampton, J. W. (2002). Interactivity types in geographic visualization. Cartography and geographic
information science, 29(2), 85-98.
DiBiase, D. (1990). Visualization in the earth sciences. Earth and Mineral Sciences, 59(2), 13-18.
Dykes, J. A. (1997). Exploring spatial data representation with dynamic graphics. Computers &
Geosciences, 23(4), 345-370.
Edsall, R., Andrienko, G., Andrienko, N., & Buttenfield, B. (2008). Interactive maps for exploring spatial
data. ASPRS Manual of GIS.
Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of
movement. Journal of Experimental Psychology. 47(6): 381-391.
Garrett, J. J. (2010). The elements of user experience: user-centered design for the web and beyond.
Pearson Education.
Haklay, M. M. (Ed.). (2010). Interacting with geospatial technologies. John Wiley & Sons.
Howard, D., & MacEachren, A. M. (1996). Interface design for geographic visualization: Tools for
representing reliability. Cartography and Geographic Information Systems, 23(2), 59-77.
Hughes, J. F., Van Dam, A., Foley, J. D., & Feiner, S. K. (original edition 1990; latest edition
2014). Computer graphics: principles and practice. Pearson Education.
MacEachren, A. M. (1994). Visualization in modern cartography: setting the agenda. Visualization in
modern cartography, 28(1), 1-12.
MacEachren, A. M., & Kraak, M.-J. (1997). Exploratory cartographic visualization: advancing the
agenda. Computers & Geosciences, 23(4), 335-343.
MacEachren, A. M., Wachowicz, M., Edsall, R., Haug, D., & Masters, R. (1999). Constructing
knowledge from multivariate spatiotemporal data: integrating geographical visualization with
knowledge discovery in database methods. International Journal of Geographical Information
Science, 13(4), 311-334.
Nielsen, J. (1994, April). Usability inspection methods. In Conference companion on Human factors in
computing systems (pp. 413-414). ACM.
Norman, D. A. (2013). The design of everyday things: Revised and expanded edition. Basic books.
Roth, R. E. (2012). Cartographic interaction primitives: Framework and synthesis. The Cartographic
Journal, 49(4), 376-395.
Roth, R. E. (2013a). Interactive maps: What we know and what we need to know. Journal of Spatial
Information Science, 2013(6), 59-115.
Roth, R. E. (2013b). An empirically-derived taxonomy of interaction primitives for interactive
cartography and geovisualization. IEEE transactions on visualization and computer
graphics, 19(12), 2356-2365.
Shneiderman, B. (1996). The eyes have it: A task by data type taxonomy for information visualizations.
In Visual Languages, 1996. Proceedings., IEEE Symposium on (pp. 336-343). IEEE.
Shneiderman, B. (2010). Designing the user interface: strategies for effective human-computer
interaction. Pearson Education India.
Sundar, S. S., S. Bellur, J., Oh, H., Jia, H., & H. S Kim. (2016). Theoretical importance of contingency in
human-computer interaction: effects of message interactivity on user engagement.
Communication Research, 43(5), 595-625
Thomas, J. J., & Cook, K. A. (2005). Illuminating the path: the research and development agenda for
visual analytics. IEEE Computer Society.
Tsou, M.-H. (2011). Revisiting web cartography in the United States: The rise of user-centered
design. Cartography and Geographic Information Science, 38(3), 250-257.

Learning Objectives
• Understand: Describe traditional and emerging use cases for interactivity in cartography and
visualization (e.g., exploration, analytics, presentation)
• Understand: Describe a user need for the following interaction operators: panning, zooming,
overview reexpression, filtering, detail retrieval, etc.
• Apply: Walkthrough the stages of interaction using different interface controls in an interactive
map and identify potential breakdowns and solutions.
• Analyze: Deconstruct an interactive map into its basic interaction primitives.
• Evaluate: Evaluate an interactive map design by UI/UX design recommendations (e.g.,
affordances/feedback, interface complexity, interface styles, design heuristics).
• Create: Design an interactive map suitable for a given set of user needs.

Instructional Questions
• Perhaps the two most common kinds of mapping interfaces that geospatial professionals
experience today are simple web maps (e.g., Apple Maps, Google Maps) and fully-featured GIS
(e.g., ArcGIS, QGIS). These UX design contexts could not be more different! Compare and
contrast these two UX contexts according to user needs, potential breakdowns in the user
experience, recommended UI controls, etc., arguing why these two kinds of mapping interfaces
necessarily should be different.
• In lab ___, you created an interactive map depicting ___. Use the stages of interaction framework
to walkthrough how you envisioned a first time user to interact with your map (i.e., work through
multiple loops of the framework). Identify potential breakdowns in your design and discuss UX
design solutions to enhance your interactive map in the future.
• Navigate to your online campus map:
o If interactive: Critique the campus map according UI/UX design recommendations (e.g.,
which interaction operators should be added to / removed from the map? how could your
university develop a better visual brand through the campus map?). Present your critique
as a series of recommendations for improving the campus map.
 o If static: Assess how the campus map should take advantage of interactivity according to
UI/UX design recommendations (e.g., which interaction operators should be added to the
map? how could your university develop a better visual brand through the campus map?).
Present your assessment as a series of recommendations for making the campus map
interactive.
• You have been given a description of unmet user needs and target user personas for a proposed
interactive map (derive from class readings/discussion). Develop a requirements document
outlining the functional scope of the proposed interactive map. Include notes about the
recommend interface freedom and flexibility for each interaction operator included in the
requirements document.
• You have been given a description of a use case scenario for an interactive map and a
requirements document proposing the functional scope of the interface to support this use case
(derive from class readings/discussion). Sketch a prototype of the interface based on UI/UX
design recommendations, including an example map representation. Annotate the sketch with
notes justifying the interface styles used to implement each operator, the layout of interface
controls, and aspects of the visual design that produce a coherent look and feel.

Additional Resources
• (2017) The 100 Best Jobs: Cartographer. U.S. News and World Report. Retrieved from:
http://money.usnews.com/careers/best-jobs/cartographer
• Nielsen, J., & D. Norman. (1998-2017). The Nielsen Norman Group: Evidence-based user
experience research, training, and consulting. Retrieved from: https://www.nngroup.com/
• Roth, R. E. (2016). Rethinking cartography curriculum to train the contemporary cartographer.
In: 6th International Conference on Cartography and GIS. Retrieved from: https://cartography-
gis.com/docsbca/iccgis2016/ICCGIS2016-16.pdf
• Szukalski, B. (2013, August 1). Transforming essential GIS skills. Esri Insider. Retrieved from
https://blogs.esri.com/esri/esri-insider/2013/08/01/transforming-essential-gis-skills/
• Tolochko, R.C. (2016). Contemporary professional practices in interactive web map design.
Retrieved from: http://tolomaps.github.io/assets/Tolochko_Thesis.pdf
• Underwood, E. (2013, March 8). The New Cartographers. Science Magazine. Retrieved from
http://www.sciencemag.org/careers/2013/03/new-cartographers

Keywords
user experience design, user interface design, interactive maps, interaction primitives, interaction
operators

View publication stats