• Design for screen based media and the Web
• Ten Mistakes in Web Design
• What's the difference between a GIF and a JPEG?

To start with:

• Printed media is old. ie. the printing press. c. 1450
• TV based media is recent. ie. the television. c. 1936-39
• Internet media is new. ie. the Web et al. c. 1991

• We've had over 500 years to develop solid rules for print design and layout.
• We've had over 60 years to develop rules for TV design.
• We've only had 9 years to cobble stuff together for the web.

1.What do you want to say and who do you want to say it to?

2.What is appropriate to say it with?

What do you want to say?

Or, what is the reason for creating this site. If the answer is "Because I want to put something on the web," then congratulations and welcome to the world of "This is a picture of my pet cat fluffy and here's a poem I wrote when I was 11". You should not be these people (well, not professionally, anyway). Answers might be: I want to do something snazzy and show off my talents. I want to advertise a product on the web. I want to sell a product over the web. I am the world expert on puns/toilet paper/1960s cars starting with the letter r and I want to share my wisdom with the world. I want to create and online image database, available for the public to access, and search on keywords, to retrieve relevant images. They should also be able to buy print quality versions on line and access supplementary information.

go back to top

Who do you want to say it to?

Or, who is your expected audience. Fast car chases and sex scenes are not included in children's TV programmes for a reason. In the same way, highly technical computer information is not appropriate for a site aimed and new users.

This also effects the quantity of information to be made available and the way in which it is organised and presented.

What is appropriate to say it with?

1. If your web site requires the latest high power PC with a 21" display, T1 internet connection and a 3D joystick, you will be disapointed with the site traffic you get.
2. What assumptions can you make about your audience's computer/browser?

• What is their screen size? How big will their browser window be?
• How many colours can their screen display?
• Does their browser support Java, Javascript, ActiveX, video, other plugins, etc?

1. An site showcasing the work of an artist will, of necessity, require many images. A site critiquing a literary work will not.
2. In the same way, a site requiring the user to download and install the latest browser plugin would not be appropriate for a site aimed and new web/computer users.
3. Big words are not good when doing a kids web site.

Ten Mistakes in Web Design

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 URLs

Even 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.

go back to top

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: we have found that many of our customers access Sun's website from home computers in the evening because they are too busy to surf the web during working hours. Bandwidth is getting worse, not better, as the Internet adds users faster than the infrastructure can keep up.

go back to top
 

  -- by John Wurtzel  31 Jul 1997
 

John Wurtzel is an assistant editor at Wired Digital. Lately, he has been dreaming of penguins.

When you're ready to add graphics to your Web pages, you'll immediately be confronted with a question: How should you format your images? Graphics in their natural state are too big to be quickly downloaded over the Web, so you have to press them. The standard compression formats are GIF and JPEG (compression, by the way, doesn't shrink the dimensions of your graphics, it just reduces the size of the file). But is GIF or JPEG the better format to use? The resounding answer to this question is: It depends. It depends on the type of image you're working with, how small you want your image file to be, and the way you want your graphic to download.

One of your primary considerations is the type of image you're working with. Photographs and graphics with lots of color fields,  and particularly colors that blend and fade into one another, are best served by JPEG. For example, an unnerving picture of your co-worker waiting to sing "Yankee Doodle" in a Club Med talent competition should be formatted in JPEG. If, on the other hand, your image has flat color fields, it will compress well in the GIF format.

go back to top

Good JPEG       Good GIF

 The reason for choosing JPEG for images with more complex color patterns is that this format enables you to save images
with millions of colors, whereas the GIF option restricts you to 256 colors.

Another important issue is file size. JPEG permits a greater degree of compression than the GIF alternative, enabling quicker
downloading times for larger graphics. And JPEGs appear to retain almost complete image quality for most photographs.

But don't write off the GIF just yet. For one thing, the JPEG format does not work well for graphics that contain large fields
of color - these color fields can break up and fragment and look terrible.

 Furthermore, an image's compression format shapes the way a browser can download it, and browsers can do several things
with GIFs that JPEGs don't support. One of the advantages to a GIF is that you can interlace it. Interlaced GIFs appear first with poor resolution and then improve in resolution until the entire image has arrived, allowing the viewer to get a quick idea of what the picture will look like while waiting for the rest. JPEGs can only arrive linearly, from the top row to the bottom row.

Another plus is that the background of a GIF can be made transparent, so you see the background color of the browser window you're in.

Finally, GIFs can also be animated. Poor old JPEGs just have to stand still.

go back to top