In This Issue...

• Introduction
• How Many Clicks?
• Spanky Corners 1.0
• Design Spotlight
• What's New on SitePoint!
• Hot Forum Topics
• New Blog Entries

Featured Release: Ektron CMS400.NET v6.0

Just Released Version 6.0! Want to post a blog to your Web site? Add message boards & forums? Track visitors and manage your entire membership base? Do you also want to manage content and documents?

Ektron CMS400.NET lets you do everything you want to do on the Web but still do everything you need to do on the Web. Use Ektron CMS400.NET to:

• Manage content & documents on the Web
• Track Web site visitors with site analytics and Web traffic reports.
• Interact with polls, surveys, & HTML forms
• Notify visitors with subscriptions & Web alerts
• Build online communities with blogs, forums, & memberships

Want more? Click here and download a FREE TRIAL now

Introduction

Welcome to Design View #21.

We're twenty one today!

It seems like a lot longer, but it's now been a month since we released the beta version of Spanky Corners - our rounded corners generating tool based on a tutorial published in the April edition of the Design View.

In the intervening time we've been polishing the code that Spanky delivers and making it easier to use too. The code it writes isn't unbreakable, but we're pretty happy with it. Check it out when you have a chance.

We're also going to take a look at the Web's most durable usability standard -- the '3-Click Rule'.

Enjoy.

Alex Walker
Editor
SitePoint Design View

How Many Clicks?

Rules are useful. They not only tell us what's ok and what's not, but they can actually teach us how stuff works.

The whole idea of a rule is that it's rigid and isn't supposed to allow for a lot of adaptability - even when it comes to the vagaries of the Web - right?

The '3-Click Rule' is one of the Web's first and most enduring usability maxims. It states that it should take no more than 3 clicks to access any feature, content or destination within a given site.

Originally laid down in Jeffrey Zeldman's 'Taking Your Talent to the Web: Making the Transition from Graphic Design to Web Design' (2001), it has provided a tangible and sensible yardstick for the many print design converts encountering items like clicks, links, sitemaps and navigation for the first time.

Clients have loved it because it sounds very wise... 'surely 1 click wouldn't be enough, and 5 clicks sounds downright sloppy'.

There have been challenges made, (the '1-Click Rule') but the 3-Click Rule seems to have struck such a resonant chord that we're constantly surprised by how many seemingly non web-savvy clients bring it up at the first mention of usablility. Three cheers for 3 clicks!

So where does that leave us in 2006?

I believe that although it has served a useful purpose, we can now take a more sophisticated approach.

Back in January, Nature Magazine published a study showing that the average Web surfer assesses the worthiness of a page in just 50 milliseconds.

Although navigation choices are a slightly different kind of decision, this study does give you a feel for how little brainpower the average user wants to expend on a page. They're not stupid, but they typically just scatter-scan a page and click on the easiest option that appears plausible.

To my mind, the 3-Click Rule is like getting home with a bag of shopping and only having 3 tupperware containers.

It's possible that your three containers will be just what you need, but more likely they're not.

So what do you do? You start squashing the peanuts in with the corn chips and the dried apricots in with the rice crackers. Nobody else will ever find the peanuts and the apricots will now taste weird, but hey it's your food right?!

In the same way, the 3-Click rule asks you to shoehorn things into prefabricated categories, regardless of whether they naturally exist or not. This is what often leaves people spending too much time looking for the peanuts.

Jump right in. Start creating content with Flash Professional 8

Tip: Since several designers work on a project, adopting standard guidelines helps everyone. When structuring FLA files, use layer folders to group and organize similar layers. This makes it easy to locate the layers that include code and labels.

Get more information on Flash Professional 8, including:

• Tutorials and articles: Get the latest information and tips on working in Flash
• Case studies: See how real customers create content using Flash Professional 8
• Online Seminars: Learn from top Flash experts

Click here for more best practice tips right now.

Spanky Corners 1.0

Last month I rushed out the 'alpha alpha version' of our new rounded corners method, just as the April Design View was being sent. It had a few rough edges initially. If you checked it out then and found a few bugs, I'm pleased to report it has developed nicely in the interim.

It should now work effectively in the following:

• Firefox 1+
• IE6-7
• Safari 1+
• Opera 8+

We've developed the code behind it to allow better text resizing across browsers and made it easier to download your code and images in a ZIP file.

There aren't too many limitations.

We're now using 'first-letter' to do the top-left corner in IE, rather than 'list-image'. This gives us the freedom to resize text in IE without breaking the layout, but it will make the headers look slightly tighter in IE6.

Unfortunately IE won't allow the background in any 'first-letter' element to extend beyond the textbox of the text it is attached to. A default of 0.2em seems to be the largest space available. If you find a way around that, let me know.

If you had your heart set on identical presentation across all browsers, there may be a solution:

Stick with using the 'list-image' in IE6, and edit the conditional comments to set the header font size in pixels rather than EMs. This will prevent the layout from breaking when it's resized, but will of course also lock the headers to a finite text size. If the header text was already quite large, you might consider that an acceptable sacrifice. Your call.

Either way, give it a try and let me know if you find it useful.

Read the blog entry:

DHTML/CSS Blog: Stylish Scripting by Alex Walker Spanky Corners 1.0 : Rounded Corners + Clean HTML + No JavaScript (37 comments)

Krug's Mindless Decision: Any time you give a user a no-brainer decision, without large amounts of stuff they don't want or need, you're making their job easier.

Let's consider a real-world scenario:

An online clothing retailer like Brooks Brothers, Tommy or Dolce & Gabbana will typically have between 1000 and 5000 items (including size and color variations) available for online purchase.

If, for example, Tommy.com offers 4000 individually purchasable items, chances are 95% of those items will be an undesirable size, gender, color and/or style for a given user. This no-interest content is obscuring the high-interest content. The trick then is to be able to hide this clutter away as quickly and painlessly as possible.

Perhaps the all-time greatest no-brainer you can ask in this setting is, 'are you looking for men's clothing or women's clothing?'

So here we go:

Click 1: 'Men's' or 'Women's' fashion - A gentle beginning.
Selection = 'Men's' (4000 available items become 2000 items).

Click 2: 'Summer' or 'Winter' collection - Only slightly more difficult, and still a 50/50 pick. The answer allows us to rule out a lot of strictly seasonal clothing such as jackets, scarfs and swimwear.
Selection = 'Summer' (2000 available items become 1000 items).

Click 3: Type selection - We're out of 50/50 questions now. This time we offer six choices; 'Pants', 'Shorts', 'Shirts/Tees', 'Underwear', 'Socks' and 'Swimwear'.
Selection = 'Shorts' (1000 available items become 180 items).

Click 4: Style/Cut selection - Three clicks into the process and we have eliminated 3820 items from our user's view. They should be fairly focussed now, so we might ask them to select from one of 10 styles.
Selection = 'Beach Madras Bermuda Short ' (180 available items become 18 items).

Click 5: Size selection - A choice of six sizes; 'small', 'medium', 'large', 'x-large', 'xx-large', 'xxx-large'.
Selection = 'Medium' (3 items remain).

Click 6: Color selection - Perhaps a choice of three; 'Tan', 'Khaki' or 'Cobalt'.
- Add to cart (1 item left).

With six mindless clicks, we have helped our user accomplish what is a fairly difficult task - isolating one item from 4000. It has taken us 6 steps, but none of those steps challenged the user to choose from any more than 10 items at once. Most asked much less.

Note that the actual Tommy Website follows a logic all of its own:

• Their top-level category mixes 'Men' and 'Women' with 'Fragrance' and 'Shoes'. Not sure who is wearing those shoes...
• Their subcategories group 'Pants & Shorts', but 'Jeans' are on their own.
• Shirts are split into 'Casual' and 'Dress', while 'Tees' live with 'Knits'.
• I don't know what to make of 'Sportscoats and Outerwear'. What ever happened to 'Jackets'... 'sweaters'... how strange!

But on the bright side, you can get to your 'Outerwear' in three clicks.

Design Spotlight

After researching last month's article on the Marketplace, I came to realize exactly how much excellent design work is being produced in there.

Because so little of the Marketplace work gets highlighted outside the forums, I've decided to show off some top-notch stuff in the Design View.

First cab off the rank is this ultra-modern template design by Finnish designer Markku Ylisirniö of John Tempera Designs. This is only one of three impressive designs he submitted to this contest.

Incidentally the design is for web development company Kaizen-Web, who obtained their slick new logo via the same process.

Nice work Markku!

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, The SitePoint Design View

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Design View!