GLS680

CHAPTER 4:
WEB CARTOGRAPHY (DESIGN
PRINCIPLES APPLIED TO THE WEB)
1 Sr Abdul Rauf Abdul Rasam
Universiti Teknologi MARA (UiTM) Malaysia

Advanced Source:Barend Köbben

Cartography ©2002 International Institute
for Geo-information Science
GLS680 and Earth Observation (ITC)
MAKING YOUR FIRST WEB MAPS USING ARCGIS?

GLS680
2
OVERVIEW
 Site design
 interface design
 content organisation

GLS680
 site elements

 Page design
 layout
 text

 Graphics

 Checklist for web design

 Web map design in practice

3
BUILDING YOUR OWN SITE
Considerations
Purpose of the site
Why should they visit my site

GLS680
What do I want to tell the world
Who is my audience
Professionals or entertainment
What kind of information do they want
What attracts them to your site
Hardware software requirements on user-side
Your expectations
How many visitors
Response
4
INTERFACE DESIGN

 design clear aids

GLS680
graphics are needed, they attract the user‟s
attention
use conventions (forward arrow means “next
page”)

 basic problem in Web-navigation is the lack of sense where

you are within the local structure.
 no dead ends, user always needs to be able to go somewhere
in your site 5
ORGANIZE THE INFORMATION

 Result

GLS680
Well structured information, ...
… organized in modular units

Non-sequenced navigation, …
… many internal links

Logical organization of
Information …… but flexible

6
THE NATURAL FEEL OF THE SITE
 Visitors should find the way...

Hierarchy

GLS680


Standard is:
Home page
Sub- Menus
Content pages

Be consistent:
Group, order, label
information
Repeat the user-interface
7
SCHEME
 Design a scheme

 a shallow scheme has long shopping

list of unrelated subjects, no order,

GLS680
difficult to find the way

 a deep scheme has too many nested

menus, takes too long to get to the
content, easy to loose the way

 a balanced structure gives quick

access to information, user “feels” where
to find information
8
SITE ELEMENTS
 Home pages

GLS680
 a home page is the main point of entry
at the top of the organization chart
it is the www url
it has to be:
informative
basic navigation
attractive in design
9
SITE ELEMENTS
 Menu pages

GLS680
Menus and submenus for large sites
the Home-Page will get too complex
are a kind of secondary home-pages
pages should all refer back to these pages
but also to the main home-page
can be in a frame next to the content pages

10
SITE ELEMENTS
 Content pages

GLS680
 content contains the actual information
always has a link to the submenu and the
homepage
will have “internal” links to related content pages
can relate to other (“external”) URL‟s
open external URL‟s in a new browser window to
avoid:
1. loosing visitors
2. site-confusion (where am I?) 11
PAGE DESIGN
 Graphical balance


GLS680
 the visitor needs to be drawn into your content
 solid text will appear as undifferentiated gray
 top is most important
 use pastels for
 use visual markers sparingl
 avoid patchy layout


 12
PAGE DESIGN
 Visual hierarchy

GLS680
 emphasize important elements
 organize content logically
 user first looks at shape and colour
secondarily picking out information
use layout, typography and illustration to lead the
readers eye through the page.

 western oriented visitors scroll the page from left to

right, and top to bottom
13
PAGE DESIGN

 Online versus offline

GLS680
 online
short text blocks
minimize scrolling

 offline
long text
user will read from paper
14
SCROLLING

 Page length

GLS680
 Less than 10% scroll beyond the
top

 Long pages load slower

 People look for information in

small units

 Small units are easier to

navigate through
15
PAGE DESIGN
 Consistency
• use a layout grid
built a consistent rhythm and unity across all pages that:

GLS680
•
 is not boring
 easy to find the way

• people will remember the site

• set out your own style rather than to “decorate” with
graphics “borrowed” from other sites

16
TEXT

 Type families („fonts‟)

 Serif fonts

GLS680
 Courier, Garamond, Times New
eg:

Roman
 Sans Serif fonts

 Arial, Comic Sans, Haettenschweiler,

eg:

Verdana, Lucida, Tahoma

17
TEXT

 Font style
 many variations possible, basic ones:

GLS680
normal
bold

italic

bold italic

18
TEXT

 Another variation in roman script is between

CAPITALS (or UPPER CASE) and lower case

GLS680
19
GRAPHICS: OPTIMIZING GRAPHICS

Image size depends on:

pixel dimension (always state this in HTML–code!)

GLS680
File size on server depends on:
pixel dimension
amount of colours
compression techniques
carefully choose colour space and compression
(and thus file format) for every type of graphic
20
GRAPHICS

 Colour space
 True colour

GLS680
8 bits per colour
millions of colour

• 1 bit has two options on or off

• so for 8 bits it’s 82 = 256 grey tones per colour
• for the three colours RGB it will be 256 x 256 x 256
possibilities = 16,777,216 different displayable colours

21
GRAPHICS
 Colour space
 Indexed colour

GLS680
adaptive (related to colours in image)
Allocate one per pixel to list colors, allow
256 colors in one image

web safe (choice of 216 colours), six intensity levels of

RGB
6³ =216
22
Colours
Web safe palette
•216 fixed colours

GLS680
•very bad graduated colours (dithering)
•needs special design

23
OPTIMIZING GRAPHICS
 Resolution

GLS680
• The monitor sets the limit:
usually 72 dpi

• image in higher resolution is remapped => wasted

• produce images in correct resolution

24
STANDARDISED GRAPHIC FORMATS- RASTER
 GIF (Graphics Interchange Format)
 uses indexed colour

GLS680
 uses simple RLE (run–length encoding) compression

best for full tints (graphs, maps, drawings)

 supports transparency

 supports animation (poor man‟s video)

 JPEG (Joint Photographic Experts Group)

 uses full colour
 uses flexible, customisable but “lossy” compression

best for graduated tones (photo‟s)

25
STANDARDISED GRAPHIC FORMATS - VECTOR
 SVG (Scalable Vector Graphics)
 official W3C standard

 text format (XML-based)

GLS680
 describing two-dimensional graphics

 three types of graphic objects:

 vector graphic shapes

 images

 text (as fonts, searchable)

 allows for animation and scripting

 Flash (Macromedia Shockwave)

 proprietary format

 binary format

26
A CHECKLIST FOR WEB PAGE DESIGN
• A set of rules that can lead the way for effective
design

GLS680
• No algorithms, just „rules of thumb”

27
KEY CONCEPTS
• All elements should be legible
• Visual patterns should reflect logical
organisation of information

GLS680
• Text is generally not as readable as on paper
• A picture says more than a 1000 words
• Icons can be very helpful, but only if designed
right
• Use animation sparingly

28
1. MAKING DISPLAY ELEMENTS LEGIBLE
 All elements on a screen should be legible – be
capable of being both apprehended and deciphered.

GLS680
 1.1. any element must be large enough to be seen.
Can you decipher all elements in the display easily?
If not, consider making them larger.
 1.2. Any element must contrast sufficiently with
its background. Consequentely, avoid “busy” or
distracting backgrounds.


29
2. ARRANGING DISPLAY ELEMENTS
 Good design reveals to the reader the structure of
the information. Select visual patterns that reflect the
logical organisation of the information.

GLS680
 2.1. Group related items through the use of space,
graphical boundaries or similarities in lightness,
colours, texture or orientation. Unrelated items
should be visually different or spatially seperated
from one another.
 2.2. Reveal the author‟s view of the relative levels of
importance among the elements.

30
 2.3. Designs should be consistent and predictable.
Elements that are equivelant logically or functionally
should be similar visually. Consistency should also be

GLS680
apparent in the pattern or arrangement of elements
on the screen.
 2.4. The design of the page should reveal the intended
sequence that readers are expected to process it.


31
3. ENSURING TEXT IS READABLE
 3.1. Choose fonts designed specifically for the screen
(eg. Verdana, Geneva, Georgia) In general, sans serif
fonts are preferred.

GLS680
 3.2. Use 12 or 14 point size text for continuous
reading.
 3.3. Avoid the overuse of bold and italic.

 3.4. Avoid all capitals text.

 3.5. arrange type aligned flush left, with „ragged‟ right

edge. Using „Justification‟ causes non–uniform
spacing that decreases readability.
32
 3.6. Avoid lines shorter than 40 characters or longer
than 60 characters (in continous reading text).

GLS680
 3.7. Provide extra space between lines (called
„leading‟), typically between 50 and 100% of type size.
 3.8. Mark paragraphs with blank lines of text rather
than indenting to help the reader see each paragraph
as a “chunk” of text.
 3.9. Use headings and subheadings to reveal the
organisation of the information and to suggest
hierarchical levels.
33
4. USING PICTURES AND ILLUSTRATIONS
 A picture says more than a thousand words... But
take these tips into account:

GLS680
 4.1. Avoid using pictures that are only decorative (and
have no other function).
 4.2. supplement all visuals with explanatory text or
labels to ensure that they are interpreted as intended.
 4.3. Use visuals to reveal the structure or
organisation of the information – particularly when
the structure is not linear.

34
5. USING ICONS
 Icons are not always easy to interpret nor interpreted
uniformly. Therefore, consider using the following
strategies when using icons:

GLS680
 5.1. Label all icons

 5.2. Whenever possible use conventions – icons whose

use and meaning the user is already likely to be
familiar with.
 5.3. Design icons groups, that differ in their “global”
characteristics to ensure the speed and accuracy of a
visual search for particular icons in a display.
35
6. USING ANIMATION

 Use motion only when necessary:

GLS680
 6.1. to attract the viewer‟s attention

 6.2. to convey actual changes over time

36
WEB MAPS: DESIGN IN PRACTICE
• Some examples
• Further reading:

GLS680
“Aspects of Web map design in practice”
 a web site by Jeroen van der Worm with a cartographers's
view to Web maps
 in self study section on site:
http://kartoweb.itc.nl/webcartography/courses/elec10/Webdesign_file
s

37