- Shopping Bag ( 0 items )
- Spend $25, Get FREE SHIPPING
List Price
$49.99
Textbook Details
Used & New From our Trusted Marketplace Sellers
To try again, please visit the B&N Marketplace.
Although Web usability has received lots of hype, especially during the dot-com meltdown, the focus has been mostly on technical issues. Usability experts stress the pitfalls of frames and too many images on Web pages. They recommend editing out unnecessary words and writing in a non-linear style-all valuable advice, of course. But less frequently do they highlight the importance of the visual presentation of Web pages.
The Web is a communication medium that does most of its talking visually. What you see on a Web page tells you what you might find within the site, how to get there, and why it might interest you-not to mention the instinctive emotional response that shapes your Web experience. As a result, Web usability issues are communication issues. Easy-to-use sites are those that communicate quickly and effectively.
Site-Seeing takes a fresh approach to Web usability by applying visual communication principles and decision-making to Web design. Specifically, readers will learn the key concepts behind visual organization, look and feel, technical considerations, and clear planning that stem from audience awareness. Through numerous, full-color examples author Luke Wroblewski deconstructs "the good, the bad, and the ugly" of Web design.
The visual presentation of a site does more than merely making it pretty. It organizes information according to function. It creates distinct and appropriate personalities. It provides emotional impact and attachment. In short, it engages the audience-and keeps them coming back.
Luke Wroblewski heads the interface design and new media design and development efforts at the National Center for Supercomputing Applications (NCSA). At NCSA, he redesigned the Kellogg Company's intranet, codeveloped the Open Portal Inter-face Environment (OPIE), and spearheaded many other Web and interface projects. He has also taught Web design courses at the University of Illinois and presented papers on interface design at professional conferences.
| Introduction: Learning to Speak Web | ||
| The Evolution of the Web | 4 | |
| The Usability Era | 10 | |
| What This Book is About | 12 | |
| Chapter 1 | What Do You Want to Say? Deciding on Content | |
| Know What to Say | 20 | |
| Say it in "Web" | 21 | |
| Getting to Know Your Client | 22 | |
| Understanding your client's goals | 23 | |
| Understand Your Audience | 25 | |
| What they are looking for | 27 | |
| How they communicate | 27 | |
| Using profiles and scenarios | 28 | |
| Determining Content | 30 | |
| Writing It All Down | 32 | |
| Referring back to it | 32 | |
| Chapter 2 | You Need a Plan: Preparing for Content | |
| Organizing Your Site | 36 | |
| Categorize your information | 38 | |
| Accommodate your audience | 40 | |
| Visualize it: schematics | 45 | |
| Navigating Your Content | 47 | |
| Getting around the site | 48 | |
| Too much versus too little | 52 | |
| People are different | 58 | |
| Visualize it: navigation mock-ups | 61 | |
| Finding Your Personality | 63 | |
| Describe yourself | 65 | |
| Visualize it: sample combinations | 66 | |
| Remembering Your Limitations | 68 | |
| Think technically | 68 | |
| Think globally | 71 | |
| List it: product requirements | 72 | |
| Scheduling Your Progress | 73 | |
| Visualize it: content delivery schedule | 76 | |
| Chapter 3 | Technically It's a Lexicon: Technical Considerations | |
| Getting Technical | 84 | |
| Responding Promptly | 85 | |
| Paying attention | 87 | |
| Providing feedback | 88 | |
| Unifying the Web | 91 | |
| Breaking the model | 94 | |
| Keep 'em browsing | 95 | |
| Nonstandard interactions | 102 | |
| Incorrect use of conventions | 103 | |
| Following Links | 104 | |
| Different destinations | 105 | |
| Marking the trail | 110 | |
| Assembling the Page | 120 | |
| Keep content dominant | 122 | |
| Being Accessible | 126 | |
| Provide ALT-ernatives | 127 | |
| Leaving a forwarding address | 129 | |
| Chapter 4 | Birds of a Feather. Flock Together: Visual Organization Principles | |
| Speaking Visually | 132 | |
| Seeing Information | 134 | |
| Understanding perception | 136 | |
| Forming relationships | 139 | |
| Building a hierarchy | 141 | |
| Using visual weight | 143 | |
| Keeping it balanced | 144 | |
| Educating your audience | 146 | |
| Explaining where | 147 | |
| Explaining what | 155 | |
| Explaining how | 163 | |
| Chapter 5 | Who Are You? Get a Personality | |
| What is Personality? | 170 | |
| Why Have a Personality? | 174 | |
| Say the right thing | 178 | |
| Be unique | 180 | |
| Invite and engage | 182 | |
| Bring it all together | 183 | |
| How to Get a Personality | 185 | |
| Investigating the possibilities | 186 | |
| Using color | 186 | |
| Using type | 201 | |
| Using visual elements | 204 | |
| Using interactivity | 209 | |
| Chapter 6 | Fundamental Particles: The Elements of Web | |
| Working the Elements | 214 | |
| Know your basics | 216 | |
| Elements and personality | 217 | |
| Navigation Systems | 219 | |
| Keeping it clean | 221 | |
| Providing alternates | 223 | |
| Keeping navigation in its place | 225 | |
| Body Text | 227 | |
| Being readable | 228 | |
| Linking within | 234 | |
| Images | 235 | |
| Eliciting interest | 236 | |
| Part of the bigger picture | 238 | |
| Keeping it small | 241 | |
| Page Footers | 241 | |
| Within the footer | 242 | |
| The footer and the page | 244 | |
| Forms | 247 | |
| Ask the right questions | 248 | |
| Make consistent requests | 252 | |
| Create a visible order | 253 | |
| Chapter 7 | Home Is A Cluttered Place Indeed! | |
| What Belongs at Home? | 256 | |
| Everyone wants to be at home | 262 | |
| Leave it in the garage | 266 | |
| First Impressions | 268 | |
| What's Inside? | 272 | |
| The right amount of contrast | 274 | |
| Entrance hierarchy | 277 | |
| Grouping entrances | 278 | |
| New Additions | 281 | |
| Working together | 282 | |
| Getting noticed | 283 | |
| Chapter 8 | We Are Always Changing | |
| A Web in Need | 290 | |
| The dynamic advantage | 291 | |
| No longer just browsing | 294 | |
| Dynamic Designs | 297 | |
| Getting to content | 298 | |
| Template power | 301 | |
| Know what to expect | 304 | |
| Generation PLEX | 304 | |
| Our complex nature | 307 | |
| Doing our own thing | 309 | |
| More to Come | 313 | |
| Conclusion | 314 | |
| Permissions | 320 | |
| Bibliography | 324 | |
| Index | 328 |
chapter one
KNOW WHAT TO SAY 20 UNDERSTAND YOUR AUDIENCE 25 WHAT THEY ARE LOOKING FOR 27 DETERMINING CONTENT 30 WRITING IT ALL DOWN 32
At some point in our lives, we all have been told to "think before you speak." Though this advice seems like good counsel and easy to do, the truth is, it is rarely utilized. Communication is such a natural part of our daily routines that when we have something to say, we do just that: Say it. Speaking comes so easily we don't need to think too long about what we really mean to say. The same is true for other relatively easy actions. Currently, putting up a Web page is an easy task for anyone with some time to spare and a willingness to learn. As a result, a lot of Web pages are thrown together just like sentences: quickly and without much forethought.
At some point in our lives, we all did think before speaking, and we still didn't get our message across. Perhaps the problem was that we only thought about the words we were using. In our day-to-day communication, words play a small role. We communicate in many more nonverbal ways. Body language helps give words meaning. Intonation can make all the difference in a phone conversation. In online chat rooms, smilies (also called emoticons) attempt to articulate our intentions ("Just kidding" or "I'mconfused"). Words alone are often not enough. Visual, aural, and temporal cues enhance our understanding and interpretation of what is being said and often infuse words with the proper meaning. The more we know about how to provide and receive cues, the better we can communicate.
The Web has its own set of cues: image, text, interaction, organization, motion, and sound. Just as in conversation, words are just a small part of how you communicate on the Web. To create effective Web presentations that "speak" to our audience, we must take all our nonverbal cues into consideration. On the Web, "thinking before we speak" means far more than simply understanding verbal communication; it means thinking about how image, text, organization, interaction, motion, and sound can work together to create successful presentations. This process can be thought of as learning the language of the Web. Because the Web is still relatively young, both Web designers and their audience are new to this language. On the other hand, we're familiar with the verbal language we speak every day of our lives. So it is often possible for us to understand what someone means regardless of what he or she actually said.
But, the Web not only speaks in a new language, it speaks in many languages (image, interaction, and so on), so there is no accepted vernacular from which you can interpret intended meaning. As a result, miscommunication occurs on a regular basis. Most of us haven't yet learned to "speak Web."
The problem is often escalated, because many Web authors simply "start talking" instead of thinking through what they want to say, and how to say it in the Web's unique language. Speaking "Web" means thoroughly thinking through the organization and interaction of a Web site, and how it is presented to an audience. Because the Web is visually rich, the presentation of a Web site must communicate in many nonverbal ways. Not only does the written language used need to be clear and approachable, but so does the visual language.
Ultimately, the Web is a communication medium. Therefore, effective Web design is analogous to effective communication, and we can often think of Web usability issues as communication issues.
KNOW WHAT TO SAY [SECTION TITLE]
No matter the medium of communication, there is always a message. But real communication cannot take place unless someone is there to interpret the message and give it meaning. When we don't think through the message we're sending, it can often come out the wrong way or be interpreted in a manner the author never intended. In other words, it can lose its intended meaning. When the author of a message thinks through the intended meaning, odds are much better that the receiver's interpretation will be a close match.
Yet, even thinking through intended meaning is often not enough to communicate effectively. Sometimes the same message can be interpreted in two shockingly distinct ways by two separate individuals. The best way to explain something to Carl is not necessarily clear to Chris. Carl might be a mathematician and think in a very logical and rational manner. Chris, on the other hand, might be a therapist and analyze your message emotionally, coming up with something totally unlike what Carl surmised. So, how can we communicate successfully?
How can we make sure that Chris and Carl both receive the same message, and that the message is indeed what we intended? The answer is really not as complex as you might think. Thinking through the main message that you need to communicate and how best to articulate it often does the trick. Basically, we need to be certain we are aware of who is saying what to whom.
SAY IT IN "WEB"
When you open a Web page for the first time, the first thing you may ask is, "What am I looking at? And what does it mean?" Each and every Web page has a message, whether intentional or not. The message is communicated through images, text, colors, sounds, motion, and so on and assembled on the other end by you, the user, into meaning. If the Web page author did not give enough consideration for the audience and message of their Web page, the viewer might be confused or upset and leave quickly for a Web page that "speaks their language." If Carl, the mathematician, is the intended audience, numbers might be the proper form of communication; however, the therapist, Chris, may not know how to interpret the numerical presentation.
In order for a Web site to be "usable," it must be understandable. It needs to communicate, and communicate effectively. The intended message of a Web site needs to match the interpreted message of the user. In other words, a user must be able to successfully interpret meaning from how the Web site author selected and organized the many Web site elements (image, text, and so on). Therefore, Chris and Carl might find different sites more usable and suitable to their needs. But when both of them are your audience, you need to make sure that neither is confused.
When creating a Web site that effectively communicates a message, you should begin by asking numerous questions - questions like "What is my Web site's goal?", "Who is my audience?", "Why are they likely to come to my site?", "How do they communicate?", and so on. The following sections take a detailed look at some of those questions, how best to ask those questions, and what their answers may tell you.
GETTING TO KNOW YOUR CLIENT
Our client? Oh, that's easy. He's Joe from widget.com. Not quite. Getting to know your clients involves a lot more than first names. Prior to designing a Web presence for your clients, you need to really understand your clients, what they do, what they want, and how they expect to get it done. (Though I use the term clients here, you could certainly be designing a site for yourself, or someone within your company.)
Getting to know your client involves some reading and a lot of talking, especially a lot of inquiring. When you design Web sites for clients, you're effectively developing a means of communication for that client. Your clients' presence in cyberspace is their virtual showroom, open 24 hours a day and available in every household. The Web sites will provide information, offer services, and give visitors an understanding of your clients and their business. So, before you can start "speaking" for your clients, you have to learn what they would say. An initial step to understanding your clients might involve reading their business collateral or brochures, examining their business and marketing plans, trying out their products, or researching current trends and issues in your clients' industries. You need to try to understand your clients' intentions and focus, as well as their constraints. It might even be beneficial to sit down with some employees of the firm and have them describe to you, in their own words, what they feel their company is about. Do not be afraid to ask lots of questions. Only by having a clear idea of your clients' goals can you speak for them. The most important answer to "Who is your client?" is understanding what your client does, for whom, and why. Keep this information at the tip of your tongue (or in the case of Web design, your mouse). When it comes time to communicate for your clients, make sure that this information remains in your forethoughts.
UNDERSTANDING YOUR CLIENTS' GOALS
Now that you know more about Joe's company than even he does, you need to understand why Joe's company needs to be on the Web. When designing or organizing for the Web, it is your job to understand your clients' intent and direction. You need to define the problem. Clients sometimes think in very broad loosely defined goals or are convinced that they need the same solution their competitor just implemented. During this discussion, you should try to identify the problem. Without directly referencing the Web, have your clients try to clearly identify their needs. For example, instead of saying, "We need a form with five input fields and two drop down menus ...", it is better to understand your clients' need as "We need the ability for interested parties to send us their contact information, so we can ..." Make certain that you have the problem clearly identified, or you may end up spending most of your time developing solutions to ancillary issues.
The real question is "What need is the Web site going to solve?" Delivering information and technical support for a product? Providing educational tools for high school students? Promoting a musician's solo career? The designer needs to determine the best means for meeting their clients' needs. Believe it or not, this means can be different from what the clients think is necessary (see sidebar). This is why it is important to understand your clients' needs independent of the Web. When you start talking about Web site elements, you're already thinking about a possible solution. This is the time for thinking about problems. There will be plenty of time later for solutions.
UNDERSTAND YOUR AUDIENCE [SECTION TITLE]
"Who is your audience?" isn't just one question. It's a series of questions that need to be answered so that a designer knows with whom he or she needs to be communicating. The answers to these questions will also help to provide a composite idea of some typical members of this audience. A composite idea will help establish the tone, personality, and attitude of a Web site and is formed by asking questions. What is the age of the audience we're trying to reach? What kind of experience do they have? How well do they know our client's firm? How experienced are they with the Web? What type of shared culture do they have as an audience? What are their objectives? The answer to these questions and others will help you determine the content needed within your Web site. More importantly, it will determine what content you do not need in your Web site.
WHAT THEY ARE LOOKING FOR [SECTION TITLE]
Perhaps the most important question regarding your audience is "What is their purpose for coming to your Web site?" Consider what they want to achieve, and how their needs can be met. Visitors come to Web sites with questions and expectations. For example, they expect to be able to find information on how to use your product, or they want to know who scored a touchdown in last night's football game.
By anticipating the types of questions users will bring to your site, you can design sites that meet and even exceed customer expectations. When your audience can achieve their goals quickly and easily, they will be content. That said, knowing and accounting for what your audience expects from your Web site doesn't guarantee a successful Web experience. You also need to understand how they expect it.
HOW THEY COMMUNICATE
How does your audience communicate? Perhaps your audience uses a certain lingo to communicate ideas between one another. Certainly, industry-specific connotations and phrases are shared by like-minded individuals. In the Williams-Sonoma example, distinctions are made with the conventions of thousands of cookbooks worldwide in mind. Pan here means cooking utensil, not to move a camera so as to follow a moving object, as it would on a cinematic-effects Web site. Knowing how your audience communicates, however, goes beyond the meanings associated with words. For example, what connotations do colors have? In the financial world, red is associated with negative trends, and investors instinctually interpret red text as bad news. Other concerns might be cultural. In the United States, mailboxes appear as rounded blue rectangles, whereas in Italy, they are often red squares (see image below). However, the image of an envelope with a stamp in the corner signifies mail for both cultures.
How does your audience like to receive information? Do they rely on images for an understanding of concepts, or are they more inclined to comprehend information presented in tabular form? Know what your audience finds useful and effective and present your information in that manner.
Another important point to consider here is the Web-specific requirements of your audience. Are they comfortable on the Web? What sorts of interactions do they typically engage in online? What have they come to expect from Web sites? It might be valuable to examine other sites in a similar area as your clients and see how their user base conducts itself online. Understanding how typical members of your audience communicate amongst each other online and in person will better allow you to communicate with them.
USING PROFILES AND SCENARIOS
Another technique commonly used to better comprehend an audience is the use of scenarios. A scenario is a sketch of why a typical audience member may use the site. It usually includes information such as the visitor's goal, the best way to realize that goal, and an ideal outcome for the site visit. Williams-Sonoma, for example, needed to consider a variety of scenarios: a visitor who needs to create a registry for an upcoming wedding; a visitor with an extensive knowledge of gourmet cooking utensils who is seeking a specific product within the Williams-Sonoma catalog; a visitor who is uncertain what gift to purchase for a friend and would like to casually browse the selection; a visitor who has been referred to the site and wants to understand Williams-Sonoma; and more.
Continues...
Excerpted from Site-Seeing by Luke Wroblewski Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.
To try again, please visit the B&N Marketplace.



