click to print article
 
 
 


See related materials

Visit circle.com

Websites that Work, Roger Black (with Sean Elder), 1997.

Websites that Work companion site

Don't Make Me Think! A Common Sense Approach to Web Usability, Steve Krug, 2000. Introduction by Roger Black.

Roger Black's Ten Rules Of Design

1. Put Content on Every Page. Design shouldn't be mere decoration; it must convey information. Or entertainment. Content should come to the surface on every single level.

Corollary to Rule 1: Nobody reads anything. At least not everything. The only person who will read every word of what you've written is your mother. All other people skim and surf. So make sure there's content on every page.

2. 3. 4. The first color is white. The second color is black. The third color is red. Calligraphers and early printers grasped this over 500 years ago, and experience has proved them exactly right. White for background, black for text, red for accent and excitement. These three colors are the best; be very careful with all other colors.

5. Never letterspace lowercase i.e.
l e t t e r s p a c e  
l i k e  t h i s . It might be fashionable now but it looks awful and won't last. Don't be blown around by fashion like a hot-dog wrapper in the wind.

6. NEVER SET A LOT OF TEXT TYPE IN ALL CAPS. After while, it's just too hard to read.

7. A Cover Should Be a Poster. A single image of a human being will sell more magazines than multiple images or all type. Always has, always will. Think about why.

8. Use only one or two typefaces. Italian design is the metaphor: a strong sense of a few things that work together. Avoid the free-for-all of multiple fonts or multiple colors.

9. Make Everything As Big As Possible. Type looks great in big font sizes. A bad picture always looks better bigger.

10. Get Lumpy! The trouble with most design is it has no surprise. If you want normal people to pay attention, you have to change pace in your presentation. Monotonous rhythms of picture, headline, picture, text, ad, headline, picture, ad, etc. is like a pudding without raisins. A stew without lumps.

 

 

Roger Black, after dropping out of the University of Chicago in 1970, became one of America’s leading magazine and newspaper designers. Over the next two decades his bold and innovative designs renewed such major reads as Esquire, Rolling Stone, Newsweek, and the New York Times Magazine. In the 1990s he also became a leading designer of websites and internet-delivered content. His Interactive Bureau (co-founded with S.O.J. Spivy and David Berlow in 1994) emerged as a leading-edge New York Silicon Alley boutique for high-end design, with an enviable stable of New Economy and established clients such as Parent Soup, Discovery Channel, Bristol-Meyers-Squibb, USA Today online, American Express, MSNBC and the @Home Network. In 1999 Interactive Bureau became part of Circle.com, but Black and his colleagues have continued their work at the frontier of design and Internet website usability. Proud disclosure, by the way: LiNE Zine’s own original visual design was done by Black’s team at Circle.com.

Black’s studio has been distinguished by a sophisticated and integrated approach to typeface, color, navigation, and content display and management. They combine a deep historical appreciation of reader usability from the print world with now almost a decade of market-driven lessons about the web. Black offers a thoughtful, hype-free perspective on the visual experience of the Internet.

Readers interested in “Black basics” will enjoy his book Web Sites that Work (with Sean Elder, Adobe Press, 1997). There he lays out a retrospective reflection on design success on the web, articulating pragmatic and insightful rules such as “content on every page,” “make everything as big as possible,” and “get lumpy” (i.e., vary your look and feel with a deliberately uneven design landscape of graphics, text, and space). A valuable and complementary volume is that of Black’s colleague, Steve Krug: Don’t Make Me Think! A Common Sense Approach to Web Usability (Que/Macmillan USA, 2000), which includes a stimulating preface by Roger.

We caught up with Roger Black in his Circle.com office in New York in November. The main theme of the discussion was learning about learning on the web; and what his design experience can tell us about how people learn through interaction with Internet-based content.

Manville: Let’s start with web design. Since your 1997 book, has your thinking evolved further? Do the basic rules still hold?

Black: Well, since then we have a lot more data about people’s experience on the web. Most of my general perceptions about design, however, have held up pretty well. Many of them actually relate to a longer timeline of historical experience that’s a lot deeper than just the last few years—the long tradition of the printed page. You know, we have a 500-year-old body of evidence to examine in terms of the way people read. Remember, 99% of the Net is still reading—and people and reading haven’t changed all that much.

That said, today there is more pressure on people’s time, and attention spans have been assaulted. So, we tend to see people scanning and dipping in and out of things a lot more. Web design needs to respect that.

Some of the principles of my 1997 book may be in need of revision. My plea for preferring white, black, and red as primary colors (“the first color is white; the second is black; the third is red: the three together are the best”) didn’t really pan out on the web, but that doesn’t mean the success of those three working together isn’t valid. Right now, most websites seem to be either blue or green, but I wouldn’t say they’re necessarily the best looking.

My principle of “content on every page” has certainly held true, though I didn’t really invent the concept. The websites that follow this rule are always among the most successful. I still believe, as I said then, design must be more than decoration: it must convey information. My favorite example of a website that understand this is what we did with MSNBC.com.

MSNBC.com

Manville: How does that principle play out on MSNBC.com?

Black: Content on every page means real content as opposed to teasing or hype—not “click here for more cool stuff.” At MSNBC.com each headline gives some information so even if you’re only marginally interested, you still get a little factoid. For example, in sports news, the headline immediately tells you who won the pennant instead of just saying “Baseball.”

The difference between information and labels is still lost on most people. If you’re in a learning environment, nothing could be more important. The more you can put on the surface, the easier it is for people to absorb, and the more they’ll learn. One of the implications of this is that you have to break content down into small pieces and serve it up in on the screen for very easy understanding.

Actually, that’s only half the challenge. The other half is about enabling people to easily drill down once they’ve gotten interested in something. That’s the beauty of the web. Consider the behavior of people who are genealogy buffs using the Internet to find out about their families. The amount of time—and the paths they’ve followed—as they go drilling down is an example of what I’m talking about.

When I was consulting at Newsweek along with Edward Tufte (now of Yale), he made a very good comment about information graphics. He said that there really should be two kinds. The first is small—the quick summary, the scores, the top five in the industry, the election results, or whatever might be essentially tabular or visually displayed, or essentially a quick snapshot that you can put in a small space to help people understand what happened or the relationship between things. The second kind of information graphics should provide intense detail in some depth—it would be more detailed and may take two pages and tell the whole story of the election. People will pore over this kind of information. Text on the Internet will increasingly need to reflect this duality of information graphics.


Schlumberger is a Black/Circle.com designed 24-hour-news site.
Its editors select and refresh news from sources around the world.

Manville: Let me pick up on the theme about breaking content into small pieces. A lot of interest in the world of elearning now focuses on “chunking content” and creating “reusable learning objects.” The idea is that these “objects” can be combined and recombined in different ways, and the individual nuggets of knowledge can be found more easily in a body of content. Does this kind of vision fit with your design perspective about the future?

Black: Absolutely. But it also means that anyone organizing bodies of information for learning on the web will have to concentrate on the indexing problem. Using tags for text so it can be resorted and found is increasingly important. Technology will be part of the answer but not all of it. Editorial and design talent will still play a critical role in this field.

Another art that is not appreciated enough is the presentation of text: understanding the messages, themes, and overall information conveyed by unifying a photo, a pulled-out quotation, a subhead, and the content of a text itself. You’ve got to help the reader immediately find what’s interesting or most salient about the body of content. I come from an editorial background and understand this stuff, but a lot of new web designers don’t. They miss opportunities tried and tested by centuries of teachers and readers.

If you don’t have design and editorial staff working very closely together, things get very flat and grim, like a lot of textbooks. We think that we will force learners to read whatever they’re given—so we’ll just pour it in and they can just jolly well read it. Things don’t work that way, especially in today’s web world.

A lot of the early interest in printing on demand made this mistake. People started thinking that course material could be assembled from a lot of places and packaged together quickly and in a customized way—but they gave no real thought to the old editorial issues of overall readability and usability. So they neglected things like summaries and indexes and overall look and feel because that wasn’t the way the technology worked. We now know there’s a more effective way of presentation.

One of the things missing from a lot of the educational approaches today is the role of drama. The best learning is exciting and theatrical, and that needs to be on the web too. Most of us remember great teachers because they were great actors. We had this physicist at the University of Chicago, Roger Hildebrand, the head of the Fermi institute, who was a real showman. He taught us Newton’s laws of mechanics by twirling himself on chairs on the stage, and the students must remember it thirty years later. We need a certain showmanship, a certain flair, to get attention and get people to focus and remember. Before writing and reading, all learning had to be remembered through song, memory and acting. In the age of the Greeks, Homer used poetry and mnemonic devices to help people remember things; they were rhymed and very vivid. We need to recover that approach. Most of the materials for training or education on the Net assume that the work will be done by the student, by the receiver. That’s stupid; people just don’t learn that way.

Black/Circle.com designed the Guinness site as a "webzine"
of sorts, for the UK market featuring articles about music, pubs, restaurants, etc.

Right now we’ve reached a plateau, waiting to discover how people really learn on the Internet. There seems to be a general acceptance that the portal is a metaphor that works for people. And sure it works if you’re looking for a quick phone book of the Internet—typical Yahoo searches turn up hundreds of thousands of web pages. The problem is that as Yahoo grows larger and larger, it gets less useful. I’ve been predicting that Yahoo will scale itself out of existence. It can’t crawl the whole web anymore and can no longer give value-added reviews about websites. The search engine with Google has improved, but it’s not great. The end result is a kind of gray morass. I used to say that the Internet is a dark and kind of mysterious place. But now I’m beginning to think the Internet is gray...just an unrelieved gray.

Manville: Say a bit more about drama and theatre and how it might relieve “the gray.”

Black: A good example is the search service “Ask Jeeves.” They’ve put personality together with functionality—adding some human beings into the process. [Ed. Note—The personality works so well Macy’s even had a Jeeves balloon in its Thanksgiving Day Parade.] Maybe it doesn’t net more results than Google, but it’s more fun and you feel like you’re part of the process. Basically we’re talking about the difference between talking to a librarian and just going directly to the card catalog. A good librarian is always worth talking to.

Looking ahead, I think the next step will be stronger, contextualized search capability on the web. It will pick up some of the personalization that the good librarian gives you. The search engine will know you and what you’re basically interested in, and what you’ve searched for before. Then it can automatically weed out a great deal of stuff not relevant to you. Some tools out there do this now, but they will get better.

We’re also going to have to find a way to preserve the joy and pleasure of browsing, finding the seemingly irrelevant stuff that’s just plain fun and interesting. We don’t want to abandon wacky websites like suck.com, just because they don’t fit our profiled searches.

Drugstore.com was the first big online drugstore/pharmacy.
The original design of the site, pictured here, was done by Black/Circle.com

Manville: You said that MSNBC.com is one of your designs that you have a lot of pride in. Tell us more about the how and why of that website, and the implications for elearning design.

Black: We designed the site about three years ago, and in it all the things we’ve been talking about work well and together. It’s a very good example of the principles of content-oriented design, and the visitor numbers bear it out. On election night, with all the news, they had a record night, with 40-50 million people coming in. And it’s been one of the most heavily visited sites among all media companies.

Why is that? There’s some flavor to the information. It’s branded in a nice way. But more interestingly, it’s edited, and offered up in bright headlines and quick summaries at every level. If you look more closely at the design, you’ll notice that the content is chopped up on the screen so that as you go through it, trying to figure out what’s going on with the election or whatever it is, you can find the area you want very quickly. It has a quite robust search engine and everything is very carefully tagged. There are multiple ways of navigating. You can go the editorial route through the section front and to the areas you want, or through a cascading HTML menu that has text in it so you can go to the category of your field of interest and on to the actual item you’re looking for.

Manville: So it’s what you would call a good “lumpy site?”

Black: It is. It’s THE premium lumpy site, and has been number one for three years. So I take credit for it in the sense that everything they’re doing I either designed or agree with. I also want to give a lot of credit to the great team—at Circle and at MSNBC—and to the editor, Merrill Brown. I didn’t have to win him over with any of my ideas; he was already thinking about most of the same things when we started working together.

Manville: What are some of your other favorite websites, Roger? Either ones that you designed or simply admire?

Black: In the content sphere Salon.com continues to hold up incredibly well. Although not the greatest design, its content is very well edited. More importantly, they understand how things are supposed to work together, and that you can’t just expect someone to start at the beginning of a text and go all the way through to the end. One of my corollary rules is that “nobody reads anything.” And most of us don’t! When do we have time to read anything all the way through? We usually just bounce around. Good sites understand that dynamic.

Another site our group designed which has worked out well is MIT’s Sloan School. We collaborated with a bunch of people there who really understand the Internet, so that helped a lot. It’s partitioned for different audiences and well-organized. We also helped them project a sort of MIT-feel, which was important for them.

MIT Sloan School of Management

Though great design is its own art, you can’t ignore the other metrics of success: return visits by readers and, for e-commerce sites, of course, it’s click-throughs, transactions…and profit.

Manville: So what’s the right metric for a learning website?

Black: Good design needs to support whatever metric of learning the educator wants to use. It’s old-fashioned, but I still think assessment and testing are important measurement devices. The design should be able to correlate with how many people going through the content score a passing grade on a test. You need to know what people are actually learning. Without a test at the end, web-based learning just feels like, “Well here’s a message from George W. Bush!” [laughter] How do you know anything from that?!

Roger Black is chief creative officer at Circle.com where he helps coordinate the efforts of several hundred designers, editors, writers and information architects. You can reach him at roger@rogerblack.com.

Brook Manville is Publisher of LiNE Zine and Chief Learning Officer of Saba. You can reach him at brook@linezine.com or bmanville@saba.com.

RBBMTLZLI122200GR

 

Copyright (c) 2000-2004 LiNE Zine (www.linezine.com)

LiNE Zine retains the copyright in all of the material on these web pages as a collective work under copyright laws. You may not republish, redistribute or exploit in any manner any material from these pages without the express consent of LiNE Zine and the author. Contact permissions@linezine.com for reprints and permissions. You may, however, download or print copyrighted material for your individual and non-commercial use.