The user experience and the organic design

Posted in User interface design | 23 December 2011

From interior furniture to packaging and from electronic devices to publishing, there is a trend in design where visual elements are shaped and inspired by the context and materials of a real natural environment. The so-called organic design has its roots in architecture and specifically the work of Frank L. Wright, who argued that form and function were one.

“[The organic approach] promotes harmony between human habitation and the natural world through design approaches so sympathetic and well integrated with its site that buildings, furnishings, and surroundings become part of a unified, interrelated composition”.1

At the core of the organic design there is not only a pervasive influence of natural surroundings but also a specific concern for the final user: if form follows function then objects are designed to be seen as truly respecful of the use they are suppose to satisfy. Also, a pure organic design promotes innovation: design forms should improve what was made in the past without rejecting its inspiration. This brings to the last principle: “the finished product as a unified whole, where every aspect of the design contributes to the final outcome”.2

The organic approach in web design

With specific reference to web design, the organic approach consists in reproducing in a digital format the elements found on a natural environment, their shapes, colors and sometimes behaviours. We can try to distinguish an organic website by looking at some design elements:

  • The re-adaptation of paper, wood and other organic textures to give a natural “flavour”
  • The use of abstract colors and shapes as found in nature to imitate its continuous flow
  • Single parts of an image (like brushes and graphics) used to create a more complex, extended visual 
  • Common objects placed in a different living context
  • A minimalist style to catch the essence of each design element (few colour and typographic combinations, large empty spaces, etc.)

If on one hand the organic approach has become a trend in web design, it can also add value in terms of functionality and innovation: the organic design can be used to improve the usability and the user experience with the website. This is particularly true when the goal is to promote a brand or sell a product.

Changing the user experience

As an example, e-commerce websites have the urgency to make products and services more appealing to the would-be buyer. Without surprise a popular selling strategy  is to combine a beautiful, original layout with a relaxing, more intimate touch – a strategy adapted from the packaging industry. But there is a more hidden reason to explain why organic design matches very well with brand promotion.

Duchy Originals - natural, organic, sustainable food from HRH The Prince of Wales

Duchy Originals – natural, organic, sustainable food from HRH The Prince of Wales –

By including portions of real life in a digital environment, products appear more natural and closer to the visitor since this reduces the gap between what it is familiar and what it is reproduced online. Either it is a vivid color on the background which resembles or imitate the nature or a real object used as a navigation icon, this can help making the user experience more personal. It also reminds us that websites are made by humans, though with the use of software.

“An increasing number of non-web media entertainment companies are using the web less as a place for frequently asked questions, and more as yet another way to brand their projects. In a sense, these branding web sites become like CD covers or movie trailers, just more interactive and thus more engaging.3

There are some design lessons that we can learn from the organic approach in order to make the online experience more familiar and engaging for the user.

  1. Choose suggestive images If it’s true that a picture is worth a thousand words then we must choose images which are evocative and able to transmit a feeling of what we are communicating. They must be used sparingly and selectively and not just to fill a space or make the interface look more fancy. For the same reason, conventional imagery and stock photos should be avoided – unless they can be re-adapted appropriately.
  2. Give life to your brand This becomes mandatory if the website is about a web application or digital goods: we must show the product. The thing is, just because these are intangible goods, we must give the user the chance to see them in action – e.g., a software try-out, a multimedia gallery or an in-depth review. When featuring our brand, we should give the user a taste of the products and/or services rather than just trying to sell and promote them. This makes the experience less impersonal and more engaging.
  3. Use few, high-contrast color combination Colors should be used with parsimony: I personally limit my palette to two basic colors in combination with a neutral black/gray/white. Vibrant colors must be used for “call to action” buttons or to highlight some specific elements of the site and to drive the user’s attention. Patterns and 3d objects can be used for icons and backgrounds to make the interface more “realistic”.
  4. Be creative and rational at the same time Nature has illimitate shapes but each one follows a logic. Similarly, as web designers we can (and have to) experiment to make our design unique and distinctive but without forgetting the balance of each element. A balanced design gives the users a sense of order. The look and feel of the interface is not just a decoration: rather, it contributes to instruct and give direction to the user. So for example, we can play with the objects (images, icons, texts) by changing tone, shape or size and make the interface more dynamic. But we can mantain a balance with empty spaces and a linear positioning of the objects. This way the user can find a balance inside an “irregular” but original design. White space in particular, help the user to separate and interpret the content into small pieces of information.

Suggested readings and notes