Download Fachhochschule Regensburg

Fachhochschule Regensburg
Prof. Dr. Ernst-Gerd vom Kolke
Web Design
1. Introduction
Interactive Hypermedia on the Internet does not pose any novel challenges to
information designers. Most of the guidance you need to create and design WEB pages
is not radically different from structuring information in a printed book. Many design
elements to be found in a book can be applied to electronically provided information. On
the other hand, a „one to one“ assignment of these principles for printed books to
electronic media wouldn’t meet the requirements of the WWW.
Especially the Web’s hyperlink technique in combination with the insertion of different
hypermedia (graphics, audio, video) in web pages makes innovative design concepts for
web pages possible.
Another issue has to do with the presentation of information on a monitor. Usually the
screen size doesn’t allow showing a complete page. Therefore the user has to scroll
down to see all the information. Beyond, pages with a solid part of text need to be
designed so to attract the eye with visual contrast. Also the page (file) size matters!
Since many users are not equipped with high bandwidth lines, the number and size of
graphic elements on web pages can significantly influence the performance of one’s web
access.
To summarize, it is necessary to define a specific web design to make use of the
opportunities of the medium.
2. User orientation
The first step in designing a web site is to define a set of goals. In particular the target
audience has to be defined. By identifying the potential users of your Web site, you can
structure the site design and the content to meet the needs and expectations of this
audience. This has to be broken down to every single web page, so to make sure that
every page is targeted to the potential user.
A second level has to do with the way the page content is presented to the user. With
emphasis on factual information (e.g. on university web sites) visual elements are not
important and should be used carefully. Is a web page, e.g. as part of an onlinemarketing campaign intended first to generate attention in order to inform about products
and services later, visual stimuli are a design tool to attract this attention.
3. Basic web site layout
Having identified your intended user group next step is to organize the information
„chunks“. Of course such a compilation of information can just be a snapshot, because
1
the information will change and it is the basic nature of electronic Information systems to
be able to implement these changes faster than printed media could do.
Logical information structure
The information structure of a web site can borrow from the information structure of a
book. Book information has long since been organized in hierarchical form. Every reader
of a book expects a hierarchical ordering of information in chapters, sections and so on.
We see this as a natural hierarchy of information structuring. Therefore this natural
structure should underlie the organization of information „chunks“ on the web, last but
not least because the user „expects“ this structure within a web site. On the other hand
it’s one of the special features of the WWW to „leave“ this hierarchical structure and to
(hyper)link other pages, which are thus immediately accessible.
This is definitely an extension in terms of accessing information but on the other hand
this unorganized „hopping“ from information to information is very hard to transform into
a coherent information picture in our mind. If you ever were surfing on the Internet you
know about this phenomenon. To build a well-organized web site therefore requires to
integrate hyperlink technique into a strong hierarchical information structure. Thereby
you can present a reasonable (pre-) structuring of information but allow deviating from
this structure via hyperlinks.
Disposition
1.Part
1.1.Chapter
1.1.1. Section
1.1.2. Section
1.1.3. Section
1.2. Chapter
1.2.1. Section
1.2.2. Section
1.2.3. Section
Caption
Chapter level
1. Section level
2. Part
2.1. Chapter
2.1.1. Section
2.1.2. Section
2.1.3. Section
2.2. Chapter
2.2.1. Section
2.2.2. Section
2.2.3. Section
2. Section level
3. Part
3.1. Chapter
3.1.1. Section
3.1.2. Section
3.1.3. Section
3.2. Chapter
3.2.1. Section
3.2.2. Section
3.2.3. Section
Information structure in a book and
in an electronic information system
2
The best way to organize information is to build a hierarchical tree with parts, chapters
and sections as branches (technically: directories and subdirectories). Every additional
web page will become an element of this tree structure.
To structure information as a hierarchical tree facilitates to organize the information
technically into a file structure. Since files on a hard disc are always organized in a
hierarchy of directories and subdirectories a hierarchical organization of the underlying
information makes it easy to „convert“ the information structure into a file structure.
It is recommended to define file and folder names always in lower case letters.
Operating systems differ in how they handle upper and lower case letters. While UNIX
differentiates between upper and lower case, DOS/WINDOWS doesn’t. Defining file/
folder names just in lower case letters therefore reduces wrong input of your target
audience. Above, think about to avoid the tilde sign (~). It is used in UNIX to define
subdirectories, but DOS/ WINDOWS users might be confused, because they are not
familiar with this sign.
The described information structure is similar to a loose-leaf catalogue whose pages can
pretty easily be exchanged because of its modular structure.
Hierarchical levels of information
Building a hierarchical disposition for the information on your web site you should be
concerned about the number of hierarchical information levels. Reading a book
becomes less enjoyable the more your information structure is partitioned and thus
becomes more complex.
1. Part
Part level
1.1. Chapter
1.1.1. Section
Chapter level
1.1.1.1. Subsection
Section level
1.1.1.1.1. Sub subsection
Subsection level
1.1.1.1.1.1. Sub sub subsection
Sub subsection level
Sub sub subsection level
A too deep hierarchical structure
3
This is all the more true for electronically presented information of a web site. A too deep
hierarchical structure forces the user to “click” through a number of hyperlinks to get to
the relevant information level and to see the wanted information on his monitor.
On the other hand, a too shallow information structure with just a couple of sublevels
leads to very overloaded parts of your information structure, because they are too
“wide”. Above, it becomes more difficult to connect –and for the user to understand- a
certain level description with the underlying concrete information.
A too shallow hierarchical structure
In case, a deep hierarchical structure is unavoidable, it is recommended to create a
“table of content” consisting of hyperlinks, which allow direct access to deeper
hierarchical information levels.
Therefore, a hierarchical information structure should be a well balanced tree. Your
users will easier understand the organization of the provided information and be able to
access the information quickly.
4. Page layout
A comprehensible information structure for a web site can be supported by sophisticated
page layout. Central to a good page layout grid are repetitive elements, which are part of
every web page. This gives your web site a consistent (graphic) identity. Such a
consistent approach to layout and navigation gives the user the impression of a well
thought out and organized collection of information. In addition, repetitive graphical
elements can extend an already predefined “corporate design” of the institution to their
web presence.
4
Repetitive graphical elements at Deutsche Bank24
5
Using repetitive graphical elements means to enlarge the file size of every web page.
Therefore, the insertion of graphical elements has carefully to be calculated in terms of
low bandwidth users. If it takes too long to load a page, these users might leave the
page before they have read the information.
Human factors research has shown, that for most computing tasks, the threshold of
frustration in terms of system response to routine tasks, is around 20 sec. There is no
reason to expect Internet users to be more tolerant than “normal” computer users. In
addition, users on the internet usually experience different speed pattern (sometimes
fast access, sometimes slow access). To have a fast internet session in mind makes a
user certainly less generous with respect to longer transmission times caused by
graphically overloaded web pages.
Supposed to have a “normal” modem with 56Kb/sec, the transition rate is about 7 Kbyte/
sec. Supposed further, you don’t want to wait longer than the already mentioned 20
seconds this mounts to a standard value of about 140 Kbyte per web page. Establishing
a web page layout should therefore take this standard value into consideration as a kind
of upper limit.
4.2. Page Design – Header and Footer
Basically, every web page should have a tripartite structure: page header and footer and
the virtual information part. Header and footer contain all repetitive elements, while the
information part changes from page to page.
As a rule of thumb, a web page shouldn’t be longer than 4-5 screens referred to a
relatively low resolution of 800 x 600 pixels. Users are supposed to feel uncomfortable
with longer pages, because they have to scroll very often and might run into trouble to
loose the overall context of that document. Therefore it is proposed to “cut short” longer
page contents into shorter pages which are linked together. If it is unavoidable to provide
the longer version of the text, one of the shorter pages should contain a link including
the file size, which points to a second file to download or print out the whole text. This
text is advised to feature the URL, so to make it easier to find updates and to make
correct citations of this text.
Page Header
The page header should contain a banner graphic, which identifies the page as
belonging to the institution. As far as the homepage contains a graphic, expressing the
corporate design of the institution, the banner graphic on all following pages should be
related to this graphic.
6
Banner graphic
Caption
Page Header with Banner Graphic and Page Heading
To use the same banner graphic for all pages of a web site excluding the homepage not
only establishes a consistent design, but facilitates to access several pages of your web
site. WWW-Browser save every page element temporarily. So while accessing a second
page containing the same repetitive element, e.g. banner graphic, the browser gets this
graphic from a so called cache memory on your hard disc. Thus, there is no need to
transfer the graphic a second time while accessing another page.
Besides the banner graphic there has a page title to be defined for every page. But the
title of a web page is no title in a regular sense. A title line in a web page doesn’t show
up on the web page itself, but as an insert in the blue part at the top of your browser.
Thus, there is just limited space (65 characters) available to define the title. Moreover,
this title line is the text entry for this page within your bookmark or history list. Eventually
titles of web pages can be searched separately in some of the Web searchengines.
This shows that the definition of a (web) page title is of particular importance. Within the
process of defining a page title first predefine keywords, then frame a complete
sentence with these words, but leave out dispensable conjunctions, adverbs and
adjectives.
Since the page title isn’t a visible part of the page, the page header needs to contain a
caption and maybe subtitles. It is advised to use the same statement for the caption as
for the title. Subtitles can express the “position” of the page within the hierachical
infomation tree.
There is no suggestion how big to choose the font for caption and subtitles. H1- sized
captions for example look a bit “glaring”. But ultimately it is a matter of personal
evaulation. It’s more important to use these once defined font sizes throughout your web
site to create a consistent layout of your pages.
In addition to defining captions and subtitles the page header should contain
navigational links, which allow the user to move within your web site. Following these
links you move back or forth through an ordered series of pages of your web site. In a
way it’s like “jumping forward resp. backward” among the pages or chapters of a book.
But here you can make explicit use of the hypertext technique.
7
Banner
[Home][Back][Forward][Top]
Caption
Navigational links within a web site
Navigation buttons shouldn’t be confused with the Back and Forward Buttons built in in
your web browser. Paging back through the preceding pages of an ordered sequence of
pages is different from going back through a series of links you have previously visited
with your browser. Having accessed a page on a new web site, the navigation button on
that page leads to other pages within this web site, while the Back button in your
browser leads you back to your previous web site. Therefore the browser Back and
Forward buttons should be augmented with Next page and Previous page buttons,
home button and the like, built into the page itself.
1. WWW-Server
2.WWW-Server
Browser Buttons to navigate among diferrent links
8
For a hierarchical information structure at least the following four navigational links
should exist within a page:




Link to Previous Page
Link to Next Page
Link to Homepage
Link to Top of this part/ chapter/ section
Navigational links can be designed as graphical buttons. This being the case, they
should contain text to understand the purpose of that button.
Navigation bars can be bypassed if you use frames to present your web pages. Frames
within your web site allow you to present more than one hierachical level within your
browser window.
Web page with frames
The above example shows that pages on a lower level (Service Konto 24, Online Konto
24, Junges Konto 24 and so on) can be shown in the right part of the frame just by
clicking on one of the links within the left part of the frame. Also there are several links to
switch to a different topical area on the same hierarchical information level (Sparen,
Klicken Sie ihre Bank an and so on), without having to change the frame. Apparently
there is no need for a Previous or Next button. Insertion of navigational tools can thus
be reduced.
9
Page Footer
Page footers should carry additional information allowing the user to classify the page as
part of a larger web entity.
The elements:

Who has written the page. The author is the contact person for questions, remarks,
comments and so on. His name and his, at best interactive, e-mail address, should
be part of the page footer to facility immediate response.

Where does this page come from. The name and the logo of the institutionen that
runs the web site should be mentioned in the page footer.

When was the page generated resp. Updated. The creation/ update date is an
important information about how current is the information on your page. The date
should have an international accepted format, like day.fully written month.year, e.g.
11. November 1999 , so not to confuse american users with german date formats.

Add a copyright sign to your page in order to protect the page content against
unauthorized use.

Add the URL of your document. Every web page has a unique uniform resource
locator (URL). URLs will not show up automatically on every printout or saved
version. Thus the user may get “disconnected” from the original location of your
page. Adding the URL avoids this.
Banner
[Back][Forward][Top] [Home]
Caption
Institution
Author
Date
URL
Page Footer of a web page
For pages more than 3-4 screens long, navigation bars can be added to the page footer,
so to avoid unnecessary scrolling back to the top of the page.
The Page Footer of the homepage should carry the same contact information as the
letters of the institution. So, in addition to the above mentioned features the (homepage)
footer should contain the street/ p.o. box adress as well as the telephone/ fax number
including area code.
10
4.2. Page Layout – the Information Part
A good page layout for the information part has to consider what is special about
presenting information on a monitor. Contrasting to printed text, informationen on a
screen has to provide visual contrasts to stimulate the user’s eye. A user will first
recognize the document structure, e.g. font size and number of captions/ subtitles in
relation to the presented text paragraphs and surrounding empty spaces.
Therefore the text should be split in paragraphs separated by an empty line. A
paragraph shouldn’t exceed half the screen and at best be supported by a “paragraph
title” (keyword). Contrariwise the paragraph becomes kind of an annotation of the
keyword. To contrast keyword and paragraph, web pages shouldn’t use HTML-headings
but bold and/or italic fonts for the keywords. HTML-headings should just be used for
captions and maybe other parts of the page header.
Web browsers as a standard use the complete screen width to present text. Continuous
text will be wrapped at the end of a line. But text presented that way is pretty hard to
read.
To use the WWW you need a special piece of software, called browser. The browser allows the user to
retrieve documents and files from the WWW and other Internet services,e.g. FTP. To be able to access
the information requires accepting and following certain rules (protocols). Three of the most important
are:
URL: To have a frictionless exchange of information via World Wide Web (WWW) a name resp.
address schema is required, which allows uniformly locating resources on the Internet. (URL=Uniform
Resource Locator)
HTTP: To send and receive (hypertext) documents over the Internet requires a unique transmission
mechanism. (HTTP=Hypertext Transfer Protocol)
HTML: To transmit formatted documents (bold face, Italics, table structures and the like) over the
Internet, there is a need for a formatting system that doesn’t increase the file size too much. Web pages
are formatted along predefined markups, which the browser „recognize“. (HTML=Hypertext Markup
Language).
Among the WWW-Browser Netscape and Internet Explorer are the most popular and most widespread
ones.
Traditional text presentation
In the context of electronic infomation it’s a better approach to create visual contrast by
structuring the content in a bulleted list form. Above, advanced features of HTML should
be considered like using BLOCKQUOTE to present in narrower text paragraphs or the
table structure.
11
WWW-Software
To use the WWW you need a special piece of software,
called browser. The browser allows the user to retrieve
documents and files from the WWW and other Internet
services,e.g. FTP.
WWW-Protocols:
To be able to access the information requires accepting and
following certain rules (protocols). Three of the most
important are:
URL
 To have a frictionless exchange of information via World
Wide WEB (WWW) a name resp. address schema is
required, which allows uniformly locating resources on the
Internet. (URL=Uniform Resource Locator)
HTTP
 To send and receive (hypertext) documents over the
Internet requires a unique transmission mechanism.
(HTTP=Hypertext Transfer Protocol)
HTML
 To transmit formatted documents (bold face, italics, table
structures and the like) over the Internet, there is a need for a
formatting system that doesn’t increase the file size too much.
Web pages are formatted along predefined markups, which
the browser „recognize“. (HTML=Hypertext Markup
Language)
Widespread Browser
Among the WWW-Browser Netscape and Internet Explorer
are the most popular and most widespread ones.
Text design with bulleted lists and table structure
Text formatting like boldface, italics etc., shouldn’t be overused. Otherwise the intended
effect turns into the contrary. Links within a text should itself have meaningful text, which
at best corresponds to the title of the linked page. If the linked page is pretty large (in
terms of file size) consider to add the file size to the link text. Links and HTML syntax
should in any case be tested, the page text be checked with a grammar program.
As with the visual presentation, the “linguistic presentation” should follow certain rules.
Prefer short sentences and come quickly “to the point”. Avoid unnecessary words in your
sentences and check paragraphs for unnecessary sentences to increase the force of
expression. One of the reasons for bad results following a search in one of the search
engines has to do with badly written text on web pages.
5. Graphics on a web page
The greatest advance of the WWW over former information systems on the internet like
the gopher system lies in the possible combination of text and multimedia, above all
graphics. The fast dispersion of the WWW comes along with many pages containing
multimedia elements from graphics to audio and video.
To integrate graphics into a webpage should be a considerate choice in two respects.
First of all, heavy use of graphics on a web page leads to a “visual overload” which
12
contrasts the idea to create an “impressive” webpage. Second, graphics and other
multimedia elements blow up your file size, thus causing longer response times until the
page is finally transmitted.
Therefore, the use of graphics on your webpage shouldn’t be an end in itself but be
aligned to how it enhances the value of your page and supports the information, which is
presented. Irrelevant graphics –seen from the content of your page- just irritates and
distracts the user from your information.
The WWW uses two graphic formats, which both allow to compress the size of your
graphics dramatically. Graphics Interchange Format (GIF) was originally developed by
Compuserve. A second format is Joint Photographic Experts Group (JPEG or JPG),
which is newer. When it comes to detailed features both are different, but for the
“everyday”-user these differences don’t matter and so both are used likewise.
But in terms of graphics on a web page it is not just about the number of graphics but
also about how implemented graphics fit on your monitor, how they are transmitted and
how big the file size needs to be.
The horizontal (and vertical) width of a graphic can precisely be defined. This is relevant,
if you consider different display resolutions, ranging from 640 x480 pixel to 1024x768
pixel and beyond. Now, a graphic created for a resolution 1024 x 768 pixel appears
much bigger on a 640 x 480 screen and may be even spread beyond the area of a 640 x
480 screen, urging the user to scroll the screen to see the whole graphic. This definitely
deteriorates the intended impression of this web page. Thus, a graphic for a web page
should at maximum be adjusted to a 800 x 600 pixel resolution, may be even to 640 x
480 pixel.
Resolution:
1024x768
13
Resolution:
640x480
Web page with different resolutions
Graphics should as a basic principle be “interlaced” transmitted. The interlace-procedure
comes with the GIF-format and stands for a transmission occuring at first with a low
resolution and the text of the page. Then the resolution will successively be enhanced in
4 steps until the graphic shows up with its intended resolution. This procedure allows the
user to access text and hyperlinks very quickly, while the graphical components will still
be loaded. This “artificially reduces” the transmission time of a web page.
GIF- Graphics allow to select one color to become invisible. So, if this color is the
background color surrounding the graphic this graphic becomes transparent. This allows
to create a “seamless” transition from your graphic to the background of your page.
The file size of graphics can be manipulated by changing the number of colors. The
more colors the graphic has, the larger the file. Often differences in the number of used
colors can not be visually recognized, so that the overall impression of that page is not
affected. On the other hand reduction of colors reduces the file size and thus the time it
takes to transmit the complete page.
Graphical elements should preferably be loaded with height and width tags. Height and
Width tags tells the browser how much page space to devote to the graphic. Thus the
browser can already lay out your Web page and determine the text flow even before the
graphics files have begun to download. Thereby the user can already start to read the
page while the graphics are downloading.
14
The GIF format allows you to “imbed” a graphic into the background by making the color
surrounding the graphics object transparent. Thus an image background can be
“removed”,which gives the image a better appearance.
Another way to optimize the use of graphics on web pages is to transmit a graphic first
with a low resolution and therefore short time to transmit the page. A user can already
get the whole page with all design elements, although the high resolution version of the
graphic(s) will still be loaded. As a variant, a bigger graphic can be loaded first as a
thumb nail version, allowing via link to load the complete graphic later on.
Graphics can be built to be interactive as a clickable graphic. Apart from a higher file
size for that web page in any case this graphic should have clearly marked off areas to
facilitate navigating within that graphic.
Graphics can also be used as a background, underlying every page of the website and
thus contributing to a “corporate (web) design”. But be aware of some important aspects:
 First: Background and text must sufficiently contrast in order not to overextend the
reading skills of your users.
 Second: Browsers allow to suppress background graphics, thus using individuall
colors on the screen and preventing the targeted effect.
 Third: Background graphics enlarge the file size of your page and therefore the
transmission time for your page.
Browsers allow to uncheck the automatic loading of images, that are part of a web page.
Many users use this feature to speed up the access to web pages. In this regard it’s a
matter of “nettiquette” to add an alternate describing text to your graphics. Thus, users
can decide if they really need that graphic to understand that page and have to reload
these images in a second step or if the text of the web page already provides the
wanted information.
A page design has to cover different demands. Therefore its layout should be tested with
and without graphics, it should be tested on different browsers, so to recognize browser
depending differences and it should be tested with different resolutions.
15