Thoughts on transparency
Semitransparent GUI is all the rage these days. This is usually not a good idea. Here, I’ll go into some of the details why transparency (mostly) sucks.
Transparency creates visual noise – our eyes are very good at edge detection, and having transparent stuff increases the number of edges that we have to process. Also, a lot of GUI has some sort of layering effect – either through shading, coloring or by using floating windows. Using transparency breaks this layering (in nature, very few things are partially transparent).
Who got the idea that having a large 50% transparent panel was a good idea? – you can neither see the panel nor the text beneath.Now, I said at the top that semitransparent GUI is ususaly not a good idea – let’s take a look at where it does work:
- Almost completely opaque – Aperture is probably the best example of this. Their panels are 95% opaque – so you hardly notice the transparency, they just pick up a tiny bit of color from the underlying pictures.
- Almost invisible – The iPhone has this neat trick where they add a soft darkening effect to the entire screen when a modal dialog pops up. You don’t notice the darkening bit, but it makes the modal dialogue stand out.
Sometimes as GUI designers, we can’t quite decide whether or not we want the user to see something – and so we are tempted to make them semitransparent. This is bad – we should make up our minds. Either something is there and can be manipulated or it is not. I got that wrong in Unity: When you have a move tool handle going into or away from the screen we want to disable it (dragging sends the object to infinity fast and it blocks the free move handle) – I was scared of confusing user with move handles popping in and out of existence, so I decided to “dull” them down to 50% transparency.This is NOT enough, so now I’m confusing users with handles that can sometimes be dragged and sometimes not.Great work, Nicholas. I’ll fix that later (and blag about it later still) – it’s back to coding for me.Happy Easter!