How to create a user-friendly newsletter on the World Wide Web

Platform headaches The good news about newsletters on the web is that hypertext publications can be delivered across all platforms. That is also the bad news. Because of this peculiar characteristic of web publishing, the first thing you must do in creating your newsletter is determine the platforms over which it will be delivered: Computers: Find out what computers your users will use to access your newsletter. Should you design your newsletter for Macs, PCs, UNIX workstations? All of the above? Monitors: What kind of monitors do your users have? Large ones, small ones, high resolution, low resolution, powerful and bright, weak and dim? Networks: Do most of your users connect to the Internet through 14.4- or 28.8-bps dial-up modems--or do they have access to T3 lines? Browsers: Are 90% of your users using Netscape 3.0x--or are they using every browser on the face of the earth? I caution you to determine these factors at the outset rather than later, or you will find yourself in trouble. If you design your newsletter to your own system configuration and wait until the last minute to test it out under a variety of conditions, you will be dismayed to find that what looks classy on your system looks terrible on others and requires extensive rework. I know this because I waited to test my first web newsletter on different platforms until just before its planned release. In the meantime, I had scanned and digitized about 50 photos for various articles. These photos looked great on my brand-new, 21-inch, super-lumina, lightning-powered, 1080x832-pixel monitor. But on the funky old monitors down the hall, the images were so dark they were unrecognizable. I had to use Adobe Photoshop to lighten up all 50 photos. In addition, I had chosen a smallish logo to appear in the upper left- hand corner of the screen--but it wasn't small on the 640x480 monitor in the office next door. That's when I discovered that the lower the monitor resolution, the larger an image appears. (On even lower-resolution monitors I tested, the logo filled up half the screen!) It was back to the drawing board. If you neglect your platform research, you will encounter other disasters. For instance, if you spend a great deal of effort designing spectacular graphics, and a sizable percentage of your users are using the lynx browser to access your newsletter, your efforts will be wasted: lynx is a text-only browser incapable of displaying any images at all. Similarly, if you use leading-edge HTML extensions to position text or Netscape plug-ins to create special effects, and your audience is using low-end browsers over sluggish networks, your newsletter will fail. So: Do your research, know the platforms you must design for, investigate the implications--and design accordingly. Purpose and audience: Know these things Next, you must develop a clear sense of purpose and audience. This will guide you in the design process and help you make important decisions along the way. The newsletter I produce and edit at NCAR is called SCDzine (available at http://www.scd.ucar.edu/zine). "SCD" stands for the Scientific Computing Division, which publishes the newsletter; "zine" is short for "e-zine" or electronic magazine. As an example of purpose and audience analysis, I will share SCDzine's. The purpose of SCDzine is fourfold: To keep users of NCAR supercomputing facilities informed of news and trends in high-performance computing and networking; To provide news about hardware and software upgrades at NCAR; To provide tips to help users run their computing jobs better; To convey to users that "real people" support the technology of SCD. The audience for SCDzine consists of researchers and programmers in the atmospheric sciences who are using NCAR supercomputers: highly educated people ranging in age from low 20s to mid-60s who stare at their computer monitors for eight hours a day. They read SCDzine not for casual entertainment, but because it helps them in their work; they're there for facts on high-performance computing, not to surf and goof around. These readers are unimpressed with glitz and hype, bells and whistles. They want information, and they want it fast. Ergo: SCDzine is not designed for the MTV crowd or cyberpunks; it is not an entertainment or a marketing site requiring aggressive and flashy effects. When you complete this type of purpose and audience analysis, you will know that, for instance, the type of design chosen by Sony for its PlayStation site (http://www.sepc.sony.com/SCEA/findex.html) may be perfectly appropriate in that context, but inappropriate for a newsletter such as SCDzine. (The Sony site has 11 frames, each containing an animated gif: moving monsters, spinning balls, and flying airplanes. The page comes up on a dramatic black background with many bright colors; it is a site that energetically targets emotions rather than the intellect. It would be a poor way to display information, e.g., about the arrival of a new T3E or changes in UNICOS 9.) Once you have determined the purpose and audience of your newsletter, it is time to move into the design phase.

Design: Not for dummies

Navigation: Providing context on a context-free web In developing your newsletter, you must first create a navigational interface--that is, provide your users with ways to travel through and around your information and back again. Your navigational interface should be easy, intuitive, and effective. It should provide a sense of context. Context is sorely lacking in the world of the web. People hop from one site to another to another, not remembering where they've been or knowing where they're going. In a user-friendly newsletter, however, they should retain a sense of orientation, the feeling of being inside a publication and knowing where they are. How do you provide this orientation? There are many ways to do so; you should explore the web to investigate alternatives that might work for you. (See the list of references at the end of this paper.) SCDzine solves the problem of providing context through the use of frames. With frames you can divide up your screen into different blocks, each containing information. (Note: If you use frames, be sure to provide an alternative version of the interface for users whose browsers do not support frames.) SCDzine has two frames: A narrow vertical frame on the left functions as a navigation panel. The SCDzine logo appears at the top of the panel; under the logo is a set of navigational buttons. Each button takes you to a different place in the newsletter. A larger rectangular frame on the right displays text. This is where the information you select by clicking on the navigational buttons appears. You can never get lost in SCDzine, because although the information in the right frame changes at the click of your mouse, the navigation buttons on the left always remain visible. (See Figure 1, or check out the summer 1995 issue of SCDzine.) However, any link to an outside site immediately takes you out of SCDzine: the frames disappear and you are deposited into the wider world of the web. Be sure that if your users follow a link to any site outside your newsletter, they leave the newsletter. Do not display information external to your site within the frames of your newsletter: you will end up with the clutter of someone else's design clashing with your own, and you may even end up with frames within frames within frames. A note on color: The navigation panel in SCDzine is gray. Vivid black, red, and royal blue all looked great in the prototype. However, having done my audience analysis, I know that our scientists look at computer monitors all day and need something easy on the eyes. I want them to stay in the zine at least for a while, and to concentrate on information, not the distracting color of a navigation panel. Bright, compelling colors are not optimal if they don't serve your users' needs. I'll now take you on a brief tour of the buttons on the SCDzine navigation panel. (Your requirements will be different, but this "case study" may help you refine your own navigational interface.) The buttons are: "Frames help," "Cover," "Contents," "Index," "Search," "Back issues," "Comments," "Services," "ConsultWeb," "SCD," and "NCAR links." Frames help: Don't leave out a help feature if you use frames; frames can be tricky. In SCDzine, the "Frames help" button comes first, at the top, so users can immediately get the hang of using frames. Clicking on this button calls up instructions on how to use the mouse in frames, how to bookmark an article in frames, how to print from frames, etc. Cover: This button calls up the "cover" of the current issue of SCDzine: a provocative photo and a few hot links. In my opinion, a newsletter of any size should have a cover; the cover should look clean, crisp, interesting and make users want to delve in. The summer 1996 issue of SCDzine came out at the same time as the movie Independence Day. I found a photo that looked uncannily like aliens blasting the earth; in fact it was a photo of clouds and lightning taken by one of our atmospheric scientists--doubly appropriate in terms of timing and audience. A note about images: If your users have modems or are running on slow network conditions, avoid any image larger than 20K on any of your main loading pages; less than 10K is better. (A general rule of thumb is that it takes one second per kilobyte to download image data over a 14.4 modem; according to this rough estimation, a 10-kilobyte graphic would take 10 seconds.) Keep your images small; use thumbnails so users can click on tiny images to get larger ones if they have the bandwidth. Also, be sure to provide ALT tags for users with text-only browsers or users who have turned off image loading for faster access. For instance: <IMG ALT=cloud SRC="cloud.gif"> A word about navigational redundancy: Your interface should provide different ways of getting around inside your newsletter. People have different needs at different times, and you should provide them with multiple ways to acquire information. In the case of SCDzine, where scientists and programmers want to find information quickly with a minimum of hassle, this is especially important. The next four buttons on SCDzine's navigation panel are different ways to access SCDzine articles. Contents: This button calls up the table of contents. Index: This button calls up a list of the current year's articles by category. If users want to find an article on a general topic but don't know where it might be in an issue, or which issue it might be in, they can use the index. Search: If your newsletter has any degree of sophistication, it should have a search engine; this enables users to type in a keyword and obtain a list of "hits" or titles of articles containing that keyword. (Note: SCDzine's search engine is still under development.) Back issues: This button takes you to the SCDzine directory, with issues listed by year and calendar quarter. The remaining buttons in SCDzine's navigational panel perform other functions. Comments: This button calls up an interactive form where users can provide feedback to the editor. (Another way to provide feedback is to have a "mailto" link at the bottom of each page or article.) Services: This button calls up the SCD services directory, which provides a wealth of information about SCD services for users. ConsultWeb: This button calls up the Consulting Office FAQ, frequent user "gotchas," and other information from SCD's technical consultants. SCD: This button calls up the SCD home page. NCAR links: This button calls up other useful organizational URLs. One last word about your navigational interface: At the bottom of every page in your newsletter, you should provide a return hypertext link to take your users back to where they came from. Never leave them hanging in a "dead end" page with no link back. Incidentally, SCDzine is a large newsletter and has an extensive set of navigation aids; your newsletter may need only a few. Content rules! Content is the most important factor in creating a user-friendly newsletter. If you provide content that is vital and interesting to your readers, they will come back; if you don't, they may visit your site once and never return. You must provide good content; then you must organize it in a coherent information structure. In the case of SCDzine, I determined the content that would be important for our users, then divided it into eight categories. These categories comprise the major headings in the SCDzine table of contents: "This just in," "Director's column," "Features," "Hardware and software news," "Hints," "Departments," "Notes from the research community," and "Singularities." This just in: SCDzine is published about every three months. What happens when a hot story breaks? We add it to the "This just in" section, with a link to it from the cover. A note on the updatability and change notification: When should you publish, and how often should you update? In the case of SCDzine, it was decided to publish four separate issues a year, each with its own cover and focus. This decision was made on the basis of user feedback indicating that SCD readers like discrete, packaged issues rather than a constantly mutating web site. However, we get the best of both worlds by maintaining a "This just in" section that can accommodate timely news. But if your site is updated at irregular intervals, how do users know when to check the site for new material? With SCDzine, whenever we release a new issue or add late-breaking stories, we send a brief e-mail notice to readers who have subscribed to an "SCDzine update list" (described in the "Promotion" section near the end of this paper). Director's column: This section consists of a message from the director of SCD. It is a popular column providing a broad overview of issues currently impacting users. Features: This section contains in-depth articles on trends and issues in high-performance computing and networking. Hardware and software news: This section contains news about upgrades to equipment and software at NCAR. Hints: This is the "bread and butter" of the newsletter; users say they refer to this information again and again. In this section, technical consultants write articles offering helpful tips on how to make codes run faster, tricks to make programming easier, check job queue status, etc. Departments: This section includes miscellaneous announcements about documentation, classes, and other short items. Notes from the research community: This section highlights some of the work done on NCAR supercomputers by our atmospheric researchers. Singularities: In physics, a singularity is the point at which the normal laws of the universe break down and strange things happen. After duly discharging the responsibility to provide vital, hard- core technical information, I have (in an alternative strategy to increase user friendliness) devoted this last section to weird stuff. If users may not be quite motivated to enter SCDzine to read about a new crayinfo command, they may click in because they've heard there's a picture (captioned "Disco Inferno") of the Distributed Computing Services manager in a Saturday Night Fever leisure suit. This, incidentally, was part of a story in a recent issue called "The way we were: SCD staff photos from long ago and far away." Other recent "singularities" have included a list of "Top ten propellerhead music acts" (e.g., Snoop Dossy Dos, Sonny and Shareware) and an "SCDzine treasure hunt" where users who found the prize icon, clicked on it, and filled out an on-line form received a free pen with the SCDzine logo and URL. Reflecting back to the purpose of the newsletter, the "Singularities" section addresses the purpose of conveying to users that "real people" support the technology of SCD. Another note on navigational redundancy: A typical hardcopy magazine has what are called teasers on the cover, e.g.: "Lose 20 pounds in 20 days" or "The secret life of Sharon Stone." The purpose of teasers is to make people want to read the magazine. At the bottom of the SCDzine table of contents page is a set of teasers for turbo-geeks--"Handling arithmetic errors in Fortran 90," "Cray programming environment"--this will really lure in those techies! Teasers are another navigational redundancy, another way to give users faster access to information. Teasers tell you at a glance what's important in the issue, providing a quick overview of highlights; you don't have to click through the table of contents, index, or search engine to find out what's interesting. Sudden (visual) impact What should your newsletter look like? How should you visually display the information for maximum appeal and user friendliness? I did a lot of research to determine the look I wanted for SCDzine; I recommend that you do the same for your newsletter. You will find a number of web publications that are excellent and many that are incredibly bad. Some things to avoid: Complicated background images that make text difficult to read. Colored backgrounds behind colored text that make text difficult to read (for example: pink background, yellow text; black background, blue text). Clutter, structural incoherence, 62 links on a page, 18 different icons with no unifying thematic design. Wall-to-wall text with no white space between paragraphs. (This makes reading a daunting and unappealing task. Some newspapers have a rule of thumb: end your paragraphs after seven column lines. This is a good rule for the Web. For maximum user friendliness, keep your paragraphs short.) For more design "don'ts," check out the "Worst of the Web Designers Page" at http://www.mirsky.com/Designers/ and "Bud Uglly Web Page Design" at http://www.wwwvoice.com/bud/bud.html. So much for don'ts; what should you do? The standard template for a story in SCDzine includes the following design elements: Black text on white background (600 years of typography has given us a good idea of what works for legibility). A small, fast-loading color photo or graphic at the top of the story to add visual appeal. (Sometimes this is a small thumbnail photo of the author; clicking on it produces a larger photo with a short "about the author" caption and and a hot-link e-mail address.) Raised cap: A large capital letter at the start of a paragraph is a typographical device from hardcopy layout; it adds visual interest and draws the reader into the article. For this effect, you can use: <font size=7>N</font>ow is the time ... This will appear as: Now is the time ... Narrow column width. You can do this with the <BLOCKQUOTE> tag, which puts white space on both sides of the column. There is rule in traditional typography: 60 characters or about ten words is the optimum reading length for a column. Wider than that, it becomes harder to read unless you increase type size and leading. If users bring up the default-size Netscape window, a story in SCDzine will look just about right in terms of column width; if their browser windows are very large, the <BLOCKQUOTE> tag will still help. Short paragraphs: Enough said. Use the <P> tag. Optional pull quote: A pull quote is another attention-getter from magazine layout used to entice the reader into an article. A pull quote consists of a quirky or impactful sentence from the article set in a larger type size and inserted as a graphic element. (You can create pull quotes for the Web in Photoshop or Illustrator; see example of a pull quote, below.) "Ethernet?" he asked. "Asynch? FDDI? I-WAY? GII? IP? vBNS? Zork? Erpl ZZL? PRKFR? Rooba?" Note on the use of humor: When I took over the hardcopy SCD newsletter in 1991, it was serious in tone; I added some wacky headlines and a bit of gonzo journalism and the popularity of the newsletter increased. Thus I learned that humor can be used to increase the user friendliness of a publication. The purpose of a newsletter such as SCDzine is to provide information, but there's no reason that information transfer can't be fun. Don't be afraid to put in a feisty headline or caption now and then. For example: One SCDzine article is titled: "Ethernet ate my brain at Supercomputing '95, or Virtual reality meets high-performance masking tape." A photo in another article shows a consultant in a goofy snow parka; the caption reads: "Cold fish? Consultant On Duty (COD) Tom 'Parka' braves frigid Colorado weather to help NCAR users. E-mail: tparker@ucar.edu." Frequent subheads: Break text into more accessible chunks by inserting subheads. Traditional typography calls for more space above than below a subhead. You can do this by inserting above the subhead. If you are using <BLOCKQUOTE>to narrow your column width, you can make the subhead "hang" out to the margin by canceling the BLOCKQUOTE above it and starting the <BLOCKQUOTE> again beneath it. For example: ... end of paragraph.<P> </BLOCKQUOTE> <H3>Subhead</H3> <BLOCKQUOTE>New paragraph. A note on headlines: I use "H1" for the title of a major article, "H2" for the title of a sidebar or a short announcement in the "Departments" section, and "H3" for hanging subheads. Also, remember, for maximum user friendliness, write interesting headlines. The subhead "Mesh, you caches!" is a better way to lure a reader into a dense paragraph on meshed cache structure than the subhead "Meshed cache structure." Fast-loading images: You can insert small gifs to spark interest in your article and break up those boringly deadly column inches of text. For example: smiley faces and sad faces to illustrate pros and cons of an issue; tiny head shots of people referred to in the article; narrow banner graphics; and so forth.

Quality assurance: In search of excellence