Interface Design

Of course, if you try to use the Web site you created, you might notice that it's not very usable. After you go from the home page to one of the subpages, there's no way to get back to the home page short of clicking the Back button. This isn't a big deal when you're only one click away, but it's certainly not a long-term solution if you want people to stick around. After you get an interface design, test it for usability. You made assumptions about what your visitors are likely to want to do. Does your design make it easy for them to do it?

But before you can worry about that, you have to have a design, of course.

If you have any artistic talent, you can certainly do this design yourself. As it happens, I have no artistic talent whatsoever, so I've enlisted the help of my friend Jay to give me a hand in designing the interface for Primary Outpost.

Whether you design the interface yourself or recruit someone to do it for you, you should keep some things in mind.

First of all, Web design is not print design. It's becoming less common to find an artist who has absolutely no understanding of Web design, but it still happens. Here are some things you need to remember.

Although the bandwidth situation is certainly improving, the vast majority of Web users still surf by modems—and slow modems at that. This is especially true if you are targeting users outside the United States. This means that you need to be careful when adding graphics to your pages. Every new image is a new connection to the server and takes time. What's more, each of your images must be as small as possible. Now, by small, I don't necessarily mean height or width. Instead, I mean file size. Check to see how big your image files are, and add them all up. The actual numbers vary, but in general, a page shouldn't be more than 60K, including all images.

In certain circumstances, you can relax this restriction a little bit. You don't need to worry about this as much when you're certain your audience has a faster connection. For example, if you are designing for users on your corporate intranet, all (or at least most) of your users are on your local network, so you can build larger pages.

Analyzing our audience can give us information about their likely connection speed and browser. For instance, unlike a business-to-business application, where most users will be on a fast network connection, our audience will be made up of mostly consumers, who access the Internet by modem.

The browser issue is just as important as the speed issue in designing your interface. The first browsers were very simple, and didn't provide developers very much flexibility. In the last few years, things have progressed significantly. Now you can display images and complex animations as well as actually program in the browser. HTML is quickly giving way to Dynamic HTML, or DHTML, giving programmers more control than they ever got from earlier versions of HTML.

The trouble is, most users don't have the latest browser. In fact, a small contingent of users still use Lynx, that text-only browser I mentioned in the Introduction. If your interface requires DHTML, those users won't be able to use it. So what's an enterprising Web designer to do?

Well, one option is to double publish. This means that when visitors come to your site, they automatically access a page appropriate for their browser. Double-publishing almost always requires programming of some sort, and might seem like a lot of work, but it's worth considering. Using this method, you can have your high-octane interface and users who can use it get to use it, but users who can't are still able to use your site.

A simpler interface is also useful for people who use text-only browsers out of necessity. These browsers allow disabled users to access the Internet, and if your site is unusable without the latest technology, these visitors will be deprived of your content, and you will be deprived of their attention.

This book is about Active Server Pages and not Web site design, so I'm going to keep things simple. Jay has designed an interface for me that is usable, but not complicated, either for you or for the user (see Figure 1.17).

It's got everything you need: menu items, a place for news highlights, and advertising. It's even got rollovers. It is a little more than you can handle right now, though, so I'm going to scale it back, and start with a variation on one of Jay's earlier designs, shown in Figure 1.18.

When you pass your mouse over a rollover something changes. The most common use of rollovers is to display more information about the item you're pointing to.

In the next chapter you start to build your Web site. You still need to design the subpages, so that users can get around after they leave the home page, but you get that later.