Advances in personal calculating 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. Appropriately, nosotros need to consider interaction as a central complement to representation in cartography and visualization. UI (user interface) / UX (user experience) describes a set of concepts, guidelines, and workflows for critically thinking virtually the design and use of an interactive product, map-based or otherwise. This entry introduces core concepts from UI/UX blueprint important to cartography and visualization, focusing on bug related to visual pattern. First, a cardinal distinction is made between the use of an interface as a tool and the broader feel of an interaction, a distinction that separates UI design and UX design. Norman'southward 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 tin be applied to breakdowns at unlike stages of the interaction. Finally, three dimensions of UI blueprint are described: the fundamental interaction operators that grade the basic building blocks of an interface, interface styles that implement these operator primitives, and recommendations for visual design of an interface.

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

Every interaction operator can be implementing using 1 of many interface styles or modes. For example: (a) detail retrieval through straight manipulation of a map characteristic, (b) panning through direct manipulation of the entire map, (c) filtering through direction manipulation of the map legend, (d) coordinated detail retrieval through directly manipulation of a linked isomorph, (e) sequencing through direct manipulation of a slider interface widget, (f) filtering past indirect menu pick, (g) annotating metadata through indirect form fill-in, (h) reexpression of a new map through indirect command line, and (i) detail retrieval through natural linguistic communication and gesture recognition, Additional details about the depicting interactive maps and visualizations are included in Roth (2013a). (reproduced from Roth, 2013a, p88)

…

Figures - uploaded by Robert E. Roth

Writer content

All figure content in this area was uploaded by Robert E. Roth

Content may exist subject to copyright.

Bring together for gratuitous

User Interface and User Experience (UI/UX) Design

Cite as: Roth, R. E. (2017). User Interface and User Feel (UI/UX) Design. The Geographic

Computer science & Technology Torso of Knowledge (2d Quarter 2017 Edition), John P. Wilson

(ed.). doi: ten.22224/gistbok/2017.two.v.

Abstruse

Advances in personal computing and information technologies have fundamentally transformed how

maps are produced and consumed, equally 1000whatsoever maps today are highly interactive and delivered online or

through mobile devices. Accordingly, nosotros demand 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 cadre concepts from UI/UX design of import to

cartography and visualization, focusing on issues related to visual blueprint. First, a fundamental distinction

is fabricated between the use of an interface as a tool and the broader experience of an interaction, a

stardom that separates UI blueprint 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 unlike stages of the interaction. Finally,

three dimensions of UI pattern are described: the fundamental interaction operators that course 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 indicate to the user near how to interact with the interface

feedback: a signal to the user about what happened equally a result of the interaction

interaction: the two-way question-respond or request-issue dialogue between a human user and a

digital object mediated through a computing device

interaction primitive: the cardinal components of interaction that tin 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 tin can be created through the

interface (scope multiplied by freedom)

interface flexibility: ability to consummate the southwardame objective with an interface through unlike

interaction strategies

interface freedom: the precision past which each operator can exist executed

interface telescopic: the baseline number of operators implemented in an interactive tool

interface style/mode: the style by which user input is submitted to perform the operator

user feel (UX) design: iterative fix of decisions leading to a successful outcome with an

interactive tool, besides as a productive and satisfying process while arriving at this upshot

user interface (UI) blueprint: the iterative set of decisions leading to a successful implementation of

an interactive tool

Description

1. Introducing UI/UX

1.one The User Interface versus the User Feel

Advances in personal computing and information technologies have fundamentally transformed how

maps are produced and consumed, every bit mwhatsoever maps today are highly interactive and delivered online or

through mobile devices. UI (user interface) / UX (the stateser 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 enghistoric period with stakeholders and target users throughout

large software engineering and spider web blueprint 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 non the same, separated in their focusouthward on interfaces versus interactions. An interface is a

tool, and for digital mapping this tool enables the user to grandanipulate maps and their underlying

geographic information. An interaction is broader than the interface, describing the two-way question-

answer or request-consequence dialogue between a human user and a digital object mediated through a

computing device (Roth, 2012). Therefore, an interaction is both contingent— equally the response is based on

the request, creating loops of interactivity—and empowering— giving the user bureau in the mapping

process with changes contingent on his or her interests and needs (Sundar et al. 2014).

Therefore, humans use interfaces, but they experiencdue east 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 im plementation of an interactive tool while UX design describes the

iterative set of decisions leading to a successful outcome with the interactive, also 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 Pattern in Cartography and Visualization

Within GIScience, interaction most commonly is treated past the enquiry 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 whatever single map design. Geovisualization encourages this interactive reasoning for the

purpose of exploration rather than communication (see Cartography & Scientific discipline), 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 every bit the target user groups.

Today, UI/UX design requires consideration of use cases across exploratory geovisualization and users

beyond adept 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 procedure, improving accessibility to geographic information and dissolving

traditional boundaries between mapmaker and map user (come across Cartography & Power). Increasingly,

interaction enables geographic assay, linking computing to cognition in order to scale the human mind

to the complexity of the mapped phenomenon or procedure (see Geovisual Analytics). Accordingly,

interaction has been suggested every bit a primal complement to representation in cartography, together

organizing contemporary cartographic scholarship and practice (Roth, 2013a; Figure i). For discussion of

boosted influences on UI/UX design in cartography and visualization, encounter Geocollaboration, Usability

Engineering, and Web Mapping.

Figure i. Cartography traditionally has been divided by topics on mapmaking (come across the Map Pattern Fundamentals topics)

versus map use (run into Map Use). Advances in digital mapping engineering require consideration of a second distinction:

representation versus interaction (separated in the Body of Knowledge under Map Design Techniques versus Interactive

Blueprint Techniques). Inquiry and design now draws from a blending of both dimensions. (adjusted with permission from Roth,

2013a)

2. Designing the User Experience

two.i Stages of Interaction

An interaction requires the user to employ perceptual, motor, and cognitive abilities equally they view,

manipulate, and interpret an interactive yardap. Norman (1988) offers a useful framework for

conceptualizing a map interaction every bit a 2-way dialogue or conversation, decomposing a single

interaction substitution into 7 discrete and observable stages:

1. Forming the goal: The goal is what the user is trying to accomplish with the interface and therefore

represents the user's motivation for using the interface (a demand, interest, marvel, 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 back up of the goal. Accordingly, intentions are described as "low-level" tasks. Intentions

include identification of a map feature, comparison of ii map features, ranking of a fix of map

features, etc. Therefore, an intention yields a specific geographic insight, such every bit detection of a

deviation, change, outlier, anomaly, correlation, tendency, cluster, or fasten.

iii. Specifying an action: The user then must transtardily their intention to the functions (described

beneath equally operators) im plemented in the interface. The interface needs strong affordances― o r

signals to the user about how to collaborate with the interface―for the user to specify which operator

best supports the intention before executing the activeness.

4. Executing an action: The user and so must execute the specified activity using input computing

devices, such every bit a pointing device (e.g., grandouse, touchscreen), keying device (eastward.g., thoueyboard,

keypad), or other style (e.chiliad., 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 arrangement land: Once returned, the user then views the new representation. Here,

stiff feedback― or signals to the user about what happened equally a result of the interaction―is

needed to clarify how the map inverse after the request. It is through this provision of feedback

that the map participates in the two-style interaction dialogue.

6. Interpreting the system state: After perceiving the change to the map representation through

feedback, the user and so must make sense of the update. Ane fashion to describe this stage is

completion of the intention: once a new map is returned, it tin can be used to bear out the user'due south

depression-level job and, if successful, generateastward a new geographic insight.

vii. Evaluating the issue: The evaluation compares the insight with the expected effect to

make up one's mind if the goal has been achieved. This includes disquisitional evaluation of the insight ("does this

run intom right?") and meta-evaluation of the overarching goal ("practise I have my answer?"). Following

this evaluation, the user may revise their goal and initialize a new interaction substitution, restarting

the seven phase sequence.

Norman described breakdowns betwixt the user and the map (Stages #1-4) every bit the "gulf of execution", or

the mismatch between user tasks and supported operators, and breakdowns betwixt the map and the user

equally the "gulf of evaluation" , or the mismatch betwixt the result of the operator and the user's expected

result. Tabular array i works through Norman's 7 stages of interaction and lists UX blueprint solutions

bachelor when a breakdown at a given stage is observed (adapted from Roth, 2013a).

Table i. Norman (1988) reduced an interaction into seven discrete, observable stages. An observed breakup at a given stage

suggests a specific set of UX solutions. (adapted from Roth, 2013a)

"I want to become 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 fault).

• Complete a needs assessment to

define user goals.

• Implement strategies to meliorate

user expertise and motivation.

"I volition identify the

door I volition employ to

exit."

"I volition start past

determining if the

frequency of

tornadoes has

changed since the

1950s."

The user cannot complete one

or several low-level tasks or

relies on map reading lone to

consummate depression-level tasks

without interacting.

• Develop use case scenarios based

on low-level tasks.

• Evaluate the interactive using

criterion tasks.

"I will use the door

handle to open the

door."

"I will use the

sequencing controls

to accelerate the

timeline by decade

from the 1950s to

nowadays."

The user does non sympathize

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.

"I pull the door

handle."

"I use the mouse to

move the slider

widget from

beginning to end."

The user does not understand

how to submit information to

the interface through the input

devices or incorrectly used the

input devices.

• Amend flexibility to support

multiple input devices.

• Reduce point mileage and

workload to avoid errors.

• Use accelerators to speed

interaction.

• Utilise visual metaphors fatigued from

existent-globe interactions.

Perceiving

the Organization

State

"I feel that the door

did not open."

"I see that the map

now has more tornado

tracks on it."

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 Organisation

Country

"I think this means

that I demand to push

the handle instead

of pull it."

"I think this means

there are more

tornadoes today than

there were in the

1950s."

The user does not understand

what the alter in the map

means.

• Combine visualization with

statistical computation to

highlight significant insights (see

Geovisual Analytics).

"This is a stupid

door, but at least I

know how to get out

now. Proficient thing

in that location wasn't a fire!"

"I now will modify

my goal from a wide

exploration of long-

term patterns beyond

tornado activeness to

assay of specific

causes of the

increment."

The user does not receive

information from the

interaction that helped them

achieve their goal.

• Provide visual provenance to

rail interactions beyond

exchanges.

• Support enabling operators (e.g.,

save, annotate, export) to collect

insights during interaction.

• Back up collaboration to share

insights.

2.2 Additional UX Frameworks

A number of disciplines, professions, and knowledgdue east areas contribute to UI/UX design, including

ergonomics, graphic design, human being-estimator interaction, information visualization, psychology, usability

engineering, and web design. Additional frameworks for agreement UX pattern take been offered as

UX becomes formalized conceptually and professionally (encounter Roth, 2013a, for a review). For instanceast,

Fitts' (1954) constabulary providing an early understanding of pointing interactions was based on psychology

studies about human actual 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, southtructure, scope, and strategy planes, as discussed for

mapping by Tsou, 2011) are offered from web design experience. Finally, well-nigh recommendations

depict UI/UX equally a design process that includes 1000ultiple, user-centered evaluations, making use of

methods and measures established in Usability Engineering science (see Usability Engineering ).

3. Designing the User Interface

3.1 Interaction Operators

As with representation design and the visual variables (see Symbolization & the Visual Variablesouth), an

interaction can be deconstructed into its basic edifice blocks (Effigy 2). Interaction primitives describe

the cardinal components of interaction that can be combined to class an interaction strategy (Roth,

2012). Scholars in cartography (due east.1000., Cartwright et al., 2001) and related fields (e.1000., Thomas & Cook,

2005) identify development of a taxonomy of interaction primitives every bit the near pressing need for the

understanding of interaction, as such a taxonomy articulates the complete solution space for UI/UX

design. Co-ordinately, 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).

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

Tabular array 2. UI design relies upon interaction operator primitives. UI design recommendations specific to cartography and

visualization are get-go to sally for each operator. (adapted from Roth, 2013b)

Some UI Design Recommendations?

Set or alter the displayed map

representation without irresolute 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 Spider web Mercator.

• Reexpress cartograms equally choropleth maps to support

identification tasks.

• Reexpress temporal sequences when interested in linear and

cyclical time.

• Reexpress between maps and not-map representations to

reveal anomalies nowadays in unlike visual structures.

Generate and advance through an

ordered set up of related maps, each

with different data.

"Sequence by decade from 1950 to

nowadays."

• Constrain the binning unit to intervals in space, time, or

attributes that brand sense for the employ case scenario.

• Sequence all animations (temporal or otherwise) to give users

controls over the playback.

Modify the characteristic types included in

the map for boosted context.

"Overlay bike lanes atop the map. "

(Too underlay: " Plow on the

imagery basemap beneath the

linework.")

• Overlay but a modest subset of context layers for general users

to avoid meaningless overplotting.

• Overlay custom layers (via import) for practiced users to support

association tasks (due east.g., correlations, cause-effect relationships).

• Overlay visual benchmarks providing summary context (e.g.,

average, max-min) to support comparison and ranking tasks.

Set up or change the pattern parameters

of a map without changing the map

type.

"Resymbolize the choropleth map

from 5 classes/colors to an

unclassed color ramp."

• Constrain resymbolization for general users to avoid

misleading representations.

• Resymbolize all design parameters for skilful users to manage

visual bureaucracy while interacting.

• Resymbolize form breaks to support ranking and delineation

(due east.m., clusters, spikes) tasks.

• Resymbolize through direct manipulation of the legend.

• Dynamically update the fable when resymbolizing.

"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/deerror map

scale.

• Support flexibility given the ubiquity of zooming on slippy

web maps (e.chiliad., double-click, mousewheel, compression-and-zoom,

zoom slider)

Change the geographic centre 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 (eastward.g., click-and-drag, direction keys, grab-and-drag)

Set or change the map projection

(beyond map scale and centering)

"Reproject to show due 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.

Remove/highlight map features

within a feature blazon that exercise not

run into one or a set of user-divers

weather.

"Filter the map to show top-rated

restaurants simply."

• Support filtering over searching for the goal of exploration and

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

Add together/highlight a map feature of

interest.

"Search for the destination by

accost."

• Back up searching over filtering for the goal of presentation

and general users.

• Search to consummate simple identification tasks.

• Support spatial search by the user's location on mobile

devices.

Request details on demand about a

map feature of interest.

"Retrieve details about the State of

Wisconsin."

• Recollect 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 equally the f data complexity

about the map features increases.

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.

Derive new information well-nigh a map

feature of interest.

"Calculate the distance to the side by side

city."

• Use persistent interfaces over nested interfaces when

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 Activeness), or the generic functions implemented in the interactive that enable the user to

manipulate the display. Operators include panning, zooming, and item retrieval—functions common to

"slippy" web maps using tilesets (run across Web Mapping )– besides as reexpression to unlike 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 (run into

Big Information 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 non 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 (eastward.chiliad., zooming any map calibration versus but ~20 pre-

processed scales). Together, scope and liberty determine the interface complexity, or the total number

of unique representations that can exist created through the interface. Much like managing data

complication in cartographic pattern (come across Generalization), managing interface complexity is essential for

good UI/UX design. The appropriate residuum of flexibility versus constraint in the UI/UX design

ultimately should exist determined through user input and evaluation (see Usability Applied science).

three.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 equally discussed for mapping

by Howard & MacEachren, 1996). The same operator can exist implemented multiple times thcrude

unlike interface styles, assuasive users to complete the same objective with an interface through

different interaction strategies, a pattern concept described equally interface flexibility. In graphic user

interfaces (i.eastward., GUIs), the interface manner is the widget, menu, or form that triggers an result when input is

received; the operator is the business logic that is executed after the upshot is handled.

Interface styles are defined past their level of directness in submitting input (Figure iii). 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 private map features (common for

item retrieval), the entire map (common for panning, zooming, and reprojection), map elements like a

fable (common for filtering and resymbolizing), a linked information graphic or 5isualization (common

for reexpression of overviews, filtering, and item retrieval in a coordinated visualization), or simply a

custom widget such every bit buttons or slider confined (common for filtering, toggling overlays, and sequencing

through a map serial or animation) (Roth, 2013a).

Less directly interface styles include menus, or the pick of one or more than items from a list (common for

filtering), and forms, or the keying of characters into a bare textbox (common for searching). The one thousandove

towards mobile-first or post-WIMP (Windows, Icons, Menus, and Pointers) design in cartography has

substantially changed how direct interface styles are designed in gild to support imprecise (finger-based)

affect interactions (encounter Mobile Mapping & Responsive Design). Control 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 iii. Every interaction operator can exist implementing using i of many interface styles or modes. For instance: (a) item

retrieval through directly 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 item retrieval through direct manipulation of a linked

isomorph, (e) sequencing through direct manipulation of a slider interface widget, (f) filtering past indirect carte du jour selection, (yard)

annotating metadata through indirect form backup, (h) reexpression of a new map through indirect command line, and (i) detail

retrieval through natural language and gesture recognition, Boosted details about the depicting interactive maps and

visualizations are included in Roth (2013a). (reproduced from Roth, 2013a, p88)

iii.three Visual Interface Design

Equally with newspaper or static cartographic design (see Aesthetics and Design), the visual await and feel of the

UI design is "more just icing on the cake": it sets the tone for the entire user feel, from setting

the mood and evoking an appropriate emotional response through improving usability and subjective

satisfaction. UI pattern is a highly artistic process, and cosmos of a coherent and unique visual brand

relies on iterative refinement of global pattern decisions (e.g., interface layout and responsiveness,

application navigation, visual affordances and feedback, colour scheme, typefaces) and local design

decisions (e.thou., visual metaphors for direct 1000anipulation interface widgets, specific text phrasing for

icons, tooltips, and data windows). Nielsen (1994) provides a useful set up of usability heuristics for

guiding visual interface design.

Bibliography

Andrienko, Northward., Andrienko, G., & Gatalsky, P. (2003). Exploratory spatio-temporal visualization: an

analytical review. Periodical of Visual Languages & Calculating, 14 (6), 503-541.

Cartwright, W., Crampton, J., Gartner, G., Miller, Due south., Mitchell, K., Siekierska, E., & Wood, J. (2001).

Geospatial information visualization applyr interface issues. Cartography and Geographic

Information Science, 28 (ane), 45-60.

Crampton, J. Due west. (2002). Interactivity types in geographic visualization. Cartography and geographic

information science, 29 (2), 85-98.

DiBiase, D. (1990). Visualization in the eastwardarth sciences. Earth and Mineral Sciences, 59(2), 13-18.

Dykes, J. A. (1997). Exploring spatial data representation with dynamic graphics. Computers &

Geosciences, 23(four), 345-370.

Edsall, R., Andrienko, G., Andrienko, N., & Buttenfield, B. (2008). Interactive maps for exploring spatial

data. ASPRS Transmission of GIS.

Fitts, P. M. (1954). The data capacity of the human being 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, Chiliad. M. (Ed.). (2010). Interacting with geospatial technologies. John Wiley & Sons.

Howard, D., & MacEachren, A. M. (1996). Interface blueprint 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, Due south. One thousand. (original edition 1990; latest edition

2014). Figurer graphics: principles and practice. Pearson Instruction.

MacEachren, A. K. (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, One thousand., Edsall, R., Haug, D., & Masters, R. (1999). Constructing

cognition from multivariate spatiotemporal information: 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 Briefing companion on Human factors in

computing systems (pp. 413-414). ACM.

Norman, D. A. (2013). The blueprint of everyday thursdayings: Revised and expanded edition. Basic books.

Roth, R. E. (2012). Cartographic interaction primitives: Framework and synthesis. The Cartographic

Periodical, 49(four), 376-395.

Roth, R. E. (2013a). Interactive maps: What we kat present and what we need to know. Journal of Spatial

Information Scientific discipline, 2013 (6), 59-115.

Roth, R. E. (2013b). An empirically-derived taxonomy of interaction primitives for interactivdue east

cartography and geovisualization. IEEE transactions on visualization and computer

graphics, 19 (12), 2356-2365.

Shneiderman, B. (1996). The optics 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-reckoner

interaction. Pearson Didactics India.

Sundar, S. Southward., S. Bellur, J., Oh, H., Jia, H., & H. S Thouim. (2016). Theoretical importance of contingency in

human-computer interaction: furnishings of one thousandessage interactivity on user engagement.

Communication Research, 43 (5), 595-625

Thomas, J. J., & Cook, K. A. (2005). Illuminating the path: the inquiry and development agenda for

visual analytics. IEEE Computer Society.

Tsou, M.-H. (2011). Revisiting web cartography in the U.s.: 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.chiliad., 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 past UI/UX design recommendations (e.m.,

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 ii well-nigh common kinds of mapping interfaces that geospatial professional due south

experience today are simple spider web maps (eastward.g., Apple Maps, Google Maps) and fully-featured GIS

(e.k., ArcGIS, QGIS). These UX design contexts could non be more different! Compare and

contrast these two UX contexts according to user needs, potential breakdowns in the user

feel, 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.east., work through

multiple loops of the framework). Identify potential breakdowns in your design and discuss UX

design solutions to enhance your interactive thousandap 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

equally a series of recommendations for improving the campus map.

o If static: Appraise how the campus map should take advantage of interactivity co-ordinate to

UI/UX design recommendations (e.k., which interaction operators should be added to the

map? how could your academy 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 clarification of unmet user needs and target user personas for a proposed

interactive map (derive from class readings/discussion). Develop a requirements certificate

outlining the functional scope of the proposed interactive map. Include notes nearly the

recommend interface liberty and flexibility for each interaction operator included in the

requirements document.

• You lot have been given a description of a use case scenario for an interactive map and a

requirements certificate proposing the functional southwardcope of the interface to support this employ 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.

Boosted Resources

• (2017) The 100 Best Jobs: Cartographer. U.Due south. News and World Report. Retrieved from:

http://money.usnews.com/careers/best-jobs/cartographer

• Nielsen, J., & D. Norman. (1998-2017). The Nielsen Norman Grouping: Evidence-based user

experience research, training, and consulting. Retrieved from: https://www.nngroup.com/

• Roth, R. E. (2016). Rethinking cartography curriculum to train the gimmicky cartographer.

In: sixth 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 spider 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 blueprint, user interface blueprint, interactive maps, interaction primitives, collaborateion

operators

... Just if the users need to edit variant types of the graph at one time, they have to load different visual dashboards. So, it is very applied to extend the graph dashboard due to the user dashboards' design demands [4]. ...

  • Ashwini G. Varma
  • Jignyasa Bhupendra Sanghavi Jignyasa Bhupendra Sanghavi

Present, user dashboards have been widely used everywhere, and the design complexity is growing with the more and more than advanced technology. A very important aspect in user dashboards design is their specifications that draw what the systems have to do. The specification should provide criteria for the systems to be designed. The criteria are formulated in a specification language, which is kept preferably on a loftier abstraction level and, for example, demand not be executable. The specification gives a formal model by class-library extensions, past this fashion to ensure the consistency of the systems and define the properties of the systems. In many modernistic applications, graphs play important role in representing the specifications of user dashboards. The richness and applied purposes are needed past the specifications. The richness comes from several resources, which have the variations in the way of different types of graphs. Likewise the general graph, there are Conditional Process Graph (CPG), Petri nets and other types of graphs. It turns more difficult to piece of work on these graph representations in a textual format since now the user dashboards go more than and more complicated. We demand to develop a visual dashboard, which users can pattern and edit the graph visually based on certain class of specifications. There exist some kind of dashboards for graphs, but they each by and large focus on one type of graph at a fourth dimension. If new graph is introduced, they cannot work anymore. And then, nosotros propose an extensible visual dashboard, which can edit many types of graph with their ain specifications that are defined in formal means. All the representations in the dashboard are graph-based and they share common concepts such like edges and nodes. Past this way, the dashboard becomes extensible and it is not simply the combination of several dashboards. In this newspaper, we study different methods to design user dashboards, and evaluate the best practices in designing the same.

... For the development of an intuitive digital product, it is indispensable to understand the concepts of User Feel Design (UX) and User Interface Design (UI). They come across dissimilar purposes just contribute together to a workflow based on essential concepts and guidelines to successfully design a digital product [30]. ...

The study presented in this paper consists of the development of a platform for digital archiving, collaborative and e-learning, within the framework of the arts and crafts industries. This work is part of Anti-Amnesia, a projection which aims to investigate Design as an amanuensis for the regeneration and reinvention, narratives and materials, of disappearing Portuguese cultures and manufacturing techniques. In general, this project aims to: develop methodologies, through digital means and tools, that contribute to the preservation of the heritage and cultural heritage of the craft industries; contribute to the sustainability of the craft heritage, through the revitalization of the tradition of these industries, ensuring a continuous transmission of skills, techniques and arts and crafts knowledge to future generations; and promote inquiry and enquiry in this area of Portuguese manufacturing. Specifically, in this piece of work to create the platform, nosotros seek, through digital engineering science, to make information more attainable and universal, facilitating access to knowledge. Through the platform, and with the back up of educational tools and services, we will seek to promote the learning of Portuguese manufacturing techniques, in society to attract young people to recover older practices. Based on this strategy, it is intended to value tradition, preserve it, and transmit it to future generations.

... For the development of an intuitive digital product, it is indispensable to understand the concepts of User Experience Design (UX) and User Interface Design (UI). They meet dissimilar purposes only contribute together to a workflow based on essential concepts and guidelines to successfully design a digital production [30]. ...

  • Nuno Martins Nuno Martins

The craft merchandise in Portugal faces challenges that compromise its productive and economic sustainability and may result in the disappearance of millenary techniques, traditions, and industrial practices of high symbolic and historical value. The growing incompatibility of these traditional activities with digital technologies, the lack of resource, and a growing age gap are among the primary problems identified. This situation made worse by various restrictions pertaining to the COVID-19 pandemic points towards the possibility of extinction of this type of manual arts. The goal of this enquiry is to demonstrate how the blueprint process of an e-marketplace platform, throughout its unlike phases, may contribute to the revitalization of traditional industries. The methodologies adopted in the framework consisted in the study of UX and UI best design practices, including wireframe design, user flows, definition of personas, evolution of prototypes, and manner guides. The results of the conducted usability tests to the image allowed a gradual improvement of the solution, culminating in the confirmation of its effectiveness. The study concluded that digital technology, namely a designed e-marketplace solution, could potentially bring buyers and sellers closer together, thus being a tool with high potential for the dissemination and sustainability of the craft industry.

  • Clara Setas Clara Setas

O presente trabalho tem como objetivo apresentar uma proposta de interface digital que permita avaliar a proficiência, no Português Europeu (PE), de crianças lusodescendentes na diáspora, e que forneça fabric informativo sobre a aquisição precoce de línguas de herança. No desenvolvimento deste trabalho foram expostos e discutidos os obstáculos à aquisição de uma língua de herança, ligados aos sistemas educativos, contextos socioculturais, eastward fatores extralinguísticos. Discutiu-se a fiabilidade da utilização dos quadros de nível de língua já existentes, aplicados ao ensino de línguas de herança. A interface pretende disponibilizar um Cloze Exam como ferramenta de avaliação fiável de competências linguísticas, uma vez que se revela a falta de ferramentas adaptadas à avaliação de proficiência e, também, ao contexto de aquisição due east necessidades de aprendizagem dos falantes de herança. O Cloze Test é um teste de preenchimento de lacunas de um texto que agrega a avaliação de conhecimentos lexicais, morfossintáticos east discursivos, correspondentes a diferentes níveis de dificuldade. O teste permite distribuir bone falantes em grupos diferentes de proficiência e detetar em que estruturas da língua apresentam mais dificuldades. Relativamente ao método de avaliação, foi concebido um modelo de pontuação e distribuição de níveis de proficiência, acompanhado das respetivas descrições de nível, que deriva do grau de dificuldade de estruturas linguísticas. A interface é apresentada em formato de protótipo interativo que resultou da criação de Personas (utilizadores-alvo), da análise das suas necessidades eastward objetivos, e a incorporação de conceitos relevantes da componente do design de interfaces web. Por fim, realizou-se a testagem da usabilidade do protótipo, através de entrevistas, na qual se destacou a importância do planeamento do design de interação east navegação east do posicionamento e clareza do conteúdo informativo. Com as entrevistas, o problema do sistema de ensino do português como língua de herança voltou a surgir, ressaltando a disparidade dos formatos de ensino entre países. Concluiu-se que a interface está em conformidade com every bit necessidades dos utilizadores-alvo e que possui várias possibilidades de expansão. Prevê-se que o futuro lançamento desta interface permita contribuir para esta área de investigação da linguística. Esta interface digital tem como público-alvo professores, educadores, pais e demais agentes educativos.

  • Oksana Nikiforova Oksana Nikiforova
  • Vitaly Zabiniako
  • Jurijs Kornienko
  • Amanda Siliņa

Bereft user involvement, lack of user feedback, incomplete and changing user requirements are some of the critical reasons for the difficulty of IS usage, which could potentially reduce the number of customers. Under the previous authors' research, the method for analysing the behaviour of IT organisation users was adult, which was intended to improve the usability of the system and thus could increase the efficiency of business organization processes. The developed method is based on the use of graph searching algo rithms, Markov chains and Motorcar Learning arroyo. This newspaper focuses on detailing of method output data in the context of definition of their importance based on expert evaluation and demonstration of visual presentation of dissimilar UX analysis situations. The paper briefly reminds the essence of the method, including both the input and output data sets, and, with the assistance of experts, evaluates the expected event in the context of their importance in UX analysis. It besides introduces visualization image developed to obtain the output data, which allows verifying the input/output data transformation possibilities and expected data acquisition potential.

  • Igor Didier Sabukunze Igor Didier Sabukunze
  • A Arakaza

Nowadays, it is essential to use all concepts of Human being-Figurer Interaction to sympathize mobile application design usability. This manuscript aims to clarify a mobile application user experience (Take hold of online transportation), especially Grab foodservice users, using a user experience questionnaire. We noticed some Take hold of nutrient users' complaints, such as complaints related to the location, toll, and payment. The information was then analyzed using an excel data analysis tool. The findings showed that all 6 scales of the User Experience Questionnaire (UEQ) were good except the dependability scale. The outcome indicated that the value of bewitchery was ane.64, perspicuity 1.69, dependability 1.29, efficiency i.60, stimulation 1.57, and novelty one.21. In addition, the hateful scale value computed was favorable, and all values were more significant than 0.8 compared to the UEQ benchmark. The findings can be used for dependability comeback to reduce complaints from users.

Mobile map applications are typically used past a wide range of users. Users can exist diverse in their context attributes (e.k. map use feel, activities during map utilise), and several previous user experience (UX) studies have focused on agreement how some contextual factors influence the UX for designing maps that satisfy users' needs. A need for research remains to evaluate the relationship betwixt user context, UX, and variants of mobile map element design. In this article, nosotros present our research investigating the interplay of these factors through an empirical user study with citizens in Republic of austria. We created an online survey and generated 84 map variations, combining seven map-related tasks, three base map styles, two map detail densities, and two time-pressure level variants. We tested these map variations with 107 survey participants and related their UX to user context. Map-related tasks emerged as a ascendant factor modifying the map design UX. Further results showed that interactivity loaded map-related tasks were aided when paired with low detail-dumbo base maps, contrasting overlay features. We recommend future enquiry to analyze an extended fix of context attributes with additional participant data, to evaluate dynamic variations in context, and to find means to dynamically monitor mobile map design UX.

Virtual Reality Oral communication Training (VR-ST) helps trainees develop presentation skills and practice their application in the real world. Another benefit is straight feedback based on gamification principles. Information technology is non yet clear if direct feedback is accepted past participants. We investigated how direct feedback in a VR-ST affects the participants' technology acceptance based on the Technology Acceptance Model (TAM). Our report compares a VR-ST with direct feedback (n=100) with a simulation-based VR-ST (due north=100). The results show that direct feedback offers benefits to trainees by improving applied science credence. Further results show that VR-ST is more often than not more than accepted by participants without public speaking anxiety.

Technology has transformed maps into interactive tools for exploring and understanding the world. In this article, nosotros present the user experience (UX) design process for Flyover Country (http://flyovercountry.io), a mobile mapping application that visualizes information about the Earth'due south geology and history, allowing users to save and then admission the information offline while flying, driving, or hiking. Specifically, the newspaper presents a UX blueprint report that tracks the conceptualization, implementation, and revision of Flyover Country, and employs scenario-based design to walk through a pair of use instance scenarios that informed our UX design: science outreach to the general public and field trip guides for geoscience education. In the newspaper, we note UX design insights that are potentially transferable to other mobile mapping contexts, organizing insights by mobile representation blueprint (scale, projection, symbolization, and typography) versus mobile interaction blueprint (map entry bespeak, bottom navigation, floating action push button, and pull-up data panel).

  • Robert E. Roth Robert Eastward. Roth

In this paper, I hash out my feel over the past five years restructuring the cartography curriculum at the University of Wisconsin–Madison to account for sweeping shifts in conceptual framings, mapping technologies, and professional expectations. To guide the refresh, I aligned the cartography curriculum to an orthogonal pair of axes: the traditional distinction in cartography between mapmaking and map use, and an emerging distinction betwixt representation and interaction. A single grade was designed to cover each of the four pairwise antipodes of the orthogonal axes, with a fifth course positioned at the intersection of these axes to integrate influences and technologies. In the paper, I discuss the pedagogical philosophy guiding the revised curriculum, the organization of pattern concepts and technical skills taught in each course, and lessons learned from my experience for keeping curriculum malleable equally cartography continues to evolve.

The post-obit tutorial describes how to make an interactive choropleth map using the D3 (Information-Driven Documents) web mapping library (d3js.org). This tutorial is based on a laboratory assignment created in the fall of 2014 for an advanced class titled Interactive Cartography and Geovisualization at the University of Wisconsin–Madison. This is the 2d of ii On the Horizon tutorials on web mapping and extends a previous tutorial that used the Leaflet JavaScript library (run across Donohue et al. 2013; dx.doi.org/10.14714/CP76.1248). Fully commented source code for both tutorials is available on GitHub (github.com/uwcart/cartographic-perspectives). All code is distributed under a Creative Commons 3.0 license and available for unconditional use, with the exception of the files in the lib directory, for which certain license conditions are required as described in the file LICENSE.txt.

  • Sven Fuhrmann
  • William Throughway

This chapter focuses on approaches to facilitate user-centered pattern (UCD) betwixt distributed users and developers of collaborative tools. Additionally, it introduces a case study that illustrates the way these approaches accept been implemented to assistance remote collaboration in the environmental sciences. It introduces an initial prepare of online user centered assessment techniques that can be expanded into a more formal methodology, which merges electronic usability assessment with traditional techniques. Most current UCD assessment methods are derived from recommendations fabricated for unmarried user workspaces. Although these methods provide a basis for creating new collaborative geovisualization tools, they do non fully support collaboration between groups of usability examination subjects and software designers who are often distributed in space and usability measurements of geocollaborative tools running in a "real-world" distributed mode. Enquiry on collaborative geovisualization tool design has just begun and offers many interesting enquiry challenges.

  • Muki Haklay Muki Haklay

This book provides an introduction to HCI and usability aspects of Geographical Information Systems and Science. Its aim is to introduce the principles of Human-Computer Interaction (HCI); to discuss the special usability aspects of GIS which designers and developers need to have into account when developing such systems; and to offer a set up of tried and tested frameworks, matrices and techniques that can exist used within GIS projects. Geographical Information Systems and other applications of computerised mapping have gained popularity in recent years. Today, computer-based maps are common on the World Wide Web, mobile phones, satellite navigation systems and in various desktop computing packages. The more sophisticated packages that allow the manipulation and assay of geographical information are used in location decisions of new businesses, for public service commitment for planning decisions past local and central government. Many more applications be and some gauge the number of people beyond the globe that are using GIS in their daily piece of work at several millions. However, many applications of GIS are hard to learn and to master. This is understandable, as until quite recently, the chief focus of software vendors in the area of GIS was on the commitment of basic functionality and development of methods to present and dispense geographical information using the available computing resources. As a result, little attention was paid to usability aspects of GIS. This is evident in many public and private systems where the terminology, conceptual design and construction are all centred around the engineering science of GIS and non on the needs and concepts that are familiar to the user. This book covers a range of topics from the cognitive models of geographical representation, to interface design. It will provide the reader with frameworks and techniques that tin be used and clarification of case studies in which these techniques have been used for reckoner mapping application.