The Webmasters’ Desk

Web Design From Scratch offers a great high level view of designing a site. Here’s the skinny:

1. Know what you’re doing
2. Know what the site needs to do
3. Know what the site’s visitors want
4. Get a good picture of the personality and style of the web site
5. Sketch out highly successful scenarios
6. Organise views into a site map
7. Sketch the essential features & look
8. Map your visitors’ attention
9. Arrange the visual elements to work together

I encourage everyone to re-read this article before every project (myself included).

It’s no secret that I’m a big fan of 37signals‘ approach to application and Web design. There’s something about their approach that is exceptionally clear and easy to use.

Not too long ago, I found a blog post on their site that reveals the secret: patterns.

I encourage you to give the article a read and refer to it the next time you need to bring clarity to a collection of seemingly disparate information.

Jakob Nielsen analyzes four sites for usability in his April 14 column Four Bad Designs.

“Bad content, bad links, bad navigation, bad category pages… which is worst for business? In these examples, bad content takes the prize for costing the company the most money.”

Ouch.

Let me know what you think. Nielsen is a polarizing figure for Web designers, so I hope we can have some good discussion.

I get a lot of questions about how to make email newsletters visually appealing. While I understand the desire for adding some sizzle to your communications, This entry from design standards champion, Jeffrey Zeldman, outlines the pitfalls that await the HTML emailer.

The article, When is e-mail like a bad website?, deconstructs an HTML email sent from a major cell phone manufacturer, presumably with plenty of resources to perform usability testing (Be sure to look at the screenshots to see how mangled the messge gets). (more…)

Take a look at the following collection of New York City subway maps.

The maps on the left are very precise. They are geographically pure. This would be great if they were intended for geographers or anyone else who needs a precise map.

However, these are graphics to inform people who ride the subway. They could care less about the surrounding landscape. They just need to find the right transfer, to get in the right tube. The information and clarity of the subway lines themselves is what’s most important.

The maps on the right are redesigned with the user in mind. They clarify the relationship of the subway lines to one another. Geographical purity is sacrificed, but the result (in theory) is a happier and more civil subway commuter.

Who is your audience? Do they need every tiny detail? What can you remove to provide more clarity to the message.

Remember, design and communication is the practice of subtraction.

Eyetracking points the way to effective news article design is a fascinating article. The first two case studies in the article offer strong scientific evidence that a picture is not always worth a thousand words. The third case study has some disturbing insight into the male psyche.

People read faster and retain more if copy is formatted in a manner that is easily scanned, easy to read from top to bottom. That means subheads, bullets and good use of whitespace. This approach allows readers to answer the questions “where am I?”, “what am I reading?” and “do I want to be here?”

The bottom line is that good, clean text formatting is far more important than a random pretty picture. So be sure to ask yourself if the images you’re using are vital to the page you’re publishing.

Remember: good design is the practice of subtraction, not addition.

That’s it. That’s how fast your page needs to load before someone gives up and moves on.

(more…)

In What users hate most about Web sites , Sandra Rossi outlines some all-too common Web usability mistakes. To sum them up:

1. Invasive advertising: luckily, we don’t need to worry about this. However, making anything on your site invasive is a bad idea.
2. Re-inventing the wheel: people do not want to have to learn how to use a site before they can browse it. Fancy experimental navigation is for your own personal playground site, not for a corporate site.
3. ‘Leap of faith’ links: that means disclosing information on content and file size. There’s nothing I personally hate more than clicking a link that launches a pdf when I was expecting a web page. The Acrobat plugin takes forever. Always tell people if they’re not going to get a web page
4. Attention-deficit Web sites: “Users have a special hatred of flashing icons and banners, because they draw the eye away from what is important and hinder their progress,” Cunnington said. Blinking, flashing, buzzing and scrolling text is annoying.
5. War and Peace length: “A common mistake in Web design is to just [convert] a brochure to the Web. But the Web is its own medium, and communication has to change to reach users. Users are known to read 25 percent slower on the screen than on paper, read fewer words and don’t like long pages which require scrolling down,” she said. ‘Nuff said

So there you have it. The top 5 of “Web No-Nos,” print them out and glue them next to your monitor or tatoo them on your forearm if you’re really hard-core.

In Netflix - Keeps It Reel, BusinessWeek online takes a look at the usability of the Netflix site as compared to Blockbuster (the company Netflix socked in the mouth). Both site designs (Netflix, Blockbuster) have similar designs at first glance. But after a longer look, you can begin to see the points that BusinessWeek is making.

(more…)

Jakob Nielsen has posted results of a recent study that uses eye-tracking technology to understand how people scan web pages. Some quick take-aways from this study are:

• Users won’t read your text thoroughly
• The first two paragraphs must state the most important information.
• Start subheads, paragraphs, and bullet points with information-carrying words

Not is this good advice for readers, it’s also good advice for getting the attention of search engine spiders!