User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a web mapping application where we have a layer list, allowing the end-user to turn layers on and off.

We would like to add the functionality for the user to be able to adjust the transparency on each of the layers.

I was looking at Igor's answer on this Q, and was trying to think on how to incorporate that icon into a slider, whilst making best use of screen real estate.

Here is the current Layer List design:
- Bear in mind that the user controls what layers are in here, so the layer names could be longer
- The arrow is a clickable icon to make that layer selectable or not. enter image description here

Looking for some good ideas on how to allow the user to set transparency on each of the layers.

share|improve this question
Seems that PhotoShop would be a good one to copy. – DA01 Dec 12 '11 at 22:47
up vote 1 down vote accepted

To piggyback on @DAO1's comment, I concur that cribbing Adobe's layer tranparency approach might be a good idea. In this case, given that you already have up to four visual elements to that left of the labels: enter image description here it makes sense to avoid using the same spot for another inline control.

Adobe pulls out their Opacity drop-down to a permanent location at the head of the list, and makes it context-aware:

enter image description here

This allows you to avoid stuffing another control in the already-packed left-of-label area. You may also be able to compact this a little but removing the "Opacity" label and using an icon instead:

enter image description here

Another possibility, cribbed from Adobe (as usual), is to vertically align all of the controls (and potentially icons) into columns, confining the indentation to it's own column:

enter image description here

This makes the list of controls easier to scan and navigate than one that jogs left and right depending on the hierarchy. If you did choose to add another inline control (say, per @JOG's answer), this might mitigate the concern of additional clutter.

share|improve this answer

If setting the transparency is the only (or main) functionality the user can control other than move around the layers, then consider putting a text input or number input (HTML5) in the same row.

share|improve this answer

Here is an example of how I would see the opacity showing up. You can also go with something like adobe photoshop has for layer visibility and then that is a feature that appears only once. Meaning that your users will select the layer then somewhere at the top of the box you will have an opacity textbox with a slider attached to it.

If you want to introduce the transparency feature at a layer lever i craeted this little mockup for you.

enter image description here

share|improve this answer

I would use the transparency icon with an Opacity value (0 - 100) overlaying it.

Clicking the icon turns it editable, so the user can write an exact number, for example '50', and also unveils a small adjacent popup with a slider to adjust the value. Changes are directly reflected in the map.

I would position it immediately to the right of the (visibility) checkbox, as the two are closely related.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.