Empathy for whom?

I've heard it said that the most critical trait for a designer to have is empathy. I think I agree with that. According to the Google, empathy is defined as ...

"the ability to understand and share the feelings of another."

Why is empathy important for a product designer?

In almost all cases, we are designing an experience that a person uses. Hence, the common word "user" is always associate with what we do — user, usability, user experience, etc. Unlike artists, our work is judged not only by how it looks, but also how it works. Is it easy to use? Can a user quickly understand it? Do they enjoy the experience?

As important as this trait is, I often see it applied in a subtle, yet incorrect manner. Scenarios like this often start with one of the following phrases ...

"What I think would work is __________."

"If it were me, I'd like it to work like this _________."

"You know what I think is a good idea?"

I know I'm guilty of this from time to time. Seems like we miss the boat sometimes as we attempt to be empathetic.

As designers, we can't just do what we would want if we were the user. When we do that, we are still bringing along all of our own personal preferences, expertise and preconceived notions. In a way, that's showing a self-centered form of empathy.

What I love about that definition above is the word "share". Its not enough to just understand, but we have to experience it ourselves for it to be true empathy. We have to take it a step further by putting ourselves in their shoes and really feel their pain points and look at the problem from their point of view, not our own.

How do we show empathy?

1. Listen.
2. Observe.
3. Listen some more.
4. Then ask questions.

So the next time we're solving a problem for a user, let's try to remember to apply true empathy.

Rethinking The Fold

Recently I assembled some thoughts regarding The Fold and what we (anyone involved in publishing websites) should do about it. Enjoy!

Tweaking the Google Notifier

I’m a huge fan of Google’s GMail. If you’re looking for a new mail client, you should definitely give it a go; it’s a pleasure to use. If you’re a GMail user, you’ve probably also downloaded the Google Notifier – a tiny application that displays mail alerts in your menu bar. This is where I have a bit of a problem with the Notifier. Actually, this is more of a personal problem than an issue with the application itself. But with a little tweaking, the Google Notifier could really help me out.

The Scenario

For those of you not aware, the Google Notifier usually shows up in your menu bar as a specialized mail icon.

When you receive an email, the icon changes color and also shows a number next to it representing the number of new email messages waiting to be read.

You can click on the icon in the menu bar to see a message preview or go to your inbox, among other actions.

Or, if you’re in the middle of something, you can ignore the alert and read your emails later. My problem is that when I see that little red icon up in my menu bar, I cannot concentrate. Something deep inside is calling me to action. I can’t just ignore it. It's not so much that I want to read the email. The problem is that I don’t want to see that little red icon. I want it to be grey. The little red icon gives me the feeling that I have to check on something, that there’s some rogue task that needs to be tended to. So what I usually do is click on “Go to Inbox” and either read the email or just mark it as read and read it later.

But that is just a workaround - an annoying and time-consuming workaround that distracts me from my work, albeit only for a minute. I don’t really want to mark the email as read, because next time I visit my inbox, it would be nice for unread messages to stand out somehow.

The Fix

Instead of marking the email as read, what I actually want to do is clear the notification. I just want that little red icon to turn grey again so I can go about my work.

It seems to me that Google could make a very small tweak to the interface that would save me much time and grief. Why not add an option to “Clear Notification”, which would turn the icon back to grey?

Adding that one little option would make my life so much easier. It’s the small things in life that make the biggest difference, right?

The Conclusion

I agree that perhaps I let the little red icon bother me too much. But, it would be much easier for Google to tweak their app than it would be for me to change my OCD tendencies.

C’mon, Google, can ya help a guy out?

Good to Great, Part 2

I once worked with a marketing professional that dabbled in SEO and Usability. She would often say, "We need to talk to our users like they're 3rd graders." She was fond of talking down to users and then adding clarification text in parenthesis. And nothing could ever be left to user intuition, everything had to be labeled - with bright colors like green and red, not subtle, "grey-ed out" labels. Here's an example of what I'm talking about.

What is your billing address?
(Where do you receive your credit card bill each month?)

This always bothered me and just felt wrong. I mean, is there something too vague about "billing address"? What's not to understand? The notion behind it all was one of trying to make it more user-friendly, with helpful verbiage and a friendly tone, but to me, it misses the mark. Instead of getting a better user experience, it seemed like all that resulted in were pages cluttered with instructional chatter. When you have several "instructional messages" on one page, its starts to get out of hand. That leads us to Part 2 of this series.

Good to Great, Part 2: Good designers add more detail to clarify; Great designers take away detail to make things more clear.

Perhaps you're familiar with the popular quote by Antoine de Saint-Exupéry:

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away."

We designers need to know when to get out of the way of our users and design the interface so they can "just use it" without thinking too long about it or without having to read something along ever step of the way.

This is not only true with the visual aspects of an interface, but in the content as well. In the highly acclaimed book, Don't Make Me Think, Steve Krug suggests:

"Get rid of half the words on each page, then get rid of half of what's left."

My philosophy is that if you find yourself having to footnote everything or add help verbiage for every action item, then you probably need to step back and re-evaluate what you're trying to say. Think about how you can use design elements, intelligent metaphors or other visuals to lead a user to a specific task instead of saying "look here" or "click on this button".

Ask yourself these questions the next time you are faced with creating a user experience or trying to improve an existing one:

• Is most of my content about explaining "how" rather than "why"?
• Have I needlessly broken any conventions that would force the user to think twice about how to interact with a particular element?
• Are there places where I can use visual elements or metaphors instead of verbiage?
• What exactly does the user need to do on this page and how can I make it ridiculously easy for them to do it?

Difficult questions to answer, no doubt. But when we're conscious of these things, it forces us to design intuitive user experiences, rather than merely explaining how to use an interface.

What is Good Design?

Someone asked me the other day what the difference was between my work (or someone like me) and a high school student that is dabbling in web design. Questions like this frustrate me at first, but upon further thought I welcome them as an opportunity to educate people about what I do. As I thought about the answer, the first thing I thought of was "the ability to avoid cheesy design". I admit, that sounds trite, but the more I thought about it and the more I thought about good design, I started to realize it may be true, at least in some respects. I think the real answer to my friend's question is: the knowledge of the principles of good design and the ability to execute those principles.

I believe design on the Web is all about communicating a message. Since the Web is (mostly) a text-based medium, the ability to read the message is critical. Therefore, it follows that good design is about readability. Do you agree with that? It does seem a bit simplistic that it could be reduced down to one such component. Perhaps, but when you think about all the different factors that influence readability, you begin to see how it is the common thread woven throughout the tapestry of modern design on the Web.

So what are these factors that influence readability? Well, there's probably quite a few and they can probably be named, organized and described in a hundred different ways. I was able come up with 5 factors that I think greatly influence the readability of online text: Color, Typography, Whitespace, Imagery and Accessibility. I'll briefly describe each one of these and talk about how they contribute to readability and, ultimately, good design.

Color

The color of text and the relationship of text color to the background color greatly effect readability. If the contrast between foreground and background is too low, readability plummets. Too much color can adversely effect readability as well. The human eye is attracted to color, so it must be used judiciously so as not to draw attention away from the intended message.

Typography

Good use of typography is paramount to good design. And achieving a high degree of readability involves much more than selecting a pretty typeface. On the web, your menu of typefaces is somewhat limited to the handful of ubiquitous typefaces available on almost all operating systems - sans-serif selections such as Arial, Helvetica, Lucida, Tahoma, Trebuchet and Verdana and serif options of Georgia and Times New Roman. I tend to believe its not so much the typeface, but you do with it that matters. The number of typefaces and font styles (italic, all-caps, etc.) used in a single design a contribute to readability. As in so many cases, less is more and a simple approach probably works best in most situations.

Line height and line length are an oft-neglected aspects of typography that can make or break a design, regardless of the typeface. Line height is the amount of space between lines of text, while line length is how wide a single line of text stretches across the screen. Richard Rutter has an excellent article on Vertical Rhythm that explains how to achieve optimal readability with line height.

Whitespace

Yes, whitespace - or more accurately, negative space - our long lost friend that keeps a design clean-looking and clutter-free. Too much whitespace can make a page look awkward; not enough of it will make your design look cramped, where all the text on the page is vying for attention and nothing stands out. Finding the right amount of whitespace is not difficult and gives design a polished, professional look, while allowing a user to comfortably read the intended message.

Imagery

Like color, images have an attractive pull on the human eye. Given a page full of text with one image on the page and our eye will immediately be drawn to the image first. A good designer can use that physiological bit of information to his or her advantage by the strategic use of imagery in web design. Subtle imagery is great at providing a framework for holding chunks of text. Imagery used within blocks of text can also help draw the eye to an important piece of information. Discretion using images is laudable, since too much visual stimulation can adversely effect readability.

Accessibility

Understanding accessibility involves a certain knowledge of code and how that code is read by other devices other than a Web browser. A good designer understands this and takes steps to ensure the code is written in such a way as to maintain readability in alternate devices, such as PDAs, mobile phones and screen readers. Limiting your message to only those using a modern Web browsers is short-sighted in this world of fast changing trends and technology. While the first 4 principles were about readability of the words the user sees, accessibility is as much about readability by machines or devices. If code is written according to WCAG guidelines to help devices, like a screen reader or mobile phone, read the code then its pretty likely that a search engine algorithm will be able to accurately read the code, leading to increased "findability" in the search engines.

Putting It All Together

So there you have it, 5 principles of good design guaranteed to enhance the readability of a Web page. Remember, readability is a fundamental aspect of how well users interact with content on a Web page. Providing a situation where reading the content on a Web page is completely natural and comfortable will go a long way toward not making the reader think about what to read and how to read it and whether or not they should read it at all.

Next time you look at a Web site think about how readable the text is and how color, typography, whitespace, imagery and accessibility are all working together to make that happen. That's good design.