1/17/2022

Design Theory for Web Maps

Ms. Aneeqa Abrar

Contents
 Cartographic Design Process
 Cartographic Interaction

Department of Space Science 2

1
 1/17/2022

Cartographic Design Process

 The cartographic design process is a cycle
that begins with a real or imagined
environment
 Map makers
 Collect data from the environment (through
technology and/or remote sensing)
 Use their perception to detect patterns and
subsequently prepare the data for map creation
 Uses the data and attempts to signify it visually on
a map (encoding), applying generalization,
symbolization, and production methods that lead
to a depiction that can be interpreted by the map
user in the way the map maker intended

Department of Space Science 3

Cartographic Design Process (cont.)

 Map user
 Reads, analyzes, and interprets the map by
decoding the symbols and recognizing patterns
 Make decisions and take action based upon
what they find in the map
 Maps influence our spatial behavior and
spatial preferences and shape how we view
the environment

Department of Space Science 4

2
 1/17/2022

Cartographic Design Process (cont.)

Department of Space Science 5

Cartographic Design Process (cont.)

 The cartographic communication process based
on “How do I say what to whom, and is it
effective?”
 How well does map communicate to your
audience?
 What is the motive, intent, or goal of the map?
 Who will read the map?
 Where will the map be used?
 What data is available for the composition of the
map?
 What resources are available in terms of both time
and equipment?

Department of Space Science 6

3
 1/17/2022

Cartographic Design Process (cont.)

 Map design has scientific and artistic rules
 Subtle changes in design (e.g. weight of a
label font for particular objects) can yield
big changes in how the map is read
 Cartographic design is driven by two
goals
 To create a map that appropriately serves the
map user and the map’s intended use
 To create a map that communicates
efficiently, with simplicity and clarity

Department of Space Science 7

Cartographic Design Process (cont.)

 Cartographic design involves
 Conceptualization of the map
 Visualization of the map
 Construction of the map
 During the design process we must take into consideration that our maps
are designed to create a functional visual communication device, are
visually pleasing, and are truthful and accurate
 The quality of a map is also in part an aesthetic matter. Maps should have
harmony within themselves. An ugly map, with crude colours, careless line
work, and disagreeable, poorly arranged lettering may be intrinsically as
accurate as a beautiful map, but it is less likely to inspire confidence.

Department of Space Science 8

4
 1/17/2022

Cartographic Design Process (cont.)

Department of Space Science 9

Cartographic Design Process (cont.)

 List of the basic steps involved in communicating geographic
information
 The design process can be distilled into a list of procedures
 These procedures are iterative, and need to be repeated until the map is
complete
 These procedures will sometimes need to be executed simultaneously, or
out of the prescribed order

Department of Space Science 10

5
 1/17/2022

Controls of the Design Process

1. Purpose
 Objective, what is being mapped
2. Reality
 Orientation (east-west map, landscape)
3. Available Data
 Raster or vector
4. Map scale
 Controls how many data can appear, symbol size and overlap
5. Audience
 Summary information or details, bigger symbols for people farther away?
6. Conditions of use
 Outside, inside, close up, far?
7. Technical limits
 Medium – digital or hardcopy

Department of Space Science 11

Cartographic Design Process (cont.)

Choosing Map Types
 Data Type
 Dimension
 Scale of Measurement
 Classification
 Symbolization

Department of Space Science 12

6
 1/17/2022

Cartographic Design Process (cont.)

Department of Space Science 13

Cartographic Design Process (cont.)

What to keep in mind when making maps?

Before During After

• Should I map this? • What spatial • Am I showing the data

• Who is going to look at representation of my honestly?
this map? data will best highlight • Is my map easy to
• What is the key message the information I want to understand?
(yes, just one) this map present? • Is everything I’ve
will carry? • What colors & mapped essential?
symbology emphasize
my map’s information?
• What is the appropriate
spatial scale for my map?

Department of Space Science 14

7
 1/17/2022

Cartographic Design Process (cont.)

What Does a Map Need?
 Slocum’s Map Elements
 Frame and neat line
 Mapped area
 Inset
 Title & subtitle
 Legend
 Data source
 Scale
 Orientation

Department of Space Science 15

Cartographic Design Process (cont.)

How do I design something people want to look at?
Visual Contrast Legibility Hierarchical Organization Balance Figure-Ground Organization

Department of Space Science 16

8
 1/17/2022

Cartographic Design Process (cont.)

 Planar Organization
 Concerns the way elements are arranged on a map
 Visual Balance
 Focus of Attention
 Internal Organization
 Hierarchical Organization
 Manner in which importance of elements is emphasized
 Visual Hierarchy
 Figure Ground
 Contrast

Department of Space Science 17

Cartographic Design Process (cont.)

 Balance is defined as the visual
impact of arrangements and is
factored by weight and direction
 Weight is the location, size, and
shape of map features
 Direction is the relative location,
shape, and subject of map features
 White space should be minimized,
however it can be used to separate
or group elements

Department of Space Science 18

9
 1/17/2022

Cartographic Design Process (cont.)

 Focus of Attention
 Map reader follows path from
upper left to lower right passing
through optical centre

Department of Space Science 19

Cartographic Design Process (cont.)

 An overall structure that defines
place and function of every
detail on the map
 We should strive for a creating a
structure of all elements…a place
for everything and everything in
its place

Department of Space Science 20

10
 1/17/2022

Cartographic Design Process (cont.)

 Visual Hierarchy is the
intellectual plan for the map and
the eventual graphic solution
that satisfies the plan

Department of Space Science 21

Cartographic Design Process (cont.)

 Organize elements on the map
into figures and grounds
 Figures are object of attention,
standing out from the
background
 Figures have “thing” qualities and
are important
 Grounds are formless
background space and are lost
in perception

Department of Space Science 22

11
 1/17/2022

Cartographic Design Process (cont.)

 Contrast leads to differentiation
 Helps us distinguish between
important and unimportant
parts of a map
 And can be achieved through:
line, texture, value, detail, and
colour

Department of Space Science 23

Cartographic Interaction
 Designing a map for the web
means that we are no longer App Design
Cartographic “Mapplication

designing for map readers, but

Design Design”

map users
 People interactive & manipulate App Design Cartographic Design

maps • Navigation • Cartography

• Forms • Basemaps
 No need for a one-size-fits all • Content • Symbology

approach •
•
Interactions
Web browsers
• Elements
• Content

 Design to respond to a map user’s •

•
Devices
Responsive
• Map Navigation
• User Interactions
needs

Department of Space Science 24

12
 1/17/2022

Cartographic Interaction (cont.)

Department of Space Science 25

Cartographic Interaction (cont.)

 What is Cartographic Interaction?
 Two-way dialogue between a user and a map mediated by a computing
device
 This an interaction (the series of requests and responses between user and map) from an
interface (the digital tool developed to support such interactions)
 User experience design (UX design), which emphasizes the achievement of user goals to ensure a
satisfying and valuable experience with the digital interface, compared to user interface design (UI
design), which primarily emphasizes the graphics, sounds, and haptics of the digital interface

Department of Space Science 26

13
 1/17/2022

Cartographic Interaction (cont.)

 Technology-centred design
 An approach which places focus on
the capabilities of the technology and
not necessarily on the capabilities of
the learner
 User-centred design (UCD)
 Approach to interactive system
development that focuses specifically
on making systems or applications
easy to use

Department of Space Science 27

Cartographic Interaction (cont.)

 Why Provide Cartographic Interaction?
 Exploration
 The examination of information from multiple perspectives to generate new research
hypotheses and to reveal unknown insights about the phenomenon under investigation
 Analysis
 The testing of newly generated hypotheses and the search for relationships in newly
revealed insights, both to answer questions rather than generate them
 Synthesis
 The integration of insights generated from multiple iterations of exploration and analysis to
develop a final, comprehensive solution for presentation
 Presentation
 The map-based dissemination of findings or results to a wider audience

Department of Space Science 28

14
 1/17/2022

Cartographic Interaction (cont.)

 When Should Cartographic Interaction Be Provided?
 Interactive versus static maps, and, when cartographic interaction is
appropriate, how much interaction – interface complexity
 WIMP vs Post-WIMP Interfaces
 Interface Complexity
 Interface Scope
 The number of supported interactions
 Interface Freedom
 The precision in performing each interaction

Department of Space Science 29

Cartographic Interaction (cont.)

WIMP Interfaces Post-WIMP Interfaces
 Windows  Touchscreens
 Icons  Multitouch inputs
 Menus
 Pointer

Department of Space Science 30

15
 1/17/2022

Cartographic Interaction (cont.)

 Cartographic interfaces exhibit three fundamental characteristics
 The cartographic interaction
 The interface style
 The interface design

Department of Space Science 31

Cartographic Interaction (cont.)

 Who Should Be Provided with Cartographic Interaction?
 There are three user characteristics:
 User’s innate perceptual and cognitive abilities
 User expertise
 User motivation
 The degree to which the user wishes to make use of the cartographic interface out of
either interest or need

Department of Space Science 32

16
 1/17/2022

Cartographic Interaction (cont.)

 Where Should Cartographic Interaction Be Provided?
 Input device - the way in which the user initiates the two-way interaction
 Interaction speed
 Network bandwidth size & Hardware processing power
 Display device - the way in which the map responds in the two-way interaction
 Characteristics of display devices
 Screen resolution
 Screen size
 Colour depth
 Luminance capability
 Refresh rate
 Expected viewing distance
 Display continuity
 Lighting conditions
 Portability

Department of Space Science 33

Cartographic Interaction (cont.)

 How should cartographic interaction be provided?
 Three O's of Cartographic Interaction
 Objective-based
 At the stage of forming the intention
 Operator-based
 At the stage of specifying an action
 Operand-based
 At the nexus of execution and evaluation
 Stages of interaction
1. Forming the goal
2. Forming the intention
3. Specifying an action
4. Executing the action
5. Interpreting the state of the system
6. Evaluating the outcome

Department of Space Science 34

17
 1/17/2022

Thank you!

18