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.
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.
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.
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.
Fig 8.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 8.4 Line length varies with window width
Topic 8: Screen design
Fig 8.6 www.ferrari.com
The simplicity of the homepage and the low screen density are coherent with aesthetic values of the brand.
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 umber of occasions.
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.
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 generalizability of the existing research questionable. Indeed, there are typefaces being designed specifically for web use
Topic 8: Screen design which are completely designed to be used on a computer.
Fig 8.6 Font sample.
Different font types can be used depending on content and writing style.
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.
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

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.7 Tables.
Tables are used to organise layout and structure of Web pages.
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.
Topic 8: Screen design
Fig 8.8 Buttons.
A variety of buttons can be designed to lead the users through web pages.
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.
With the advent of mobile devices, design rules for screen layout are being altered. Mobile devices
4

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.
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.
called a “card”. The screen layout for a card should contain from top to bottom:
• a header title;
• content lines;
• an (optional) tool bar.
Fig 8.10 WAP Design.
Every WAP mobile telephone could be use to navigate through web contents.
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 8.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 devices, in particular, have a variety of interfaces. Output can be presented as text, formatted text, or graphics. Input is provided by touch screens 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
Topic 8: Screen design
Fig 8.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-clicks 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.11: http://webxact.watchfire.com/
A site that tests the accessibility of a Web page
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’
Topic 8: Screen design
Fig 8.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 .
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.
• 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 applicatons 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 sit 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/
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.
Topic 8: Screen design 7