|
Warning: This web at
toLearn.net/marketing/ is two years old, it's unattended, and the
links are rotting. However, in June 2000, the
server recorded over 10,000 page requests during more than 3,000 visitor sessions from dozens of
countries. Thus, I'm reluctant to take it down completely. Ricci Street | MBA 604 | marketing |
Interface Design
Interface Design | Parts | Usability | Guides
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?
We have an ancient tradition of hands-on apprenticeship to guide and support novices in the
context of authentic work. 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. The fourth chapter, User Interface Issues, and the eighth, 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:
The important visual attributes:
Behavior is very important, too. 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 increases 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 standard sound file formats are .au, .wav. To get the controls below, in Front Page, use Insert | Advanced and choose Plug-In. Browse for your audio file. If you're looking for music, the MIDI file format, .mid, is most common. The folks at Real are making enough industry alliances (early 1998) that their formats, .ram and .ra, will become much more common. Background sounds on Web pages are either blessedly neglected or scandalouly underused. Personally, I wouldn't do it without telling you first. So on a separate page, I used File | Page Properties and then browsed for a .mid file. The mid file will play for awhile even though it is smaller than the navigation bar file at the top of the page. Also note between the H225 desktops and your laptops how Netscape's Navigator and Microsoft's Internet Explorer display very different-looking embadded interfaces here.
The best places to find free sound clips are the WAV search engine and Filez. Graphics How do you separate the sections of a page? WIMP -- windows, icons, menus, pointers 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. Regardless, as a designer, you have to accept it as the "platform" you're designing on. 4B's -- backgrounds, buttons, bullets, bars
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. You can quickly assemble a set of these navigational aids from the resources at ClipArt.com. Most of them are free; in fact, 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:
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 ($100 at Jasc, Inc.) to make, combine, and manipulate them. It also converts images from other formats such as .bmp and .tiff. In general, it does everything PhotoShop does -- except color separations -- for much less money. If you're preparing material for four-color offset printing, PhotoShop is the software to use. If you're preparing material for only digital use, Paint Shop Pro will do the same job. 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. Museums in general are good. Try the Smithsonian. Here are a few good sources of free images. The Library of Congress's American Memories Collections. Categories:
Knight, Lorrie A. "Locating Public Domain Images" College & Research Libraries News 59(1) (January 1998):11-13. Examples:
Towards the end of the article, Knight has links to the major search engines that will help you find graphics.
In English class, you may have learned about these critters: juxtaposing two things to reveal new features of each. A sporting contest described in terms of war can tell us something about male roles. War described in terms of a sporting contest can tell us something about the conscience of the generals. To make the connection, you have to understand both sports and war. What you're actually communicating is something about men. Slippery stuff. In the computer world, however, we use metaphors differently. We apply what we know, for example, desktops and windows, to what we don't know, how a piece of computer software works. In "Beyond the Interface Metaphor," Ken Mohnkern of Carnegie Mellon explains both why computers are as easy to use as they are but still so doggone hard to use that they make us feel stupid. Up until now, you've been a user. Now, you're going to be designing a web, or a "system", as Mohnkern refers to it here. I'd recommend highly that at least one person on your team read the whole article and that you give great thought to how you will use visual metaphors in your design.
In my experience, learning a new piece of software is often called "getting it". We either get it right away or we get it at great pain and thus, often, not at all. The "it" to get, then, is the designer's model. Now that you're the designer, how can you help your customer get it? One way is to not try to make it usable by everyone, or even lots of people. Choose a test user or two as representative as possible of your target audience. Make it usable by them.
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:
As you move through the development process, how do you test your interface?
Rapid Prototyping I believe it will be the responsibility of each of us to design and create our own professional webs, especially on intranets. Many of us will have our own personal webs just as we have personal lives away from the job. For larger organizations, the rising young MBA will not have to actually code the final version of the corporate web that will carry out the official marketing strategies. You may well be expected, however, to maintain parts of that marketing web. For example, you may moderate the TALK-like discussion list of customers interested in some aspect of your product just as I moderate a customer (student) discussion forum for my employer's graduate-school division. You certainly will be expected to participate in the design of that web, what I here call information design. In fact, after this course, you should volunteer if the opportunity arose. At some point, that design group is going to hand something to the folks who will actually be responsible for making the thing polished and workable. They'll write the codes and scripts that are needed to replace the freeware you assembled. They'll get all the oranges to be exactly the same, all the gifs as small as possible. That's their job. Too often, they design the thing, too, because no one else did. So there you are on the design team. On the one extreme, you can hand off scratches on a napkin "created" during a three-martini luncheon. On the other extreme, you can hand off a fully functioning, extensively user-tested, well thought-out prototype that the big boss has already signed off on.
Rapid Prototyping Tools Depending on where you are in the development process, you may find a presentation program like PowerPoint more useful than an html editor like Front Page. Especially as the word processor and html editor merge, you will be expected to work with either type of program with equal ease. I say type of program because if you know these two, you don't need more than a few hours to get up to speed on Corel's or Adobe's products.
Here's my bias. In what follows, I'm assuming that the interfaces must:
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:
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. 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. Note Jasc, Inc, has Paint Shop Pro 5 for about a hundred dollars. If you go to Shareware.com and download version 4.14 for Windows 95 or an earlier, 16-bit version for Windows 3.1, you can try it out for free. 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:
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 window. 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. Related Websites Use It - highly recommended
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
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?
urces
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 
Obviously, this communication is
critical. It occurs as the user experiences a system's look and feel - its metaphor. It is
important to realize that the user forms a user model
whether or not the designers have made a conscious effort to communicate the design model
to them. So there must be an intentional effort made to create and
communicate a design model; otherwise, we cannot expect users to understand and use a
designed system effectively. 
