Web Design Elements

A website is Experience-Driven. As such, it's important to always keep the end-user's potential experience in mind as you plan out every aspect of your website. The better overall experience the user has while using your site, the more successful your site will ultimately be. Providing high levels of the web design elements of Usability, Visual Appeal, and Appropriate Content will help to ensure that your visitors will enjoy your site and make many return visits.

Usability
Usability is probably the most important web design element to keep in mind. It addresses how easily your visitors can navigate through your website and find the information they came there for. It may also be that with a highly usable website the user not only finds information need, but also discovers information they didn't know they were looking for.

Much of the information below concerning usability was inspired by the book Don't Make Me Think (Steve Krug, 2000) I recommend reading it. Please read http://www.sensible.com/chapter.html#backfromfootnote1 to see some sample text from this book.

Functionality is one basic part of Usability. It deals with the question: "Do the features of this site actually work?". Regardless of how the site looks, how logically it is laid out, or what it's content may be, the site should at the very least be function properly. For example, there should be no:

• broken links (browser error appears)
• buttons or links just not working (page goes nowhere when you click on a link)
• broken images (box with 'x' in it, showing no image exists with that name in the directory specified)
• JavaScript errors (small yellow triangle in status bar) see http://sealang.com/
• links going to the wrong page (e.g. you click on a link to go to the "cars" section and you get "boats")

The user went to your website to obtain information. If they are unable to accomplish this task, it's very likely that they'll leave your site.

www.matrix.com does not have great functionality

Common Usability Issues

Inconsistent Navigation
You should provide a consistent navigational system that does not change from page to page. From the moment your users get to your website, they are being "trained", and learning how to use your site. If you change the rules in the middle, it's likely to be quite confusing for them.

Your user should have no question along the way where they are in your site. (This is the logic behind our "marked page" in Project 1 - the button with the pearls underneath it is where you're at). It's also a bonus if the site can clearly show users where they have been.

Example of clear, consistent navigation: http://bbkstudio.com/bbk4.0/index.html. http://sfosnow.com, http://www.lsi.edu/

Example of inconsistent navigation: www.sherwoodphoto.com

No way "home"
Always provide your user with a way back to the home page. At the very least provide a link from the logo.

Excessive Scrolling
There have been many studies done on usability. It is well-known that users do not like to scroll, and often times will not even realize that there is contact below the "fold", which is the area not visible on the area of the page below what's visible on the screen.

Example of site with excessive scrolling: www.cottonfactory.com

Excessive Clicking
Another usability issue to consider is, how many times are you forcing your users to click before finding the information they need? It is best to limit this as much as possible. The more a user has to hunt around your site, the more potentially frustrated they will be, making them more likely to leave your site.

Example of site with excessive clicking: http://www.locksoflove.org

Over-explaining
Your site should be planned out well, and designed in such a way that you don't need to explain to your users how to use it. It should be intuitive. One small example of this over-explanatory logic is the common usage of "click here" for a link. It should be fairly obvious to the user that they should click there.

Instead of having: Click here for more information.

It might be better to simply have: More Information

More examples of over-explaining:

http://www.nightphotographer.com/gallery_frameset.htm

Illogical Associations
Think carefully about what you use as a button. What will most likely make sense to the user? For example, it might make perfect sense to you to use a photo of yourself as a link for the user to email you, but from the end-user perspective, is this really logical, and clear? Probably not. It would make more sense to have a link such as this: email me

Examples of illogical associations: http://www.webpagesthatsuck.com/mysterymeatnavigation.html#

Another example of Illogical Associations is when you are given the option to click on something, and you expect some kind of result, but get nothing.

Not using target="_blank" where appropriate
This is very frustrating to users who click on a link from the main site, expecting to be able to close that window, and instead losing the whole site when they close the window. Don't force your users to remember to click on the "back" button.

example: www.sherwoodphoto.com

Too many different fonts
You should limit your fonts to 2 or 3 at the most on your site. It's visually overwhelming to the user to have many different fonts in the same site. Think also about having your fonts compliment each other. For example it wouldn't make a lot of sense to have an old-fashioned font alongside a modern font.

Here is a good article on using fonts: http://nees.orst.edu/NEESweb/usability/page_fonts.html

Poor Readability
It's vital that your users are able to physically read the material. Using colors that do not provide proper contrast will be extremely hard to read, if not impossible for those with color blindness. Black text on a white background , or vice-versa, is always a safe bet.

Here is an article on contrast for the web: http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_contrast.hcsp

This very issue brings us to the point below:

Lack of Consideration for Visually Impaired Users
There are many issues to consider in this area, and if you continue to practice web design beyond this class it will become important to learn them all. For this class, you really need to be concerned with these points:

Always use Alternate text for your images. Otherwise persons with disabilities are excluded from information on your website. Also don't forget to use "" for Alternate text whenever you use a spacer.gif.

Never include a lot of text in your graphics. Just use text instead. For one, it is difficult to update such sites, as you'd need to physically change text in Photoshop. It also adds much to the file size. But most importantly, it excludes users with visual disabilities.

example of site that breaks both these rules: www.cottonfactory.com

File size is too big
A page should not be over 75 K in size. The longer it takes to load, the more likely your user will flee...

Over-Animating
Animation is cool, but remember it can be very annoying to some users.

example: http://www.nasa.gov/externalflash/m2k4/index1.html

here is another (extreme) example: http://www.hrodc.com/

Visual Appeal
From experience surfing the web, you probably realize that the degree of a site's Visual Appeal has much to do with why visitors enjoy visiting it (or conversely DON'T enjoy visiting it). There are many visual factors to consider:

Colors, combinations
In addition to the usability issue mentioned above, where users physically need to have contrast provided in order to read the content on the screen, it is also important to provide a pleasant and non-confrontational color scheme. While you might love the look of bright red text on a florescent blue background, consider your potential users' preferences. It's important that your site not be jarring or harsh on the eyes. Rule of thumb: "Play It Safe".

This is not to say you can never use flash colors, just remember to combine them with other softer colors that might lessen the harshness for your users.

Here is a good article on using color on the Web: http://www.coolhomepages.com/cda/color/

Visual Cohesiveness, Consistency, Alignment
The consistent navigational system mentioned in the Usability section above refers in part to the concept of visual cohesiveness. You should have a common look from page to page. For example, text that is left aligned on one page should not change on the next page to become centered*. This is disruptive to the flow of your website.

*In general, center alignment is not recommended. Studies have shown that since left-alignment is the way most text is laid out (in our culture), it is more comfortable for users to view it that way.

It is also an interruption to the flow of your site when the color scheme suddenly changes, as in www.sonshinecommunity.org.

It is most common for your logo to appear at the upper left corner of the page, but this is not an absolute law. The main reason the logo normally resides here is because it is a "safe" place to put it to ensure that your users will definitely see it. It is also the expected spot where users are programmed to look. But don't be afraid to experiment with other ideas.

Here's an example where the logo is at the bottom of the page: http://www.horsepowerdesign.net/portfolio/packindex.html

Size and Space Consistency
It's good to have all of the elements of your page have a consistent relative size and space between elements. Otherwise, the visual effect is that the site looks cluttered and unbalanced.

Here is an example of a site that has inconsistent relative size and spacing:
http://www.boardzone.com/

Proper detail to important photos
Make sure you provide proper detail for the graphics that are important. And always, if you are going to have a "pop-up" of a photo, make sure the image's details are apparent.

For example it's kind of hard to see the details in these photos:

http://www.horsepowerdesign.net/portfolio/idindex.html

Appropriate Content (writing)

Writing for the web is much different than writing something for print. The short attention span associated with web browsing, and the tendency of web-surfers to scan text. For this reason it's important to be short and concise in your text, yet catchy in your wording. Long rambling text will drive your users away.

Here is some good info on writing for the web:

http://www.clickz.com/experts/archives/design/onl_edit/article.php/836621