What Makes People Click: Web Design

[content]

What Makes People Click:
Marketing an IEP Program on the Web
The following was prepared as part of a Demonstration held at TESOL 2003, Baltimore, MD, USA, in March. It is an ongoing project . Go to the Main page to see the rest or take a look at work that has already been done for previous presentations:
[ Resources for Program Marketers ][ Program webpages (TESOL 2001) ] [ Bibliography ]

Basics of Web Design

When a user opens up a webpage, his or her eye lands on a spot slightly left of center, slightly above center of the screen. Remember that the hand is poised on the mouse, usually to the right of the keyboard, usually already moving to find out where the page links, what happens when the cursor lands on the links, etc. Webpages have what is known as a "look" and a "feel"; this is certainly different from the way print ads operate. The web user is saying not only, how does it look?, and how does it feel?, but also, where does it go?, and what can I do with it? So you, as a designer, must operate on perhaps more planes than the print ad designer does.

On top of that, what the user really sees is light, not paper, not texture. It's like a neon sign with the ability to deliver important information. The user's reaction might be somewhat like one's reaction to neon signs along a strip of fast-food restaurants. Print that is too small, or words that are blinking too much, simply fade into the background or give the user a headache. The ever-present right hand will move the user on to an easier place.

Simplicity in web design

The field of web design embraces a simple slogan: KISS; which stands for Keep it simple, stupid (1). I'm not sure if it originated in web design, but most of the gurus of web design can be found repeating it often. Why? Because as designers learn new tricks, it is increasingly harder to resist using them, and using them often, even if they are unnecessary. And, as a designer starts knowing more designers, it is increasingly easier to believe that everyone has the newest plugins: in that circle, everyone does. But in the wider world, many people don't. So keeping it simple is usually the mantra to remember, to keep from being carried away by the fancy things.

Web design awards are won by simple, powerful combinations and uses of space and color. According to raters in last year's web design awards (2), good pages can be made by anyone, whether they are backed by thousand-dollar machines or are working on their own out of their basement; simplicity and power are not equivalent to investment; on the contrary, they are sometimes in inverse proportion (3).

How should you start your site? Consider what you need on there: you need links to important information (price, schedule, etc.). You don't need a link to your university's mission statement (even though you may have spent a retreat weekend devising it)....You need a picture that conveys a sense of what you want someone to associate with your program and/or college; you don't need a movie. You need to be able to get the person to an image of the town if they so desire. You don't need blinking lights or a spinning globe that gives them a headache or makes it impossible to find what they need to know (which is already in a second language, remember). You've got enough on your plate without adding extra complexity.

Link buttons

Looking at the variety of link buttons alone, which do you like? There are understated ones and there are huge colored blocks. There are small print buttons crammed like sardines, and there are large, airy ones. There are buttons that don't communicate clearly where they go; you don't want these. There are buttons along the top, buttons along the right, buttons on the bottom, etc. Choose what you like and go with it.

Pictures

Now consider the variety in pictures. Hopefully you have mastered using the scanner, and putting up the jpg file so you can refer to it. Usually people will help you so that your picture will have a variety of colors but not be so difficult to load that people with older computers will have to wait a long time to get it (one reason you can see text immediately in most webpages is that there are many people who have disabled pictures because they are slow; for the rest, give them something to do while they wait). Some old pros have a bad attitude toward pictures as being more trouble than they are worth....but I find it hard to imagine students having any idea at all about your campus without one. Sites that don't have them may be functional but can't really convey the feeling that pictures do. An interesting question arises about whether deliberately blurry pictures are more effective than sharp, clear ones. They may be. I'd like to see the clickthrough data on the comparison. My own theory is that they are, since the point is to have the prospective student put himself/herself on your campus. I also believe that movies are not effective, since it would be easier for them to put themselves into a blurry picture, for example, than a moving one.

Now is the time to remember what you have that is really better than what other programs offer. Put it in a prominent place. Make it clearly evident from the picture. But remember, blind people, Linux users, and people who disable pictures for faster loading don't get that information (and most people don't look at pictures right away); put it in other places too. Don't rely too heavily on the pictures to convey important information.

Backgrounds

Resist the temptation to put patterns or globes in the background. Everyone likes the idea of one worlds and maps and maps of the world, but in general textured backgrounds detract from the power of the message that is on them, and make pages difficult to print. Is this something you can't say any other way? Are you trying to set up a subliminal message, and, if so, do you think it will work? Although putting wallpaper up is easier on the web than it is in your kitchen, patterned backgrounds are generally rejected by most designers, who are usually focusing more on clarifying, and making more powerful, the message they are intending to deliver.

Colors

It is also easy to get carried away experimenting with the pallette, or, the number of colors available to you. Unlike art school, they're all in front of you, easy to pull out and use in different combinations, and it's free to experiment. Your experimentation, however, should be tempered by several factors.

First, as many as 10% of systems are what is known as 8-bit, or supporting only 256 colors (Roselli, 2002). Quite a few of these are undoubtedly in the international world you are seeking to reach. Worse, using colors that others' machines don't support leads to splotchiness and other undesirable outcomes. Second, a large percentage of people are colorblind (3), suggesting that you should not put, for example, red type on a red background, or mix colors that people frequently are unable to distinguish (4). Finally, remember that people may want to print your pages, especially if they have something on them; many combinations are not made for printing, and again, not everyone has the latest color printer, even if they can see the page well on your screen.

Finally, remember one last maxim: associations that are pretty obvious to us mean nothing to others. For example, one program I know does its entire page in the red, white and blue of an American flag. To Americans it's pretty obviously wrapping the whole program in feelings about the US, good or bad, which is a pretty common marketing ploy and doesn't surprise us in the least. But the colors in and of themselves don't carry those associations for the people we're trying to reach; in fact, they may carry completely different ones (5).

Accessibility

A final point is that some have accessibility problems greater than colorblindness. Some are completely blind (6); some have disabled pictures and rely on ALT tags to find out what pictures are doing within a page; some are operating from labs in which they cannot download Flash or any other plug-in; similarly, some have macs, or old Netscape browsers, or some other combination of outmoded equipment, but can't do anything about it, either because they are borrowing the use of their machine in the first place, or perhaps they are saving their money to go to school abroad. Don't discriminate against these people; they may be the ones you want at your university! (7)

So, if you're entirely cautious, are you left with anything? Remember, usability is more important, generally, than design. It doesn't matter if it looks good, if you can't do anything with it. People are pretty quick to spot and discard the things they can't use, even if it's only temporarily. The best solution to this general dilemma is to go out and view your own pages from as many machines as you can. I have only recently begun to do this, and I've found, much to my chagrin, that they aren't as nice as I thought they were on the vast majority of machines I use. Terrible! Back to the drawing board! But what else can you do? I couldn't have known this any other way.

Take a look around and find the sites you like. Remember, what you like and what your prospective students like could be different, but what you like is a good place to start. Then, notice how any given page is made. You can do the same (see ch. 4), putting your own twist on it, and eventually you'll have one you like.

Now use your ESL/EFL skills to figure out how the page looks to someone who doesn't know your language, has never seen your university, etc. Does it welcome them? Not with words, but with a feeling, even with color combinations. Does it speak straightforwardly to them? If not, go back to the beginning, and start over. Remember, KISS.

Footnotes:

1. I first heard this expression from Peck (2002), but have seen it many times since. It's surprising that, given the fact that the design community is united around simplicity, so many websites are so complex and dense. Remember Google as a good example. Simple logo, no background, bright color combination, and providing people what they want: with this combination you too could dominate your field.

2. This came from Anne Stuart (INC magazine), whose article no longer links; I'm not sure what happened to it. My first exposure to design awards surprised me that yes, in fact, good pages can be made even by busy people with other things on their minds.

3. If you don't believe me, take a look at the homepage of my host institution.

4. As many as 8% of Caucasian males are colorblind (Roselli, 2002), but how many of your viewers are Caucasian? or male? Nevertheless, it's something to think about, especially if you like the look of blue on blue.

5. See (Thurow, 2003) for comments about what colors mean to different cultures; you can probably already guess about red. My question really is whether generalizations like "blue is soothing" follow across cultures. Or whether they are even provable within ours.

6. For a start on accessiblity for the blind, visit (Neilson, 2001).

7. This is easy to say, but in fact you have to go out of your way to find out how to make your pages more accessible, and most people (myself included) have only done it in a cursory way. My hat is off to those who have made the effort to include everyone. If you've done it in an ESL/EFL classroom, you know that it isn't easy.

Sources:

Internetnews.com (2002, Oct. 31). Study: For site cred, looks matter. http://www.internetnews.com/IAR/article.php/1491871

McGovern, G. (2002). How important is the look 'n' feel of your website?Dec. 16, 2002 New Thinking. http://www.gerrymcgovern.com/nt/2002/nt_2002_12_16_look.htm

Nielsen, J. (2002). Top Ten Guidelines for Homepage Usability. Alertbox 5/12/2002. http://www.useit.com/alertbox/20020512.html

Nielsen, J. (2002). Top Ten Web-design mistakes of 2002. Alertbox 12/23/2002. http://www.useit.com/alertbox/20021223.html

Neilson, Jakob (2001). Beyond Accessibility: Treating Users with Disabilities as People. Alertbox 11/11/2001. http://www.useit.com/alertbox/20011111.html

Nielsen, Jakob (1999). Ten Good Deeds in Web Design. Alertbox 10/3/99. http://www.useit.com/alertbox/991003.html

Peck, W. (2002, Feb. 6). KISS: Keep it simple...Why? Webreference.com. http://www.webreference.com/graphics/column53/

Roselli, A. (2002, Dec. 2). Quick Color Class, evolt.org, Visual design. http://evolt.org/article/Quick_Color_Class/22/49204/index.html

Stuart, Anne (2001). Home Groan, INC Magazine's design awards, 11/1/2001 (now a dead link). http://www2.inc.com/incmagazine/articles/23625-print.html

Thurow, S. (2003). Choose the best colors for your banner ads. WorkZ.com. http://www.workz.com/cgi-bin/gt/tpl_page.html,content=1412&template=15&nav1=1&user=ffffffffff

Resources:

Web Design Links, Univ. of Minnesota

Color Links, Univ. of Minnesota

Web Design bibliography

Copyright Thomas Leverett, 2003

[ Effective Webpage Design ] [ Program Marketing ] [ Resources for Web Designers ] [ Bibliography ] [CESL] [ CESL Teachers' Page ] [ webpage design ]

Page made and maintained by
Thomas Leverett, CESL, SIUC
Photo above (Spider Web) by Jim Leverett.

What Makes People Click:Marketing an IEP Program on the Web

Basics of Web Design

What Makes People Click:
Marketing an IEP Program on the Web