How Real-World Inspiration Shapes Architecture, Industrial Products, Digital Design and More
Did you know that velcro’s design and function was inspired by a plant? Or that the passive cooling found in termite moulds inspired the design of Eastgate Shopping Center in Zimbabwe? And that the early personal computer interfaces used metaphors from people’s everyday lives to make computers friendlier and familiar?
Over the course of history, we will find thousands of examples of innovations inspired by nature (biomimicry). Similarly, attributes from real-world objects are adapted to digital interfaces using concepts of direct manipulation and metaphors.
The terms like biomimicry, direct manipulation, metaphors and what not intrigued me too. So I tried to consolidate my learnings about how the real world inspires a wide range of industries and here we are.
When Nature Inspires Industrial Design, Architecture and More
One of the best ways to clear minds, think things through, connect the dots is to take a walk, travel, venture out into nature. In fact, the Swiss engineer George de Mestral came up with the idea for velcro on such a walk in nature. He noticed burrs clinging onto his clothes and his dog’s fur. Curious, he observed them under a microscope. This led to the ‘hook and loop fastener’ velcro that we have all around us today.
Humans have adapted many such concepts, ideas and/or functions into technologies useful for us. Airplanes, high-speed rails, velcro to name a few. Biomimicry is the name given to this practice of taking inspiration from nature to design and solve complex engineering problems.
There are some definitive advantages to looking at nature for ideas. The organisms, animals, plants that we can observe have made it this far through natural selection. This is nature’s version of iterating over generations through evolution and the best traits survive. We can study nature, the characteristics, learn and adapt the ideas to our needs. Self-healing abilities, environmental exposure tolerance and resistance, hydrophobicity, and harnessing solar energy are all inspired by nature.
Some Notable Examples of Biomimicry
Velcros: Velcros were invented when Swiss engineer George de Mestral noticed burs from a burdock plant sticking to his clothes and dog’s fur. He observed them under a microscope and created the ‘hook and loop fastener’ velcro that we have all around us today.
Eastgate Shopping Center (Harare, Zimbabwe): Another fascinating example is from the Eastgate Shopping Center in Harare, Zimbabwe. It was designed to be ventilated and cooled by entirely natural means. The building uses passive cooling where it stores heat during the day, and vents it at night when temperatures drop. Zimbabwean architect Mick Pearce took the concept of passive cooling from termite moulds, and creatively adapted to architect this building.
Shinkansen Bullet Train: To solve the problem of reducing train noise without sacrificing speed, designers sought inspiration from nature. They discovered that by mimicking the streamlined beak of the kingfisher, there was a significant reduction in the loud noise that typically accompanies a train’s arrival. This innovative solution not only resulted in a quieter train as it traveled through tunnels, but it also enabled the train to travel 10% faster while using 15% less energy.
Influence of the Real World in Digital Interfaces
Personal computers started becoming popular and more affordable in early to mid 1980s thanks to Apple’s Lisa, Macintosh and Microsoft Windows. To make them easier to use and hence have a wider adoption, the user interface also needed to transition from the cumbersome Command Line Interface (CLI) to Graphical User Interface (GUI).
To make people feel comfortable with this new technology, software designers used metaphors to translate their real-world experience to the digital interfaces. For instance, people noticed familiar icons like desktop, folders, trash can on their machines. They already knew their attributes and how to use them and expected similar behaviour on the computer screens. Interacting with these icons/softwares confirmed what they expected and this magical machine they purchased became useful out of the box.
This process of using ideas from real-world and applying them to digital interfaces is termed as Direct Manipulation. While Direct Manipulation helped introduce desktop computing to the masses, Skeuomorphism helped introduce touch-screen mobiles to the general public.
Direct Manipulation and Metaphors
The concept of Direct Manipulation was invented by a computer scientist named Ben Shneiderman in 1982. It refers to giving software objects some of the same attributes and behaviours as physical objects. This enabled people to interact with digital bits as if they were real-world items.
For instance, with the Macintosh, interacting with an object on the screen meant moving the mouse cursor to that object. Picking it up was done by the mouse click. This interaction was similar to how one would grasp an object with their hands. Dropping the object into a folder meant dragging the object on top of the icon of a folder and releasing the mouse button — similar to dropping physical objects in a drawer or folder.
Another fascinating observation when it comes to using metaphors in digital products — a lot of UI Components we see on the web are simply a digital representation of their real life existence. Toast notifications, breadcrumbs, radio buttons, sliders, accordions etc derive their digital attributes from their real-world behaviours.
“The right metaphor is like an instruction manual but better, because it teaches you how something should work without you ever having to be told.”
– Cliff Kuang and Robert Fabricant, User Friendly, Chapter 5: Metaphors
The desktop metaphor. Icons and interactions on the early computers took their behaviour from items people found on and around their desks.
Skeuomorphism
While the concept of Direct Manipulation brought the desktop metaphor to life, Skeuomorphism helped users easily adopt touch-screen phones.
Early versions of iOS used skeuomorphism heavily across the OS. For instance, the icons resembled their real-world physical selves, glossy buttons that seemed to have a dimension that intuitively invited users to touch/tap.
This design choice was one of the primary factors that allowed high adoption of the iPhone. The OS felt intuitive and hence easier to use even though it drastically veered away from other phones at the time. Once skeuomorphism had served its function and touch screen phones and mobile interfaces became ubiquitous, it made way for a more modern flat design in iOS 7.
Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them.
– Interaction Design Foundation, Skeuomorphism
Some Examples of Direct Manipulation, Metaphors and Skeuomorphism
Desktop Interactions: Desktop, folders, file structure, notepad, calculator etc all used metaphors to translate properties of real-world objects to digital interfaces. Resizing a rectangle in Figma by dragging from corners, pinching on touch screen to zoom in and out etc are also examples of direct manipulation.
UI Components: A lot of UI components that are bread and butter of us Product Designers originate from their real-world counterparts. Behaviour of toast notifications is similar to the toasters. Radio buttons and sliders are relics from old radios.
Skeuomorphism: Realistic icons, glossy buttons in early iOS and Android systems.
Closing Words
Creatives and engineers take inspiration from many different fields and industries. Technology has advanced, our lives have become easier thanks to some people who were able to connect the dots, reimagine an existing tech or create something entirely new. Product Designers look at Dribbble, Pinterest etc to kick-start creative processes. Photographers and filmmakers look at the work created by other artists prior to them.
I don’t know where I was going with this. But the idea is to keep our eyes and minds open, observe the world around us and steal some of those ideas for our work.
Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light and shadows.
Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic.
– Jim Jarmusch
References
- Wikipedia, Eastgate Centre, Harare, Desktop Metaphor, Interface Metaphor, History of Graphical User Interface
- Matter of Form, Biomimicry and Product Design: Taking Inspiration from Nature
- Smithsonian National Museum of Natural History, George de Mestral: Velcro Inventor
- Megan N, UX Collective, Why do we call it breadcrumbs? Diving into the history of UI components
- Interaction Design Foundation, Skeuomorphism
- Cliff Kuang and Robert Fabricant, User Friendly
- Cover Image Credits
