Search Unity

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 opaqueAperture 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.Aperture panels
  • 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!

Comentários encerrados.

  1. I’m inclined to agree. I think transparency adds a lot to GUI, but I think that large transparent panels are pretty dreadful for the most part. It would probably be better if it were easier to do effects like frosting and blurring universally, but more often than not it just makes the GUI fussy and unusable. (delayed response, I only just read this blog entry! XD)

  2. @Lucas:
    Actually, I think it’s perfectly all right to use transparency for looking “cool”.

    The main goal of the default skin is to provide a skin which sort-of fits most graphical styles. Hence, I’ve made it as transparent as I can (so more of the background artwork can show through). This was meant for games and not for heavy UI – hence the heavy transparency.

    I assumed (correctly) that most people will actually make their own skins when they ship a game – hmm – that might just mean that the built-in skin sucks ;-) Oh well.

  3. Maybe you should also change the default skin of the unity gui then :)

    Bye, Lucas

  4. It’s great to refer back to the basics of psycho perception when unsure.
    The temporal component of GUI design is also ignored quite often to benefit visual marketting : fade in menus that make you wait and other “modal” effects.
    And what about hierarchical-heavy gui, hidden hierrachy and so on such you can contenplate in wizzard heavy products…

  5. Very nice info, we also had and have discussions about using transparency or not.
    My personal opinion is that transparency really actually sucks, it’s something which is used mostly because it is there and new not because it is useful.