Goal Oriented Design

Here's some recommended reading...Ben Hunt makes the case for something called "Goal Oriented Design." It's a clever twist on the famous Jesse James Garrett model that highlights the importance of understanding the difference between user needs and site objectives.

Users, publishers, and advertisers all have goals. Focusing on and balancing the goals of each group is a vital component of effective web design.

Death of the webmaster

Many of our grandfathers built their own houses. And from the foundation to the roof, they knew everything about them. They knew which fuse to pull and replace, how to adjust that squeaky door and how to troubleshoot the plumbing problem.

Today, I have a nice house. I know how to change the furnace filter. But plumbing is not my strong suit and I'm still not sure how to work the gas fireplace. I manage by relying on experts - plumbers, electricians, cable repair guys - when I need to.

Websites have evolved in a similar fashion. There was a time, not that long ago really, when organizations would appoint a single person to "run the website." They were called a webmaster or a webmistress. They were generalists who were expected to be a jack of all trades, having skills ranging from coding and design to copywriting and marketing. It was the era of FrontPage, hit counters, and static web content.

But today's sophisticated websites demand more attention and expertise than one person can manage. Today a team of individuals, representing different business units and different organizational priorities, are often responsible for the website. And just like my call to the electrician or plumber, some functions such as site hosting, application development, or search engine optimization are outsourced to companies outside the organization who have more expertise or capabilities in those fields.

Yes, even for most small organizations, the days of one-person web shop are over. But, despite the title of this post, the webmasters didn't die off like the dinosaurs. They are still around although their titles and responsibilities may have changed. Today they are probably the Director of Web Operations or the Vice President of Digital Media. Just like my Grandfather, they probably catch themselves speaking of "how we did things in the olden days of the previous century" once in a while.

Click free

Here's an interesting experiment with a user interface that requires no clicking. I like it but there's something empowering and definitive about the mouse click that I miss. Give it a try for yourself here.

Logo-palooza

I love well-designed logos. Some of my favorites are not only clean and clear but also clever. There's an "Aha!" moment hidden in the design. Like a Gestalt effect, your mind fills in a gap or makes a connection and suddenly 1 + 1 = 3.

Here are a few of my favorites:

	NBC's famous peacock. Love the white space and the use of color.
	The Amazon logo says two things: We have everything from "A to Z" and the smiley face portrays shopping as fun.
	The Big Ten conference is actually 11 teams now. Notice how they worked in an 11 in the negative space.
	I've always liked this vintage logo from the Milwaukee Brewers. The glove is made from the letters M and B.
	The rail transport company CSX recently added the brackets and dots which paint the familiar picture of CSX rail cars.
	A beautifully designed logo for New York's effort to land the 2012 Olympic Games.
	Nice use of lettering by the Arizona Diamondbacks to form a snake's head.
	Another clever use of white space by F1 Racing.
	This may be the most famous use of white space in a company logo. Once you see the arrow, you'll always see it.
	Notice how the U's and N's in the word Sun are used to create the S.

Extreme Makeover - Homepage Edition

So I'm watching one of the many home design shows last night and it dawned on me how similar in some ways designing a home is to web design. Now while I don't think we'll see TV shows called "Extreme Makeover - Homepage Edition" or "Trading Webspaces" anytime soon, let me explain.

In order to be a successful design, a home needs to not only be beautiful but liveable and functional. Just like a website, there are areas of a home that are "task-related" - the kitchen, the bathroom, the closet. The design of those areas should help the "user" accomplish the necessary tasks. The kitchen and bathroom should be organized and ergonomic, the closet should be free of clutter so items are easy to find.

Other areas of a well-designed home are for entertainment or socializing with others. These areas should be designed to foster this interaction in a comfortable, friendly setting.

Lastly, the whole house should be tied together with a color scheme and design that reflects the owners. It should be an extension of "who they are."

See any similarities now? The task related areas (registration, e-commerce, etc) of your website should be simple and user-friendly. The search function should help users find content without having to wade through clutter. The social areas of your site (message boards, blogs) should be welcoming, supportive, and comfortable to your users. And the visual design of your site should be a consistent reflection of your brand.

But there's one place this analogy breaks down. You primarily build and design your home for you. You live in it. You have to feel comfortable in how it's organized, decorated, and maintained. But with a website, you're inviting all of your friends, customers and potential customers into your home. It's more important that your website is designed for them.

MSNBC redesigns

Interesting insight here and here into the creative process involved in the huge (and much-needed) MSNBC.com redesign that launched last weekend. Having been involved in a few large redesigns, I can only imagine the immense amount of time and effort that went into this.

The new site nicely integrates news with photos and videos, allows for some customization of the site by the user and provides a cleaner yet more comprehensive look at the news. It's interesting to note, however, that they chose not to include other popular avenues for user participation (story ranking/social networking/comments, etc). Paraphrasing the design team, they were able to redesign without needing to reinvent themselves as a "social news site" like Digg or Newsvine.

I'm still absorbing it, but at first blush the new site is a vast improvement over the old MSNBC site and a better effort than the recent redesigns from other news sites.

The cobblers' kids DO have shoes

The old expression "The cobbler's kids have no shoes" holds true for many businesses and their websites. Often marketing agencies are terrible at marketing themselves. Great shops have websites where you can't shop. Information technology companies are often lacking information and using old technology.

But here are a few examples of web design companies whose sites serve as an endorsement of the quality of their work. Their kids are walking around in some spiffy shoes.

Digital Kick - be sure to click around and explore.

AgencyNet - very creative design. Navigating can be a little confusing.

Avenue A / Razorfish - very clean and clear.

352 Media - integrates video onto their homepage. Also see MindComet.

New City Media - attractive design which highlights their portfolio.

Red Clay - beautiful imagery.

Ironworks - a shameless plug for my employer.

10 rules for a great website

Seth Godin has put together a nice list of principles to consider when creating a new (or maintaining an existing) website.

While I understand the point, it's often impossible to "fire the committee" in the real world. The key is to gather requirements and ideas from the stakeholders but keep the key decisions in the hands of a select few. But if the committee is truly "fired" and feels like they are not being included in the process, the project will fail.

An alternative to Lorem Ipsum

Often when designers are mocking up a website or a print piece they will insert "placeholder text." The idea is to show the reviewer what the site or piece will look like, without worrying about the content.

Designers often use what's called Lorem Ipsum text which looks like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

The idea is to simulate real text - sentences, a realistic combination of short and long words, etc. You can get your own Lorem Ipsum text using the Lorem Ipsum Generator.

But if you want to use something clever and different, try this text I found at css-tricks.com. It uses every modern-business buzz-word and cliche in the book. Feel free to cut and paste it into your next design project.


Completely revolutionize high-quality niches after mission-critical expertise. Professionally deploy standardized total linkage before interoperable architectures. Quickly formulate future-proof meta-services through cross functional portals. Holisticly procrastinate timely results vis-a-vis principle-centered human capital. Distinctively incubate emerging systems and collaborative best practices. Compellingly exploit next-generation technology via web-enabled results.

Professionally disintermediate 24/365 web services via intermandated technologies. Holisticly disseminate flexible web services through professional results. Enthusiastically empower integrated channels and standards compliant channels. Proactively brand end-to-end process improvements rather than resource sucking results. Phosfluorescently envisioneer excellent growth strategies rather than equity invested outsourcing. Assertively build progressive data whereas process-centric processes. Dramatically visualize highly efficient sources via accurate applications. Efficiently engineer orthogonal infomediaries for cross functional ROI. Conveniently restore alternative functionalities after intermandated systems.

Credibly aggregate dynamic synergy and one-to-one testing procedures. Credibly synergize out-of-the-box growth strategies via timely mindshare. Synergistically embrace extensive schemas and multidisciplinary processes. Monotonectally synergize 2.0 sources before resource-leveling sources. Professionally grow value-added results before client-based internal or "organic" sources. Uniquely network alternative processes for interoperable solutions.

Quickly fabricate out-of-the-box relationships via top-line e-services. Uniquely restore market positioning synergy rather than long-term high-impact manufactured products. Monotonectally plagiarize high-payoff interfaces rather than business internal or "organic" sources. Credibly synergize plug-and-play interfaces rather than intuitive results. Compellingly expedite fully tested outsourcing vis-a-vis impactful synergy. Energistically build strategic value and excellent portals. Holisticly deliver revolutionary users before extensive value. Uniquely leverage other's low-risk high-yield e-services before multidisciplinary action items. Dynamically formulate proactive metrics via just in time e-business.

404: Creativity found

We've all experienced it. The dreaded "Page Not Found" error message on a website. Often it means the address we have is incorrect or the content has been moved or removed. This is often referred to as a "404 error" indicating that the browser was able to communicate with the server but could not find what was requested.

Most of the time, the error message we receive is a standard one like this. Effective, but boring.

Well Smashing Magazine has put together a great collection of some of the most clever Page Not Found pages.

Some of my favorites are here, here, here and here.

Snap judgments

Users make up their minds whether a website is credible in less than one second.

You never get a second second to make a first impression.

Is the fold pure fluff?

There's a widely held belief in web design that web users don't like to scroll. The theory is that the area on your website "above the fold" - or visible without scrolling - is much more important and valuable real estate than the area below that users must scroll to see.

The great site Boxes and Arrows examines this belief and finds some surprising evidence to support the idea that the fold may not be as important as we think.

Stock up on stock photos

The right photo can be worth a thousand words. And what could be better than getting something so valuable for free?

DazzlinDonna has put together a nice list of free photo resources. Free is good.

The news is new

I had grand plans to write a piece on CNN.com's recent re-launch. I would write about how, like USAToday before it, CNN's new design incorporates many "Web 2.0" features like user-contributed content, AJAX interfaces, more video, and lots more white space.

I would then talk about how major newspaper sites like The Washington Post are embracing the online medium and incorporating more blogs and other "web-only" content that never even appears in their print versions.

It would have been a nice little article. But Read/Write Web beat me to it.

Self service

I remember being a kid and my Mom driving into "service stations." Our car would roll over a wire that rang a bell (ding ding!). The bell alerted a station attendant that a customer was here. The attendant would come out, walk over to the driver's window and ask "How can I help you?" While the gas flowed into the gas tank they would often check our oil or clean our windshield. This was called "full service."

Sometime in the 1980's we transitioned to stations that offered both full service pumps and self-service pumps. Now we pull in, pay at the pump, get a car wash and never need to talk to a human. (Sorry New Jersey and Oregon.)

Then the self-service concept went to banking: ATMs and debit cards, online billpay and account access. Here too, we can have a lengthy financial relationship with a company and never talk to a person.

Now the self-service, or DIY craze is everywhere. I can pay at the grocery using "Self Checkout." I can self-publish, self-insure, self-medicate, self-represent and self-help . I can navigate using GPS instead of asking for directions and order pizza online instead of calling.

The funny thing is, we don't mind doing things for ourselves that used to involve others. In some cases we prefer it. Yes, the self-checkout concept saves the retailer money. But it also saves me time waiting in a line. Yes, having someone pump my gas would be nice but not if the gas costs a lot more.

The web has accelerated this self-service trend even more. I can do research without going to the library. I can ship and track packages without going to the post office. My wife can (unfortunately) buy shoes without trying them on. More and more, customers are expecting to be able to conduct business of every kind on the Internet:

• Meet a date.
• Order flowers.
  
• Make a dinner reservation.
  
• Get directions.
  
• Pay the parking ticket.
  
• Change a phone number.
  
• File a restraining order.
  

OK, kidding. But your site does need to offer users the ability to "serve themselves" in every way possible. Can they currently pay their bill or renew a membership? Can they download brochures and applications? Or better yet, complete them online?

Make it easy for your customers to "self-serve" or they may become someone else's customers.

Jalopy.com?

There's a classic marketing exercise where you are asked "if our company were a car, what kind of car would it be?" Is your company fast and exciting like a Porsche? Or conservative and safe like a Volvo? Is your company a Mercedes (luxurious and high-class) or a Mini Cooper (fun and friendly)?

There's no right or wrong answer. But it's a helpful exercise to gauge the "personality" of your company. Your corporate personality is your brand. And that personality should be reflected on your website. Not just with a logo or a tagline, but with the entire web experience.

The Porsche site should be fast and sporty. The Volvo site should stress luxury and safety. The Mercedes site should be well designed and connote quality. The Mini Cooper site should be fun.

If your website doesn't reflect the brand values and personality of your organization, it may be time for a tune-up.

Discovery: The next big thing

Ten years ago few would have predicted the 800 pound gorilla that search has become. Back then, we had Hotbot and Lycos, Webcrawler and Infoseek, Yahoo and Google. None with a clear idea of how to make any money. And most websites back then didn't have (or need) a robust site-search solution. We "surfed" the Web, skimming along the surface. And we were happy.

But much has changed in ten years. Today, Google makes billions serving up ads based on search keywords. Yahoo claims to be "the world's most visited homepage." And enterprise search is now a huge trend as large organizations struggle to organize and access their vast collections of digital information.

Search is and will continue to be very important. But a new trend is also emerging: Discovery.

I think of it this way:

• Search helps you find things you are looking for
• Discovery helps you find things you are interested in, but that you didn't even know existed
  

The leader in this area is a site called StumbleUpon. It's basically an application that recommends interesting sites for you based on your interests and the votes of other, similar StumbleUpon users. Today StumbleUpon released StumbleThru, which will surface the best content on popular Websites - "the best music artists on MySpace, the best photos on Flickr, the most relevant articles on Wikipedia. It's kind of a way to discover interesting information without actually having to search for it."

Google likes this idea so much they have created a similar "recommendation engine" called Google Dice.

Sites like Digg and Reddit offer discovery through their communities. They "crowdsource" the discovery of what's new and interesting. Newsvine and NowPublic do the same for news.

As the Internet continues to grow in size, complexity and importance, the act of discovery will likely play an integral role in how we make sense of it all.

Conventional usability

There are times to be innovative, creative and clever.

Most of the time though, when it comes to usability of your site, you want to be more conventional than "inventional." You want the customer to be comfortable performing a transaction on your site. If she clicks the "submit" button, you want what she expects to happen and what will happen to be exactly the same thing. This is the essence of good usability. Be one step ahead of the customer at every turn and provide the options they need and the site behavior they expect.

Does design matter?

There was a fascinating article in the Washington Post today about a social experiment: take one of the best violinists in the world and have him play out of context - in this case, as a street performer in a DC Metro stop. What would happen? Would beauty transcend? How would commuters react? And what is beauty? Is it a fact or merely an opinion? Or is it a little of each, tempered by context?

Read the article to find out the amazing results, but it made me think about websites and web design. (Hey, I'm a geek.)

Ultimately, does it matter how "pretty" your site is? Do the photos, colors, and fonts make any difference? Web designers show off their technical and artistic prowess at sites like the CSS Zen Garden and StyleGala. Meanwile "uglies" like Craigslist, Ebay and MySpace are wildly successful despite their homely appearance.

I think it's important to realize that web design is not just about the look and feel. It's about information architecture and interaction design. It's about form following function. More than anything, it's about the user experience.

Make the user experience rewarding and it won't matter that your colors clash.

Update: Read Seth's take.

Conveying trust

Have you ever noticed that David Letterman's chair is just a little bit higher than his guest's? Or wondered why the pharmacist at the drug store is one step above you behind the counter? Or pondered the reasoning for the "Good Housekeeping Seal of Approval?" As Billy Joel would say, it's a matter of trust.

Take a look at this banner of the Washington Post newspaper:



How would your impression of the paper be different if it looked like this?



The fact is, most newspapers use a similar, powerful, gothic font for their mastheads. Not only do these fonts connote trust and strength but also a "heritage of reliability." Interestingly, when the Washington Post created its website, they chose to go away from the traditional, authoritative print logo and create a new brand that is more modern and relaxed for the new medium.



Your organization's websites and e-newsletters reflect credibility (or the lack thereof) too. When we work with clients on a redesign project, one of the questions we ask early on is "How credible or authoritative should the site appear?" Should it look rigid and austere or relaxed and informal? Most organizations fall somewhere in between, but vary in where they want to be on the "continuum of trust."

Design for the poor

Found this interesting article that proposes that most of the Internet users are either Time Rich (wasting time) or Time Poor (trying to accomplish something quickly).

In most businesses, you want to assume your customer is "Time Poor." Design your website to save them time, make things easy to find, and make tasks easy to accomplish.