CV-13 - User Interface and User Experience (UI/UX) Design

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 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.

Topic Contents: 
  1. Definitions
  2. Introducing UI/UX
  3. Designing the User Experience
  4. Designing the User Interface

 

1. 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 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 times 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
 
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
 
 
 
2.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, below). This entry reviews the conceptual principles behind UI/UX, emphasizing design following other entries in the Cartography & Visualization section and complementing the technological-focused 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 experience before the interface.

 

2.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 (forthcoming)). 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. As stated above, 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 (forthcoming)). 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 (forthcoming)). 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 (forthcoming), Usability Engineering (forthcoming), and Web Mapping.

 

Representation vs. Interaction

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)

 

3. Designing the User Experience

3.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 (forthcoming)).

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).

 

Stage

Ex.1: Analog Door

Ex.2: Digital Map

Observe a Breakdown?

Some UX Solutions?

Forming the Goal

“I want to get out of here.”

“I want to explore long-term patterns in tornado activity.”

The user’s goal is not supported by the interactive (Type I error), or the user does not think that the interactive supports his or her goal (Type II error).

•     Complete a needs assessment to define user goals.

•     Implement strategies to improve user expertise and motivation.

Forming the Intention

“I will identify the door I will use to leave.”

“I will start my exploration by seeing if the volume of tornadoes has changed since 1950.”

The user cannot complete one or several low-level tasks or relies on map reading alone to complete low-level tasks without interacting.

•     Develop use case scenarios based on low-level tasks.

•     Evaluate the interactive using benchmark tasks.

Specifying an Action

“I will use the door handle to open the door.”

“I will use the temporal filtering tools to narrow the timespan.”

The user does not understand how the provided interface functionality supports their goals and intentions.

•     Improve visual affordances.

•     Implement startup and tooltip help.

•     Configure the map with a smart default to show how the UI and map relate.

Executing the Action

“I pull the door handle.”

“I use the keyboard to enter the ‘from’ and ‘to’ dates.”

The user does not understand how to submit information to the interface through the input devices or incorrectly used the input devices.

•     Improve flexibility to support multiple input devices.

•     Reduce point mileage and workload to avoid errors.

•     Use accelerators to speed interaction.

•     Use visual metaphors drawn from real-world interactions.

Perceiving the System State

“I feel that the door did not open.”

“I see that there were more tornadoes in 2000-2010 than in 1950-1960.”

The user does not notice how the map changed due to the interaction.

•     Improve visual feedback through highlighting.

•     Provide summary information to compare before and after interacting.

•     Use breadcrumbs to remind the user how they interacted.

Interpreting the System State

“I think this means that I need to push the handle instead of pull it.”

“I think this means that there was a potentially meaningful increase in tornado activity”

The user does not understand what the change in the map means.

•     Combine visualization with statistical computation to highlight significant insights (see Geovisual Analytics).

Evaluating the Outcome

“This is a stupid door. Good thing there wasn’t a fire!”

“I now will modify my goal from broad exploration of long-term patterns across tornado activity to analysis of specific causes of the increase.”

The user does not receive information from the interaction that helped them achieve their goal.

•     Provide visual provenance to track interactions across exchanges.

•     Support enabling operators (e.g., save, annotate, export) to collect insights during interaction.

•     Support collaboration to share insights.

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)

 

3.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 (forthcoming)).

 

4. Designing the User Interface

4.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)

 

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).

 

Operator

Definition

Interactive Map Example

Some UI Design Recommendations?

Reexpress

Set or change the displayed map representation without changing the information.

“Reexpress from a choropleth map to a proportional symbol map.”

•     Reexpress to a proportional symbol map type on web maps to overcome issues with normalization and Web Mercator.

•     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 ordered set of related maps, each with different information.

“Sequence by decade from 1950 to present.”

•     Constrain the binning unit to intervals in space, time, or attributes that make sense for the use case scenario.

•     Sequence all animations (temporal or otherwise) to give users controls over the playback.

Overlay

Change the feature types included in the map for additional context.

“Overlay bike lanes atop the map.” (Also underlay: “Turn on the imagery basemap beneath the linework.”)

•     Overlay only a small subset of context layers for general users to avoid meaningless overplotting.

•     Overlay custom layers (via import) for expert users to support 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 of a map without changing the map type.

“Resymbolize the choropleth map from five classes/colors to an unclassed color ramp.”

•     Constrain resymbolization for general users to avoid misleading representations.

•     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 local neighborhood.”

•     Increase the level of detail in the map when zooming into the 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 map.

“Pan the map from the origin to the destination of the route.”

•     Limit the mouse/pointer mileage needed to pan between map 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 (beyond map scale and centering)

“Reproject to show north as up on the map.”

•     Reproject when panning and zooming if not computationally restrictive.

•     Rotate away from north-up for egocentric mobile applications supporting navigation.

Filter

Remove/highlight map features within a feature type that do not meet one or a set of user-defined conditions.

“Filter the map to show top-rated restaurants only.”

•     Support filtering over searching for the goal of exploration and expert users.

•     Use slider widget to filter by numerical facets and 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 interest.

“Search for the destination by address.”

•     Support searching over filtering for the goal of presentation 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 map feature of interest.

“Retrieve details about the State of Wisconsin.”

•     Retrieve details to complete simple identification tasks.

•     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, coordinated views, and map elements.

“Rearrange the legend atop the map to interpret the symbol.”

•     Constrain arrangement for the goal of presentation and general users to avoid misleading representations.

•     Separate coordinated views into dialog windows for mobile.

Calculate

Derive new information about a map feature of interest.

“Calculate the distance to the next city.”

•     Use persistent interfaces over nested interfaces when supporting complex calculations.

•     Make visual as many components of calculations and models through the interface.

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)

 

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., panning versus zooming), 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 Scale and 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 (forthcoming)).

4.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 (forthcoming)). 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. The figure provides examples of: (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)

 

4.3 Visual Interface Design

As with paper or static cartographic design (see Aesthetics and Design (forthcoming)), 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 emotion 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. 

References: 

Andrienko, N., Andrienko, G., & Gatalsky, P. (2003). Exploratory spatio-temporal visualization: an analytical review. Journal of Visual Languages & Computing14(6), 503-541. doi: 10.1016/S1045-926X(03)00046-6
 
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 Science28(1), 45-60. doi: 10.1559/152304001782173961
 
Crampton, J. W. (2002). Interactivity types in geographic visualization. Cartography and geographic information science29(2), 85-98. doi: 10.1559/15230400278205314
 
DiBiase, D. (1990). Visualization in the earth sciences. Earth and Mineral Sciences59(2), 13-18.
 
Dykes, J. A. (1997). Exploring spatial data representation with dynamic graphics. Computers & Geosciences23(4), 345-370. doi: 10.1016/S0098-3004(97)00009-5
 
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. doi: 10.1037/h0055392
 
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. and MacEachren, A. M. (1996). Interface design for geographic visualization: Tools for representing reliability. Cartography and Geographic Information Systems23(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 cartography28(1), 1-12.
 
MacEachren, A. M., & Kraak, M.-J. (1997). Exploratory cartographic visualization: advancing the agenda. Computers & Geosciences23(4), 335-343. doi: 10.1016/S0098-3004(97)00018-6
 
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 Science13(4), 311-334. doi: 10.1080/136588199241229
 
Nielsen, J. (1995). Usability inspection methods. Conference companion on Human factors in computing systems - CHI 95. doi:10.1145/223355.223730
 
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 Journal49(4), 376-395. doi:10.1179/1743277412Y.0000000019
 
Roth, R. E. (2013a). Interactive maps: What we know and what we need to know. Journal of Spatial Information Science2013(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 graphics19(12), 2356-2365. doi: 10.1109/TVCG.2013.130
 
Shneiderman, B. (1996). The eyes have it: A task by data type taxonomy for information visualizations. In Visual Languages, 1996. Proceedings, IEEE Symposium on Visual Languages. (pp. 336-343). doi: 10.1109/VL.1996.545307
 
Shneiderman, B. (2010). Designing the user interface: strategies for effective human-computer interaction. Pearson Education India.
 
Sundar, S. S., Bellur, S., Oh, J.,  Jia, H., and Kim, H. S. (2016). Theoretical importance of contingency in human-computer interaction: effects of message interactivity on user engagement. Communication Research, 43(5), 595-625. doi: 10.1177/0093650214534962
 
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 Science38(3), 250-257. doi:10.1559/15230406382250

Author and Citation Info: 
The latest version of the entry "Symbolization and the Visual Variables" may be cited as:
 
Roth, R. (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.
 
This entry was published on June 18, 2017.
 
This Topic was first published as "Dynamic and interactive displays" and is available in the following editions: Quarter 2, 2016 (first archived) [author: UCGIS]
Learning Objectives: 
  • Describe traditional and emerging use cases for interactivity in cartography and visualization (e.g., exploration, analytics, presentation). 
  • Describe a user need for the following interaction operators: panning, zooming, overview reexpression, filtering, detail retrieval, etc. 
  • Walkthrough the stages of interaction using different interface controls in an interactive map and identify potential breakdowns and solutions.
  • Deconstruct an interactive map into its basic interaction primitives. 
  • Evaluate an interactive map design by UI/UX design recommendations (e.g., affordances/feedback, interface complexity, interface styles, design heuristics). 
  • Design an interactive map suitable for a given set of user needs. 
Instructional Assessment Questions: 
  1. 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.
  2. 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.
  3. Navigate to your online campus map.
    1. 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.
    2. 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.
  4. 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.
  5. 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: