Interface Design | Parts | Usability | Guides

If you hand in a ten-page term paper essay, neither you nor I have to give much thought to orientation and navigation. One staple; ten page numbers. Maybe instead of the staple you slide the text into a slick blue plastic sheet with a white strip to grasp it on the left. Should the pages come flying out, the ten numbers will let me quickly reassemble them. I read top to bottom, left to right. You can count on it. I might follow a reference to the Works Cited. I might flip back from page 8 to check something on page 3.  

How else do we navigate? Some of you may have had a recipe in a printed and bound church cookbook. As long as there was a table of contents, you could find your way around pretty well. If there was an index of ingredients used, even better.

Navigation in hypertext is a little different. It's harder because each writer (author? developer? builder?) gets to make up his or her own navigation and orientation system to replace the linear 1, 2, 3. You can pretty much count on the top / bottom left / right as everyone's default behavior. But you've had your eye bounce around enough Web pages. You know that the way you integrate text and graphics opens up a world of page-navigation possibilities. People are more than willing to abandon the linear text if you reward them with attractive, accessible content. Even better, let them interact with it. Let it behave.

2D Design   That's the traditional phrase to describe what you need to practice. If you need a quick review, try A Foundations Art Refresher: The Art Elements, part of Robert Gomez' Art 232 course web at the Univeristy of Wisconsin's main campus. If that intrigues you, his Daily Class Schedule for the Spring 1998 semester has lessons and links.

In the digital world, interface design means rougly the same thing. If you can think of a screwdriver handle as being a simple yet functional interface (or maybe interhand), you can see the challenge as a hypertext writer. You must also be part artist, part commercial product designer, part psychologist, and part guide or teacher. A little geek doesn't hurt, either.

Interface Design

	How does it look?
	How will people know where they are?
	How will they know where to go?
	How intrusive will the navigation system be?
	How explicit do I need to make the directions for getting around?

From the beginning of the digital development process, you start asking yourself how the project is going to look on the screen. You may sketch out some ideas. Finally, you have the project's target audience, their tasks, and the hypertext structure. You're confident about the most attractive and effective overall look and feel. You're now ready to commit to the specific look, feel, and contents of each screen.

First, select the measurement methods and standards that you will use to improve your design. As a human-centered designer, how will you be able to tell whether the interface works?

	Is it easy for those in the target audience to learn?
	Is it easy to understand after they've learned it?
	Is it efficient? Does it help them do what they need to do?

We have an ancient tradition of hands-on apprenticeship to guide and support novices in the context of authentic work. Paper-based documents can guide and support to some extent. But what about networked computers? How can the digital document go beyond paper to begin to play a good mentor's varied roles: inform, train, guide, support, and inspire?

A well-crafted interface is essential. This is especially true when the interface serves difficult cognitive tasks such as problem-solving and decision-making.

It may be best for you to learn by doing. If so, scroll down and get to it. However, when you want a more abstract and theoretical approach to design, I recommend "State of the Art Review on Hypermedia Issues and Applications", a 1994 document by V. Balasubramanian of Rutgers University. Chapter 4, User Interface Issues, and Chapter 8, A Systematic Approach to User Interface Design for a Hypertext Framework, are especially relevant.

Alan Cooper published a popular and influential book a few years ago called About Face. It challenges many of the principles taught by the leading guides such as the ones below. At his corporate web site, Cooper has a manifesto. If you read it and find that it speaks to you, try these three areas:

	Steal These Books	ink-on-paper books, especially those by Don Norman and Edward Tufte
	Cool Stuff From Cooper	articles, especially the ones on prototyping and metaphor
	We're Looking For Stars	jobs with his company; note the tests under To Apply at the bottom of the page

Parts

The important visual attributes:

Behavior is very important, too -- so important that it has its own section soon to come on the Language page. To get an idea of what I have in mind, see Interaction on the Hot Topics. To help the reader orient and naviagate, here's a quick list of the parts or devices you need to consider: text, sound, graphics, images.

Text

You can always use words for navigation: top, back, up. You can put text on a graphic . You can explain navigational technique on a help screen. As long as you're clear, consistent, and unobtrusive, it doesn't matter. However, you can't have text without a typeface. So you have to know fonts.

Fonts, fonts, and more fonts. You can't learn enough about them because typeface is a fateful and unavoidable choice. The Karen Schriver textbook, Dynamics in Document Design, is available at the Medaille bookstore. Especially chapter 5, Ms. Schriver goes into great detail about typefaces and fonts. In light of her ideas, what do you think about some of my decisions on these Web pages?

The best typeface resource I've found on the Web is Daniel Will-Harris's Typofile.

Sound

Recorded voices, sound effects, and music are underused on the Web. Why? For one, people surf in groups environments. For two, sound cards and good speakers are not standard equipment. However, as bandwidth creeps up and compression and streaming techniques improve, sound will get much more popular very soon. We'll talk about ear-cons like we talk about icons. Check out the folks at , the industry leader. A good beginner's guide might help you get started.

Graphics

How do you separate the sections of a page? If the page is longer than two screens, are you going to provide any way other than scrolling of getting around? Look what I've done on this page with the list under Navigation at the top and with the green up arrows.

WIMP -- windows, icons, menus, pointers
4B's -- backgrounds, buttons, bullets, bars

The WIMP was great when Apple introduced it in 1984 -- and my computer had 640 K of RAM and all my files fit onto a box of floppies. Today, my computer has 32,000 K of RAM, fifty times more, and it's connected to the Internet. The WIMP is, well, wimpy.

Unfortunately, Microsoft swiped it from Apple and it's now on umpteen zillion desktops. Shoving it aside will take a great leap into 3D, not the browser-based desktop of Windows 98 that you'll see this summer.

Meanwhile, hypertext designers use graphics to help the reader navigate and orient. For example, look at the graphics above. Without using words, the green circled arrow helps you navigate to another part of the page. Think how you would approach this page if it had no graphics, no colors, no subheadings. Why make your readers navigate a page that looks like a novel or a pictureless textbook? In fact, don't worry about it. They'll click away at first glance.

Free graphics abound on the Web. Randy Ralph's Icon Bazaar is one of my favorites. The links there will get you started. Or search for the term Web graphics.

Images

If you don't have the time or the inclination to make images on your own from scratch, where do you get them?

Are they decorative or informative? Are you as aware of copyright violations as you are of plagiarism? Web browsers read only two file formats:

.jpg
.gif

They're pronounced jay-peg and gif with a hard g as in gift. Make them as small (fast-loading) as you can. Use them a lot. I recommend Paint Shop Pro ($25 shareware at Jasc, Inc.) to make, combine, and manipulate them. It also converts images from other formats such as .bmp and .tiff.

The search engines will look for images but you have to be careful about copyrights. You can buy them; I pay $17.95 per year to get access to hundreds of thousands at Art Today. Here are a few good sources of free images.

The Library of Congress's American Memories Collections. Categories:

Usability

Because early contact with users is often nebulous and abstract, you want to get your ideas about the hypertext structure and the interface into concrete form as soon as possible. Users can give valid reactions if your ideas are in one of these test formats:

	paper mock-ups
	storyboard sketches
	slide presentations
	prototypes

As you move through the development process, how do you test your interface?

	hands-on prototypes
	one-on-one interviews
	surveys
	focus groups

{ more to come }

task-centered design

user-centered interfaces

Usability Testing FAQ

Brain Differences

UseIt - highly recommended

Guides

In what follows, I'm assuming that the interfaces must:

	transfer information, both verbal and visual
	make the response as easy as possible

Thus, the interfaces must provide access to the information for a variety of learning styles and needs. They must help the readers orient themselves. And they must look good and work together within easily navigable structures.

Interface Guides

For guidance on Web pages, note especially the Yale style guide and the Sun style guide and a terrific technical HTML primer and the style guide at the Web Developers Virtual Library. For a case study of how Sun Microsystem's intranet evolved, try the article by Jakob Nielsen and Darrell Sano. Tim Berners-Lee, the inventor of the World Wide Web, has an older but still interesting style guide for online hypertext.

Three other influential guides:

	IBM's User Interface Guidelines
	Microsoft's Windows Interface Guidelines for Software Design
	Apple's Human Interface Guidelines

For a different view, Jorn Barger has a site titled HyperContent, HyperJunk. In addition to what he calls a "scathing critique" of the Yale guide I recommend above, four other pages on his site are expecially relevant.

	Hypertext Theory as if the WWWeb Matters
	The Ten Commandment of Good WWWeb Design
	The Hyperterrorist Checklist of WWWeb Design Errors
	FAQ alt.etext = electronic text

To learn design, you must start by separating a Web pages' design from its content. While most people learn from good models, many can learn a lot by examining bad models -- what not to do. To get started, try Web Pages that Suck. Not only useful, it's funny, as the title might suggest.

Graphics Guides

Syracuse University has a good, short, non-nonsense primer.

For something a little more technical, go to the Web Reference Graphics page. Try their home page, too.

Many sites have PaintShopPro tutorials and tips & tricks. You'll find a lot of overlap among these sites. If you follow some of the techniques, you'll learn to use Paint Shop Pro even if you don't find a use for that particular technique. The skills there transfer easily to PhotoShop. If you're going to keep your images in digital form, the biggest difference between Paint Shop Pro and PhotoShop is the price.

	Webweaver: The original PSPro Tips & Tricks
	John Hart's PSP Tips & Tricks
	Web Graphics on a Budget
	CyberComm's list of links to PSP tutorials
	C C Cookies' Tips & Tricks
	Paint Shop Pro Tips By The Little But Great Guys
	MS-pRinT's Tutorials
	Clip Art Warehouse's list of tutorials
	GrafX Design's PSP tutorials
	GrafoManiac's tutorials
	MuseSpace's Tricks & Tips

Note Jasc, Inc, has Paint Shop Pro 5 available in beta. I recommend that you avoid it. Instead, download version 4.14 for Windows 95 or an earlier, 16-bit version for Windows 3.1.

Web Page Makers and Site Managers

Just a couple of years ago, you made a web page with a text editor like NotePad or a word processor like Word. You started typing code:

<html>

<head>

<title>HUM 298 Hypertext: Navigation</title>

</head>

<body bgcolor="#FFFFFF">

That's the beginning of the page you're reading now. Notice how the text between the <title> tags appears at the top of your browser windoe. Not twenty years ago, this is how you did word processing, too, by typing in the codes. Word processors didn't replace typewriters until they matured into the WYSIWYG editors we have today.

Just as the word processors matured, so have the tools to make web pages. By 1995, the software industry had produced HTML editors to hide the code. In late 1996, Netscape introduced Navigator 3.01, which let you use the browser as a near-WYSIWYG editor yet gave you easy access to the code to tweak it.

Today, the market leaders are Microsoft's FrontPage and Adobe's PageMill. I use FrontPage for my course webs. If you go to a search engine to learn more, the term "HTML editors" will bring good results.