Here are the website design mistakes 1. Using Frames Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page. All of a sudden, you cannot bookmark the current page and return to it (the bookmark points to another version of the frameset), URLs stop working, and printouts become difficult. Even worse, the predictability of user actions goes out the door: who knows what information will appear where when you click on a link? 2. Gratuitous Use of Bleeding-Edge Technology Don't try to attract users to your site by bragging about use of the latest web technology. You may attract a few nerds, but mainstream users will care more about useful content and your ability to offer good customer service. Using the latest and greatest before it is even out of beta is a sure way to discourage users: if their system crashes while visiting your site, you can bet that many of them will not be back. Unless you are in the business of selling Internet products or services, it is better to wait until some experience has been gained with respect to the appropriate ways of using new techniques. When desktop publishing was young, people put twenty fonts in their documents: let's avoid similar design bloat on the Web. As an example: Use VRML if you actually have information that maps naturally onto a three-dimensional space (e.g., architectural design, shoot-them-up games, surgery planning). Don't use VRML if your data is N-dimensional since it is usually better to produce 2-dimensional overviews that fit with the actual display and input hardware available to the user. 3. Scrolling Text, Marquees, and Constantly Running Animations Never include page elements that move incessantly. Moving images have an overpowering effect on the human peripheral vision. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text! Of course, is simply evil. Enough said. 4. Complex URLsEven though machine-level addressing like the URL should never have been exposed in the user interface, it is there and we have found that users actually try to decode the URLs of pages to infer the structure of web sites. Users do this because of the horrifying lack of support for navigation and sense of location in current web browsers. Thus, a URL should contain human-readable directory and file names that reflect the nature of the information space. Also, users sometimes need to type in a URL, so try to minimize the risk of typos by using short names with all lower-case characters and no special characters (many people don't know how to type a ~). 5. Orphan Pages Make sure that all pages include a clear indication of what web site they belong to since users may access pages directly without coming in through your home page. For the same reason, every page should have a link up to your home page as well as some indication of where they fit within the structure of your information space. 6. Long Scrolling Pages Only 10% of users scroll beyond the information that is visible on the screen when a page comes up. All critical content and navigation options should be on the top part of the page. Note added December 1997: More recent studies show that users are more willing to scroll now than they were in the early years of the Web. I still recommend minimizing scrolling on navigation pages, but it is no longer an absolute ban. 7. Lack of Navigation Support Don't assume that users know as much about your site as you do. They always have difficulty finding information, so they need support in the form of a strong sense of structure and place. Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user. Provide a site map and let users know where they are and where they can go. Also, you will need a good search feature since even the best navigation support will never be enough. 8. Non-Standard Link Colors Links to pages that have not been seen by the user are blue; links to previously seen pages are purple or red. Don't mess with these colors since the ability to understand what links have been followed is one of the few navigational aides that is standard in most web browsers. Consistency is key to teaching users what the link colors mean. 9. Outdated Information Budget to hire a web gardener as part of your team. You need somebody to root out the weeds and replant the flowers as the website changes but most people would rather spend their time creating new content than on maintenance. In practice, maintenance is a cheap way of enhancing the content on your website since many old pages keep their relevance and should be linked into the new pages. Of course, some pages are better off being removed completely from the server after their expiration date. 10. Overly Long Download Times I am placing this issue last because most people already know about it; not because it is the least important. Traditional human factors guidelines indicate 10 seconds as the maximum response time before users lose interest. On the web, users have been trained to endure so much suffering that it may be acceptable to increase this limit to 15 seconds for a few pages. Even websites with high-end users need to consider download times: many B2B customers access websites from home computers in the evening because they are too busy to surf the Web during working hours.
I've designed a few websites myself and seen a lot of these lists. I know that doesn't make me very experienced as a developer, but I am a very experienced web surfer, so I hope you don't mind if I add a few of my own personal pet peeves. 1. When music automatically plays when I enter a website. This is especially bothersome when there is no option to turn it off. I usually leave these websites promptly! 2. Backgrounds that make the text hard to read. Again, this will usually cause me to leave the site without reading it. Also, brightly-colored backgrounds hurt my eyes. 3. Sites that put navigational menus in odd places. Site navigation should either be along the top of the page or along the left side. That is fairly standard and the first place people will look. 4. Sites that have more ads than content. This is especially irritating when the site shows up on google search results and seems like it is exactly what I'm looking for based on the description in google, but when I click on it, it is almost all ads! 5. Sites that are too wide for my screen. If I have to scroll horizontally in order to read the page, I generally won't bother. 6. Sites that don't have links to the home page on every page. If the site has a logo, it should also be clickable and link back to the home page. 7. Sites that change the navigation from page to page. 8. Sites with long pages that don't provide a "back to top" link. 9. Sites with long blocks of text, especially without frequent paragraph breaks. If I'm reading an article, I can understand long blocks of text, but there should still be plenty of paragraph breaks. And if it isn't an article, I prefer bullet points or other means of breaking up the text. 10. Sites that only work in internet explorer. I use Mozilla Firefox, and I know a lot of other people do. While I do think it is important for a site to look good in IE, I can't think of anything more irritating than getting ready to purchase something or download something, and being told that I have to view the site on IE before I can. This happens to me from time to time, and GRRR! So for what it's worth, these are my ten web design pet peeves, in addition to those listed by the previous poster.
I don't agree... I mean.. standard colors for all links? Ok for some sites.. but.. "Note added December 1997".. so that's 10 years ago.. lol
Here is another mistake in website development (creative, layout, user experience)....something I like to call Website Flow. In other words what is the websites business objective that will generate revenue? How do we get the visitor from the home page to the business objectives without having them touch the navigation? Are we able guide the user from the home page through text and graphics in the body to the objective? Keep in mind that if a visitor hits the navigation to find something without a call to action from the home page then they are fishing and are not going to find their way to meet the business objective (revenue generation or lead generation). We tend to miss this very important point when putting websites together. If it does not generate money its not going to be of much value.
The above would also be a tip with web sites in my opinion. Its not nice to see a massive block of text that isn't split up into paragraphs. People temd to just not read it, if its not presented good enough.
Nice compilation gs2004. The thing which irritates me in some websites is the colors they use for text. Can get real annoying and irritating.
Does suggest a number 11 doesnt it? For reference based sites do not include information such as dates or current events that will instantly date your copy unless you enjoy making work for yourself and will definitely remember to update all references frequently. Not sure why people copy and paste "top 10" things from a site and then try and pass it off as their own but still.... Some good points there but also some outdated ones such as link colours. Think there is the much more fundamental one though, for income generating websites hire a professional if you want a professional result. Remember that most times in life, you get what you pay for
I also agree with "Lack Of Navigation Support" all web sites that have unique navigation are always good. However, do the members know how to use the navigation? A paragraph or message is always a good idea, this way they will know hoe to use the navigation.
1) using Frames I would extend that to the gratuitous use of AJAX on some sites for things like tabs. The net result is much the same in that the site ends up inaccessable for direct linking, bookmarking, etc. I'm seeing it more and more and liking it less and less. 2) gratuitous tech Unless your site is about that technology, Joe six pack doesn't give a **** about WCAG, Validation, etc, they just want it to work. To that end I would also list flash as a violation of that when used for presentational elements... To me using flash for anything but videos (like youtube) or games is just making the site user hostile because of the what it does to navigation, load times, etc. Goes hand in hand with: 3) Constantly Running Animations Sometimes, for less relevant content a scroller WITH a control can be useful, especially if the client wants to put more information on the front page than will fit - but it is very distracting from the actual CONTENT of the page and worse, it's cutesy **** that makes the page load slower, run slower and in general is more of a pain in the ass than needed. 4) Complex URL's I would disagree about it 'not being shown' - but sensible names and formatting does help. One of the mistakes I usually see is people going nuts with bizarre directory structures that go 'up tree' via either direct links (aka the full URL of the item being linked to on the same server) or relative links (../../../WTF?) - A top down tree makes more sense, is less code, and is more portable. HTML is at the top, if HTML calls CSS it should be in the same directory or a child of top - if the CSS calls an image it should be in the same directory as the CSS or a child of that. If you 'have' to use ../ you've probably not thought out your structure very well. 5) Orphan Pages Problem a lot of people who don't use ANY form of SSI/CGI/CSC/PAFN have. Because style changes to flat HTML pages means editing EVERY page individually, you end up with pages that end up 'missed' and in general make more work any poor shmucks trying to maintain the site. Even if all you learn about SSI is <?php include('includes/header.php'); ?> it will save you TONS of maintennance effort. Even SHTML is better than having each page 'unique' and need to be edited by hand just to add or remove one menu item. 6) Long pages Good rule of thumb is one scroll at 800x600 - anything more than that most people won't read unless it's 'value content' - aka the point of the page. An in-depth article on a subject or a forum discussion can scroll till blue in the face... a home page, news list page or gallery should not. 7) Lack of Navigation support You can take this too far though - if you have nice big buttons that are visually styled, you don't need to put 'Navigation' over it, people aren't that stupid. You can also overwhelm the user by providing too many options - dropdown menus are getting REALLY bad on that subject. (I'm actually REMOVING dropdowns/flyouts from most of my sites in favor of old-school drilldown - it seems to work better for my userbase) 8) Non-Standard Link Colors I've always disagreed when people say this - go ahead, change the colors if they do not match the colors of your site. That blue might be illegible on a black background - and if I want to use a black background I will USE a black background - so **** the default colors. The trick is to make sure you trap ALL states, give obvious visual cues that the text in question IS A LINK, and apply it consistantly across the entire site. Having the sidebar have one color behavior, the content have another and the footer have yet another? Not good. 9) Outdated Information The term is 'web rot' - A common problem on a LOT of sites... and a lot of programs. You see it all the time in software design where you'll have entire teams adding stupid new crap that adds no actual functionality (expose, flip3d, compiz, new UI themes, skinning) instead of fixing underlying problems like memory leaks, poor wireless support, unneeded bloat, etc, etc. In terms of websites too many people think of it as a 'slap it up and be done with it' instead of something that needs to be cultivated and nurtured as time goes by. 10) Long Download Times AMEN BROTHER. PREACH ON!!! Here's a tip, if your website is half a meg or more in 60-100 files, even BROADBAND users are going to get pissed at your site and likely not visit again. The overuse of flash and alpha-transparant .png are the leading offenders in this category, but just as often the techniques used to make a high-graphic page can be held up as another cause. Too often people think JUST in terms of filesize forgetting that the number of files involved also have an effect - moreso in browsers with poor caching and handshaking models (like gecko). Ever sit there on broadband watching a page load in firefux, the endless counter of images going by going 'come on, load already!' - ever notice when uploading a bunch of small files via FTP that 30-40 1k files often takes longer to upload than a single 500k file? The cause is 'handshaking' - for each file request you have to send a request to the server, then get the acknowledgement back, then send ANOTHER response to actually start the transfer. "I want this file" - "Ok, I have that file" - "Good! Send it to me"... that's the equivalent of three or more 'pings' to the server before you even start actually getting data. (and server load can further increase this overhead). Real world averages put this at 200ms per file, but dialup users connected through cheap routing on a narrow backbone could see this climb as high as a full second - and even some broadband users can see times as high as 500ms. You have 100 files, at 500ms each that's 50 seconds overhead... even best case on a 10/100 lan connected direct to the server you are looking at 60-100ms per handshake, working out to 6 to 10 seconds overhead... you know how much data you can transfer in 10 seconds as a single file at 100MBPS? This is where techniques like 'eight corners under one roof' and 'sliding doors' shine - you use a hair of extra code to combine the images down to a single file... I'll use a real world example here: http://www.classicbattletech.com - I wrote that layout based on one of their print products three years ago... it shows it's age too. Poor web standards support, layout errors in newer browsers because I didn't have a firm handle on cross-browser coding at that time, use of .js popups because 'it was cool' without taking into consideration screen sizes or that news titles might actually wrap lines, etc, etc. But the big problem - a home page that is over 280k in 71 files, 118k of that being the HTML. Scary part is that's an improvement in size and layout over what was there before, and an even BIGGER improvement over what was there before that back when the home page was >1 meg seven years ago when nobody (except the previous maintainer) even had broadband. The following is where the current template rewrite is at (due for a february or march deployment) - there's a few elements missing and there's going to be about 3k of javascript added to make the news items 'accordion' - but for the most part it's a fair comparison: http://battletech.hopto.org/site_designs/CBT4/template.html 122k in 13 files despite having MORE visual elements... I have given myself a maximum page size of 180k and 15 files, which gives me MORE than enough leeway to add more stuff. The page also does my own take on 'mcSwitchy' changing the layout for wider screens (check the page at 1280x960 vs 800x600) and in general looks like it will be more accessable than the previous version. A lot of the size reduction is in the code itself (16k vs. 118k HTML), but the handshake savings can be attributed to combining many of the page elements down to a single files: http://battletech.hopto.org/site_designs/CBT4/images/themeImages.png http://battletech.hopto.org/site_designs/CBT4/images/languages.gif http://battletech.hopto.org/site_designs/CBT4/images/webPartners.png http://battletech.hopto.org/site_designs/CBT4/images/font_weltronUrban.gif 71 files is 'real world' about 14 seconds 'wasted' overhead even for broadband users on handshaking - going to using only 15 files is going to save about 11 seconds. A little planning and understanding of how pages are composited can go a LONG ways towards not only improving the user experience, but also saving you on server load and hosting costs... a final point on page size reductions that larger companies who ignore web standards and new techniques often forget. (see the steaming pile of garbage YAHOO! outputs for code these days)
Wow there is a lot added there, I will have to read through it all properly. I have just quickly skimed through it at the moment.
Sounds and music on web sites are just annoying, I would be suprised if anyone likes them really. If you want to add music, make it so the viewer chooses if it plays or not.
music and sound and banners with sound piss me off, and if the site is not important I will never go back to it again if it has music.
BOTH browsers? That's a bit like saying you play both kinds of music - country AND western. Especially given neither of the two browsers you listed actually adhere to web standards, BOTH not even having completed thier implementations of the now decade old CSS2 spec. Testing in the four major engines points out a LOT of gecko's shortcomings - and once you realize the shit and incorrect behaviors you've relied on for firefox, you realize you've been coding as broken as coding for just IE... The mantra "code for FF, hack for IE" you hear chanted by certain zealots is as flawed as 'code for IE, **** the rest'.