Overpackaging on the Web

In graphic design, sustainability has focused on sourcing ‘green’ physical ingredients including paper and ink. In addition, most “sustainable graphic design” strategies look at packaging, and avoid concepts that lead to “excess” paper or other material being included in a product.

There’s a tension between what is “excess” and what is needed to convey identity to a product. For example, I recently bought some coffee in whole-bean form, in a metal tin. When I opened it – surprise – there was a typical plastic back holding the coffee inside. On one hand, the tin + plastic increased the amount of waste this product generates. On the other hand, it may have some impact on the freshness of the coffee – an even if it doesn’t it will convey a message to the buyer that it is super, extra fresh relative to other products.

A few year ago, I bet most package designers would have argued that this double packing was necessary to put the brand’s identity across. In a similar way, they might have argued that a print book with some blank or nearly blank pages was necessary for the ‘artistic integrity’ of the design. But today, sustainable graphic design would probably leave out the outer tin, and the extra blank pages.

So, the line is being drawn, but how? Nobody is saying we shouldn’t use “big type” because it takes more ink than small type.

A similar subjective mindset is going to appear in Sustainable Virtual Design, and its biggest area, Sustainable Web Design. On the web, we can identify elements of over-packaging, and determine if they are really necessary. However, we must balance design versus energy use in a rational way.

In some cases, the design contribution is weak, and the energy consumption large. The easiest one to point out is “splash screens”, which act as the equivalent of movie titling before we actually go to the site. It’s also the equivalent of that tin around the coffee bag. Splash screens have been critiqued for other reasons, typically related to user experience – but now we can brand them as unnecessary energy consumption. This is especially true for the once-popular Flash-based splash intro screens. Two programs are used to display the screen (the browser, plus its Flash plug-in), so it is almost by definition less energy-friendly.

(Hmmmm, will “sustainable movie design” someday brand elaborate screen titles on a film, often produced by a third-party agency with no connection to the film production company, as un-green? That would be cool…)

The equivalent of “empty pages” on the web is a little more difficult. Modern web design differs from Web 1.0 from the late 1990s in using negative space. Old-school web design tended to fill the entire screen with “features” or links. Check the Tias Collectible site at http://www.tias.com for an example. Web 2.0, in contrast puts a few features into strong, user-centric focus, like the Mobile Me site at http://www.mobileme.com. Is the latter site less “green” than the former?

In print design, it’s pretty clear that whitespace, created by adding extra surface area of physical paper, is less green. If we only thought about the environmental impact of paper, we would get rid of all borders and margins, as well as blank pages. Our documents would resemble those in ancient times when paper was precious – papyrus or vellum with almost the entire space filled with text. The fact is, paper is cheap now, so the pressure is indirect – we aren’t aware of the environmental cost. So, we balance whitespace necessary to make a design with economy of paper.

On the web, “whitespace” has an energy cost. The background of the Mobile Me website certainly requires more computer CPU cycles – and therefore more carbon burned – than the Tias website. It’s often argued that this amount of energy used is too small to worry about – but that has always been the refrain when sustainability first comes up in a design profession. It does matter, even if it is not huge. If it is a popular site like Mobile Me, the contribution of non-task background might be very significant.

But on the web, we also must consider the time energy of use. Unlike paper, web pages burn carbon every second they display on the user’s screen. If a design takes longer to navigate, more carbon is burned. So, if Web 2.0 layouts are really more about User Experience, or UX – and more user-friendly than the “swiss army knife” Web 1.0 approach of Tias.com, we have consider:

cost = (energy of computer showing a task page – energy saved because of better UX on that task page)

The neat part about this is that we can, in theory, quantify both values we need to compute cost. If we compare two interfaces in a usability UX study,  we can determine how long a screen has to be be seen by the user in order to complete a task. We can then look at the per-second energy of display on a given device, and compare the costs.

One might argue that the cost of the web page is low compared to the computer’s overall energy consumption. This is WRONG. If a user is completing a task, the whole computer is being used during that time to complete the task. We must use the total energy consumption of the computer, not just the browser refreshing the page.

But, like “sustainable graphic design”, we are going to draw a subjective line beyond mere efficiency or energy consumption. My guess is that a rigid analysis of Mobile Me would shrink the screen real estate (and remove any animation), but this is unlikely to happen. To remain in the sustainable orbit, it is important to document these subjective choices in the Sustainability Statement of the site, so we know they were made.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.