Web Site Ethiopia

Because of the nonlinearity of the online reading experience, it is important to follow some text grouping principles. Keep blocks of text together that are related. Use line breaks to separate paragraphs.

Group headings with the text that they label. Make sure the heading is closer to the paragraph it identifies than it is to other paragraphs. Don’t put a horizontal rule underneath a heading to make it stand out because the horizontal rule makes it look like it doesn’t below with the text below. If one blank line between sections doesn’t clearly delineate the sections, use two blank lines.

Report This Post

Multiple columns of text can make a more attractive layout and create lines of text that are shorter and easier to read. This is why narrow columns are standard in magazines and newspapers.

Online, the primary problem with multiple columns is not being able to follow the flow. When the user is interested in the material in both columns, or when one column has text flowing into the next (as when you use the <multicol> tag), the user is forced into scrolling up and down several times to follow the flow of the text or is forced to read both columns simultaneously before scrolling and remembering the content of each while scrolling.

Therefore, you should either stick to one column, so the user can scroll linearly and follow one train of thought, or use multiple columns only when your columns contain unrelated information – that is, when a user would clearly ignore one column while reading the other. Using a column for navigation, advertising, cross-links, or very short sidebars is an effective strategy.
 

Report This Post

Text blocks need to follow the same principles of good alignment as graphics. Text should align appropriately with the graphics on the page. Left-aligned text is the default and usually the most attractive alignment.

Centered text should be restricted to only small text blocks, such as titles and footers, and shouldn’t be used for body text. Large amounts of centered text slow down reading considerably.

A common mistake is to alternate too much between centered and left-aligned text. This clutters the page and looks inconsistent. In most cases, making everything left aligned is a good solution to this problem.

Another common mistake is to have multiple axes of symmetry for centered text, such as when moving from a single column to two columns. In almost every case, a page will look cluttered unless all centered text on the page is centered along the same axis.
 

Report This Post

HTML can specify the formatting of tags either in terms of their semantic content (what the meaning of the text is) or in terms of their format (how they will appear on the page). The semantic tag <strong> indicates that the words need to be emphasized, somehow or another, and typical browsers will display such words in boldface.

The format tag <b> indicates that the words need to be in boldface, regardless of whether that indicates emphasis in a specific context.

There is a tradeoff between using semantic versus format tags. The advantages of using semantic tags are as follows:

• Users with very different browsers can still get the proper interpretation of the text, regardless of how it is displayed. For instance, users with screen readers can hear <strong> words emphasized in the speech synthesis, whereas the speech synthesizer may have no good way to distinguish words in bold or italics.

• Various automated tools can interpret pages constructed with semantic tags. Thus, when an automated tool sees an <h1> tag, it knows that it seeing a primary, header, and that the following text represents a new section. However, if it sees headers displayed as <font size = 4 color = “red”>, it has no idea what role the text plays within the document and can’t infer anything about the document structure.

• In combination with style sheets, semantic tags can usually achieve the appearance the designer desires.

The advantages of using format tags, by contrast, are as follows:
• The designer can control the appearance of the text and can therefore choose a meaningful, usable format. This gets around the problem of browser defaults and user customizations that format semantic tags in unusable and unattractive ways.

• Using format tags improves the predictability of how the page will appear on different systems.

For most situations, the weight of this tradeoff falls on the side of using semantic tags.
While it’s rare to encounter a situation where the difference between semantic and format tags is obvious, an old example is the <blockquote> tag. Semantically, <blockquote> is supposed to indicate that a block of text is being “quoted” within the document. This shouldn’t indicate any specific format.

However, almost all browsers show block-quoted text as indented from the primary text, and therefore HTML programmers use the <blockquote> tag to indent. In fact, many web page layout tools clearly imply that the role of <blockquote> tag is to indent text, which is counter to the spirit of using it as a semantic tag.

The problem with relying on it as a format tag is that some browsers may actually choose not to indent block quotes. For instance, early versions of Explore displayed block quoted text in italics rather than indenting it.

Report This Post

What font size should you specify? It’s usually best to keep the majority of text in the default font size (<font size=?>, which is usually around a 12-point font), and for small amounts of text, to bump it up or down a size as appropriate (<font size =2> or <font size = 4>).

Some designers like to make most text large (<font size = 4>, which is usually around 14 points) – a good idea to improve the legibility of the text for most readers. Others like to use smaller text (<font size =2>, which is usually around 10 points), which allows for more text on the screen and improves the visual texture of the screen aesthetically speaking.

In our experience when we’ve built a site around a nondefault font size, we regularly receive complaints from users about unusual font sizes, whether they’re too small or too large and we’ve never heard this complaint about the default font size.

What happens is that some platforms exaggerate the sizes of fonts, making large, fonts look very large. In addition, those users who do adjust their font sizes have adjusted them for their own optimal legibility, and any modification from their preferences will frustrate them.

Those with limited vision will make their preferences will frustrate them. Those with limited vision will make their fonts larger, and if you’ve set the size as large, they’ll get sizes that are too large. Those who like to see as much text as possible will adjust their fonts to be smaller, and if you’ve set the size as small, they’ll get text that is too small to read.

Style Sheets
Style sheets can be a great way to control some basic font formatting, including typeface, font size, color, and style. This control enables the designer to create a finely crafted layout by setting the font to a specific point size, which the user won’t be able to modify without overriding the style sheet.

Unfortunately, current browsers make it difficult for novice users to override the style sheet, so setting absolute font sizes can be a bad idea if some users need to modify those sizes. However, when designed well, style sheets can help a lot in creating and maintaining a style for the text consistently used throughout the web site.

Type Effects
Text styles can be varied to provide emphasis and add visual interest to the page. Font colors can be varied and large fonts can be used. Decorative fonts may add appeal when you know the user’s system will include the font.

If you’re targeting multiple platforms, the appearance of these type effects will probably not be very consistent, so don’t rely heavily on spacing and alignment of the text, and leave plenty of space for display variations.

Avoid using boldface or all caps for long pieces of text. These styles slow down reading for a user, so they should only be used to provide emphasis. Never use underlining except for links.

Avoid the <blink> tag, or you will be cursed for all time by users whose brains exploded after seeing your page. Avoid italics except for large font sizes. In body text, use black text on a white background whenever possible for optimal legibility.

Report This Post

In conventional HTML, a web page doesn’t specify a particular font size, but merely sizes that are relatively smaller or larger than the default.

This allows each web browser to determine the best default font size to work with, and each user can raise or lower the font size easily to optimize the legibility or compactness of the text. Pages can then be displayed in very large sizes for presentations or for the sake of users who are visually impaired.

The problem is that the layout at different font sizes may not be optimal. At small sizes, the page can seem cramped, and the graphics may dominate the text without connecting effectively with their associated text. At large sizes, the text can have unacceptable line breaks and may actually not be able to fit into the screen space allocated for it.

As a result, extra space needs to be left in any layout to allow for variable sizes of text. This is particularly a problem when text is laid out in tables, as individual columns may not be able to accommodate wide words.

Text-entry form elements use the default fixed-width font size (which the user may change independent of the variable-width font used for most of the body text). When text-entry fields have a large font, they grow quite large; for this reason, it’s usually a good idea to keep no more than one large text-entry field per line in a form. For an example of how font size can affect the layout of an online form.
 

Report This Post

While it’s possible to specify a particular typeface within HTML, typefaces are not sufficiently consistent across systems to confidently ensure the user will see a specific typeface. In most cases, we can only consistently distinguish among serif, sans serif, and typewriter typefaces.

For some purposes, we may be able to specify a more interesting typeface that will improve the appearance for a small class of users, but it’s rarely worth the effort. In the cases where it’s absolutely critical to get the right typeface, the text can be created as a graphic, but this should rarely be needed.

At the time of this writing, the common serif typefaces are Times, Times Roman, and Times New Roman. The common sans serif typefaces are Arial and Helvetica. The common typewriter typefaces are Courier and Courier New. These options work in a wide variety of circumstances.

Unfortunately, other popular typefaces, such as Futura and Optima, are not reliable in HTML text. Futura, for instance, is available from dozens of type manufacturers with widely variable spacing and quality, and so, even if the user actually has Futura, you can rarely be sure what name it goes by or what it will really look like.

Among the common typefaces noted above, there is still a big problem. Most of these typefaces were designed deliberately for print, not for the screen. As a result, while Times may be moderately legible on the screen, it’s not the best option, and Helvetica appears cramped and cluttered on the screen.

Most platforms have typefaces called screen fonts specially designed for easy reading on the screen. On the Mac platform, Geneva is a particularly legible sans serif screen font and is an excellent choice for small text (but isn’t very attractive at a large font size).

Verdana is a sans serif screen font from Microsoft available for both Mac and PC platforms that works quite well in most contexts (although Geneva is still probably preferable for very small text), however, Verdana does not come standard with all systems, so you can’t really depend on it.

We suggest that you include Verdana and Geneva as the first options in specifications for sans sent typefaces (but exclude Geneva for larger text), with more standard sans serif typefaces as backups when those are not available, as shown in the following example.
.font face-“Geneva, Verdana, Arial, Heivetica”>
 

Report This Post

The proprietary Portable Document Format (PDF) from Adobe has become a common standard for delivering documents over the Web because its for matting can be practically guaranteed on all supported platforms.

The PDF format is especially appropriate for document printing because of its organization around the size of a printed page.

The PDF format is also useful for archival documents that you do not intend to modify because updating a PDF document essentially means regenerating it, and users can be prevented from modifying the document.

PDFs are also commonly used when large numbers of documents are already formatted for print and the cost of converting them to HTML (and maintaining both print and HTML versions) would be prohibitive.

Not all users will have the PDF plug-in for their browser, and PDFs may be entirely inaccessible to some users (such as those whose screen readers can’t handle the format). As with other plug-ins, there are a variety of reasons users may not want to download the software (security, memory available on their platform, compatibility, not wanting to spend the time or interrupt their task, uncertainty of the benefits), so PDFs shouldn’t be used when you need to guarantee that the information is accessible to all of your users. However, when the user population is known (as on an intranet), you may be able to guarantee that all users have the plug-in.

Report This Post

A link name should answer the questions, Where will lend up? What will this do? Be descriptive, not obscure longer link names can be better if they provide more useful information, but not if words are redundant or implicit.

Thus, “About Us” is better than “About the Company” because it is shorter and because “the Company” doesn’t usually provide any useful information to the user. In an unambiguous context, simply “About” is even better. Still, “About” is relatively vague, and if you have a specific story to tell, it’s better to be interesting and informative in the link.

If your About section is really a corporate history, in some cases the link should say something like “Our Growth: from a garage in 1997 to a multinational empire today . . . “(see sidebar “User Testing Link Names.”)

Do not let a link cover punctuation or run across multiple lines. This tends to make one link look like two or more. You can often prevent undesired world-wraps within a link title by using nonbreaking spaces (&nbsp; in HTML).

Also, make sure the meaningful words in a sentence are linked, not just the “click here” text, as shown in the following example.

BAD: Click here for information about our products. Click here to read about our service guarantee. Click here for testimonials from our customers.
The problem with linking to “click here” text is that users can’t scan the page to assess where to click – all they see is a sea of links to “click here.”
BETTER: Click here for information about our products, Click here to read about our service guarantee. Click here for testimonials from our customers.

Of course, the “click here” text is clichéd and vacuous. While it’s okay to say it now and then, and sometimes even more clear to do so, in most cases you can edit out the “click here” and use more meaningful wording.

EVEN BETTER: Our products are effective and affordable.
Our service guarantee ensures your l00% satisfaction.
Still have doubts? Read our customer testimonials.

At this point, a remaining problem is that the text is too generic and too subjective. What are “our products”? Who would consider them affordable? The following example still gets the marketing message across, but in no uncertain terms. This last version provides dramatically more useful information than the original version with only a few extra words.

BEST: Our terms shoes cost less than name brands. Our service guarantee promises no waiting in time EVER! Our customers will tell you that they prefer XYZ Shoe Stores.

Don’t hid an email address within a link. If you want an email link on every page, instead of linking Contact Us with a mailto link, link the actual email address (e.g., dbd@diamondbullet.com). Everyone recognizes an email address, and by displaying it, users can select and copy the address, print it out, or write it down.

A common problem, especially when computers are shared, is that email preferences are not correctly configured in the web browser, so this enables users to see the address and type it directly into their own mail software.

Report This Post

Web technology grew out of hypertext research in the 1980s and early 1990s. Hypertext research studies the creation of nonlinear documents, where links connect documents in associative webs.

This allows users to guide their own reading rather than having authors do it for them. However, the result is often a fragmented and confusing traversal of links. Thus, a web author can still assist the user by structuring the way links are organized.

Blue and Underlined = Click Me
Writing for an interactive medium requires a special sensitivity to the user’s thinking process and requires that you make distinctions unnecessary in print. First of all, we must distinguish which text is a link and which text is static text Blue and underlined text is readily recognized by even inexperienced users as links.

Various studies have shown that using another color for a link dramatically reduces the number of click-throughs for that link, and using graphics for the link reduces the number of click-throughs even further.

The most straightforward explanation of this observation is that users are simply less certain that other colors might represent links and are therefore unlikely to notice those links or are more reluctant to try them out.

Thus, for maximum click-throughs, we recommend that you avoid changing the default color of text links. If you decide to override the default, make sure that links are extremely obvious.

Users can set preferences in their browsers to change the default link colors and the default underlining of the links. In some cases, you may need to shift link colors to a different shade of blue for legibility (for instance, when a black background is used), but this may still confuse users who have altered their default link color or turned underlining off, so alternate background colors need to be considered carefully. Since different browsers can sometimes have different default colors for visited links (e.g., purple and green), it’s a bad idea to shift the color of a visited link.

Some designers like to use black links because black creates a more relaxed color scheme, but this is extraordinarily likely to confuse, users, especially those who have link underlining tuned off.

Other designers like to use red links because red is an especially salient color, but the logic of doing so is somewhat flawed. Yes, red is very salient, and this means the users’ eyes will be attracted to red words, and users may be more likely to click those words, but we’re not trying to get users to follow links just because they are perceptually salient. If that’s all we wanted, we could use the <blink> tag on all links. We want users to click on links that are relevant to their tasks. Instead of using red for links, use red to draw the user’s attention to important content.

Never display static text in blue or use underlining for anything other than a link. Alternative shades of blue may be acceptable in certain limited contexts, such as when the typeface and font size changed to make headlines, but these should be user tested to confirm that users don’t confuse them with links.

In addition to the high recognition value of blue underlined links, text links have a distinct advantage over graphic links because browsers support differentiating between visited and unvisited links, which is not possible when graphics are used.

Users quickly learn to take advantage of this information when browsing: without it, they often find themselves needlessly revisiting pages on a site that they don’t remember having visited earlier.

Link Color, Underlining, and Consistency
Use blue underlined links whenever possible, but no matter what, make sure your link style is consistent. In all fairness, ensuring consistency can be extremely difficult for very large sites, such as Microsoft’s, which demonstrates a variety of common problems in displaying links.

Types of Links
Not only do you need to distinguish which text is interactive, but you want to indicate what type of interactivity is implied by a button or link. A linked word may lead to the definition of that word, to reference material, to more detail on the topic, to another section of the web site, to an outside site, or to another location on the same page.

Some hypertext systems use menus or multiple colors of links to indicate different types of references, but web technology doesn’t facilitate making these distinctions. When graphics are associated with links, the graphics can indicate the kind of link by their style.
Another useful way to indicate the type of link is to use a link title.

A TITLE parameter is available for links in some browsers; these show a specified message when the user positions the mouse pointer over a link, as seen in the following example.

<a href http://www/usabilityfirst.com/ title=“a reference web site for usability”>Usability First</a>
The TITLE parameter helps disambiguate the type of a link without an extraordinarily detailed explanation within the body of your text.

Report This Post