SEMINAR PRESENTATION

ON

USER EXPERIENCE (UX) DESIGN PRINCIPLES FOR AN EFFECTIVE

WEBSITE

PRESENTED

BY

…………………………………………………

COM/ND/22/………………

SUBMITTED TO

DEPARTMENT OF COMPUTER SCIENCE, SCHOOL OF

INFORMATION COMMUNICATION TECHNOLOGY

IN PARTIAL FULFILMENT OF THE AWARD OF ORDINARY

NATIONAL DIPLOMA (OND) IN COMPUTER SCIENCE

SUPERVISED BY:

…………………………………..
JUNE, 2024

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

TABLE OF CONTENTS
1. Title page
2. Abstract
3. Table of Content
4. Introduction

INTRODUCTION
THE USER INTERFACE VERSUS THE USER EXPERIENCE
Advances in personal computing and information technologies have fundamentally
transformed how maps are produced and consumed, as many maps today are
highly interactive and delivered online or through mobile devices. UI (user
interface) / UX (user experience) describes a set of concepts, guidelines, and
workflows for critically thinking about the design and use of an interactive product
(Garrett, 2010), map or otherwise. UI/UX is a growing profession in the geospatial
industry and broader technology sector (Haklay, 2010), with UI/UX designers
needed to engage with stakeholders and target users throughout large software
engineering and web design projects (see Additional Resources). This entry
reviews the conceptual principles behind UI/UX, emphasizing visual design
following other entries in the Cartography & Visualization section and
complementing the technologically-oriented User Interfaces entry spanning
GIScience in the Programming & Development section.
UI and UX are not the same, separated in their focus on interfaces versus
interactions. An interface is a tool, and for digital mapping this tool enables the
user to manipulate maps and their underlying geographic information. An
interaction is broader than the interface, describing the two-way questionanswer or
request-result dialogue between a human user and a digital object mediated
through a computing device (Roth, 2012). Therefore, an interaction is both
contingent—as the response is based on the request, creating loops of interactivity
—and empowering—giving the user agency in the mapping process with changes
contingent on his or her interests and needs (Sundar et al. 2014).
Therefore, humans use interfaces, but they experience interactions, and it is the
experience that determines the success of an interactive product (Norman, 1988).
UI design describes the iterative set of decisions leading to a successful
implementation of an interactive tool while UX design describes the iterative set of
decisions leading to a successful outcome with the interactive, as well as a
productive and satisfying process while arriving at this outcome. Accordingly,
UI/UX often is reversed as UX/UI to emphasize the importance of designing the
overall experience rather than just the interface.
SCHOLARLY INFLUENCES ON UI/UX DESIGN IN CARTOGRAPHY
AND VISUALIZATION
Within GIScience, interaction most commonly is treated by the research thrust of
geographic visualization (see Geovisualization). Interactivity supports visual
thinking, enabling users to externalize their reasoning by requesting a wide range
of unique map representations (DiBiase, 1990), thus overcoming the limitations of
any single map design. Geovisualization encourages this interactive reasoning for
the purpose of exploration rather than communication (see Cartography &
Science), with the goal of generating new hypotheses and spontaneous insights
about unknown geographic phenomena and processes (MacEachren & Ganter,
1990; MacEachren, 1994). As a result, much of the early research on interaction in
cartography and visualization is specific to scientific discovery, considering expert
specialists as the target user groups.
Today, UI/UX design requires consideration of use cases beyond exploratory
geovisualization and users beyond expert researchers. Interaction allows users to
view multiple (sometimes all) locations and map scales as well as customize the
representation to their interests and needs. Interaction also empowers users in the
cartographic design process, improving accessibility to geographic information and
dissolving traditional boundaries between mapmaker and map user (see
Cartography & Power). Increasingly, interaction enables geographic analysis,
linking computing to cognition in order to scale the human mind to the complexity
of the mapped phenomenon or process (see Geovisual Analytics). Accordingly,
interaction has been suggested as a fundamental complement to representation in
cartography, together organizing contemporary cartographic scholarship and
practice (Roth, 2013a; Figure 1). For discussion of additional influences on UI/UX
design in cartography and visualization, see Geocollaboration, Usability
Engineering, and Web Mapping.

DESIGNING THE USER EXPERIENCE

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

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

DESIGNING THE USER INTERFACE

As with representation design and the visual variables (see Symbolization & the
Visual Variables), an interaction can be deconstructed into its basic building
blocks, 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).
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.
Not all maps need to be interactive, and not all interactive maps require the same
UI design. Interface scope describes the baseline number of operators implemented
in an interactive product (e.g., just panning and zooming versus panning and
zooming plus searching, filtering), while interface freedom describes the precision
by which each operator can be executed (e.g., zooming any map scale versus only
~20 preprocessed scales). Together, scope and freedom determine the interface
complexity, or the total number of unique representations that can be created
through the interface. Much like managing information complexity in cartographic
design (see Generalization), managing interface complexity is essential for good
UI/UX design. The appropriate balance of flexibility versus constraint in the
UI/UX design ultimately should be determined through user input and evaluation
(see Usability Engineering).

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).
Less direct interface styles include menus, or the selection of one or more items
from a list (common for filtering), and forms, or the keying of characters into a
blank textbox (common for searching). The move towards mobile-first or post-
WIMP (Windows, Icons, Menus, and Pointers) design in cartography has
substantially changed how direct interface styles are designed in order to support
imprecise (finger-based) touch interactions (see Mobile Mapping & Responsive
Design). Command language and natural language styles are indirect and non-
graphic styles for implementing operators. Shneiderman & Plaisant (2010) provide
a comprehensive summary of the relative advantages and disadvantages of
interface styles for UI design.

VISUAL INTERFACE
Design As with paper or static cartographic design (see Aesthetics and Design), the
visual look and feel of the UI design is “more than just icing on the cake”: it sets
the tone for the entire user experience, from setting the mood and evoking an
appropriate emotional response through improving usability and subjective
satisfaction. UI design is a highly creative process, and creation of a coherent and
unique visual brand relies on iterative refinement of global design decisions (e.g.,
interface layout and responsiveness, application navigation, visual affordances and
feedback, color scheme, typefaces) and local design decisions (e.g., visual
metaphors for direct manipulation interface widgets, specific text phrasing for
icons, tooltips, and information windows). Nielsen (1994) provides a useful set of
usability heuristics for guiding visual interface design.

PERFORMANCE OPTIMIZATION
Performance optimization is a critical aspect of user experience (UX) design for
websites. Slow-loading pages, lagging interactions, and unresponsive designs can
frustrate users and drive them away from a website. In this section of the seminar,
we'll delve into the importance of performance optimization and strategies to
enhance website speed and responsiveness.
1. Speed Matters: Discuss the significance of page loading speed in user
experience. Cite statistics and studies showing how even slight delays in
loading times can lead to increased bounce rates and decreased user
satisfaction.
2. Factors Affecting Performance: Explore various factors that can impact
website performance, such as server response times, file sizes, code
efficiency, and network conditions. Emphasize the importance of
considering these factors during the design and development process.
3. Optimization Techniques: Introduce a range of optimization techniques to
improve website performance. This can include:
o Minification and compression of CSS, JavaScript, and HTML files to
reduce file sizes.
o Optimizing images through compression and appropriate formats
(e.g., JPEG, PNG, WebP).
o Implementing browser caching to reduce server load and load times
for returning visitors.
o Utilizing Content Delivery Networks (CDNs) to distribute website
content across multiple servers geographically closer to users.
o Lazy loading of images and content to prioritize the loading of visible
elements first.
o Deferring JavaScript execution or loading scripts asynchronously to
prevent blocking page rendering.
4. Mobile Optimization: Highlight the importance of optimizing performance
for mobile devices, considering their typically slower network speeds and
hardware limitations. Discuss techniques such as responsive design, mobile-
specific optimizations, and AMP (Accelerated Mobile Pages) to enhance
mobile performance.
 5. Performance Testing and Monitoring: Stress the need for ongoing
performance testing and monitoring to identify bottlenecks and areas for
improvement. Introduce tools and methodologies for conducting
performance tests, such as Google PageSpeed Insights, GTmetrix, and
WebPageTest.
6. Continuous Improvement: Emphasize the importance of a continuous
improvement mindset towards performance optimization. Encourage
attendees to regularly revisit and refine their optimization strategies based on
evolving technology, user behavior, and performance metrics.

FUTURE TRENDS IN UX DESIGN

Exploring future trends in UX design can provide valuable insights for creating
forward-thinking websites that anticipate and meet the evolving needs and
preferences of users. In this section of the seminar, we'll examine emerging trends
and technologies shaping the future of UX design:
1. Voice User Interfaces (VUIs): With the rise of smart speakers, virtual
assistants, and voice-enabled devices, VUIs represent a growing trend in UX
design. Discuss how VUIs offer hands-free interaction and accessibility
benefits, and explore strategies for integrating voice interactions into website
experiences.
2. Augmented Reality (AR) and Virtual Reality (VR): AR and VR
technologies are revolutionizing user experiences by immersing users in
virtual environments or overlaying digital content onto the physical world.
Explore potential applications of AR and VR in web design, such as virtual
product experiences, interactive storytelling, and immersive tours.
3. Gesture-Based Interfaces: Gesture-based interfaces, popularized by
touchscreens and motion-sensing devices, offer intuitive and engaging
interactions. Discuss the potential for incorporating gestures into website
design to enhance navigation, interactivity, and user engagement.
4. Neurodesign: Neurodesign involves leveraging insights from neuroscience
to create designs that resonate with users on a subconscious level. Explore
principles such as color psychology, visual hierarchy, and cognitive load
 optimization, and discuss how they can be applied to create more effective
and emotionally resonant website experiences.

CONCLUSION
In conclusion, user experience (UX) design principles are indispensable for
creating effective websites that resonate with users and drive meaningful
engagement. By prioritizing the needs, preferences, and behaviors of users, website
designers can craft experiences that are intuitive, seamless, and enjoyable.
Throughout this seminar, we have explored the core concepts of UX design and
uncovered key principles essential for designing effective websites. In essence,
effective website design goes beyond aesthetics—it encompasses thoughtful
consideration of the entire user journey, from initial interaction to task completion.
By adhering to UX design principles and continuously iterating based on user
feedback, designers can create websites that not only meet user expectations but
exceed them, ultimately driving business success and fostering long-term user
loyalty.
 REFERENCE
Andrienko, N., Andrienko, G., & Gatalsky, P. (2003). Exploratory spatio-temporal
visualization: an
analytical review. Journal of Visual Languages & Computing, 14(6), 503-541.
Cartwright, W., Crampton, J., Gartner, G., Miller, S., Mitchell, K., Siekierska, E.,
& Wood, J. (2001).
Geospatial information visualization user interface issues. Cartography and
Geographic
Information Science, 28(1), 45-60.
Crampton, J. W. (2002). Interactivity types in geographic visualization.
Cartography and geographic
information science, 29(2), 85-98.
DiBiase, D. (1990). Visualization in the earth sciences. Earth and Mineral
Sciences, 59(2), 13-18.
Dykes, J. A. (1997). Exploring spatial data representation with dynamic graphics.
Computers &
Geosciences, 23(4), 345-370.
Edsall, R., Andrienko, G., Andrienko, N., & Buttenfield, B. (2008). Interactive
maps for exploring spatial
data. ASPRS Manual of GIS.
Fitts, P. M. (1954). The information capacity of the human motor system in
controlling the amplitude of
movement. Journal of Experimental Psychology. 47(6): 381-391.
Garrett, J. J. (2010). The elements of user experience: user-centered design for the
web and beyond.
Pearson Education.
Haklay, M. M. (Ed.). (2010). Interacting with geospatial technologies. John Wiley
& Sons.
Howard, D., & MacEachren, A. M. (1996). Interface design for geographic
visualization: Tools for
representing reliability. Cartography and Geographic Information Systems, 23(2),
59-77.
Hughes, J. F., Van Dam, A., Foley, J. D., & Feiner, S. K. (original edition 1990;
latest edition
2014). Computer graphics: principles and practice. Pearson Education.
MacEachren, A. M. (1994). Visualization in modern cartography: setting the
agenda. Visualization in modern cartography, 28(1), 1-12.