08.28.08
Top Ten Mistakes in Web Design
Summary:
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.
Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2007.) 
1. Bad Search
Overly literal search engines reduce usability in that they’re unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody.
A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document’s importance. Much better if your search engine calls out “best bets” at the top of the list — especially for important queries, such as the names of your products.
Search is the user’s lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that’s what users are looking for.
2. PDF Files for Online Reading
Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don’t work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user’s browser window. Bye-bye smooth scrolling. Hello tiny fonts.
Worst of all, PDF is an undifferentiated blob of content that’s hard to navigate.
PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.
> Detailed discussion of why PDF is bad for online reading
3. Not Changing the Color of Visited Links
A good grasp of past navigation helps you understand your current location, since it’s the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.
Most important, knowing which pages they’ve already visited frees users from unintentionally revisiting the same pages over and over again.
These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don’t change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.
> Usability implications of changing link colors
> Guidelines for showing links 
4. Non-Scannable Text
A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.
Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:
- subheads
- bulleted lists
- highlighted keywords
- short paragraphs
- the inverted pyramid
- a simple writing style, and
- de-fluffed language devoid of marketese.
> Eyetracking of reading patterns
5. Fixed Font Size
CSS style sheets unfortunately give websites the power to disable a Web browser’s “change font size” button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.
Respect the user’s preferences and let them resize text as needed. Also, specify font sizes in relative terms — not as an absolute number of pixels.
6. Page Titles With Low Search Engine Visibility
Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.
The page title is contained within the HTML <title> tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it’s truly microcontent.
Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don’t start with words like “The” or “Welcome to” unless you want to be alphabetized under “T” or “W.”
For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it’s also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.
Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.
7. Anything That Looks Like an Advertisement
Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)
Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don’t study it in detail to find out what it is.
Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:
- banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
- animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
- pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).
8. Violating Design Conventions
Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That’s good
.
The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users’ expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.
Jakob’s Law of the Web User Experience states that “users spend most of their time on other websites.”
This means that they form their expectations for your site based on what’s commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.
9. Opening New Browser Windows
Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet. Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).
Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user’s machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don’t notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.
Links that don’t behave as expected undermine users’ understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser’s “open in new window” command — assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior. 
10. Not Answering Users’ Questions
Users are highly goal-driven on the Web. They visit sites because there’s something they want to accomplish — maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.
Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn’t meet their needs if you don’t tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don’t have time to read everything, such hidden info might almost as well not be there.
The worst example of not answering users’ questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it’s rife in B2B, where most “enterprise solutions” are presented so that you can’t tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking “Where’s the price?” while tearing their hair out.
Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.
Inspirational Webdesigns
A Must Read about buying i-phone 3 G Review
Friends …..those of you in India planning for iPhone… THINK TWICE BEFORE MAKING A DECISION… The short comings of iPhone are endless…
No video calling,
no AD2P on the Bluetooth, (No Stero BT headset)
CAN’T share ANY (mp3, images,videos….) files via bluetooth,
can’t use as a wireless modem, (you pay ridiculous data charges to activate internet on your phone, but cannot connect it to your PC and browse when you are at home)
no copy and paste,(cannot copy a part of a…. say…. email & send it….have to type it out yourself)
no 3.2 or 5 megapixel camera,(the 2MP camera it carries is worst camera i’ve ever seen….. photos look like they have come out of a VGA camera)
no video recording with camera,
no front camera,
no flash.
no JAVA support
No physical keyboard (BELIEVE me! this alone is a dealbreaker…touch keyboard as good as it looks…once you use it then only you come to know about the importance of having a hard keypad)
No 3G network yet in India..so why pay for expensive 3G phone if you cant use its 3G services … so, for India, iPhone 2.0 is no better than its first version
No removable battery. (You cannot change battery. Have to send it to apple outlet.. Come on now!!!!…This is not an iPod. Its a phone. You cannot live without phone for 2-3 days)
No haptic feedback and
cannot send MMS,
can’t use as external storage device (16 GB of utter waste..next time you go to your friend’s house & find some interesting songs, movies, etc…sorry you cannot connect your ‘16 GB’ phone and share it!!!! Apple apparently has a solution.. ” BUY MUSIC & MOVIES FROM iTUNES STORE “….. Give me a break will you APPLE!!!)
no FM radio,
can’t use your mp3 files as ringtones,(This is heights man!!!)
cannot insert any other SIM card….
completely tied to iTunes… Connect to your friend’s iTunes & you risk erasing everything on your phone.
list goes on & on & on….
We Indians are used to these features. Most of our phones already have these features. & we cannot do with out them…. i mean can you imagine paying so much for a phone with which you cannot transfer files via bluetooth. what age is this …STONE AGE???
Some features may be activated by jailbreak.. But why the hell should you risk losing your warranty after paying so much.
And want to add third party softwares??.. YOU HAVE TO BUY THEM FROM iTUNES STORE ONLY!!! . (Shell out more money). Apple is a bloody control freak. Dont surrender your freedom to it.
Its good for american market (who have no idea what mobile freedom/choice is) which is in stone age compared to asian/european markets. When they want to buy a phone, they have to go to network operators and buy only those phones that are available on that network. & stick to that company till their contract expires. You want to change carriers? Not before paying damages, & buying another phone on the other network again.
On the contrary, we in India have so much freedom. We go to handset shops & buy which ever phone we like. Then go to carriers.. checkout the plans & buy SIM.. Dont like the plan or rival carrier came up with a better plan???? EASY .. just remove & replace the SIM.
Apple are trying to IMPOSE THEIR MODEL ON US riding on the hype iPhone has created in the US (yes it was a flop in Europe .thats why Apple never talks about its sales in Europe).
Dont fall for the subsidized price of iPhone… CHECKOUT THE DATA PLAN ATTACHED TO ITS SIM ..they will recover the cost through ridiculous data plans. Bill might come to around Rs 2500/month.(ATLEAST AMERICANS PAY THAT MUCH)
Let me clear one thing though.. iphone is the best looking phone (its touch interface is nothing like you have ever seen ), & best browsing experience out there no doubt …. (& others are fast catching up..check out the android demo at Google IO 2008)…. BUT AFTER A FEW DAYS IT ALL COMES DOWN TO FUNCTIONALITY…
Those of who buy it… You will be most happy for atmost a week… & then, MARK MY WORDS…YOU WILL START REGRETTING IT!!!
So friends lets spread this info to all our friends and help them in making a wise decision….. & those of you who have bought unlocked versions already please share your experiences with others
THANKS FOR YOUR TIME…. GOODLUCK!!!
To Disable F1 Key in Browser
Following code is to Disable F1 Key in Browser
<!——–//
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.2.0/build/yahoo/yahoo-min.js”></script>
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.2.0/build/event/event-min.js”></script>
<script type=”text/javascript”>
document.focus; //Focusing on the document is important as the F1 key trapped is based on the document object.
function isexplorer(){
if(navigator.appName.indexOf(‘Microsoft’)!=-1)
return true;
else
return false;
}
YAHOO.util.Event.addListener(document, “keydown”, processKeyDown); //This listener listens for keydown event.
document.onhelp = new Function(“return false;”); // To disable default help in IE
function processKeyDown(evnt) {
if ( evnt == null )
evnt = event;
if ( evnt.keyCode == 112 ) //F1
{
help(); // Insert the help function calling or script statement here
if(isexplorer()== false)
{
evnt.preventDefault(); // disable default help in Firefox
}
return false;
}
}
function help()
{
//Handles the help part
alert(‘This is the help function’);
}
</script>
</head >
<body>
<h2 style=”color:blue;”>F1 Key Press Trapping Demo</h2>
</body>
</html>
//–>
08.27.08
To Disable cut,copy,scroll in IE Browser
<html>
<body ondragstart=”return false” onselectstart=”return false”>
hii.Try selecting or dragggin the text .ain’t it possible rite???? ha ha ha
</body>
</html>
To Disable a Back button in browser
You can insert this code in all your pages: <SCRIPT> <!-- javascript:window.history.forward(1); //--> </SCRIPT>
Browser FAQ’s
Check browser properties
Q: Can I check whether Java is enabled in the browser?
A: The method to check whether Java is installed and enabled is navigator.javaEnabled(), which returns a boolean value.
Q: How can I get the operating system the browser is using?
A: You can read the application version of the browser that executes your Javascript code from the navigator.appVersion property. This string is part of the user agent identifier that the browser sends to a server when it requests a Web resource and usually includes the browser version number and an indication of the operating system the browser is running on.
This property may be interesting purely for information, but you should be cautions about how you interpret its contents and avoid using it to control script execution. In many browsers, the user agent string can be modified to “spoof” as a different browser type, use arbitrary text or withhold any user agent information at all.
Controlling the browser
Q: Can I set the printer properties using Javascript?
A: No, the Javascript object model includes a window.print() method that may activate the standard print dialogue of a Web browser, but that is as far as the functionality extends. It would not be appropriate or safe for Javascript code to be able to check the printers attached to a computer, look up printer properties or arbitrarily configure their settings.
If you want to influence the way a Web page is printed, you will find it much more effective to use Cascading Style Sheets for print media. See the Media style sheets FAQ for further details.
Q: Can I select a particular printer using Javascript?
A: There is no DOM standard object reference to system printers and therefore no Javascript or ECMA script application programming interface for selecting amongst available printers. The basic DOM level 0 function for printing is window.print(), which should raise a print dialogue. Whether users have any printer attached to their computer, decide to choose amongst them and to commit the print job is outside the control of Javascript. It would be a security hazard if Web page scripts could arbitrarily control computer peripherals and expend paper and ink without user intervention.
Q: Is there a method to clear the browser cache?
A: It should not be possible to clear a browser cache using Javascript because this would be a security hazard.
Q: Is there any way to enable Javascript if it is off?
A: There is no way to switch on Javascript in a Web browser if it is not enabled. It would be a serious security hazard if code in Web pages could override users’ browser settings in this way.
People choose to switch off Javascript because some Web developers mis-use Javascript to affect the way their browser works; typically with pop-up windows and redirects to pages they have not chosen to visit. Some Web browsers do not support Javascript at all, so your Web pages should be designed to provide useful information for people without Javascript.
Locking down the browser
Q: How can I suppress the print dialogue?
A: It is always a bad idea to try to stop people’s Web browsers working the way they expect. There are very good reasons for a print dialogue to be shown; so that it can be cancelled in case print was requested by mistake, so that the settings can be adjusted as required for the content, so a different printer can be selected. Can you be sure they actually have a printer connected?
You should re-consider why you want to disable the print dialogue and perhaps provide more guidance to the user about what you would like them to do. The media dependent style sheet FAQ may give you some further ideas.
Q: How can I suppress Ctrl+N for new window?
A: It is never a good idea to stop people’s software from working the way they expect it too. You should re-think why you would want to do this. If there is some shortcoming in your application design? Don’t try to break your users’ Web browsers to work around it, they will not thank you for it.
The Ctrl-N keyboard combination is probably one of the least commonly known ways to open a new Web browser window and there are several more obvious ways to do so anyway.
Q: How do you disable view source and save image options?
A: It is never a good idea to stop people’s browsers working the way they should and you should look again at why you want to stop them doing things that are fundamental to the Web. There are techniques that can make these operations difficult, but they can be overcome simply by switching off Javascript in the Web browser or using a different client.
Any efforts to stop people taking copies of content that is published on a public Web address are futile and likely to impair the usability of your site. If you do not want to risk the possibility that people will take copies of your source code and images, do not publish them on the Web or find a different way to achieve your goals.
Q: How do I disable the “Save As” option in IE using Javascript?
A: This is another example of something you should not attempt to do with Javascript, it is never a good idea to try to prevent a person’s browser working the way it is intended, some would regard it quite hostile. In this case, the objective is completely futile; any HTML, image, Javascript or CSS that is published on the Web is completely in the open and can be saved in numerous ways. In most cases Web resources are immediately saved in the browser cache.
If you are trying to protect a digital resource that is truly valuable, you should not make it available on the Internet.
Q: Can I use Javascript to disable the browser cache?
A: It is not possible or desirable for Javascript code on a Web page to disable fundamental browser features such as URL resource caching. You should re-think the issue you are facing and consider a different way to tackle it. For example, you can set HTTP headers to request resources are not cached, and that cached resources are refreshed after a specific period, or that the freshness of cached resources is checked before re-loading a page. Web user agents are not obliged to follow these directives, but most will be configured to do so. See the Site manager FAQ for cache configuration examples related to stylesheets.
