User Experience Designers have a direct impact (their work) and an indirect impact (usage of their designs) on the environment we live in.
The latter is especially important: Since designers influence the behaviour of users through their designs, good or bad design decisions can multiply the good or bad effect it might have on the environment.

In the following, I will show a few examples of environmental sustainability in User Experience Design.

The UX work

I will keep this short, you know how it goes.

There are many ways to reduce the footprint of an office: Swap to a green energy provider, use less paper or avoid it at all, separate and reduce your waste and get a green hosting service (The carbon footprint of date centres, where websites are running on, adds up to half a per cent of global carbon dioxide emissions – and that was in 2007.)
Try to avoid traveling – especially flying, which accounts to the main part of carbon emissions with many companies. There are plenty of collaboration tools like video conferencing / web presentations, collaborative docs, cloud project management etc that can render travel unnecessary.

If you want to raise environmental consciousness in your office, you might find this project by Frog Design interesting. For a two-week period attendees were not allowed to use a trash bin. Everything that was not appropriate for the offices waste separation had to be collected and kept, with an interesting outcome.

The Design

Whether you design for a web service, a marketing site or an app, you will influence the user’s behaviour, which again will usually have an effect on the environment. So you are in a position to reduce the environmental impact of many people with the design decisions you make.

Learn & Integrate
If you want to design sustainably you first need to now where the problems are. Inform yourself about global sustainability issues and issues that are specific to your service or your client’s business (see reading recommendation at the bottom).
If you know the issues and how to tackle them, keep this in mind during every step of the design process, from research and strategy to designing and testing. Proactively talk to your client or project owner to add possible feature requests to backlogs or design schedules.

Transparency
The easiest way of influencing users’ behaviour is to make them aware of the environmental impact of their decisions.
For example if you design for a shop, tell users about the eco-balance of the products. Don’t tell them only about the good things. Naming a product green for only a few green features will likely be perceived as greenwashing. Honesty in a topic users actually care about, will be appreciated and establish a trust relationship that will give you a competitive advantage in the long run.

Patagonia is one of the few companies that try to be really transparent, talking about why their product is good, why it’s bad and what they will try to improve in future.

Sourcemap is an open platform that lets users collect supply chain data of existing products, so that consumers can make more sustainable choices.

Education
Usually ecological information like the origin of a product, energy consumption or material is quite abstract to users. You don’t know if this information is good or bad, if you don’t know its actual effect on the environment and health or if you can’t compare it.
On WattzOn users can compare their energy footprint with the footprint of other users or the average user. This puts the user’s energy consumption into context and helps users to find a solution to reduce their footprint.

WattzOn also lets you see the equivalent of the energy-consumption to the actual release of CO2. This is a nice idea, but still very abstract. A better solution would be to show how many trees you need to metabolize this amount CO2 in a certain time range.

Persuasion
Now that users know about the ecologic consequences of their decisions, you can do a little more to support users to act sustainably.
Let users set goals to be more sustainable or reward them with batches or points, if they act sustainably. Sharing this with their friends might add some peer- pressure to the game. If the way that leads to a sustainable life is more playful and about achieving something and less about relinquishment, it will more likely be chosen.

Canadian company Team North developed the North House, a sustainable solar-powered house, with mobile and web apps for customers to manage their home. While the apps give users instant information about their consumption in a comprehensive and emotional way, inhabitants can set up personal goals or challenges with their friends to reduce waste or energy consumption. Winners of challenges receive batches, which will potentially encourage the whole network to do even more.

Backward compatibility
Devices like laptops or phones lose their value and urge users to buy new ones when new software doesn’t run on the device anymore – for instance, Apple stopped software support for the first iPhone not even three years after release. Keeping older device generations in mind doesn’t necessarily affect your design, but helps extending their usage till the next hardware upgrade, which saves material and production resources.

Support many platforms
Many people still print out webpages, mainly because they want to read it in a more comfortable situation or on the go. Supporting different screen sizes might reduce this need. People can now read it on their tablet or mobile phone. There is no need to build apps for every device out there. Responsive web design or cross platform HTML 5 based apps are easily developed alternatives.

Lightweight web design
When heavy websites – in terms of byte size – are viewed, they raise energy consumption of data centres. But also unused files and pages need energy, when they are hosted on servers.
The designer can help keep websites small by following a minimalistic approach to web design, which is usually also good for user experience.
Try to avoid showing interface elements or text as images. Try to go with a design that can be coded with standard HTML and CSS. Use images and videos selectively and with a good compression (especially background images). This will also make the site faster, which adds to a good user experience.
Also talk with your developers to get a lightweight website going. You can test it with tools like Google Page Speed.
Smashing Mag also had a good piece on this topic.

Think outside the box
User experience doesn’t stop after the digital service. H&M online shop for example sends infographics with their packages so that users will make the original package smaller, if they want to return only part of the delivery. That helps reducing greenhouse gases and H&M’s postage costs. via uxzentrisch

Further information

The Designers Accord is ‘a global coalition of designers, educators, and business leaders working together to create a positive environmental and social impact.’ They give good advice on how to bring sustainability into your design work. Everybody involved in design in general can join for free. Design firms can be part of the Design Firm Directory.

Design Can Change is an educational website that helps designers learn about environmental issues and and act more sustainable. It also features a Designers directory.

The Story of Stuff is a project by Annie Leonard, comprehensibly illustrating the whole production and consumption process. There are very nice, free short films and also educational material and books. She recently tackled electronics, cosmetics and bottled water.

Cradle to Cradle is a book by William McDonough & Michael Braungart. They describe solutions for a sustainable world by going beyond just trying to reduce the bad effects on the environment (eco-efficiency), and instead promote a complete elimination of the bad effect through better design (eco-effectiveness).

Ecobuild is the world’s largest event for sustainable design, construction and built environment with 600 speakers and 1200 exhibitors – happening in London March 2012.

Last saturday I have been part of the Breitband-Tabletgipfel, a broadcast by Breitband on Deutschlandradio Kultur.

During the round table discussion Ben Schwan (tech journalist), Jörg Kantel aka Der Schockwellenreiter (blogger and IT-lead at Max-Planck-Institut), Jason Forrest (experimental music pioneer) and myself talked about the tablet market, closed systems vs open source, music production on the iPad and natural user interfaces.

Hosted by Philip Banse and Martin Riese. Enjoy [in German]

Thx @moritzmetz

In addition to German industry experts, Page also asked me for some input on the topic.

Unfortunately, the article about the web is not available online, but it is well worth purchasing the magazine.

The report gives a good insight into how people work on usability and describes many different methods. It is especially worthwhile for those new to the field.

Update: the new media agency, triplesense, has kindly uploaded a pdf-file of the article.

The most common and intuitive gestural patterns to use with multitouch tables are depicted below.

To imitate a natural environment on the multitouch table, content elements should be movable, rotatable and scalable with these gestures.

This is particularly important for multi-user tables like the Microsoft Surface

that allow multiple users to control the interface from any side of the table at the same time. Users can then simply drag the element closer and rotate it to view it properly.

Some applications would work just like this without any buttons, scroll bars etc. that one knows from applications that work with hardware interfaces like a mouse or a keyboard. Even those using it for the first time would intuitively know how to interact with it. Jeff Han already explained this principle 3 years ago at the TED conference (still worth watching).

However, some applications can be so complex that they cannot be used with the standard gestures alone. You might want to hide extensive details somewhere or need to give the user advanced controlling options to adjust tools or forms.

One would then either have to work with gestures that have to be learned by users, or with designs that tell users how to interact with the respective element. Users usually do not have time for the former, unless it is a game or they really need/want to work with the application, so let’s start with the latter.

Starting Interaction

How do you get users to start interacting with a multitouch screen? People still might not be very familiar with gestural user interfaces, so merely telling them in big letters to touch the screen with a big hand image next to it would be the most obvious solution. They would then definitely know how to use the screen, but would they actually do it?

A better approach is to display a surface that users cannot resist touching. For example, an animation of a water surface or colliding bubbles. In this way, you can at the same time get users to utilise and understand the interface of the application.

Microsoft Surface Water Sreensaver

Flip

You want to hide details of a content element or you have several pages of content to place on the screen. Put it on the back of a content element and tell the users that they can flip it through tabs.

If the “details” are very important to you though, make sure you add an eye-catching button to the element.

Some applications use the round arrow to flip elements. I do not find this to be appropriate because users also know it as an icon to refresh content.

Minimize

Too many elements to show on one screen? Minimize them anywhere along the edges of the screen. Users can simply toss them to the side if they don’t need them, or drag them back if they do.

Click

Although everything on the screen is interactive, users still need to know which elements cause a special reaction. It might look old school, but button-like forms tell the users clearly what is clickable and what is not.

By Infusion

Glow

Want to combine two elements or drag one element into another? Give the user some sort of visual feedback to indicate that the elements can be combined. For example, a glow around the object or elements gravitating towards each other.

Switch

The user has to activate/deactivate options. With a keyboard/mouse interface, this is usually solved by checkboxes. However, on a multitouch screen, it feels strange to create checks with your finger. A switch is known to users from appliances and feels much more natural to use for this purpose.

Sliders and knobs

If you want an option to be adjustable without any step or with many steps being necessary, a slider would still be a good way to do this – as it is with a mouse-controlled interface.

By Design Affairs

A rotary knob can achieve the same thing but the spinning gesture can be inconvenient, especially on small objects. Tangible objects are the solution for this. Most multitouch systems can recognize the form and movement of tangible objects if they touch their surface. For example, a cylinder can be placed on the multitouch screen to imitate a rotary knob. The system recognises the object anywhere on the surface and can arrange information around it.

In use, the tangible rotary knob turned out to be the feature with the highest joy of use.

By Neue Digitale

Further Links:

YouTube playlist of multitouch applications

Bill Buxton: Multitouch systems that I have known and loved

Fast Company: 11 Killer Apps for Micrsosoft Surface

Recommended Reading: Designing Gestural Interfaces

Most Read

The most common ranking system has a minor weakness. What is read most by readers might not be the best article. It maybe has an interesting picture or the headline is thrilling, but when you click on it and read on, the article is in fact rather weak. By this time, it has been already counted for the ranking. So articles, which are not interesting for most people, climb up the ranking and readers who use the “Most Read” tool are disappointed.

Guardian - Most Viewed Teaser

Most Recommended

A ranking can be trusted more when readers actively recommend articles. The whole concept of Digg depends on this. Users ‘digg’ (recommend) articles, the best articles will then climb up the charts that are browsed by other users. This system has proven effective and Digg has been extremely successful with it.

Digg - Massively digged article

Most Recommended by Authors

Online newspapers will not let their readers alone decide which stories to put on top. The main skill of a newspaper is to know what is important right now, and many readers trust a professional more than the opinion of the masses.

Today, every news homepage is a ranking of what is recommended by the authors. A “Most Recommended by Authors” widget might still be a good function if you want to keep articles on top beyond the actuality of the homepage or if you don’t have a very up-to-date website.

Wikia - Featured Topic

Most Recommended by Peer-Group

With the New York Times application, “Times People”, users can follow other users and see what they recommend. If you have a very large group of people you follow because you share the same interests with them, a “Most Recommended” function within this group would potentially produce the most relevant results for you – better results than any journalist or system could ever provide.

Most Blogged

A “Most Blogged” ranking is very similar to a “Most Commented” one. Articles that have been linked on a blog are probably even more relevant.

Most Searched

“Most Searched” displays the articles that users are looking for through the website’s search function or through a Google search. It can dig up articles from the archives – if a certain topic written about some time ago again becomes relevant to users because of certain events for example.

Most E-Mailed

This feature is almost the same as “Most Recommended”. People usually email articles to recommend them to somebody else.

New York Times - Most Popular Teaser

Most Commented

This feature is perfect for those who like to communicate with other users, as it shows where peoples discuss the most. However, users who do not like to comment might also like this ranking, as it supports topics that polarise and might be interesting to read because of this.

Techcrunch - Most commented articles ranking

Most Saved

“Most Saved” might be a good ranking too. Users generally only save articles that have some kind of value to them. It is similar to bookmarking services like delicious.

All of these functions can be filtered by category, making them more useful for those interested in a specific topic. A “Most Popular” teaser within a certain news department should show the best articles for that department only.

Depending on the article release frequency, “Most Popular” teasers should display the best articles within a certain period of time – within the past 24 hours or past week for instance. After a while, all-time favourites will not change anymore since these articles are being viewed or commented on even more because of the teasers.

A good way is to show recent articles as default and wider periods of time with tabs so that users will get the best stories of the week or the month if they missed something.

Digg - Time range tabs

At re:publica 09 I attended a very interesting workshop held by Bicyclemark about Twitter and journalism.

I did some research of my own; a short abstract on this topic can be found below.

Can Twitter be a substitute for professional journalism?

There have been some occasions when an event has been reported on Twitter before it has been reported by any other news source.

For example: most people know about the airplane’s landing on the Hudson River in New York. Janis Krums saw the plane from a nearby ferry, took a picture and linked it on Twitter before TV stations or news agencies reported on it.

In theory, when everybody is tweeting, the masses will spread details of occurrences sooner than the ‘old media’.

There is a catch however. People can only tweet what happened, but not how or why it happened. There still has to be somebody who does the research after the event. Twitter is quick, but it can only scratch the surface of what is going on.

So Twitter will not be a substitute for professional journalism, but maybe it can be a great tool for journalists.

Journalists publish with Twitter

Publishers use Twitter already – but in different ways.

• Most online newspapers just link their articles on twitter (e.g.: The Guardian), which makes it something like an RSS feed in a different environment. It can be valuable if there is a low tweet frequency with articles of a specific nature. A Twitter account with tweets for all articles of a big online newspaper can be very overwhelming.

• Some newspapers publish special content with Twitter. For example, the German Zeit Online runs a Twitter account with five Zeit journalists tweeting about anything they think is relevant for Zeit readers – a very original approach.

• An increasing number of journalists also have private accounts (e.g.: David Pogue, NYT). Writing about themselves makes journalists more “human” for their readers and it can add a certain extra value besides their work for the newspaper.

Journalists use Twitter to research

• Through the Twitter search and the #Hashtag, you can get a pretty good idea about what is moving people at that moment in time and what they think about the goings-on. Twitter is a real-time Zeitgeist machine that tells journalists what people are interested in.

• Journalists who have to research for an article can ask their followers if they know anything about a specific topic. If you have one thousand followers, the chances are good that there is one who knows someone who might know something.

A journalist who also attended the workshop shared a nice story about this: he obtained information that the boy who ran amok in Winnenden, announced it the day before on an image board called Krautchan. He didn’t know what Krautchan was, so he asked around on Twitter. He actually received feedback from a guy who wrote his thesis on Krautchan. So they got in touch and soon after it became clear that the announcement must have been a fake. Every other big newspaper in Germany – and even the authorities – accepted the announcement as true and wrote about it, simply to call it off a day later.

• CNN has a pretty aggressive approach to researching on Twitter. They try to recruit interview partners with Twitter. Again during the Winnenden tragedy – see @Clare20092009, though the account hasn’t been used since then.

Related articles:

Techcrunch – Plane Crashes In Hudson. First Pictures On Flickr, Tumblr, TwitPic

New York Times, David Pogue – Twitter? It’s what you make it.

The Guardian – Media Talk Podcast: Twitter @G20

ReadWriteWeb – How we use Twitter for Journalism

Recently, some interesting concepts emerged about how consumers can save energy and carbon dioxide with tools on the web.

The basic idea is to gather data about your personal energy consumption and to draw conclusions from this.

WattzOn set up a database that covers the average energy needs of most things you will use or benefit from in your life for example. Users can help add more to the database or improve existing data.

If you answer a few questions about where you live, how you travel, which things you possess or what you eat, WattzOn will show you your overall energy consumption as well as your consumption by category. You can then compare your results with the average energy consumption of those in other countries or other WattzOn users.

WattzOn not only calculates the amount of energy needed to run your washing machine like most energy tools do; it also includes the energy needed to actually manufacture the washing machine.

In the end, you get a pretty good idea of how you can reduce your carbon footprint most effectively.

WattzOn recently announced their cooperation with Wesabe, the online money management tool. Wesabe recommends products to users based on their price and user satisfaction; WattzOn adds energy consumption.

German energy provider E.ON started a closed pilot project

to equip 10,000 households in Bavaria with an energy tracking device that sends energy consumption data to an online portal. The portal then tells you when and how much energy you consume, which will give you an idea what the biggest consumers are. Unfortunately this offer only applies for E.ON customers.

/

Google announced to launch a very similar project (also still in closed beta) in cooperation with smart meter manufacturers. Google PowerMeter collects data from smart meters to show customers through an iGoogle widget when they spend how much energy.

Katie Fehrenbacher wrote a good article on Earth2Tech about the new market for saving energy.

What will the future of online journalism look like?

According to the New York Times – currently the benchmark for news websites – quality news is soon going to be free and all over the web.

The NYT has released a couple of open interfaces (APIs)

to their database. With these APIs, users are free to build applications that are fed with specific links and metadata from the NYT and to spread it on the web. Giving away their content is actually supposed to lead users to the NYT website through these applications.

The idea is not a new one. There are many companies on the web that follow this strategy. Google lets users embed YouTube videos and maps on their websites for example, which raises awareness of the brand and generates leads to Google’s own sites. For publishers who tend to protect their content, this is a pretty revolutionary step though.

Hopefully it will pay off for the NYT. Rumour has it that the paper is experiencing financial difficulties. But the strategy could increase their advertising income because of more visits, as well as establish new business models – commercial websites who will pay for NYT content for instance.

The NiemanLab blog posted review of the Times Open, the conference on which the APIs have been introduced to the public.

The Microsoft Office labs released a nice video presenting their vision of the year 2019.

It features multitouch screens and sensors everywhere, interacting devices and amazing gadgets such as electronic newspapers.

You will most likely find some inspiration even for designing today’s interfaces and interactions.

I would have loved to be part of one of these creative sessions. It must have been fun.

Comes via I started something, where you will find an extended version of the video.