, , , , , ,

10A. Gradients

My first conscious memory of thinking about “gradients” was in college biology. Gradients of chemicals make a difference in terms of cell differentiation, our professor explained. 

For the past few days, I’ve been walking the garden on the lookout for “gradients.” As an experiment, I’m going to break up the discussion of gradients into sub-categories. 

Visually, all the various gradients look similar. I am categorizing them by the cause of the gradient. 

So, first, we have “Perspective Gradient” … as we look at identical or nearly identical items at different distances, they will obviously appear to have different sizes and different distances between those items. 

Second, we have “Light Gradient.” For example, a series of spheres or cylinders lit by a single source, the three-dimensional shape will result in a gradient of light and dark from most angles. 

Third, there are often “Color Gradients” for both animals and plants. 

Fourth, there are “Growth Gradients.” Color Gradients, are often a specific example of Growth Gradients. However, there are other types of Growth Gradients. For example, in many plants new growth is at the distal end and is smaller. Old growth is more central or more toward the roots; it is older, and is larger. 

Growth Gradients not apply to many plants and animals. They often apply to organizations as well. Imagine a multi-national distributor with field offices in half the countries in the world. If they move into a new country, at first, there will only be a few 

Conversely, Color Gradients can be quite intentionally added by the artist! Here’s a detail from a John Lennon lithograph. Note that “Boundaries” and “Gradients” reinforce each other. The Gradient makes the Boundary Stronger and vice versa.

There are also “Force Gradients” that appear in response to water, wind, gravity, magnetism, etc. One could argue that “Growth Gradients” are due to forces as well. Historically, gradients can arise from evolutionary pressures. These, in turn, are instantiated, in many cases, by chemical gradients of hormones that control growth. However, there are also many non-living cases of gradients.

Finally, there are “Intentional Gradients” that are put in by artists, architects, landscape gardeners, designers, and UX designers. 

Although the examples above are visual, there are also gradients in music. There are gradients in activity. 

Gradients are also present in narrative. Think of the rising passion between two lovers or the increasing tension and suspense in a mystery or horror film scene. 

Photo by Thirdman on Pexels.com

Are there gradients in User Interfaces? One example that springs to mind was in the “Audio Distribution System” and “Olympic Message System.” These were audio messaging systems from IBM that allowed subscribers to the service to leave an audio message to a person or distribution list “on a person’s phone.” (Of course, the message was really on a server and played upon demand.) The UI’s only visual elements were an ordinary touch tone key pad circa 1980 and possibly a small booklet or template with the various command options. Primarily, the user was meant to hear Prompts for actions. 

The gradient part came in the fact that the user could speed up the audio more and more as they became more and more familiar with it. That variable speed applied to prompts and also to messages. A typical user would experience slow messages, then faster messages, then, still faster messages, and so on.

In another IBM project, we built a “Personalized Education System” that would allow IT personnel to build a “Custom Course” for on-line learning that could vary continuously in length and difficulty. However, while each individual user could choose length and difficulty, they typically did not experience a gradient in that regard. By analogy, some insects may prefer to chew on new growth while others may like more mature leaves. An individual insect only experiences one “size & tenderness” yet the plant taken as a whole provides a gradient. Similarly, if your fellow citizens ever get there act together enough for you to have a barbecue party again, you might offer up a range of options on how done you cook the burgers. In this case, we might say the BBQ service offers gradations though an individual burger is not a gradient. This isn’t strictly true. A well-done burger is fairly consistent throughout but a rare burger may be much more rare in the middle and charred on the edges. So, for that choice, there is a gradient of experience. 

Compared to the natural environment around me, which is positively thick with gradients, I don’t see (or feel) many gradients in any of the UI’s I interact with (games aside). The fisheye lens provides one way of introducing gradient into the UI. It produces, a kind of “Perspective Gradient.” 

It would be possible to put gradients into many of the visual elements of a UI. Would it make the interface look more like nature? Would it be more beautiful? Would it be distracting? 


Here’s a poem that illustrates a gradient of love. 

Wonder, wonder, who kept the wonder

Here’s a poem with a gradient of tension and suspense 

Late on the Interstate 

Here’s a story that exhibits gradient. 

As Gold as it Gets