7

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.

Improve this question
0

8 Answers 8

Reset to default
10

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

Improve this answer
2
  • Nice answer, Marielle.
    – gef05
    Jun 10, 2011 at 17:14
  • Kudos for taking the time to test this!
    – Vitaly Mijiritsky
    Jun 11, 2011 at 15:47
3

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.

Improve this answer
2
  • "Mask" is perhaps an okay term.
    – agib
    Jun 10, 2011 at 14:08
  • This is the exact answer I was about to give. Exact.
    – Ken Mohnkern
    Jun 10, 2011 at 21:27
3

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

Improve this answer
2

You could call ??? image border.

Improve this answer
2

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.

Improve this answer
2
  • 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, 2011 at 7:52
  • A live preview would be nice
    – vener
    Jul 5, 2011 at 7:47
1

background color -> "backdrop color"

background opacity -> "transparency"

color -> "border color"

padding -> "border width"

Improve this answer
1
  • 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, 2011 at 8:50
1

with danish translations

background color -> "shade color" (nedtoningsfarve)

background opacity -> "shade amount" (nedtoningsfaktor)

color -> "frame color" (rammefarve)

padding -> "frame thickness" (rammetykkelse)

Improve this answer
4
  • Thank you for the Danish terms! "Nedtoning" is a good bet - at least far better than "overlejring".
    – agib
    Jun 14, 2011 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, 2011 at 8:27
  • Perhaps shade amount/opacity could be "nedtoningsstyrke" in Danish?
    – agib
    Jun 14, 2011 at 12:11
  • Or "Nedtoningsgrad" ?
    – neoneye
    Jul 12, 2011 at 9:59
0

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.

Improve this answer
1
  • 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, 2011 at 7:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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