DEV Community

Cover image for The "Chameleon UI"
Roberto Farruggio
Roberto Farruggio

Posted on

The "Chameleon UI"

In a world of arbitrary design decisions it's time to refocus and embrace the natural world. This is a manifesto about the direction in which the aesthetics and design systems of UI/UX in every day devices of the future should go. The intention here is to create a world that is complementary to our human presence and not disconnected from it.

This is a proposal in reapproaching every day devices to embrace the natural world. This is also written for entry level folks who are interested in learning about user interfaces, so please, take it with a grain of salt.

Let's begin.

Is design responsible for a disconnect of the real world?

Let’s be real here, are we using our phones as a suspension of reality? Some can argue that their reality is on the phone, sure, everyone needs to message their mom to let them know they’ll be home for dinner in time. But how often do we find ourselves on the phone nearly mindlessly seeking some distraction?

One can suggest that technology may be feeding a void that has always existed. We all want a safe place to retreat and to feel embraced -- this is arguably universal. Yet something feels missing so we go on our phones.

I believe that this isn’t necessarily a willpower problem, this is more of a design problem. The phone is designed as a separated space from the every day world we’re in. After all, we’re putting way too much responsibility on a small handful of nerds who decide what nearly billions of people are going to frequently use every day. And as something that is used so frequently, I believe the design intentions are being heavily overlooked. Here’s how.

There are many realisations I’ve had as a designer upon being on the Internet for over a couple decades now (Oh god, now you think I’m a boomer). I first want to point out that a lot of my skepticism in how devices are designed stems with the intention of reapproaching what we deem as “good design”, rather than saying it’s all harmful. A lot of what we see and use every day is still, despite it feeling like we’ve “come a long way”, in its infancy. Before the iPhone and social media, it would’ve been unfathomable that to imagine where we are now, and the same realisations will continue to occur. I’m pretty sure we will be surprised in the next couple decades despite how far reaching it seems.

I believe we’re in a period of design tunnel vision. When most tech devices are designed there is this assumption that it belongs in some futuristic romanticism of what we imagine the “next thing” to look like. It’s all quite rigid, cold, and sometimes full of aesthetics that could work on an idealised space station, or something. I think this speaks of a larger issue where we’re not designing things with a human or natural approach, but rather to fulfill some kind of expectation of what looks expensive and shiny, have every function possible, filled with entertainment, and allow shopping nearly twenty-four seven. So therefore the device ends up being a separate realm of time and space -- it becomes another place detached from where you are at the present time.

The contemporary phone is now amorphous in its function, where it started as a device to make phone calls, the phone calls are now just like another app on a device. Obviously the basic functions of a phone will continue on but I question the design systems they are built upon and why we’re so ingrained into following them the same way decade after decade. I think this can begin with understanding that User Interface design is a continual process, and as it stands now it feels stagnant and stuck since the ‘80s. IMO, the way we perceive an operating system is quite antiquated. They still carry similar filing systems and methods of navigating since the first day of the graphical operating system. We assume because it’s been there for so long that it’s correct and that it should continue to be this way.

There is an inherent frustration within the user experience flow of most operating systems (both macOS and Windows) that we've grown to accept. Big things and little things. I think it was very tedious to use a mouse to hover over tiny areas of a screen, to minimize a window, for example. It has been proven in a study that sitting on a desk computer for prolonged hours can disrupt your breathing rhythm, it can affect your eyes, it can disrupt sleep, and so on. Design should complement the rhythm of our natural environment rather than break it. Its breath and pulse should parallel the end user, not clash with it.

Often times we find the experience of being on a phone or computer to be monotonous and repetitive. It is literally the same sequence of events every time we use them. The functions of the device being the same repetitive task creating a very rigid and soulless experience. It is the user that inputs information to create a unique experience every time and the operating system acts nothing but the vehicle in which you travel through information - this isn’t necessarily the way it must live. When taking a walk in the woods, or having a moment to sit in a natural landscape, one can do this thousands of times yet every experience will be different even despite the user’s input. The surroundings of a natural space are organic and there is a certain flow of life. To some, it may be no different than an experience on a computer, but to those who notice may be the kind of person who would be interested in something like the design of an operating system.

Except these operating systems are as stiff as a board. They are lifeless. They are static. They are robotic (no offense to all the AI out there, s/o to all the AI friends). But really, there’s a lack of natural embrace. Even picking up a twig from the ground has more life because it is a part of life, all of the light and shadows fall on it as it is, its textures are vivid, it sheds fractions of debris when you hold it, it’s a part of where you are. A phone is an implant into where you are, and I think this is something that needs to be attended to.

Designing the handheld device and operating system of the real world

When taking a walk, the firmness of the ground might vary depending on the weather conditions. The light will be different depending on the time of day. The temperature will determine what you’re wearing and how long you’ll stay outside. The appearances of life will always have an infinite amount of possibilities - the sounds of birds, the smells of rain on the soil, the depth of shadows based on light, and so on. There is no same unique experience if you’re paying attention. Whereas with a computer, we are suddenly in this fixed space of defined parameters. It lacks a certain elasticity and warmth, it exists within a vacuum of time and space. It is things like this that make a very clear separation with a mechanical versus natural world.

As you are probably familiar with already, computers hold hardware that host software, and the software acts as an operator in allowing the giving, receiving, and modification of information. There are multiplicities of programming languages in order to develop the functions within software. In the development of software there is the backend, where databases of information are sourced and then there is the frontend where the interface is designed with programming languages and a graphical interpretation that relays a corresponding appearance. The UI/UX sits on the frontend, and this is what I'm particularly concerned about here.

UI stands for “User Interface” and “UX” simply means “User Experience”. The UI is specific to the visual design elements that we look at every day or in other words: the navigation skeleton that holds the operating system and all of your applications. Whereas the UX is more of the overall story and experience in how the interactions happen. The UI holds a GUI, the graphical user interface, sometimes pronounced “gooey” - essentially it is the windows, buttons, grids, that hold your files, it is what your browser looks like, the interface of any software or device, and so on. This also includes the sounds in which respond to your inputs into the UI.

When you do a virtual check-in at the airport, you are using a customized UI, in this case hopefully one that is quick and accessible to use. Just like when using Photoshop there is plenty of thought in how you navigate it. UI/UX designers make the decisions in how you travel through a process that completes a desired task.

These designers create interfaces that imply billions of people will use them and very frequently. Someone has to pave the road to get to point A to point B, but how you pave the road is full of decisions that are given a lot of consideration. Especially knowing that there will be countless amounts of people traveling often. A computer’s interface is much more complex than this as it is like the center of an inner city with all kinds of vehicles and communications trampling over each other, so it is the UI designers role to create a simple language of “wayfinding” in navigating a collision of possibilities and functions. It is the UI designers responsibility to understand semiotics and how to best communicate complex ideas as concisely as possible. Similar to linguistics where we decide to have a word to symbolise complex and abstract ideas. It is commonly agreed upon that the best interface should be simple, intuitive, accessible, familiar, timeless, and I argue: true to the natural world.

This is no small task - designing how a toolbox appears, and a toolbox that welcomes new tools all the time. Every tool has someone who makes all the decisions in how to navigate it, within the foundation of an operating system, also designed by a UI designer, to hold it into place.

Good designers do their research in making choices for what everything you press, scroll through, or come into contact with. Good designers are aware of extremities so that their design is accessible to all. Good designers communicate large ideas with graceful clarity. As declared by Dieter Rams, good design is useful, aesthetic, understandable, unobtrusive, honest, long-lasting, and thorough down to the last detail.

We ignore the responsibility that designers have in making something accessible to all, being seen by all walks of life, but also something that is harmonious with our reality. Someone had to design the paper currency we still carry and those that designed it left you with a piece of historical significance. In ancient history rulers would place their faces on currency to establish their power and dominance, in a way, the earliest form of propaganda to make something larger than it really was. It is dangerously overlooked that a few people have the ability to make decisions for what everyone on Earth will look at every day. Nobody questions this responsibility.

GUIs are also sometimes less about graphics and more about creating a familiarity. This familiarity is also to be taken with careful consideration. What a lot of people don't realize is that the decisions that designers make when designing gigantic social media interfaces is that the repetition in daily usage of UI can literally imprint into your behavior - similar to the memory of navigating through a home you've lived in for extended periods of time - it becomes muscle memory.

We’re saving real estate in our mind for where icons are placed on which area of the phone, for example. Facebook especially feeds on the anticipation of receiving a new message or engagement. It’s interesting where the eye travels to first after the repetition of knowing that this part of the screen will be where you receive notifications for your likes. As it stands now, one can compare the notification system of Facebook and Instagram to gambling or a slot machine, creating an addiction to the anticipation of receiving a response from someone, which may have led to a moment where you sometimes find yourself checking Facebook for no reason at all.

Instagram recently made a design change where they swapped a heart-shaped button that showed your activity (I personally frequented this section), with what is now a shopping button. So in this case, they’re taking advantage of a previous imprinted behaviour to now direct you to buy something. I can’t think of an example anymore blatant than this one when realising how important every UI decision is.

So, let’s begin with a natural world GUI for an operating system. A UI design revolution should begin with how the operating system is designed so that it is applied consistently throughout every application we use. If we design an application with a very different UI it may stick out as inconsistent with the design of everything else, so I speak primarily of rethinking the operating system in which everything rests on.

Other than the importance of choices in handling navigation design problems, one can focus design motif of discreet amorphous sprouting onto the surface of the screen rather than jolting the viewer with cold and abrupt movements. The microinteractions that occur when a window collapses can relay vitalic information. It can be animated in a way that informs a natural reaction of whatever content vanished. Another way to look at it: the way a LED light blinks, whether it’s a “pulse”, or mimicking breathing, can also relay dramatic information.

There is a stark contrast of when we think of a computer or device being something of the natural world. We see it as the opposite of natural mostly due to how we experience it: how we touch it, operate it, and what it looks like. We have witnessed some changes overtime such as going from keyboard and mouse to a touchscreen. This may appear more intuitive, but some say it still holds a certain frustration within the user experience. As tech has advanced, the new user experience is being revolutionised by touch, speech, gestures, handwriting, vision, and so on.

Question the conventions

Why are we fixated on “high tech futurism” rather than merging with the world that has always been here? In fact, it is puzzling in that most people voluntarily allow whatever designs they see to be the be-all and end-all, we don’t encourage people to question interfaces, to allow experimentation or rethinking of these tools. Perhaps some think that they work already, so why change them? Just because it is sold to a widespread audience doesn’t mean it isn’t harmful or is designed well. Most of the tech world comes with this implication that its all for a greater good however it has jumped the gun in being so overreachingly dominant across the entire planet, all under the discretion of a hundred people in a room somewhere in California.

We must question things that have always existed - especially as a creative challenge. User interfaces are "expected" to be on a symmetrical grid, for example. This isn't to say we shouldn't have order or structure, in fact it would be naive to say that anything exists without it to some degree.

For example, perhaps rather than using fingers to constantly swipe, how about gently tilting the device to suggest the motion of scrolling? The scroll, as it stands now, is also limiting our scope in how we navigate. It’s either up or down. What is shown on the screen at the present moment can also dictate what is shown subsequently without any input. It does not have to be within a linear direction, it can transition within the frame. Scrolling can go “through”, it can go horizontal, it can bend, and so on. The method in which we scroll can also change, for example, we can create motions that dictate how we navigate from location to location. The idea of an alternate scrolling mechanism has been challenged by many experimental designers.

If I gently tilt my phone I would expect the scrolling to begin a roll. If I tickle the surface of a message I would also expect a corresponding motion on whoever receives it. If I draw a small heart on the screen I imagine it sending a like. If I am chatting with someone I can let them know I'm listening, or nodding. When “emoji” reacting to a message it can tell a story, rather than a static and reduced reaction. I include this as emphasis in rethinking what we have decided as to be the best and only solution.

Materials frequently held in your hand shouldn't feel like a prosthesis rejection. The experience of scrolling on a small surface isn’t natural to our eye. It causes an awkward anticipation and a digital eye strain. Incorporating a subtle physics engine was an effort to make a natural simulation, however it still appears elementary. Our displays are increasingly in higher resolutions, we should take advantage in the potential of details and colors.

Less is more, however minimalism can be uncomfortable and stiff - it is odd that we were ever okay with having to click small 5 by 5 pixel areas on the corners of a screen to navigate between windows, for example.

I think a lot of tech tycoons fail to realise what people really need and I won’t be surprised if we begin seeing innovations of completely unnecessary things that we hear about them all the time.

A natural world design

As we use objects like phones every day, they are essentially another limb. And if one was to design a body part it would have to revolve around the design system of the body. One can design an entire species of animals that do not exist on Earth, however the animals would have underlying systems in order to create them.

We no longer need to follow a jolting binary "on and off" design language - we can now create clean microinteractions of a window appearing and disappearing that mimic natural motions, so rather than something disappearing immediately, it can transition out of the surface with a subtle flutter of dispersion. This would be a more natural motion to the eye. This should also take into consideration that no completed task should animate repetitively, there should be nuanced variations, just like when experiencing a natural environment.

Our computers do not listen to our breath and pulse, in fact it has been studied to disrupt our endogenous circadian rhythms. Being that the GUI can currently be argued to be aimlessly in a vacuum of “futurstic design” languages, there also a lack of cohesion in the information and content we are exposed to - for example a Twitter feed within a minute will be happy, sad, funny, angry, happy, sad, etc — a turbulent scatter of literally everything and anything.

Algorithms are not quite given the attention they deserve yet it is suggested that they create a natural aggregate of content. As of now, a lot of our social media feeds are a mess. Searching for keywords, or hashtags, may be a workaround, but ultimately when we go through our feeds we’re voluntarily allowing literally any random thing to show up with this vague idea of how the algorithm works in the background, which almost always has the priority into selling something. Considering how much data we input into social media we still have zero control over how the algorithm works, and how information is disseminated, but in the designer’s defense we do see small nudges of effort every now and then.

My point is that design revolves around immediate gratifications and usually some form of selling a product, it is not centered around a human experience. Yes, there is a guy at Facebook whose sole job is to test every color or emoji style among groups of people to decide which design will receive more engagement. This is surface-level design, it again plays with the idea of instant gratification rather than what would support large amounts of people without sacrificing their well-being.

As I argued earlier, being in design infancy stages despite several decades of use, comes stages of frustration like teething, and I feel that we are very much in a prolonged technological teething. We hear frustrations of digital banalities all the time. We hear that we are losing our humanity, we hear that social spaces may be accelerating dialogues into ideological radicalizations, we feel a sense of tedious frustrations after spending hours on the computer or phone, especially when working on extensive tasks - the virtual experience still is nowhere near a natural one.

The design language and user experience of our devices should be an extension of our living space, its experience shouldn't revolve around creating a separated "designed space", it should be about adapting to its surroundings. It should take cues from, for example, the Transhumanist movement that states technology is an extension of our lives and we should use it to our benefit and prolong life as it is irrevocably a part of us - it should lift us up, not distract or be an outlet of escapism.

If I'm on a hike at the Appalachians with a tablet in my hand it should be a part of the natural sanctuary I'm in. There shouldn't be any tension or clash. The future will be a symbiosis of the two worlds we're in: mechanical and natural. The crossing of human and machine is here and there is no separation unless our design intentions allow it to be.

There's still a stark contrast in mobile design in general that assumes the role of a device must carry a design language different than its immediate physical surroundings. It should be reimagined within a cozy simulacrum of a discreet naturalism, an anthropomorphic foundation, a natural interface immersion, and an awareness to endogenous circadian rhythms.

So, what would it look like?

The Chameleon UI — natural world hyperrealist skeuomorphism

What would a phone in the next 40 years look like? I would hope to see it being less about separating into a virtual space and more of returning to embrace the natural environment around you. This idea has led to a “Chameleon UI/UX”, where a device interacts and adapts with the immediate environment through colors, light, textures, and other data sourced from your exact location. Your phone would replicate characteristics of where you are so that your phone feels a part of where you are.

Hyperrealism is attributed to realistic, or photographic interpretations, in painting. And Skeuomorphism is the idea of a tactile reinterpretation of real world objects. These two combined, with the natural world being the design language, is what the Chameleon is all about.

Everything we look at must be organic and true to its environment, both in how it lives in a space and how it is portrayed. The screen can resemble stone or earthenware materials. Anything on its surface should embrace hyperrealist skeumorphist visual cues that acknowledge all of the 5 elements. This includes adjusting to light sources and temperatures. Reflections of light occur in relation to its source, it's never flat or arbitrary, and this can be interpreted similarly with reflections on the surface of obsidian, for example. Light and shadows pour and leak around other elements, as well. Colors should be embraced truly from environments such as the Redwood forest or of coral reefs. Gleaming bioluminescence of deep sea creatures can also be of use. The indication of wind. The chemical processes such as: expansion and contraction, sorption, forming humidity and evaporation, and the harnessing and releasing of energy. The visual representation of the passing of time, like patinas. Textures should also be intricate and precise as follicles and subtle vellus.

Google's entire Material Design direction was inspired by paper and ink. Although the look and feel can still be resurfaced because it is usually mistranslated in appearing too artificial.

When any window, bubble, text, or anything that appears on the surface of your phone it should sprout and submerge naturally. When a window closes, It should evaporate seamlessly. All motion graphics should appear warm with texture. It should be consistent with the environment directly outside of the phone - the UI can adjust to corresponding light, even colors, to make the phone seem invisible - it would fulfill Apple’s design ethos: less design is good design. Apple has mentioned that no design at all would be ideal, and in a way, if the natural world was adapted seamlessly, it would be a form of “invisible” design, because it would simply blend with where you are.

The UI does not need to be in a fixed position of time and space. The screen can act as the surface of still water. Elements on the screen can float delicately and tilt. Over time objects collect dust. Over time if the trash isn’t emptied, it begins to stench. The way design elements appear on the UI can be more true to where your eye is looking from (there was an attempt to skew the position of the screen depending on the angle the phone is tilted) but it was awkward so they removed it - mostly because it felt so unnatural, it was too early and half baked in its execution IMO. Eye-tracking from the camera facing you has been suggested but contested as a privacy issue.

iPhones have access to tons of information within its relationship to the human using it. They are full of sensors. A proximity sensor, an ambient light sensor, an accelerometer, a magnetometer and a gyroscopic sensor. With two cameras front and back it can literally see what its surroundings look like. Phones also use location information for further clues on how to be more true to its surroundings. As of now, we're seeing the data that we input being measurements for advertising, rather than creating a genuine human connection.

In an effort to move away from "flat design" aesthetics and some kind of romanticised minimalist futurism, it would be about creating a space familiar to the natural world and responsive to the immediate environment surrounding the phone. It would all rest within a tactile physicality. This is being lightly attempted as we speak, and it’s called Neumorphism.

There is a growing wave of 3D art, probably more popular now than ever thanks to the current crypto art movement. A lot of what I speak of would suggest a team of advanced 3D artists and motion designers, and now that Blender is like the next photoshop, it’s pretty clear that we’ll be seeing this natural world skeuomorphism come to life. Learning to code and knowing how to create 3D generative art is probably where the money is right now.

Notification sounds can appear similar to natural occurrences when sitting in the woods and observing a natural scape. The sounds can vary, should be gentle, hold an acoustic resonance that camouflages into the environment yet still distinct enough to know you received something.

The idea is to leave the repetitive and monotonous space we are so used to pre-chameleon. It’s to create an absence of a space. A design attempt of devirtualization.

People get excited when an icon begins to animate, imagine your phone being a live painted reflection of reality. Time to pitch some ideas to Apple.

Catching up to reality

Natural implies an environment in harmony and flow. Objects no longer exist in a stasis - there are constellations of information that revolve around them. For example, when browsing a grocery store one can Google multitudes of information regarding an item. Where it comes from, who its associations are, health ratings, what the community has responded to, what its environmental consequences are, industry comparisons, and so on. Why is the physical grocery store still offline? I believe it's because we don't incentivize design that provides an optimal living space. One might say it's too tedious to have to search for it on your own. This isn't a willpower problem, this is a design problem.

For example, when we’re shopping on Amazon, there is no option to input your health requirements before the search engine searches for items. You have no option to input your beliefs, morals, and ethics either. Amazon doesn’t really care about what items it distributes despite the user feedback the items receive. It has the potential to measure a merchant’s carbon imprint, but it ignores this as well. If Amazon measured merchants based on their environmental consequence it wouldn’t be flooded with so much trash.

As of now, researching what you buy is entirely up to you. There are cool application ideas like BuyCott that allow you have more informed shopping, but we still see this as something extra, something that isn’t built-into the way we’re navigating Amazon for example. I believe there should be resources placed into giving merchants and those that distribute items, more accountability on how and what they sell. This is yet another example of the potential of technology we use can reach yet we ignore - because people are second, and profit is first.

To further the point of immersion into environments, there was no excuse to not use readily available technology to aid our living spaces during the pandemic. Considering how accurate and vast our data reach is we could have used geolocation on our devices to send notifications about places we go to that are at high risk. Alarms when visiting locations that are traced as positive. Why did it take Apple 8 months after announcing a countrywide lockdown to implement this? Locations now contain archives of information that hold potential to be an extension of our reality.

Despite the availability of most technologies it seems as though we still don't use it to our advantage yet. We don't use information to create the potential for "online collective environments" that can greatly benefit us, but rather to create an environment that revolves around individualism. Incentives are geared towards creating superficial spaces filled with reductive human expressions that are nowhere near the gestures of human beings in person. This abbreviation of human interactions should be relayed with more depth, and its trajectory should shift to building who you are versus showing who you are.

This is a call for reapproaching design thinking. This is a call for a refashioning of a medium that holds media. This is a call for an awareness against design nihilism that is incongruent with our physical reality, the natural world, and the languages of our human senses. People want what is bad for them, however, we don't need to design UI/UX that is bad for anyone. We see petty attempts of design naturalism that simply aren't sufficient, all the time. When it comes to our biology, our mental wellbeing, and our living spaces, we cannot afford to design without this intention. If billions of people were to look at one thing all the time it should lie within the environment, not clash with it.

Top comments (0)