Tips and design common sense rules recommended for the modern web:
Provide compelling content / something of value
- Make sure each page in your website has something valuable to offer . Though this doesn’t really relate to design, it’s actually more important than design, which is why it’s the very first tip. Fundamentally a web page exists to provide something that’s useful or interesting to visitors. If your page doesn’t have that, then you must fix that problem before you worry about how to present it.
Avoid Sleazy Elements
- Don’t distract your visitors with blinking or scrolling text, animated GIFs, or auto-loading sound. Animation and sounds are distracting. How can anyone concentrate on reading what’s on your site when there are things flying around the page? It’s like trying to read a newspaper when someone’s poking you in the shoulder repeatedly. Another problem with scrolling text is that the reader can’t read it at their own pace. They’re forced to read it at whatever speed you deliver it. They might have preferred to read those two sentences quickly and then move on, but because it’s scrolling they have to sit there and wait for the text to slowly appear. Always keep your visitors’ interests in mind. Make sure you try to please them, not yourself. Scrolling text does nothing to serve the visitor.
- Don’t annoy your visitors with pop-up windows. Nobody likes pop ups. Here again, the only reason a site would have pop ups is because the site owner is thinking of his/her own interests rather than the readers.
- Don’t use image backgrounds. Image backgrounds scream “amateur”, because it’s mostly amateurish sites that use them. This is one mistake I have to overcome! Quick, can you name a single professional, respected site that uses image backgrounds? Not Google, Yahoo, eBay, Amazon, the New York Times, Webmaster World, or any others. One reason that backgrounds scream “low quality” is because sites that use them are often user-hostile in many other ways as well. For example, when I visited a site recently and saw that they used an image background, I wasn’t surprised to find that the site also has extremely slow page-loading times, internal links that pop up into brand-new windows, links that are the exact same color as the surrounding text, cheap animated GIFs, blatant keyword stuffing, and numerous embarrassing misspellings. Another problem with them is that they take longer to load. That said, image backgrounds are fine if you know what you’re doing. They can work if you make sure the contrast is very high or you don’t put any text over them.
Make it Easy to Find Stuff
- Put some thought into organization. Think about what content you have and how it should be organized. This is at least as important as what your pages look like, so actually spend some time on it. You do your readers a disservice if they can’t easily find what they’re looking for if everything is thrown up on your site in a haphazard fashion.
- Minimize clicking! Put as few clicks between your visitor and your information as possible. The more you force your visitors to click around your site the more likely they’ll abandon it. Even if they don’t leave they might get annoyed, or not view as much of your content — either of which is bad for you.Is your home page a splash page (a page with no meaningful information on it, that simply “welcomes” visitors to the site, along with an “Enter Site” link)? If so, get rid of it. After someone takes the effort to visit your site, give them your site right away! Don’t make them knock on two different doors.
- Limit page length to 2 screenful, or 6-7 screenful for articles. While you should put a lot of info on each page to minimize clicking, don’t go too far in the other direction by putting too much info on a page. You should normally limit a page to no more than two screenful of info.
- Include a way to get back to the home page, on every page. When users get lost they like to start over from square one. Make it easy for them to do so. If you’re including a clickable logo on the top of every page, make sure to also include text that says something like “Home”, because some users don’t realize that logos take you back to the home page. Also remember that users might not be able to hit the “Back” button to go back to your home page, because they might have entered the middle of your site after clicking a link to it from a search engine or from some other site.
- Include a menu on every page. While you should provide a way for users to get back to your home page quickly, you shouldn’t force them to go home before they can go somewhere else. Include a menu on the left or the top of each page.Don’t put navigation links only at the bottom of pages, because then users will have to scroll down to the bottom to get to them (unless your pages are very short). On long pages, you’ll want navigation elements on BOTH the bottom and the top or left, so that users who have read a lengthy page don’t have to scroll back up to get to the menus.
Don’t bog your website down
- Compress your image files. Nothing is more annoying to readers than waiting for a 200k graphic to load when it should be only 20k instead. Graphics software can compress files so they take up less room on your disk, and therefore take less time to load into your visitors’ browsers. Photoshop is a great tool in saving compressed image files for the web.
- Don’t let flashy multimedia ruin your site. Flashy graphics and multimedia controls may look nice, but they’re bad when they make it hard for visitors to get the information they want from your site. Nobody wants to be annoyed by having to use a cumbersome Java scroller to see all the text in a field, much less wait for all the doodads to load — if they even work at all.
- No line of text should be more than about 600 pixels wide. The reason that newspapers and magazines are printed in columns is to make the lines short, so after you read one line, it’s easy to find the start of next one.
- Don’t make your page too wide. Most users have 1024×768 monitors, so pages should be completely visible at 1000 pixels wide without horizontal scrolling. As of 2009, about 10% of users has a screen that’s 800×600 pixels or less, so many designers make their pages work at sizes as small as 770 pixels wide. The tradeoff is that if you design for 770 pixels, you’re wasting the space available to the other 90% of your visitors. You could use a “fluid” design that’s wide as the user’s window, whatever that may be, but it’s hard to make fluid designs that look good at any resolution. What size to format your pages for is a tough decision full of trade-offs. If your page doesn’t work at 1000 pixels, it’s too wide.
- Use contrasting colors or simple backgrounds to make your text easy to read. It’s hard to read light text on a light background, or dark text on a dark background. There are also some color combinations that don’t work. (adapted from websitehelpers)