0

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

Improve this question
1
  • 1
    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, 2015 at 10:32

3 Answers 3

Reset to default
2

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.

Improve this answer
5
  • 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, 2011 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, 2011 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, 2011 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, 2011 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, 2012 at 14:27
1

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.

Improve this answer
2
  • In other words, you suggest a gallery of predefined margin/padding combinations?
    – agib
    Apr 15, 2011 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, 2011 at 13:16
1

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.

Improve this answer
5
  • +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, 2011 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, 2011 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, 2011 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, 2011 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, 2015 at 10:33

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.