Adjust transparency on layers

Question

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.

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

Answer 1

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: 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:

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:

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:

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.