Introduction

Welcome to Design View #63.

Last week was a book deadline week at SitePoint HQ -- which usually involves us fussing, fighting, and finessing our way to a new book cover design.

Over the years, I've found sourcing and agreeing on interesting yet meaningful imagery for technical books is roughly equal parts frustration and inspiration.

Last week we were finalizing our upcoming book, Fancy Form Design. You can see some pics of one of our improvized studio shoots for the cover on SitePoint's Facebook page, if you're interested.

Witness above our twin $17 halogen desk lamps and advanced backdrop securing system (or jug as it's called in the trade). No expense is spared here at SitePoint.

Anyway, on to the Design View! In this issue, we'll look at making the most (or not) of humanizing the user experience. We'll also look at how you can use some of the latest thinking in PNG compression to squeeze that last drop out of your PNG images.

Enjoy.

Alex Walker
Editor
SitePoint Design View

PS: As Matt detailed in his recent blog post, there were some regrettable problems with the last Design View. All I can add is my sincere apology to anyone affected.

Who Said Web Design Wasn't Sexy?

• Design amazing web interfaces from scratch.
• Master key web interface design principles.
• Create beautiful, yet functional, web sites.
• Unleash your own artistic talents.

Free Preview

Summary

• Introduction
• Do You Need Cake if the Icing is Amazing?
• Squishing the Last Drops from Your PNGs
• Latest Tutorials
• Hot Discussions
• New Blogs

Do You Need Cake if the Icing is Amazing?

A little over a year ago I reported on Andy Budd’s talk at Web Directions UX08 and his ideas on assessing and measuring the user experience.

He also talked about adding value to some of the empty, mundane but necessary web site processes (that is, load screens, error messages, user instructions) by injecting some fun, soul, and even humanity into them.

Examples we talked about included:

1. Picnik's loader screen, which is accompanied by progress commentary: “spreading out the blanket … picking blueberries … floating kites … making sandwiches … “
2. Innocent Smoothie's packaging, which includes the simple sentence "Stop looking at my bottom!" printed on the base of the box.

Both are copybook examples of better user experiences because they flatly refuse to follow the standard charmless convention and instead dare to inject a touch of warmth.

But what happens if “warm fuzzies” is ALL you deliver to the user? Is it still a win?

I’ve been thinking about exactly that question after a friend sent me a "Hey, you gotta see THIS!" link to the HEMA web site. For those unfamiliar with the brand name, HEMA is a large Dutch department store chain.

Check the site out for yourself if you like (assuming you've yet to come across it before -- it's been online for at least 18 months).

Otherwise, here's the executive summary: the site renders as what appears to be a garden-variety, IKEA-like online store: navigation tabs along the top and popular products displayed in a grid. Yawn. yawn.

That’s when reality seems to break, and strange and wonderful stuff start to happen.

It all begins when a plastic cup tumbles over, bumps the sticky tape, and a domino effect is set in motion. The tape then crashes onto the stapler before squishing the cake, noisily sliding down the xylophone, and knocking over the fluorescent pens like skittles.

This chain of slapstick events continues, drawing ironing boards, blenders, yo-yos, coat hangers, and kettles into the growing maelstrom before eventually breaking out into parts of the site navigation and text.

By the time this sequence of events has all played out, the tabs are torn and frayed, the navigation text has collapsed into a puddle, and confetti flutters about from above. Very, very cute.

Now, let me say straight up, this is a wonderful idea beautifully executed. It breaks boundaries, delights, shakes you out of your surfing stupor, and triumphantly shouts "HEY YOU! Y'know what? We are different!"

Brilliant.

The only problem is, that's where the relationship stops for most users. This is no easter egg or practical joke overlaying a standard online store. Though HEMA has a rather extensive web site, there's no obvious link between it and this popular online practical joke. The logo is unclickable. The site navigation and text links look fine, but are in fact broken links.

Whatever warm and fuzzy feelings you might be left with after the show, outside of forwarding to a friend, there are few ways to show your love.

Andy Budd talked about plotting the user experience as a graph along a time line. We might assume that users begins their HEMA site experience in a relatively neutral emotional state. As the experience continues they’re perhaps first surprised, then delighted and entertained.

But, what if you wanted to:

• tell HEMA how awesome their site is?
• visit HEMA’s About page to find out what sort of firebrand, thinking-outside-the-box company would do such a crazy thing?
• locate the nearest store to purchase one of their charming and zany products?
• investigate the opportunities for employment at what appears to be a fun company?

Well, you’d probably be out of luck. Short of editing the address bar, when the gag finishes, the show is over.

And the greatest irony? The HEMA joke web site has been so wildy popular with bloggers and on social networks that it outranks the genuine HEMA site in almost any general web search. As far as Google is concerned, HEMA is a purveyor of fine jokes.

Now, no doubt web dev types like us have been sharing this link and "oohing and ahhing" forever. In truth, most of us would love to be offered this kind of fun work.

But as sublimely clever as the animation is, I have to wonder if this project, and the buzz it created, has translated into anything particularly useful for the HEMA business.

What’s more, I wonder how many users have ended up feeling disappointed, frustrated, or confused by being unable to find some of the "bread and butter" basics like locating a store, giving feedback, or asking a question. They may feel like they're at the right place, but no-one wants to talk to them.

What do you think? Is this marketing brilliance or a wasted opportunity?

The Principles of Beautiful Web Design: Back in Stock!

Tired of making web sites that work absolutely perfectly but just don't, well, look very nice? This new full-color book will show you design the right way.

• Create amazing designs from scratch
• Understand why some designs "just work"
• Master the design fundamentals:
  layout, color, texture, typography and imagery
• Uncover the trade secrets the great designers keep to themselves

Bonus: Get a Photoshop RGB color & font quick reference card.

Order your copy now or download a FREE sample.

Squishing the Last Drops from Your PNGs

One of the areas I've always felt Fireworks had Photoshop covered was in its PNG export facility. As well as being more flexible and advanced, it almost always produces smaller files.

But can you do even better? Perhaps now you can.

Back in July, Sergey Chikuyonok wrote a very interesting article in Smashing Magazine on optimizing your PNGs. Basically, Sergey has spent some time understanding exactly how PNG's compression magic works and then figured out techniques you can use with Photoshop to make your images more PNG-friendly.

Clever stuff and well worth a read. But what about if you just want the instant PNG gratification without the hefty mathematics primer?

No problem. Happily the smart folk at GracePoint After Five have constructed a free online PNG compression tool called PunyPNG that seamlessly incorporates some of Sergey's finest PNG voodoo.

I have to say I was skeptical that my lovely Fireworks-forged PNGs would have any worthwhile fat to trim, but I've been able to slim down most files by around 15% -- even more for 8-bit PNGs with lots of transparency.

In some random testing I was able to reduce the following:

• Mozilla logo: 10%
• SitePoint logo: 26%
• Typekit's logo: 33%
• Google's search page logo: 10%

Okay, so would anyone really bother squeezing 10-15% out of a 25K PNG in the age of broadband connections?

Perhaps it's unnecessary for every random graphic used, but it certainly makes great sense on certain occasions. For instance:

• Site logos, headers, and other repeated graphics:
  As practically every visitor comes across these graphics, a little care in their preparation will pay off on every pageload.
• CSS image sprites:
  CSS sprites are a great way to pre-cache images for rollovers, animations, and other effects, but they rely on the user receiving one large image quicker than a number of small images. In fact, sites such as YouTube put almost all their interface graphics on a single big image. Anything you can do to make that first image download faster is a huge bonus to everyone.

Try it out on some of your PNGs and let me know the results.

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

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

You are subscribed as:
[email]

• Unsubscribe from this list.
• Manage your subscriptions.
• View the newsletter archives.

Mailing Address:
48 Cambridge St, Collingwood, VIC, 3066 Australia

Phone: +61 3 9090 8200