Usability Issues - HTML

Usability is not just about convenience and the lack of errors that should be the hallmark of your Web site. In the long run, it means you must also be aware of your users’ comfort level and disabilities. If you take care to make sure your Web site is usable for people with disabilities, you can be sure that the site will be usable for others.


Advertising is a necessary evil for many sites that depend on revenue to stay afloat, but there are some obvious things to avoid:

  • Looping animations simply drive people crazy and are as bad as the old blink tag.
  • Pop-up ads. Usability studies show that not only are they not particularly effective, but that they instill negative feelings towards Web sites that use them.
  • Flash interstitials are Flash-based ads that dance across the screen or pop up in front of content the reader is trying to read. They are often difficult for users to close, because there is no standard for closing them. Using these is tantamount to asking your Web visitor to leave.

If you need to use advertising, consider creative ways to do so. Maybe you can find a sponsor for your site that will add a tagline at the end of all your articles with a link to the sponsor site. Or, you can use unobtrusive banner ads. The main thing to remember is to use advertising with care.

Animation, multimedia and applets
The biggest thing to remember about animation and applets is you should use with extreme caution. If that sounds familiar, it’s because you just read that same thing about advertising. That’s no coincidence, as much online advertising is animated. For example, is there a business reason for using a Flash animation, or are you just tempted by them because they’re cool. Keep in mind, one of the most frequently clicked links on a Flash presentation is “Skip Intro.” If you’re absolutely compelled to use animation, be sure they don’t loop (repeat over and over).

In addition, avoid scrolling text and anything in the marquee or blink elements.Another annoyance for many Web site users is an opening sound that turns on when you visit a site. This can be especially troublesome in work environments. Users may feel a genuine business need to visit your site during business hours and may in fact be doing business for their company through your Web site, but if sound or music greets them when visiting, they may flee. Worse, they may feel embarrassed for having initiated your musical background and never return.

Color and links
Most usability studies suggest that white backgrounds are easiest on the eyes. Black backgrounds tend to be more difficult. Maintain current standards when establishing the colors for your links: links to pages that have not been visited by the user are blue; links to previously seen pages are purple or red. Some usability experts maintain that you should not deviate from the underlining method of linking, but more and more developers are finding that text simply highlighted in blue combined with a a:hover CSS style definition that changes the color when a user’s mouse hovers over the text doesn’t negatively affect usability and may even improve it.You should also avoid giving archived items new URLs. When designing your site structure, design it in a way that stories can be stored in a specific directory permanently, and maintain the link to that site indefinitely.

Maintaining consistency
Make sure you have common layout for your all of your Web pages and be sure that the location of your title, logo, navigation, and content are all consistent from page to page. In addition, your navigational links and/or menus should be placed within the first screen your Web user encounters on any given page so they don’t have to scroll to find the links.

The first screen fold, which is the first screen users see, is the most important, because it’s what determines whether or not users will remain on your site. If the first screen takes a long time to download and doesn’t immediately specify pertinent information to the user, users will never go to a second screen.

Drop-down menus
You can create drop-down menus using JavaScript to conserve space. Drop-down menus can be very helpful if they’re done right. But often drop-down menus don’t work, they flicker, or the user has to get the mouse over just the right menu at just the right spot to make it work. If you use drop-down menus, make sure they’re airtight.

Fonts and font size
Fonts should be readable. That sounds obvious, but many of today’s sites have very small type. This is a strain on anyone with vision that isn’t excellent, which is a large proportion of any population. Generally, serif typefaces are easier to read than sans-serif.

One general survey of the Web found that a majority of sites use 12-point fonts (size= 3) The same study also rated the best fonts for reading times and ease. Whatever you do, be consistent. Don’t change your site’s font. If the stories on one page are Times or serif, all of them should be.

Using frames
Frames were once highly popular with Web site designers, but never with users. They can cause fundamental problems with your Web site’s navigation, especially with older browsers (which are admittedly becoming less of an issue as users upgrade). Note that the functionality of frames can be easily duplicated by using server-side includes. All major Web site servers support a scripting language capable of using server-side includes, so in today’s modern Web environment the excuses for using frames are gone.

Including graphics
Graphics should be related to what you or your Web site offers, rather than acting as eye candy. Of course, having eye candy that speaks to what your Web site does is perfectly fine, but creating flashy imagery, especially that found from stock images (which means someone else may be using the same thing) can be detrimental. Also, be wary of download times. Optimize your graphics wherever possible. Long download times resulting from large images (in number of bytes, not necessarily screen size) can prompt visitors to quickly scan for faster sites.

You’ll often see thumbnails that lead to larger images on many sites. This is a good compromise between the need for graphics and the need for fast download time, but be careful not to resize the image using the img element’s attributes. You need to resize an image in your graphics editor before bringing it into your Web page.

Always use headings when developing headlines, because they’re structured for that purpose and are interpreted by accessibility software (software for aiding disabled persons) correctly as headlines, whereas a CSS-styled sentence with large type will not be interpreted as a headline by such software. If you don’t like the space between an H1 element and a paragraph, try to become accustomed to it. Your Web site viewers are fine with it.

Horizontal scrolling
Avoid forcing the user to scroll horizontally by using flex tables, which are tables that use widths based on screen size. For example, the following table will take up100% of the screen, and content will collapse and expand when a user resizes thewindow.

<table width=“100%” border=“0” cellspacing=“0” cellpadding=“0”><tr><td>Even though this is a very long line, it will collapse when the browser window is resized. This is because you have a width that is relative to the size of the browser window, instead of a set width of, for example 100 (width=“100”) pixels.</td></tr></table>

A flex table as rendered in a full-sized browser window.

A flex table as rendered in a full-sized browser window.

We can’t tell you not to use JavaScript because virtually every major site uses it, but we can tell you that if your JavaScript produces errors your visitors will flee. It’s absolutely essential that your JavaScript be airtight. If you use JavaScript, get a good debugger. The newest versions of the Mozilla browser, which is free, contain excellent JavaScript debugging tools.

A flex table as rendered in a re-sized browser window.

A flex table as rendered in a re-sized browser window.

Making sure your Web site is legible is another important aspect to usability. Areas of concern to you should include the following:

  • Line length. Keep your sentences short. Keep your paragraphs short. Keep everything short. People are in a hurry. You don’t want them to leave in mid-sentence.
  • Novice versus expert users. Keep in mind that not all your users are experts. It’s possible that your some of your visitors have been surfing the Web for a very short period of time. Some people still double-clickWeb site links. Keep these users in mind as you prepare your site.
  • Page length. Generally, your Web pages still shouldn’t force readers to scroll down very far, although usability studies are showing that today’s Web users are more willing to scroll than before. It’s still a good idea to keep Web content chunked (as discussed in the previous chapter), and to keep each chunk on a separate page. Hyperlinks are a very good tool and make extremely long pages unnecessary.
  • Page width. Users don’t like to scroll right, so don’t make them. Use flex tables
  • if you want to be sure users won’t have to scroll right (flex tables use widths of percentage-based units instead of pixel based units).
  • Personalization. Users have been shown to be willing to register to a site if they can have some customized preferences. If you can drop a cookie that greets your Web visitor the next time he or she visits your site, you’ll improve your chances of obtaining return visits.

If your site has a lot of pages (100 pages or more is the hard and fast rule, but if you have 50 pages or more you should consider it), you should include a search box on your main (home) page with the word “search” next to it. You don’t even need to develop your own search engine to create a search tool. Google offers a free search utility that you can plug into your own site. Another free tool is Atomz (www Both of these services search your site and return results specific to your site only.

Provide a link to a sitemap that maps out all the major areas of your Web site. This map can appear on its own page and usually consist of category trees showing all of your site’s categories and major subcategories. Sitemaps can double as tables of content, and some Web sites place them directly on their home page and use them as their primary navigation tool.

URL length
Try to keep the length of your URLs as short as possible. If you work with server-side queries and updates, this advice can come in conflict with the way action=post and action=get attribute/value pairs work with forms. The post value should generally be reserved for updating databases, rather than simply querying them. This is because the browser caches form data and will ask the users if they want to reload a page when they hit the back button and later return to a page that results from a database query. This can be annoying to users and can be avoided by using the get value in a form action attribute when performing such tasks as simple database queries. The downside of using get is that the query shows up in the browser’s URL address window. You need to decide which of those two situations is worse. If you’re updating data, you should always use post.

Conventional wisdom in today’s Web world is that all Web sites should have a tagline that identifies what the owner of a Web site does. It doesn’t need to be more than one line, although it needs to be clear and, as mentioned in the preceding chapter, should not consist of marketing hype. It’s better to say something like, “Sellers of antique Edwardian furniture,” than “The best antique furniture in the world.” Be as specific as possible in as few words as possible and allow your visitors to move on, hopefully to another section on your site.

Windows 1252 character set
The bottom line on this character set is, don’t use it unless you’re absolutely sure everyone reading your site is an American or Western European using the Windows operating system. Use the encoding that is appropriate for your Web site’s audience. Most Western encodings should look like this:

<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>

The Need for Accessibility
How do you feel about shutting out 20% of all Web surfers from your site from the moment you go live? If you don’t account for individuals with disabilities when you start up a Web site, that’s exactly what you’re doing. According to the National Institute on Disability and Rehabilitation, 19.4% of noninstitutionalized civilians in the United States had a disability in 1996. That comes out to 48.9 million people. Nearly half were considered to have a severe disability.

Nine percent of all Web users have a disability, half of whom are blind or visually impaired, according to a study by Georgia Tech University. If that doesn’t convince you of the need for adapting to accessibility guidelines, here are a few more reasons to think about. By creating a Web site with high usability standards, you accomplish the following:

  • You demonstrate good citizenship by not discriminating against people with disabilities.
  • You reduce the risk of litigation, costly settlements, unfavorable publicity, and potential loss of business.
  • You appeal to baby boomers in the U.S., a large and aging market segment that will be a contributing factor to the overall growth of disabled people in the United States as they enter into late adulthood.
  • You gain an edge on an important market, because nearly 10% of all American Web users are disabled, along with approximately 750 million people worldwide. These people have an income of more than $188 billion U.S. dollars.
  • You comply with federally regulated guidelines and best practices, as governments all over the world have enacted laws and regulations mandating Web site accessibility.
  • You provide access to wireless devices

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics