Download 3. Basic Web Interface Design

Information and Communication Technology
“Multimedia Production and Web Site Development”
Part B Web Site Development
Chapter 4 Presenting Information on
the Internet
- 4.1 Web Construction Factors
1
Ch 4.1 Web Construction Factors

Design factors for presenting information
effectively on the Web
2
Ch 4.1 Web Construction Factors

Outline and discuss the various factors to be
considered in the construction of web pages
3
Ch 4.1 Web Construction Factors
4
Ch 4.1 Web Construction Factors
Table of Contents
1.
2.
3.
4.
Hypertext and Hypermedia
Hardware and Software Constraints
Basic Web Interface Design
Dealing with Multimedia
5
Ch 4.1 Web Construction Factors
6
Ch 4.1 Web Construction Factors
1. Hypertext and Hypermedia
Hypertext Concept
 Definition

Hypertext is text which contains links to other texts.
The term was invented by Ted Nelson around 1965.
bookmark
home
this is text
or is it
Hypertext?
only links
can tell
this is text
or is it
Hypertext?
only links
can tell
this is text
or is it
Hypertext?
only links
can tell
this is text
or is it
Hypertext?
only links
can tell
this is text
or is it
Hypertext?
only links
can tell
back link
external
link
this is text
or is it
Hypertext?
only links
can tell
this is text
or is it
Hypertext?
only links
can tell
this is text
or is it
Hypertext?
only links
can tell
7
Ch 4.1 Web Construction Factors
1. Hypertext and Hypermedia
Hypertext Concept


Hyper implies that the text flow is non-linear.
Hypertext is therefore usually non-linear:
 Blocks of text (pages)
 Links between pages create a network
 Users can follow their own path through
information
8
Ch 4.1 Web Construction Factors
1. Hypertext and Hypermedia
Example: Interactions in hypertext
•Professor Alan’s puzzle square
@
http://www.hiraeth.com/alan/misc/game/game.html
user clicks arrows
to move squares
hot links to
other puzzles
9
Ch 4.1 Web Construction Factors
1. Hypertext and Hypermedia
Early Hypertext Technology & Implementation


Hypertext applications have been around for a long time:

1968: First public hypertext demonstration.

1985: Symbolics Document Examiner (Janet Walker)
released; was first hypertext-based system to gain widespread acceptance and usage.

1985: NoteCards was released by Xerox.

1987: Apple Computer releases HyperCard, one of the
most successful hypertext applications (was in use till
2004!).

1987: First ACM conference on hypertext.
The concept of non-linear documents has been ready, but
so far, in systems, most documents reside on the same
computer.
10
Ch 4.1 Web Construction Factors
1. Hypertext and Hypermedia
Early Hypertext Technology & Implementation
1989: Tim Berners-Lee comes up with the idea of formatting
research documents as hypertext, and hyperlinking them
together.


These documents may be located on different machines, or
even in different countries!
A new protocol, HyperText Transfer Protocol (HTTP) was
developed to handle global hypertext.
A new format, HyperText Markup Language (HTML), was
developed.



Modeled upon SGML (Standardized General Markup Language)
11
Ch 4.1 Web Construction Factors
1. Hypertext and Hypermedia
Hypermedia

Definition
Hypermedia is a logical extension of the term
hypertext, in which graphics, audio, video, plain text
and hyperlinks intertwine to create a generally nonlinear medium of information.
Ted Nelson was also the first to use this term in 1965.
The World Wide Web (WWW) is the best example of
hypermedia applications.



12
Ch 4.1 Web Construction Factors
1. Hypertext and Hypermedia
Hypermedia

Hypertext systems + additional media
 Illustrations, photographs, video and sound

Links/hotspots may be in media
 Areas of pictures
 Times and locations in video
13
Ch 4.1 Web Construction Factors
14
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Browser and plug-ins
 Browser

People use many different browsers

Netscape Navigator / Communicator, Internet Explorer, Safari,
Firefox, Lynx, Opera, Neoplanet etc.
Firefox
Internet Explorer
Netscape
Lynx
15
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Browser and plug-ins
 Browser

People use many different browsers

Web browser usage statistics
16
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Browser and plug-ins
 Browser Incompatibility

Each browser may have its own set of supported
standards


Many browsers may add some of their own tags



Lynx does not display graphics at all
E.g., the <marquee> tag is supported by Internet Explorer
Browser, but not a part of HTML standard
The <colgroup> is a part of HTML standard, but not supported
by Netscape Navigator
The standards of cascading style sheets (CSS) and
JavaScript make the incompatibility problem even
worse
17
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Browser and plug-ins

Plug-ins


Definition: It is a computer program that interacts
with a main (or host) application to provide a
certain, usually very specific, function on demand.
Examples include:




QuickTime
Windows Media Player
Flash player
Java Applet

Based on JVM (Java Virtual Machine) to support multiple
platforms without re-development
18
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Browser and plug-ins

Plug-ins

Example:
Flash Player in Disney official website
19
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Platform compatibility
Software platforms

Most PCs run on Windows operating system
But still a significant portion view the web from
Macintosh computers and Unix/Linux systems



Each operation system has its own characteristics


E.g., Windows machines and Macs have different
ways of displaying type, leading to same size type
appearing much larger on Windows than on Mac
Browser and plug-in releases for Macintosh lag
behind the Windows versions
20
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Languages and text encoding methods
Character set



Definition: a collection of characters
Examples:

ASCII (American Standard Code for Information
Interchange) is composed of 128 characters, containing
52 Latin letters (a-z, A-Z), numerals (0-9), symbols (! #..)
and some control characters (tab, line break, etc.).

Big5 is the Chinese character set and encoding used
extensively in Hong Kong and Taiwan. It contains over
13,000 characters.
21
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Languages and text encoding methods

Character Encoding
 Definition: the scheme of transforming character codes

in sequences of octets for computer processing. Big5 and
GB are the names of the character sets as well as the
encoding method; UTF-8 is an encoding method for
Unicode.
Big5 and GB are two different sets of character encoding.
They are not compatible with each other, and conversion
from one to another is problematic because there is not
always a one-to-one correspondence between two
characters in the two sets.
22
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Languages and text encoding methods
Character set


Examples:

GB 2312 (Guo Biao) encompasses about 7,000 simplified
characters used in China. It is also adopted in Singapore.

GBK is an extension to GB, it supports over 21,000
characters. The latest standard is GB 18030-2000, which
covers all the code points in Unicode 3.0.

Unicode is the international character set that
encompasses characters from different languages in the
world. It codes more than 20,000 Chinese characters.
23
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Resolution and file formats

Resolution

Definition


Standard resolution



Number of pixels per inch
300 dots per inch (dpi) for print
72 dpi for web
Consider other end uses


72 dpi of a web graphic will make for a blocky and blotchy
printed image
Suggest using vector graphics (with no loss of quality) or
create a high-resolution image for printing use.
24
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Resolution and file formats

File formats

Name files properly


GIF files named with suffix .gif, JPEG files have either .jpeg
or .jpg as suffix and PNG files end in .png
Even if files are saved in the correct format, the browser
will not recognize them without the proper suffix
25
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Resolution and file formats

Web graphics highlights





Save images with flat areas of color and hard edges in
GIF format
Save photographic images in JPEG format
Web graphics should be created in RGB color mode
instead of CMYK
The only meaningful measurement for web graphics is
pixels
Consideration of accesses with different devices

Desktop monitors, PDAs, mobile phones, kiosks of different
colour compatibility and resolution support
26
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Bandwidth limitation
 Speed was No. 1 priority for the majority of
web users


With broadband, less critical
But not everyone has broadband
Design for speed consideration


Don’t make assumptions on the user bandwidth
connection!

Users may have different accesses through mobile
devices, dial-up modems, etc.
27
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints

Bandwidth comparisons
Connection Type
Top Speed
14.4 Kbps modem
14.4 Kbps
28.8 Kbps modem
28.8 Kbs
Digital (ISDN) phone
line
128 Kbps
T1 dedicated
connection
1,500 Kbps
Asymmetric Digital
Subscriber Line
(ADSL)
64 Kbps (send)
1,500 Kbps (receive)
Cable modem
10,000 Kbps
Fiber-optic backbone 45,000 Kbps
(T3)
28
Ch 4.1 Web Construction Factors
2. Hardware and Software Constraints
Other hardware constraints
Computational power

CPU and GPU processing power would affect the
smooth deliveries of multimedia presentations


Storage capacity
Data retrieval speed of a storage media
Volume of the storage media
Hierarchy of storage media




Cache memory, main memory, graphics buffer, hard disks,
DVDs, CDs, and tape
29
Ch 4.1 Web Construction Factors
30
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Four Golden Rules
 Knowing where you are
 Knowing what you can do
 Knowing where you are going


Or what will happen
Knowing where you have been

Or what you have done
31
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Designing for the Web
 Who is in Control?

You often do not have control of the final
appearance


Letter spacing, fonts (for some browsers)
Colour depth, browser type
32
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Designing for the Web
 Your Viewers, may not be your clients

Know their patience, age, gender, purpose


Establish the tone and personality
In fact, web pages are not for all people


Always have a specific audience
E.g. GrantsNet.org vs. Disney.go.com
33
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Web Page Design
1. Content Design
2. Navigation Design
34
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Five content types



Facts: specific information in the form of a
statement or data. They are unique, requiring no
explanation.
Concepts: understanding what something is and
what it is not.
Procedures: represents a sequential number of
steps that tell you how to do something specific.
35
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Five content types


Processes: explains how something works. They
involve a flow of multiple events that describe how
a system works.
Principles: are general advice given by experts
who have developed a knack for doing something
well.
36
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Text for the web





People do not read web pages in the same way
as they do a book
Put your key message first. Use an inverted
pyramid approach, starting with the conclusion
Include one idea per paragraph. Highlight the
keywords.
Use summary descriptions, subheads, bulleted
lists and short paragraphs.
Use half the word count (or less) than
conventional writing.
37
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Style and Fonts



Generic styles universal: serif, sans, fixed,
bold, italic
Specific fonts too, but vary between platforms
Colour --- often abused!

Do not to be too colourful!
38
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Style and Fonts

Comparison of some sans serif fonts
Arial bold and Arial Black
Arial and Impact
Arial and Comic Sans
Arial and Trebuchet
39
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Body Type on the Web
 Use
relative font sizes (e.g. large, 120%, 1.5em) so
users can enlarge the font from the browser if
necessary (especially IE users)
 Avoid CAPITALIZED LETTERS and exclamation marks!
 Never use underlining for emphasis
 Do not use images to display text unless it is absolutely
necessary for branding
40
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design

Graphics and Color for the Web
 Use only a few main colors on your website



Text and background must have enough
contrast but the colors should not strain the
eyes
Use meaningful graphics to show real content
Optimize images with appropriate size and
compression
41
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design

Graphics and Color for the Web
 Keep illustrations simple and have short and
simple text descriptions if not self-explanatory
 Use relative page layouts and stylesheets
instead of hard coded tables, images and
frames

Provide a sentence between tables and text and
avoid scrolling when viewing a table.
42
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Graphics and Color for the Web


Have a significant lightness difference between
the information (text) and the background.
Choose a neutral background color, like white,
black, or gray if a lot of different-colored text is
used.
43
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Flash Animation


Flash is not a standard but very popular
Flash plug-in


200 million downloaded from Macromedia
Why not GIFs and DHTML?


Vector based  easier to scale and render
Smaller file size  download faster
44
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 When not to use Flash?

Informational vs. entertaining


Multimedia Flash



Difficult to update
Bandwidth requirement
Alternative when no Flash plug-in
Plug-in compatibility and browser support
45
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Screen Size

Is 640 x 480 a standard?



Mac: 580 x 315
PC: 635 x 314
No scroll at homepage at all


www.useit.com/alertbox/9605.html
Most people select options above the scroll line
46
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Easy Printing





An extra printer-friendly version of the web page
which opens in a separate browser window
Printable version contains no frames and
navigation bars
Use a standard one-column format
Background color is usually white
Scripts or style sheets can be used to create a
printer-friendly page automatically
47
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design
 Easy Printing: Bad Example
48
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Content Design

Easy Printing: Good Example (with a one-column format)
49
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Techniques

Sectional navigation



Web pages are grouped into different sections
Indexes provide for different content sections
E.g., press sites group news into local news,
international, financial, education, etc
50
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design

Techniques

Audience-splitting
 Web pages for specified user populations are grouped
together

E.g., The Hong Kong Polytechnic University Web Site
organizes web pages according to user roles
(prospective students, current students, staff, alumni
etc.)
51
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Techniques

Path navigation

Path navigated previously is shown on
current page so that users can know where
they are.
52
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Layout Design




Use a consistent layout. Define global and
individual page templates
Use a clean visual design
Use headings, lists and consistent structure to
increase legibility
Use consistent CSS for layout and style where
possible
53
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Layout Design

Using of tables

Logically together vs. physically together
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
54
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Layout Design

Using of tables - examples
Hong Kong Government Website
GovHK
55
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design

Site maps
 Definition: A list of the contents of the site,
organized to reflect the structure of the site by
section and subsection
56
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Web Structure

Four types of organization of information on the
web site:

Linear


Hierarchical


E.g. computer directories, taxonomy classification
Network


E.g. process flows, prioritized lists
Requires lots of user memory on the path navigated
Grid

E.g. databases, multi-parent hierarchical models
57
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Web Structure

Rare to use only one


Most websites build on a judicious combination of
these four, with one dominant theme
Hierarchical plus networks very common
58
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design

Web Structure

A pure hierarchy is rare
 We add links to facilitate moving around the
hierarchy without going all the way to the top; note
extra links at bottom level
59
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Global navigation
Global
navigation
 While,
for a small site, it may be possible
to show the major links on every page
60
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Vertical global navigation bar
Global
navigation
http://www.gov.hk/en/
61
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Frames
 A frame is an area of the browser window
that stays visible as the user moves from
page to page
 A simple way to provide global navigation
62
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Contextual Links
 Recommended rather than to insert URLs
directly to web pages
 Reveals to surfers something about the
content of the linked web pages
63
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design

Navigational Control
 The web site should provide the following
navigational control, whenever possible:







Table of contents
Taxonomy
Vocabulary-limited indexes
Search
Site map
Location identification (or path navigation)
Navigational control panel for all HTML pages
64
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Principles of Successful Navigation
1. Be easily learned
2. Remain consistent
3. Provide feedback
4. Appear in context
5. Offer alternatives
65
Ch 4.1 Web Construction Factors
3. Basic Web Interface Design
Navigation Design
 Principles of Successful Navigation
6. Require an economy of action and time
7. Provide clear visual messages
8. Use clear and understandable labels
9. Be appropriate to the site’s purpose
10. Support user’s goals and behavior
66
Ch 4.1 Web Construction Factors
67
Ch 4.1 Web Construction Factors
4. Dealing with Multimedia
Delivery Concerns



Don’t over-use graphics and animations.
Graphics and animations tend to occupy large
portion of areas in most pages. Proportionally,
there is less space to convey a message in text
Graphics need to be designed so that they will
not degrade performance and viewability on lowend systems.
Don’t design specifically for one browser or
platform
68
Ch 4.1 Web Construction Factors
4. Dealing with Multimedia
Delivery Concerns
 Speed Issues

User starts to wonder after 10 seconds


Jacob Nielsen, www.useit.com
Progress loading


Use of progressive JPEG files, progress indicators
E.g. www.islandpress.com
69
Ch 4.1 Web Construction Factors
4. Dealing with Multimedia
Delivery Concerns
 Progressive JPEG
70
Ch 4.1 Web Construction Factors
4. Dealing with Multimedia
Delivery Concerns

Progress indicator

Appear at the bottom of the video display
71
Ch 4.1 Web Construction Factors
4. Dealing with Multimedia
Visual Communication Concerns




Use graphics only for value-added purposes
Graphics need to be designed so that they will
not degrade performance, and viewability on lowend systems.
Don’t make graphics look like buttons but don’t
link to anything
Provide alternate text for every graphic. Alternate
text displays in the event that the graphic doesn’t
72
Ch 4.1 Web Construction Factors
4. Dealing with Multimedia
Visual Communication Concerns

Use anti-aliasing for most text in graphics as it
makes graphics look more polished and
professional.

However, for type under 10 points, it’s better to turn
off anti-aliasing for small text as it may blur the whole
letter shape and make the text less readable
Aliased and anti-aliased texts
73
Ch 4.1 Web Construction Factors
4. Dealing with Multimedia
Visual Communication Concerns


Do not use too many colours as it is visually
chaotic and makes it difficult to prioritize the
information
Do not use wild background tile patterns as it
makes it difficult to read the text on the page.
74
Ch 4.1 Web Construction Factors
75
Ch 4.1 Web Construction Factors
References



Niederst, J., and Koman, R. (2003). Learning web design: A
beginner's guide to HTML, graphics and beyond (Second
edition). USA: O’Reilly and Associates, Inc. P. 251-264,
Niederst, J. Designing for the Web. O’Reilly and Associates
Browser Usage Statistics from Browser News
http://www.upsdell.com/BrowserNews/stat.htm

Anderson, R. A., Exploring the Art and Technology of Web
Design
http://www.delmarlearning.com/Browse_Product_Detail.aspx?CatI
D=18669&ISBN=1401871070

Design guidelines for the Web
http://www.usabilitynet.org/tools/webdesign.htm
76