by Janette B.
Bradley
axsWave Software, Inc.™
This article appeared in the October Issue of hc/interact a publication of the Special Interest Group in Human Computer Interaction (SIG HCI), which is part of The American Society for Information Science. I write a regular column on Web GUI for this publication, if you're interested in joining drop me a line and I'll send you the info.
Last month I discussed some of the major considerations you need to take into account when designing for the Web. This month we will talk about image size and why it can make a real difference in the overall usability of your Web page. But, before I do that, let me tell you a story that has an important lesson for Web designers.
A few weeks ago my friends and I went to our neighborhood coffee shop and bookstore retailer and after a rousing game of Mahjong and three double espressos (each), we adjourned to the computer section of the bookstore (as geeks are wont to do). Once there, I made a bee-line for the Web design books. One book looked particularly interesting, in that it was a collection of tips from various designers. While looking through this book, I came to a section on designing your introductory page. The designer's advice was to keep your introductory image map graphic to around 50K! Perhaps it was the three double espressos, but when I read this I fairly shouted, "50K, 50K, this guy is nuts!" Of course, this drew the attention of other customers, so I replaced the book carefully, blushing all the while, and began to head for the science fiction section. However, I was stopped by another customer who had been looking at the same book, "Do you know a lot about the Web? I am in charge of designing a Web site for our company and am looking for a consultant." I gave her my card, and to my surprise there were two other people waiting there who also wanted my card. Two of the three had the book I had been looking at in their hands, and, fortunately for their future users, they returned it to the shelf.
One lesson to be learned here is: be skeptical of graphics designers who have worked primarily in print. Most of us who have been involved in desktop publishing are used to high-powered machines with an astonishing amount of RAM (128 MB) and endless hard-disk space, along with 21 inch monitors with high-speed video cards that display millions of colors. In other words, we don't live in the real world. Make sure your graphics designer truly understands the technology of the Web, the audience using your site, and how to cope with limited bandwidth for downloads.
Let's talk about image size and colors and why you should care when designing a Web page. Obviously, there are aesthetic issues when choosing colors, but, I am going to assume that those have already been handled. What I am most concerned about is designing an attractive page that makes good use of graphics, but still remains usable and modem friendly. What do I mean by modem friendly? Well, there are very few sites where you can count on not having users log on via a modem. Many people are surfing the Web with 14.4 modems, and, for them, logging on to a page with a 50K image map that has to be loaded before they can navigate is an excruciating experience. One Web administrator that I know learned what a problem huge image maps can be when the CEO tried to log in to the corporate Intranet from a trade show. The CEO was using his laptop with an internal 14.4 modem and a monochrome screen. What was worse, he was trying to get on the Intranet to show a potential customer some of their products. The potential customer left before the image map loaded. Needless to say the Web administrator spent a number of sleepless nights re-doing their site. I was called in to help make the changes, as the graphics had been produced by their advertising agency, which had just recently added Web services. Their designers were unable to cope with the needed modifications because they didn't understand the technology and they didn't have the software tool set to deal with Web design.
There were a number of problems with the image map that I helped him solve. The first problem was that the image was designed for the 17 inch monitors that most people in the company used. The idea was that the image map would come up and cover most of the user's screen. While this resulted in an impressive look, the actual physical display size of the image was too large and contributed to the large file size. It also meant that users with small screens had to scroll up and down, as well as left and right to navigate the site. A second problem was that the image had been saved with a 256 color palette which made the image's file size very large.
Luckily, the original image was available in Photoshop format. The image had been developed in Adobe Photoshop in 16.7 million colors and converted using the GIF plug-in for Photoshop. If you are faced with having to re-do a GIF image try to work from the original rather than the converted image. I have found that the results are usually better. If you are working with a JPEG image, you must use the original because the JPEG algorithm results in a loss of image quality each time it's applied. I will devote a future column to the ins and outs of GIF and JPEG, for now just remember to make every attempt to work with the original. (This article on GIF & JPEG is also on this site)
The first thing to do was to reduce the physical display size of the image. To do this we removed the navigation buttons from the image and scaled the corporate logo to a more reasonable size. We then placed the button and logo in a table format. By doing this we could use the feature that allows for alternate text to be displayed when the user turns off auto-load images. I used a similar layout for the HCI Web site introductory or "splash" page. The table along with the button was designed to fit in a screen that is approximately 480 pixels wide and 350 pixels tall. This width is close to the default menu bar on Netscape and Microsoft Explorer and will fit comfortably on most computer screens. The height was arrived at based on a laptop screen, but can be larger given that most users expect some amount of scrolling. However, if you are designing a site which has as its primary purpose the selling of goods or services, aim for a screen design that includes the most important information in this 480 by 350 pixel window. For this type of site the Web page is very much like a print advertisement when the user first looks at it. If you are designing a search site, place the most used aspect of your query screen in this window.
Next issue, I will talk about how I reduced the image file size even more, by reducing the number of colors and the complexity of the image.
Feel free to contact me with questions or to talk about how the axsWave Software team can help you with your Web site:
Janette B. Bradley (janette@metronet.com)