in search of the elusive interface

February, 2000.
By Molly E. Holzschlag. (Link to original article.)

Predictable left navigation. Top-heavy pages. Lack of consistency. Lists of links instead of well-written content. These are some of the symptoms of today's Web site woes.

There simply is no good excuse for bad visual design. Oh, there are plenty of attempts. Here are a few:

• Who cares what a Web site looks like? The point is that it should function well.
• The objective isn't to look good, it's to use the latest technology.
• Hey, I'm just doing what everyone else is doing.
• My Web site is accessible, that's why it looks so boring.

I don't buy 'em! Today's savvy Web developer can create functional, technologically sound, and accessible Web sites without sacrificing good design. The answer lies in the integration of an effective user interface with well-written, compliant HTML code on the client side, and intelligent server-side development on the back end. This month, I will focus on helping you find methods of creating engaging interfaces for the Web that really work.

Dressing for success

No doubt you've heard the axiom "dress for success." People judge you according to the way you present yourself to the world. If you appear at a corporate job interview in tattered jeans, a large nose ring, and pink dreadlocks, you're probably not going to be judged very positively (unless of course you're in San Francisco). Certain situations simply demand that the outside image match the desired end result.

So it is with Web-site interfaces. An interface must be visually appropriate. Interfaces should not only match the desired result of the site, but have an engaging personality as well. Generally speaking, interfaces should be logical, and follow acceptable presentation standards for the mass market. More specifically, interfaces need to relate to both the content and the audiences that interact with them. This goes back to the idea of appropriate design, which I've discussed in previous columns. Simply said: Match your goals to the environment and you'll be off to a happy start.

Finding a balance between overkill and total cliche

Most problematic Web interfaces (or lack of interfaces) result from either a Web site's attempt to be too many things to too many people, or the inability of the developers to free themselves from the few interface design methods that have worked in the past.

The best example of the first concern is commonly found in portal design. Portals are supposed to organize lots of information for lots of people, and make that info easy to find. Either most portal designers have forgotten the element of organization in that goal, or I'm just really easily confused! Check out Figure 1, which shows Excite's home page.

Figure 1. Undeniably rich in terms of options, Excite's link-heavy design is completely confusing to me.

Where on earth am I supposed to begin? There are no fewer than 100 links or options within the first screen (and I'm browsing at a resolution of 800x600 pixels, just to be kind). Let's say I do figure out where to click -- or maybe I just decide to close my eyes and click anywhere, and let the portal do the walking for me. Once on the next page, I find very little to reinforce my sense of place within the portal's hierarchy. Portals are generally confusing, have little or no concise flow of information, are inconsistent, and provide few cues to visitors as to how to work their way around the site.

Portals need to simplify. Sometimes it's just a matter of organization. The Microsoft Network (MSN) has achieved a portal design that offers multiple options but lays out its pages in a cleaner fashion (Figure 2), making the experience less confusing. (Of course, by the time you're reading this, MSN will have a new design that may well make a mockery of my endorsement of this current design. So it goes.)

Figure 2. Cleaner lines and less columnar data make this version of MSN a more effective portal interface.

Then there's the other side of confusion's coin. To manage growing amounts of data and avoid portal overkill, many Web designers fall prey to the much overused, tired, left-margin navigation approach. Now, the reason this approach is used so frequently on the Web is that it does make sense. The challenge is to find solutions that integrate left-margin navigation into a unique design, or get rid of this convention altogether. If the choice is to drop the convention, experiment with new placement alternatives that open up the visual space (see Figure 3).

Figure 3. Monster.com does an admirable job of integrating design elements into a shapely and fun interface. Note that even the ad is designed into the interface. This integration helps create interesting negative space and gracefully leads the eye to the site's own content.

But these are quick fixes at best. The real solution lies in getting Web developers thinking about and producing gourmet interfaces instead of just tossing up a random salad of links, ads, and flashing icons.

Following rules of graphic user interface design

There are some basic principles that can help developers gain control over the management of information. I'm going to draw from standard principles of graphic user interface, or GUI (delightfully pronounced "gooey") design to demonstrate some of the methods you can use to create sophisticated interfaces that work as a cohesive unit.

The GUI principles I feel to be most significant are:

Metaphor.

This is the symbolic representation of elements within the design. A visual metaphor should act as a familiar aid upon which you construct your environment. Think of the Recycle and Trash bins on Windows and Mac desktops. The use of a garbage can to denote a place to delete files is a perfect example of a visual metaphor.

Clarity.

Every element on a page should have a reason for being there, and that reason should be clear to your site visitor. A great exercise when working with your design is to look at every item on your page: backgrounds, text, graphics. What role does each play? Is each element critical to the message of the design, or can it be moved elsewhere, or even removed completely?

Consistency.

Keeping elements consistent from page to page within a Web site is critical for the integrity of the site's design. Maintaining a consistent color palette, arranging navigation uniformly, and keeping font styles and sizes harmonious all add up to a sense of integration. Does this mean every page needs to look alike? Not at all! But enough elements have to be carried over from page to page to maintain a strong interface experience.

Orientation.

Visitors want to know where they are within a site, and where they're going. One way to keep them well oriented is to ensure that each page within the site displays the site's title and the page's purpose within the title bar. For example, the "books" page on my site offers a title bar that says: Molly.Com: Books by Molly. Use headers that define the site and the individual page identity to reinforce the title. You can also add footers, including the site's name, copyright information, and even the page URL to help site visitors stay oriented within your site.

Navigation.

A lot of attention has been focused on navigation. Some developers put too much emphasis on navigation. In most cases, you should keep navigation simple, based on the planned architecture of your site. Naturally, this is most realistic for smaller designs; but building navigation based solely on the structural hierarchy of the site's design, without a defined blueprint, can lead to potential disaster. When creating interfaces, plan with these elements in mind for a clearer, more concise result.

Imaging software and interfaces

For some Web designers, this won't be new information. However, many people working with Web technologies have not explored this method. It's an especially helpful technique for those folks who haven't had a lot of design experience.

The goal is to think design rather than technology. For example, if you begin by designing your interface using an imaging or desktop publishing program, you'll tend to work with objects as they relate to one another in a visual context. Once you've done that, then you can work on the best solution to the design using HTML. However, if you approach it with just HTML functionality in mind, the tendency will be to stay inside the perceived limitations of the language.

I recommend starting with any imaging program you enjoy. I find Photoshop 5.5 to be superior in this application to other graphic tools due to the layers, history, effects, filters, and Save For Web features. For a quick overview of some of the layout software currently available, see the section at the end of this document titled "Layout Software." I've provided a more detailed walkthrough on using Adobe Photoshop in the other section at the end of this document titled "Using an imaging tool to design a web-site interface."

Case study: artist joe forkan's web site

To show that emphasis on good design rather than technological skill is critical, give the specs to a graphic artist or person familiar with simple design software, and he or she can create an effective interface without knowing a lick of code.

I recently worked on a project with artist Joe Forkan, who designed his site without any preconceived notions about what the Web could or could not do. Of course, we discussed some basics in terms of logical navigation and general concerns, but he developed the design without ever having developed a Web site on his own.

The result? A very simple, very clean, and very effective site that keeps the focus on the artistic content by using well-balanced layout of artwork thumbnails, detailed image pages with forward and back navigation integrated into the page, and minimizing words and links except where necessary and appropriate (see Figure 4).

Figure 4. Using Photoshop, artist Joe Forkan was able to design freely but still within a simulation of Web space.

Keep it simple, silly

Undeniably, a smaller site such as Forkan's is not going to be a major challenge when it comes to managing complex content. However, there's no reason that designers of larger sites cannot strive to simplify their sites' design and layout, and seek to focus on a content-rich experience for the user.

After all, the goal of most Web sites (whether portals or not) is to successfully engage the site visitor so that he or she will buy the product, request the service, enjoy the entertainment offerings, respond or react in some way. Our job as Web developers is to make that experience as easy and enjoyable as possible for our visitors. Refining the user interface is the best way to ensure that our sites are dressed for ultimate success.

---

Layout Software

Developers can use the following software to create site layouts. The goal is to place navigation elements, text, and graphics with creativity rather than the rigidity often imposed when building sites from the HTML on up.

Adobe GoLive 4.0

www.adobe.com/products/golive
Of all the WYSIWYG programs, I have found GoLive (formerly GoLive Cyberstudio) to have the best layout capabilities available. It's a great tool for mocking up sites, although being a hand-coder from the "old" school, I'm not enthusiastic about the excessive code it generates.

Adobe ImageStyler 1.0

www.adobe.com/products/imagestyler
More affordable for those on a strict budget, ImageStyler has many of Photoshop's features plus advanced filters, effects, and export options for creating high-quality, Web-ready graphics.

Adobe Photoshop 5.5

www.adobe.com/products/photoshop
This remains my favorite tool as I can tap into the power of layers as well as the abundant filters, effects, and the Save For Web option.

JASC Paint Shop Pro 6.0

www.jasc.com/psp6.html
This program is very popular among Web-site design enthusiasts and some professionals. In recent versions, it has been updated with layer capabilities, editable text, multiple level redo, and rich new effects such as sculpture and texture.

Macromedia Fireworks 3.0

www.macromedia.com/software/fireworks
Macromedia fans will rave about Fireworks, which can be used to lay out designs as well as create great Web graphics. It has the latest features including preview of rollover effects, history panel, and automation features.

QuarkXPress 4.0

www.quark.com/products/quarkxpress
Desktop publishers will appreciate Quark's layout capabilities. While Quark is not specifically geared for the Web, designers who are familiar with it can use it to create designs that are not limited by Web concepts. It allows for the creation of bleeds, easy movement of images, and rapidly facilitates layout because it's a desktop publishing program.

---

Using an imaging tool to design a web-site interface

To accommodate the varied resolutions on the Web, very conservative Web designers use the 640x480 pixels per screen rule. If you subtract from that the parts of the browser that eat up space, such as the scroll bar, you're left with a safe area of 585x295 pixels to work with. However, developers are designing for other resolutions these days-which are often dictated by what their statistics report about the resolutions of their audiences' browsers. Create a file with the dimensions best suited to your audience's needs.

Ideally, you'll be working with an imaging program that lets you create a new layer for each element of your page. Creating a new layer for each element ensures that you have optimum control of that element. I'm going to give the step-by-step instructions for Photoshop 5.5 here, but the process in other imaging programs is likely to be similar.

1. With your new image active, choose Layer, New, Layer.
2. Select your background color using the eyedropper tool and color palette, which you can open by selecting Window, Show Color.
3. Fill the layer with the proposed browser-safe color selection you want by choosing Edit, Fill. Make sure you select Foreground and uncheck the Transparency box in the Fill dialog box.
4. Create a new layer, following the directions in Step 1.

To this layer, you can add a background pattern if you'd like. Save the pattern image in the native Photoshop format as background.psd. Then:

1. Open your background image file.
2. Choose Select, All.
3. Choose Edit, Select, Define Pattern.
4. Move to your new layer on the workspace.
5. Choose Edit, Fill, Pattern, and let your image fill the layer.

To add a text header:

1. Select the type tool from the tool bar, and click on your canvas to bring up the text dialog box.
2. Now choose your typeface, size, leading, and spacing. In most cases you'll want to be sure you've checked the Anti-Aliased checkbox or select None if you're using version 5.5.
3. Click on OK.
4. Place the text where desired by using the Move tool.

Continue creating layers and adding elements as you want.

After you have a page design with which you are satisfied, save it as a Photoshop file (choose File, Save, PSD). If you're using a different imaging program that has layers, save to that program's native format. I like to do this so that I can keep the layers intact, enabling me to come back later and make any necessary adjustments to the fonts, colors, and positions of my elements.

You can now use this layout not only to make adjustments to the design, but actually to generate the individual graphics for the Web page by cutting or copying and pasting each element individually and saving it using the Save For Web feature in Photoshop 5.5, or other export available options.