Transparency in Interface Design

Transparency is a very useful effect, and actually quite simple.  There are many different ways to apply it, and it has a variety of uses, from simply enhancing the visual style of the interface through to serving a specific purpose.  For example, various degrees of transparency may be used in a game interface to indicate the state of something.

It is important to be aware that when we talk about transparency used in designing a web page interface, there are different contexts in which the word could be used, and it can mean entirely different things within each of those contexts.  The most usual context is when we are talking about something that has noticeable transparency, which actually means it is not in fact transparent.  The opposite of noticeable transparency is true transparency, and this of course is transparent, as the name so clearly indicates.

Confusing?  Well, when something is truly transparent, it’s not noticeable at all.  It’s there, but you simply can’t see it.  There are physical implications to this.  All HTML elements have truly transparent backgrounds automatically applied until you manually over-ride this default behavior.

If you created an empty DIV with a fixed height and width and placed this over the top of some other content, the user would not see this DIV, but they could be affected by its presence even though they don’t know it is there.

Its effect would be to prevent the user being able to select any of the underlying content using the mouse, including not being able to directly click links.  Even though the user can’t see it, it is still there like an invisible force field; a physical layer between the content and the user.

The structure of every website: a stack of layers.

Strictly speaking, it’s not just the website that is part of this layering scheme.  The browser itself, and indeed everything else that appears on a computer screen, is positioned somewhere in a stack of layers, and none of them are real.  It’s all an illusion perpetrated by sending streams of carefully combined sets of high and low voltages through a series of electronic gateways millions of times per second.

The marvel of this electric wizardry is that some very clever people have designed hardware and software that can take all these rapidly moving electrons, interpret their voltage combinations, and then abstract these into an entire artificial universe in which we can make possible literally anything we can imagine.

When you use your mouse to click on the border of a window and drag it to a new position on the screen, you’re not really doing anything of the sort.  What is really happening is that you perform a series of physical movements in the physical universe which sets in motion a series of electronic events in the electronic universe, the ultimate result of which will be that the computer’s GPU will cause certain pixels on the screen to receive different voltage combinations to what they previously had.

These pixels are switched on and off many times each second, with all those voltage combinations being sent to precisely the right place every time.  Thus is created the illusion that you have grasped an electronic object and moved it, while in reality all you have actually done is moved the mouse a few millimeters on your desk top.

To us it appears that the object moved to be on top of something else, but what really happened was a mathematical formula altered the values of the pixels.  The operating system keeps track of what is happening in all the virtual layers it creates (at least one layer per application window) and stores the information in memory.

The browser window can be thought of as a galaxy in the electronic universe, and each tab that is opened in the browser is an individual electronic world within the galaxy.  Just as our world has certain “laws of nature”, so too does a document appearing in a browser tab.  These laws are written in the Document Object Model template, known more familiarly to developers as “the DOM”.

In a slight over-simplification, we can say that the DOM provides instructions to the browser about how to set up all the layers in the document and the objects that will be placed within these layers. Visually, this is usually represented as a tree-like structure, where each physical layer creates a new branch.  We have, for example, a document layer (which forms the top branch), a HTML layer, a BODY layer, and so on down to individual elements.  This can all be represented in three dimensions using an application like Tilt.  Every visible object in every layer has a fully transparent background unless an explicit instruction is provided which modifies this condition.

For UI design, true transparency has limited application

Even so, it’s something you need to be aware of.  Otherwise parts of your interface may not work properly.  This problem is becoming more common in the age of responsive design, as it can be easier for a transparent object to be inadvertently placed over another object when the screen is resized.

In the early stages of UI design, borders can help

Typically most elements in a user interface tend to be borderless, however due to the issues posed by background transparency, it can be a good idea to give every element a border, which will help you visualize the true dimensions of every element.

There are tools you can use in the browser to do this, but the problem with them is that the borders they create are too small, so you can’t see elements very distinctly.  The more reliable way is to temporarily add a universal rule to your style sheet that goes something like this:

* {border: 2px solid #ff0000;}

This will place a red border around every element (obviously you should change the color if you have a red background or if you have red borders around things already).  One thing to be aware of is that any border instructions you declare in your style sheet subsequent to this one will be applied in preference to it.  Don’t forget to remove your universal border instruction before publishing your site.

Noticeable transparency is more interesting and useful

No disrespect to true transparency, but noticeable transparency is all anyone cares or talks about.  This is transparency that has a visual effect upon your design.  It tends to work best when it’s very subtle, but how you actually apply it depends on what the intention of using it is.

There are two methods for creating noticeable transparency

Technically there’s also two other unofficial methods, but since they involve cheating, there’s not much point in talking about those.  In this article we’ll stick with valid CSS methods.

The two methods are used to achieve similar results, but they do it in different ways and with different effect.  When you apply these methods, you will be adjusting either the alpha value or the opacity value of an element.  It may sound like the same thing, but it’s not, as we shall see.

Adjusting the opacity of an object is imprecise

When you modify the opacity of an element, the whole element is affected, and you don’t have control over the individual components of the element.  It will also affect any child elements placed within the element that is having its opacity value changed, which is a most important thing to remember.

  • This aspect is useful when you don’t need precision.  Examples would be:
  • A stand-alone empty element with a fixed size that exists in a Z-layer on its own
  • A situation where you want an element and all of its contents to appear washed out
  • When you intend to use a script to incrementally adjust the opacity, as a fade in or out
  • When you want to create something akin to a switch

The latter purpose is used extensively in the MCDU Emulator project, as you can see in the code fragment provided below:

doc112img01

As you can probably deduce, each of these values concerns the switched state of lights which appear upon the emulated device.  A value between 0.1 and 0.25 indicates that the light is in its off state, and a value of 100 indicates that it is in the on state (actually it isn’t necessary for the value to be 100, a value of 1.0 would be perfectly sufficient, however it is traditional to use an exaggerated value in situations like this).

You can see the effect of this code in the animations below:

doc112img02

doc112img03

The thing to notice in the first example is that there are two different types of opacity animations occurring.  Animation of the status lights along the top row, as defined in the code example, requires that the text is made less opaque but not completely transparent.  This maintains the realism of an electronic device.  The animation of the text which appears directly on the MCDU screen, however, requires that the text be completely erased.

In the second example animation, you can see more clearly the way the text still retains some partial visibility when switched off.  Notice also the left annunciator panel status lights (which remain off in this example) are two different colors, with the FAIL annunciator warning in amber and the FM annunciator in white, as would be the case on the actual device.  The final result is a fully interactive web application based almost entirely on the principle of CSS3 transparency rules.

doc112img04

As mentioned earlier, this is very different from true transparency, and it is just an illusion.  Remember that everything appearing on the web page is stacked in a series of layers (called the Z-order), although of course these are abstract layers rather than physical ones.

The browser simulates the idea of physical layers normally by painting the pixels of the top layer at maximum brightness, and any obscured parts of a lower layer and minimum brightness.  This is exactly the way things work in the physical world.

If you place a playing card upon a black table, you will not see any trace of the black table showing through the card, even though the fact that the table surface under the card is black has not changed in any way.  It works that way because playing cards are fully opaque.  If, on the other hand, you placed a very thin  piece of paper on the same table, there is a chance that you may see the color of the underlying surface showing through.

When we alter the opacity of an element, the browser simulates real world translucency effects by applying a simple mathematical formula.  If the reduced opacity element is on the top layer, the browser will mix the value of the luminosity of the affected pixels on that layer with the luminosity of the pixels which appear on the layer below.

doc112img05

In this example, we have two fully opaque boxes, and there is no mixing required.  The yellow box acts exactly as it would in the physical world by obscuring any view of what is directly under it.  The algorithm that handles opacity doesn’t work by directly mixing the pixel colors.  Instead it calculates the median value of the pixels, which can be written as (a+b)÷2=v

doc112img06

Notice that the border of the yellow box is less opaque as well, because adjusting the opacity value in this way affects the whole element, not just its interior.  Something else to notice is that the translucency effect is only apparent when you have something behind the partially transparent object, otherwise it merely appears to be a pale colored opaque object.

Understanding how we arrived at this particular shade of gray can be exemplified by using the color wheel: 

doc112img07

The wheel on the left is the value of the first box, the middle wheel is the value of the second box, and the wheel on the right is the value produced where the two colors overlap.  As you can easily see, the result is precisely half way between the two foundation colors. It works this way because the computer uses additive mixing.  This same method works for any two colors you place this way.  For example, here is what happens if the second box is orange instead of yellow, with the opacity set to 50%:

doc112img08

It’s a little less simple to see this time, because the colors are not polar opposites, but if you look at the position of the third color, you will see it is half way between the first two colors, yet not a straight mixture of those colors (imagine the rings being stacked on top of one another).

Invoking this type of transparency effect is done in CSS by adding code similar to the following:

/* creates a 50% opacity, in both modern and most legacy browsers */

.translucent50{

filter: alpha(opacity=50);

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

The only reason for issuing multiple commands is to support legacy browsers.  If you don’t want to do that, then you could just issue the last of those commands, as shown here:

/* creates a 50% opacity in modern browsers only */

.translucent50{

opacity: 0.5;

}

The second method for creating partial transparency gives you full control over everything, but at the cost that it requires you to create a separate instruction for each part of an element (color, background-color, and border-color).  Children of elements that you work this magic on do not inherit the transparency from their parent.

The invocation is painfully simple.  All you need to do is indicate a lower alpha value in your color instruction.  Because of this, it only works on modern browsers that are fully compliant with existing CSS3 standards.  If you want to support older browsers, you should provide a graceful fallback with a CSS2 color instruction issued before the CSS3 instruction.

In this example, you can see 4 div elements with different types of opacity modifications:

doc112img09

In the first panel, the opacity of the div is set to 30% (for simplicity, we’re only considering modern CSS3 compliant browsers here), and all the colors are set to red (255,0,0,1.0).  Only the color instructions for the elements are being examined, so other properties are not shown, although to duplicate this example, you’d need to include those other properties (width, height, float, padding, margin).

doc112img10

As you can see, the opacity instruction washes out the red color and also washes out the text that is placed on top of it.  In the second example, only the border is affected by transparency:

doc112img11

The border color being the same color as the rest of the box means we can’t actually notice the transparency.  We’d only see it if the border was much thicker.  It just looks like an ordinary red box div with black text.  In the third example, only the background color is modified:

doc112img12

In the last box, only the text has transparency applied:

doc112img13

What the above examples all prove is that transparency is not very practical when applied to objects which will appear on top of a plain background.  How could a user be impressed by a “transparent red box” which simply appears to be a perfectly normal opaque pink box?  But place any kind of pattern or decoration behind a translucent area and the use of transparency is then readily apparent:

doc112img14

That concludes our basic introduction to transparency.  In a future article we’ll take a look at some more advanced practical applications for transparency in web page designs.

Emma Grant

Emma Grant is a professional freelance content writer from Ireland. Over the past three years she has travelled the world while running her business from her laptop. You find her at www.florencewritinggale.com

Leave a Reply

Your email address will not be published. Required fields are marked *

Rating *