Good Website DesignTopic 11

Purpose of a Website Website Etiquette Website Organization Hyperlinks Plagiarism Bad Websites References

Content

A webpage has to offer something to the viewer◦ More than pretty colors, pictures, etc◦ A viewer goes to a webpage for a purpose

Read information Buy merchandise Watch a video, etc

Purpose of a Website

Advertising◦ The bread maker for websites

Google, Facebook, etc.◦ Advertising content should be no more than 25%

of content◦ Would you watch TV if a channel has 50 minutes

of advertising each hour?

Purpose of a Website

Avoid animation and sound◦ One thinks animation is an attention getter◦ Readers know flashing banners are advertising

People learn to tune out flashing banners Takes more time to download animated content and

sound files Viewers may hurry to leave a webpage if webpage

has too much animation or sound

Website Etiquette

Avoid pop ads or windows◦ A big annoyance to viewers

Do not prevent a viewer from backing out a website◦ Example – some websites prevent viewers from

leaving◦ Viewer clicks the BACK to the previous webpage

and the annoying webpage reloads

Website Etiquette

Avoid using background images◦ Some claim this means website is designed by

amateurs◦ News and information websites do not have

background images◦ Usually these websites still provide logos and

pictures◦ Webpages with large images take longer to load

Website Etiquette

Avoid using background images Cornerstone of bad website with

background image is MySpace Dan Piraro – "Badly designed, impossible to

navigate, ugly, loud, depressing, reeking of death. How did this beast that is eating the fabric of our civilization and puking it up on the shoes of our future achieve such popularity?"

Website Etiquette

I believe a background image can complement a webpage

Rules The text and information has to stick out

from the background◦ Overlapping

Dark background and light text Light background and dark text

◦ Side by Side Background image is away from the text and

information

Website Etiquette

Compress images as much as possible◦ Reduces download time

Avoid complicated Flash videos and animations◦ Makes website look neat◦ However, takes time to download all the files◦ Exception – art or music websites

Website Etiquette

Flash◦ A specialized program that allows animations,

intense graphics, sounds, etc.◦ Complicated menus with animation tend to be

flash Splash

◦ Increases the complexity◦ Usually for internet games

Website Etiquette

Many websites have minimized flash content◦ Compatibility issues◦ Takes time to download◦ Graphics can be too much

Avoid too wide a website◦ Viewer has to scroll left to right to read website◦ Keep width of website around 600 – 800 pixels

Website Etiquette

The website has to be organized◦ Viewers can easily navigate throughout a website◦ Everything must be a few clicks away◦ Would you like to click 20 times on one website to

get to the correct webpage? Homepage – the first webpage in a website

◦ Flashy welcome page◦ Avoid Flash and Splash Welcome screens that

have no content◦ Regular viewers get tired of this

Website Organization

Make text large enough to read Do not use all CAPS to capture viewer’s

attention◦ Can use different colors, bold, etc.

Avoid spelling and grammar mistakes◦ Most viewers may be literate◦ Viewers may judge your website critically

Website Organization

On every webpage, have a link back to the homepage◦ Viewers can rapidly return to the beginning

Always put the menu bar at the top (or top left side)◦ Viewers see this when webpage loads◦ If menu bar is at the bottom, then viewer has to

scroll all the way down

Website Organization

Keep content to a minimum Government and education websites

◦ They pack too much information on to one page◦ Easily overwhelm the viewers

Website Organization

Be careful with email addresses◦ Spambots – programs search the internet for

email addresses◦ On website, if email is a text, a spambot can read

this email and include it on a junk email list◦ Can create a graphic for email

May annoy viewer

Website Organization

Should have contact information on every webpage

I found a website for Tuzla◦ All phone numbers did not work◦ No contact email address◦ No fax numbers◦ No address

Website Organization

Websites If you are selling products and services Include contact information

◦ Email address◦ Phone number◦ If website allows ecommerce, make sure

everything works◦ If customer has problems, they will not return

Website Organization

Do not underline words if words are not hyperlinks

Hyperlink words are usually underlined and tend to be blue◦ Modern trend – hyperlink changes color when

mouse rolls over hyperlink Menu items do not need to be underlined

and in blue◦ Menu items are usually links

Hyperlinks

Include a description of a hyperlink◦ Confusing if the URL of a link is present but link

has no description Do not open link in new windows

◦ Viewers usually do not like pop up windows and menus

◦ Exception – it is okay for a pop up window if the link goes to another website

Hyperlinks

Make sure you test all hyperlinks◦ Very annoying if hyperlink does not work◦ If you have links to another website, then

periodically check them If link becomes broken, then remove or update the

link◦ Do not waste your viewers time

Include a last modification date at bottom of page◦ You can keep track how old it is◦ Viewers may like to know how old information is

Hyperlinks

Be careful of stealing content◦ Text, pictures, graphics, music, and movies may

have copyrights Do not borrow images from another website

◦ Everything on your website should be on your website

◦ Example – you have a page that has a picture load from another website

◦ That owner could change that picture to something that is not appropriate

Plagiarism

Bad websites◦ MIT Architecture -WOW◦ Whitehouse.gov -Too complex◦ Yale School of Art -WOW◦ Tropicalsmoothie.com -Too much flash◦ Techsoup -Too much info◦ joneschijoff.com -What the ??????◦ siphawaii.com -Is this a joke???◦ indiana.edu/~ensiweb/ -Very amateurish◦ Gotmilk.com -Annoying flash

◦ www.webpagesthatsuck.com/

Bad Websites

Material was taken from http://websitehelpers.com/design/

References