Screen Design
Some Web pages have an attractive and appealing
appearance and convey their information easily while
others can look questionable and be very hard to use.
Screen design describes the process of designing the
layout and appearance of a Web page so that it is
attractive and engaging to the reader and easy to use.
Screen design is both a science and an art that uses
judgments and rules in its practice.
Fig 1 www.penfolds.com.au: An attractive and
engaging screen design
The visuals in a Web site are often considered to be the
most important elements in terms of creating an
appealing and attractive site. Clever designers,
however, often use the textual elements as part of the
visual design. According to some theorists, visuals are
remembered better than words because visuals are
more likely to be encoded redundantly than words.
Specifically, words, sentences, and paragraphs that are
highly imaginable are recalled better than those which
are not. It is a known fact that the learning of concrete
concepts precedes the learning of abstract concepts.
This is because concrete concepts are stored as images
whereas abstract concepts are stored as verbal
representations.
Visual literacy is an acquired competency in visual
expression and communication that involves insights
and skills no less disciplined than those required for
proficiency in engineering and construction. In olden
days, the Bible was commonly explained to people
through paintings and imagery, an action that led to a
wide variety of famous art ad paintings, many of which
were originally designed for functional more than
aesthetic purposes.
The Web abounds with screen designs that are good
and bad. Many writers suggest that people with the
best marketing sense are those selling alcohol and beer
and their television advertisements live up to this
reputation. Their Web sites usually do as well.
Some companies selling a diverse range of products
fare less well when it comes to the design and delivery
of their Web sites. Often the Web site, whilst
achieving some form of functional utility, is lacking in
design and presents a face to the public that is less
attractive and engaging than might otherwise be used.
Fig 3 Imagery as a means of communicaton.
Cappella degli Scrovegni painted by Giotto in Padova
1. Typographical Elements
Fig 2: www.telstra.com: A busy Web site providing a
range of links to products and services
Screen Design
Screen design is a modern day visual competency that
is becoming more and more important as use of the
Wed develops. Screen design, as the name suggests, is
design that is intended for digital computer screens.
More recently as the shape and size of computers
changes, visual design also encompasses design
1
processes for such devices as portable digital assistants
(PDAs) and mobile phones.
The broad aims of good screen design can be
summarised as:
• providing a focus for the user on important
information;
• attracting and maintaining the interest of the user;
• promoting the integration of new information being
presented to the user with information gained
previously; and
• helping users to find and organize information
easily by facilitating navigation through the
information space.
Screen density describes the relative amount of text
and imagery that is presented within space on the
screen. Experts in human-computer interaction (HCI)
recommend that legibility is enhanced through pages
with reduced amounts of text and lots of white (vacant)
space.
Often information is presented on screens in a dense
and compact fashion, and if this is not done in a way
that recognises the need for reduced screen densities,
the busyness of the page and large amounts of
resources and information can make the page difficult
to read and browse.
Some important typographical elements that are used
as part of the design of screens are the same as those
that are considered in the design of the printed page.
For example
• line length;
• character (screen) density;
• font selection; and
• colour.
a. Line Length
Research on line length with screens follows that
undertaken with print. Generally speaking, shorter line
lengths are better than longer line lengths and optimal
lengths are given as 35 - 75 characters per line.
35 character line:
12345678901234567890123456789012345
75 character line:
12345678901234567890123456789012345678901234
5678901234567890123456789012345
In studies of legibility and line length, a number of
inquiries have demonstrated that longer lines can
provide better legibility than short lines while most
tend to suggest that text is read more efficiently when
presented in a compact and fashion. Most browsers,
however, enable users to choose the length of the
displayed line so readers are often able to create a line
length that suits themselves.
Fig 4 Line length varies with window width
Fig 5 www.abc.net.au.
A screen with large amounts of information and white
space
Many Web page designers create a front page to their
sites with a very limited amount of information ad a
strong emphasis on design and visual appeal. The user
needs to click to move from the front page to the
information pages where the text is more densely
displayed.
Fig 6 www.ferrari.com
The simplicity of the homepage and the low screen
density are coherent with aesthetic values of the brand.
b. Screen Density
Screen design
2
Whilst in general, white space can help to create a
more visually appealing image, its overuse can be
problematic. A recent research project found that many
users rated sites with large amounts of white space and
sparse text as complicated, over-detailed, visually
confusing, unclear and "not enticing". The researchers
tested the effects of white space in a number of
different ways, and found this effect was apparent on a
number of occasions.
which are completely designed to be used on a
computer.
Tests among Internet users have found that many users
differ in their perceptions of the optimal balance
between content treated and page density. As a general
rule, designers ensure that screen density is coherent
with the content.
c. Font Selection
Research into screen design and font type and size
reveals general patterns and preferences among most
users. The following guidelines provide some general
rules about font and size for screen designers.
• minimum 12- or 14-point size. For example, if the
font has relatively small characters compared to
other fonts of that size (e.g., Times), choose 14; if
the characters are relatively large (e.g., Bookman),
12 pt may be better;
• use plain (roman) style, rather than bold, italic,
outline, shadow, or other style sans-serif or with
serifs that are not too fine to render well on-screen;
• use bitmap font rather than outline font;
• use a proportional font (unless it is necessary to
choose a non-proportional font for some reason);
• anti-aliased fonts tend to be harder to read than
others;
• system-resident fonts are more reliable than others
in most screen designs.
For headings and titles on-screen, a general guideline is
to choose a font with the following characteristics:
• 18-36 point size (assuming 12- or 14-point body
text);
• plain (roman) or bold style is acceptable; italics
may be used if the font size is large enough to
render well on-screen;
• either sans-serif or serif font is acceptable (it often
works well to have the opposite of body text--i.e.,
if body text is sans-serif, make titles/headings serif,
and vice versa);
• due to the size of titles/headings, outline fonts may
render well enough on-screen to be usable;
• proportional font;
• anti-aliased titles/headings generally look more
pleasing;
• system-resident font (preferred but not mandatory).
Rapid advances in technology (new fonts; higherresolution displays) may make the generalisability of
the existing research questionable. Indeed, there are
typefaces being designed specifically for web use
Screen design
Fig 6 Font sample.
Different font types can be used depending on content
and writing style.
d. Colours
There are many options for colour in modern Web
applications. Some designers recommend that screens
should be designed in shades of gray, black and white
first, with colour added later in a fashion, which adds
to instructional effectiveness. The reasons for this are
as follows:
• many people suffer from some type of colour
deficiency ranging from weakness in certain
colours, mainly red and green, to full loss of colour
(it is estimated that 8% of the population
experience some type of colour deficiency);
• older users can often have some problems
discerning and perceiving colours;
• The monitors that are used to access Web pages
may have differing colour capabilities which can
lead to unexpected variations in colours.
Many researchers have cautioned about the use of
colour in instructional materials:
• "...excessive or inappropriate use of colour can
inhibit performance and confuse the user";
• "unless used carefully and sparingly, colour can
make the tasks of reading text and interpreting
small objects slower, less accurate, and more
painful... colour reduces legibility...colour
produces fuzzy edges...[and] colour tires the eyes";
• "colour can be a powerful tool for communication.
If used correctly, appropriate highlighting and deemphasis techniques can be used to convey
meaningful semantic distinctions”. If used
incorrectly, however, colour can interfere with
functionality.
2. Screen Layout and Navigation
As already seen for general page layout columns,
tables can enhance the readability of the text. For
screen design some elements are particularly important
to ensure consistency between pages and guide the
navigation.
3
a. Tables
Grids and tables can be used to establish that certain
areas of the screen are to be used for specific purposes
(eg. navigation buttons or hyperlinks are found on the
top, bottom or left side of the page, text information is
placed in the centre half of the screen with white space
found on either side). Since HTML makes no
allowances for margins or white space, other means
such as tables with invisible borders are used to
provide designers with the means of implementing
their ideas. Implementing a screen grid using tables can
cause problems if the designer is unaware of the
limitations.
Fig 8 Buttons.
A variety of buttons can be designed to lead the users
through web pages.
c. Icons
Fig 7 Tables.
Tables are used to organise layout and structure of
Web pages.
b. Buttons
In both multimedia and web design, great attention is
paid to the navigation interface, the means by which
users are able to navigate from one location to another.
In many treatments, navigation is initiated by using
icons, buttons or menus.
Buttons, radio buttons, check boxes and menus should
look like something you would normally press, click,
put x's in, or pull down. HTML includes special
routines, which draw radio buttons, check boxes and
pull down menus for you. The design of buttons is a bit
trickier, since it necessitates the development of
graphics and enhancements to make them look like a
button (bevelled edges give the 3D effect which makes
a graphic look like something to be pressed).
Buttons also give the user some feedback that
execution is occurring after a button is pressed. This
was much harder in the past, but with the addition of
JavaScript to the newer web browsers, icons can be
made to flash or change colour when pressed, giving
the user the sense that something may happen.
Screen design
Icons can be very useful when designing navigation
aids, but they also have their pitfalls. Advantages of
icons include:
• to help users work smarter by improving
productivity and reliability (road signs can read at
twice the distance and half the time as word sign);
• to represent visual and spatial concepts such as
shape, colour, position, angle, size, texture, and
pattern;
• to save space in crowded screen displays;
• to speed search (we can recognize icons much more
quickly that reading a list of words);
• for better recall and immediate recognition;
• to allow illiterate or semi-literate users to function
more easily;
• to increase global access to a web page or
multimedia product.
On the downside, it is very challenging to design icons.
The constraints of a very small space make it difficult
to convey a message (especially a concept as opposed
to a concrete operation). Obscure icons make computer
screens look like the control panel of an alien
spaceship!
The following guidelines can be suggested for the use
of icons:
• represent the object or action in a familiar and
recognizable manner;
• limit the number of different icons;
• make the icon stand out from its background;
• consider three dimensional icons; they are eyecatching but also can be distracting;
• ensure that a single selected icon is clearly visible
when surrounded by unselected icons;
• make each icon distinctive from every other icon;
• ensure the harmoniousness of each icon as a
member of a family of icons.
4
3. Mobile device layout
With the advent of mobile devices, design rules for
screen layout are being altered. Mobile devices
necessarily have very small screens necessitating the
use of variations to existing guidelines.
Designing a quality layout for mobile devices requires
planning for economy over creativity as a general rule
of thumb. The key is to decide what information is
essential and then present that information in a manner
that is clear, concise, and easy to navigate.
and/or buttons. Displays are in general much smaller
than those of PCs, however the size varies
significantly. The basic screen for WAP applications is
called a “card”. The screen layout for a card should
contain from top to bottom:
• a header title;
• content lines;
• an (optional) tool bar.
Personal Digital Assistants (PDA)
It could be easier to design for mobile devices and
PDAs if the user can reference an organization’s
existing site. With this in mind, the following are
considerations for effective interface design:
• Keep page length to fit the screen width in order for
the user to avoid scrolling.
• Try and keep flat hierarchy for navigation.
Necessary information should never be more than
three levels deep; otherwise the user may be lost.
• The navigation structure should reflect as closely as
possible the site structure of an existing Web site
structure if the PDA version is based around similar
content. Users familiar with an existing Web site
should not feel alienated when browsing the site
content via mobile devices, although the navigation
aids should be specific to mobile devices.
Fig 9 PDA Design.
Example of a usable design for a PDA Web Page.
Similarly, the design of content presented on the
mobile device should adopt similar metaphors, and
layout should resemble the layout of the existing Web
site. For example:
• The inclusion of a back button on every page that
has the same function as it has in a regular browser
can be very important as it is one of the most used
features on a mobile device.
• Provision of appropriate navigation to bring users
back to a home page.
WAP - Wireless Markup Language
WAP devices, in particular, have a variety of
interfaces. Output can be presented as text, formatted
text, or graphics. Input is provided by touch screens
Screen design
Fig 10 WAP Design.
Every WAP mobile telephone could be use to navigate
through web contents.
4. Accessibility Guidelines
The W3C, the World Wide Web Consortium “develops
interoperable technologies (specifications, guidelines,
software, and tools) to lead the Web to its full
potential. Its long term goals are:
• universal Access: To make the Web accessible to
all by promoting technologies that take into account
the vast differences in culture, languages,
education, ability, material resources, access
devices, and physical limitations of users on all
continents;
• semantic Web: To develop a software environment
that permits each user to make the best use of the
resources available on the Web;
• web of Trust: To guide the Web’s development
with careful consideration for the novel legal,
commercial, and social issues raised by this
technology.
Fig 11 W3C - World Wide Web Consortium - Logo.
W3C is a forum for information, commerce,
communication, and collective understanding.
The Accessibility Initiative has developed a set of
guidelines and checkpoints to explain how to make
Web content accessible also to people with
disabilities. The guidelines are intended for all Web
content developers (page authors and site designers)
and for developers of authoring tools.
5
1. Provide equivalent alternatives to auditory and
visual content.
2. Don't rely on colour alone.
3. Use markup and style sheets and do so properly.
4. Clarify natural language usage
5. Create tables that transform gracefully.
6. Ensure that pages featuring new technologies
transform gracefully.
7. Ensure user control of time-sensitive content
changes.
8. Ensure direct accessibility of embedded user
interfaces.
9. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.
The Web guidelines treat every general aspect of web
design as well as details; the guidelines provide a
suggestion on how to use colours and tables till a
memo of expanding each abbreviation or acronym in a
document where it first occurs. However, following
them will also make Web content more available to all
users, whatever user agent they are using (e.g., desktop
browser, voice browser, mobile phone, automobilebased personal computer, etc.) or constraints they may
be operating under (e.g., noisy surroundings, under- or
over-illuminated rooms, in a hands-free environment,
etc.). Following these guidelines will also help people
find information on the Web more quickly. These
guidelines do not discourage content developers from
using images, video, etc., but rather explain how to
make multimedia content more accessible to a wide
audience.
dimension. The topic of usability is very much alive
and can take different approaches (Nielsen 2000).
There are two main usability approaches: deductive
and inductive. The first employs an inspector or expert
to verify how those principles are applied in the
website. The inductive approach, on the other hand,
employs a group of users who represent the target. The
users visit the site and are later questioned to verify
their satisfaction or their frustration. Both operative
modalities offer useful results to evaluate and improve
electronic communication.
At the same time, any usability inquiry, whether
inductive or deductive, should always take into
consideration the communication goals and the
different stakeholders. A complete usability test will
not work solely with generic universal usability
principles, but it will need concrete user scenarios, i.e.,
principles applied to specific contexts of use. For
example, the general usability principle that “any page
of a website should be reached in a maximum of three
clicks of the mouse,” can be applied in many contexts,
such as in the case of a news page or a services’ portal.
Nonetheless, the three-click principle would not be
adequate in a website for playing games (or creating
the sensation of suspense). In an online treasury search,
for instance, the opposite principle would probably be
more applicable: “It must be impossible (or very
difficult) to reach the page of the treasure in three
clicks.” (Bolchini, Arasa, Cantoni 2004)
Fig 8 Web Navigation
The common navigation metaphor helps us to
understand that the user, as a sailor, can decide where
he wants to go but sometimes “bad winds” (or bad
design) conduct him away.
Fig 11: http://webxact.watchfire.com/
A site that tests the accessibility of a Web page
5. Usability
The concept of website usability may be applied to
different aspects of a website but it usually refers
directly to its technical dimension. Moreover, usability
puts in relation the technical aspect with the users’
Screen design
One of the most illuminating set of usability criteria
has been proposed by Jakob Nielsen:
• visibility of system status;
• match between system and the real world;
• user control and freedom;
• consistency and standards;.
• error prevention;
• recognition rather than recall;
• flexibility and efficiency of use;
• aesthetic and minimalist design;
6
• help users recognize, diagnose, and recover from
errors;
• help and documentation.
Links of Interest
• There are many sources on the web for buttons,
which are already designed. Here are some
suggestions:
http://reallybig.com/reallybig.php3
• A link to prepared buttons for Web design
applications
http://wp.netscape.com/browsers/createsites/buttons.ht
ml
• This link provides access to some prepared icons:
http://www.iconbazaar.com/
• The W3 Consortium Websites
(http://www.w3.org/Consortium/)
• Watchfire is a site that accepts the URL of a page
and tests the page against W3C Level 3
accessibility guidelines and provides a detailed
report of where possible problems might lie.
http://webxact.watchfire.com/
• Web pages that suck is a site designed to
discussions of Web page design choices (using
examples of bad choices).
http://www.webpagesthatsuck.com/
Screen design
Screen Design: Revision Questions
1. What are the main aims of strong screen design?
2. What is meant by the term white space in screen
design?
3. Describe how white space should be used in screen
design.
4. What are some general rules describing the use of
colours in screen design?
5. What are rules that could govern the choice of font
and font size in screen design?
6. Describe how tables can be used in the design of
Web pages? What advantages do the offer?
7. What is meant by the term accessibility in Web page
design?
8. Why is accessibility an important element in screen
design? Describe strategies that help to make a
Web page accessible.
9. What is meant by the term usability in Web page
design?
10. Describe strategies that improve the usability of a
Web page.
7