Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Suppose we have a UI where the settings of a lightbox showing an image can be adjusted. It might look something like this:

enter image description here

By "background" in the mockup above is really referred to overlay, but that, we believe, is a poor term to convey to the average user of the system.

Conceptually, the image also has a background (with the color white - #FFF in the mockup above), but obviously one can't use the same term for two different things.

To make things even more fuzzy we have a padding property, which is really how much the image background is larger than the image itself (the same distance in all four corners of the world).

The illustration below tries to convey the current labeling scheme:

enter image description here

My question is this:

  • What to label the image background (pointed out by the arrow with "???" in the illustration above)?

By just writing "Color" as in the mockup, we aren't being specific enough, I believe.

share|improve this question
add comment

8 Answers

I'd probably try the combination background colour/opacity for the overlay and image border for the part where the ???-labeled arrow points. My main reason is that I suspect that quite a few users will confuse image background with the background inside the photo (the black parts in your example).

You can test this quite easily. Find a few random people, show them your image without the labels and ask them to point at the image, the image background, the overlay (this term will probably be unknown to many people), etc. Or work the other way around: show them your picture and ask them how they would call the area you point at.

--

Okay, here are some quick findings (click test results). 10 people were asked to 'Please click at the image background' in a screenshot. 6 people clicked inside the photo, 4 people clicked at the overlay and nobody clicked at the white area around the photo. With this in mind, I would really try to find another term than 'image background' for the white part.

plasma map for task 'click' image background

share|improve this answer
    
Nice answer, Marielle. –  gef05 Jun 10 '11 at 17:14
    
Kudos for taking the time to test this! –  Vitaly Mijiritsky Jun 11 '11 at 15:47
    
Thank you for your effort, Marielle :) –  agib Jun 14 '11 at 8:00
add comment

I would call the image background image background.

I would also rename the area you currently call background to something like page mask, so you'd have page mask color and page mask opacity.

Edit After seeing some of the other answers (Marielle's in particular), maybe call the image background image surround or image frame.

share|improve this answer
    
"Mask" is perhaps an okay term. –  agib Jun 10 '11 at 14:08
    
This is the exact answer I was about to give. Exact. –  Ken Mohnkern Jun 10 '11 at 21:27
add comment

Call it the picture frame. It's analagous to an everyday object.

share|improve this answer
add comment

You could call ??? image border.

share|improve this answer
add comment

What about a legend, perhaps interactive so that it shows a preview of the settings?

Even when you think you've found the perfect metaphorical terms, or even blatantly explicit descriptions, users will still confound you.

share|improve this answer
    
I follow you. To some extent it's a naïve delusion to think that such thing as a "perfect" labeling exists. No matter what label is chosen, it might still seem ambiguous to some people. Nonetheless, I think certain terminology is better than others, when measured against context and user profiles. For this reason, yes, some kind of preview would be beneficial. –  agib Jun 14 '11 at 7:52
    
A live preview would be nice –  vener Jul 5 '11 at 7:47
add comment

background color -> "backdrop color"

background opacity -> "transparency"

color -> "border color"

padding -> "border width"

share|improve this answer
    
Backdrop might work in English, but in Danish (which has a far smaller vocabulary), backdrop and background translates to the same thing. Regarding transparency, it is really the reverse of opacity, but for some odd reason opacity seems to be more widespread than transparency. If we were to use transparency we would break this "unwritten" convention. –  agib Jun 14 '11 at 8:50
add comment

with danish translations

background color -> "shade color" (nedtoningsfarve)

background opacity -> "shade amount" (nedtoningsfaktor)

color -> "frame color" (rammefarve)

padding -> "frame thickness" (rammetykkelse)

share|improve this answer
    
Thank you for the Danish terms! "Nedtoning" is a good bet - at least far better than "overlejring". –  agib Jun 14 '11 at 7:53
    
I'm not sure about "faktor", though. Opacity doesn't translate well to Danish ("uigennemsigtighed"), but seems to be more widespread than "transparency" ("gennemsigtighed") in English. –  agib Jun 14 '11 at 8:27
    
Perhaps shade amount/opacity could be "nedtoningsstyrke" in Danish? –  agib Jun 14 '11 at 12:11
    
Or "Nedtoningsgrad" ? –  neoneye Jul 12 '11 at 9:59
add comment

The design you proposed is implementation focused, with UI controls directly corresponding to settings in your code.

It is better to be user-goal focused, and match what your typical user wants to do. In this case, it is making the frame/background combination look good with the given image. You could provide several settings presets and let the user choose from the thumbnails with a single click.

This is similar to the effect galleries in Office 2007+ (but it would focus on the frame/background, not the picture itself):

enter image description here

Of course, if your app is aimed at professional designers who need pixel-level control, the detailed options may still be necessary, but even then it may be better to have the primary task-focused UI and have parameters as advanced options.

share|improve this answer
1  
To a large extent I agree with you. In reality, most people aren't interested in adjusting colors controls or moving pixel sliders. They just want to arrive at good looking results, quickly. In this case, however, I think, pixel level control is sound design. –  agib Jun 14 '11 at 7:58
add comment

Your Answer

 
discard

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.