User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

In a CMS backend dialog for controlling the dimensions of a content element (e.g. an image) including the possibility to adjust padding, borders and margins;

  • In a GUI, what is a good way to convey to the casual user the resulting dimensions of the element?

An approach would be something like that of Internet Explorer Developer Tools, as shown in the image below. However, perhaps such representation is better suited for advanced rather than casual users?

And what to do if the GUI needs to be useful for casual as well as more advanced users?

enter image description here

share|improve this question
Having developed and supported an app for casual users for the last decade I'd shy away from above UI as it would confuse the hell out of (at least my) users.. – cacau Feb 27 '15 at 10:32

You can provide a schematic drawing of the element, and use it as an interactive live preview: when the padding control receives focus, the padding on the drawing becomes highlighted and reflects the user's input in real time. Same for the other two controls.

share|improve this answer
So, in reality something along the lines of the IE solution as depicted in my question, but with dynamic highlighting depending on which controls the user is currently manipulating? Yeah, that might work as a way to convey these more "advanced" settings. – agib Apr 18 '11 at 7:25
@agib Yes, basically. If the element is too large, You can just use a corner and not the entire rectangle. – Vitaly Mijiritsky Apr 18 '11 at 8:39
What if you have, say, different right and left paddings? Then showing only a corner would be misleading - then you would have to shift between corners to get the full picture? Then, perhaps, it would be better just to show a "scale model" indicating the correct proportions? – agib Apr 19 '11 at 9:44
Well, yes, the more separate interactive elements you have, the more complicated it becomes. Frankly, I don't know which is better - completely switching the previewed element based on your focus (e.g. left/right corner), or showing a scaled model. Each is misleading and beats the purpose in its own way :). – Vitaly Mijiritsky Apr 19 '11 at 9:58
You could 'simplify' the design by having one representation of their choices, but center the active element in a cropping box. If they are manipulating the top border, then center (and highlight) the top border. That way you have one code path for modifying an arbitrarily complicated and large item. Scaling may also be appropriate if the cropping box is far smaller than the typical element being modified. – Myrddin Emrys Apr 12 '12 at 14:27

The Microsoft image is a useful one for refering to as a reminder of the properties but only for a user who was aware of Margin Padding Border beforehand. I don't think it provides enough information to novice users.

I would provide a seperate page that shows multiple examples (all on the same page) showing how the different style affects the content.

(Such as: 'This is an example with a margin of X', 'This is an example with padding of X'....) all using the same example image.

If you're feeling particularly generous then you could provide them an example image with 3 fields where they can enter different values for Margin, Padding and Border and show how that would affect the image on the fly.

share|improve this answer
In other words, you suggest a gallery of predefined margin/padding combinations? – agib Apr 15 '11 at 12:40
More-or-less, yes. with descriptions about how each one varies from the other. All on the same page so that the user can see how each property differs from the other. – JonW Apr 15 '11 at 13:16

Show their current selected combination in the center with variations, each a variation on ONE parameter, arranged around:

enter image description here

When they click on one of the variations, it moves to the center, and new variants are created. You'd be crazy not to show the user preview of the choice they are currently interested in, and the images that show what varying a parameter 'mean' should be made relevant to them by showing variants on their current choice.

More Detail:

The idea is borrowed/stolen from Photoshop's variation tool for colour balance fine tuning - an excellent interface pattern for fine tuning multiple parameters where a preview is useful.

Some creativity is called for in adapting it. The arrangement shown gives you variation, plus and minus, on three parameters. Adobe have extended it to 12 parameters by the highlights/midtones/shadows/saturation choice. As an indication of one way to adapt that idea, we could have choices that allow LRUD (Left/Right/Up/Down) to all vary together, LR or UD to vary together, or one of L,R,U or D to vary - catering to even the most eccentric designs.

The variation is for 'border control'. I wouldn't attempt to show variation in the 458px x 25px part of the sizing using this layout. For reasonable sizes of borders this allows us to keep the image for each variation a fixed size. Additionally, if only part of the border box is being varied, say parameters affecting the top left corner, we only need to show that part in the preview images.

share|improve this answer
+1 for the creative suggestion. I'm not sure, I quite follow you, hovewer. How do you imagine the one parameter variations to look, more specifically? And how would the user return to previous variations not currently in view? – agib Apr 18 '11 at 7:22
The variations on opposite sides of the centre are complementary. If one adds 2px to L and U, the one opposite subtracts 2px from L and U. So you can undo a step by clicking on the variation diametrically opposite. – James Crook Apr 18 '11 at 9:25
> You'd be crazy not to show the user preview of the choice they are currently interested in -- @James, this doesn't have to be a setting on a selected item, it can be a general setting for the website. I actually got the impression that that was the most common case. – Vitaly Mijiritsky Apr 18 '11 at 13:36
While interesting, I have my doubts whether such an interface is suitable for casual users. To them, it probably appears too overwhelming. – agib Apr 19 '11 at 14:45
Creative, but if the aim is the casual user I'd restrict it to one visualization at a time - this is just too much on the screen and can be source of confusion (just my 2c) – cacau Feb 27 '15 at 10:33

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.