2

When displaying margin and padding values for a UI control to non-designers or developers how would you word 'margin' and 'padding'?

For example I have thought that the following might be better suited to a non technical audience.

Outer spacing: Above, Below, Left, Right

Inner spacing: Top, Bottom, Left, Right


Note: The wording will not be accompanied by a visual aid. Only the actual values e.g. Outer spacing - Above: 10

Addition: The context is a UI builder. Non designers and developers can put apps together by selecting pre-packaged controls. But there is the ability to alter some of the default styling. Margin and padding are some of those styles that can be altered.


Limitations:

The wording I use will have to work as stand alone. For example:

  • No visual aids
  • No accompanying explanatory description
  • No preview of changes
  • 1
    what's the context you're using it in? what are the users doing> – Midas Apr 20 '16 at 15:48
  • its a UI builder. they can change some styling on certain controls. im concerned padding specifically wont be obvious what it means. – Dave Haigh Apr 20 '16 at 15:50
  • I think you need to train your users by putting name (description). It would be best to ask your users. Without asking users everything would be guess work. This would probably be perfect for a coffee shop Q/A test. – Mayo Apr 20 '16 at 15:54
  • 1
    A UI builder without visuals or preview doesn't seem like a good idea... – PixelSnader Apr 20 '16 at 16:46
  • 1
    I think the comments and edits are deviating the question to something else, the OP didn't ask about implementation, but a very specific question which can be answered regardless of the implementation. – Devin Apr 20 '16 at 16:56
1

To answer your specific question:

no, it's not extremely technical, just somehow technical.

The use of this will strictly depend on your target and testing, nothing else. If this is intended for novices, then I can confirm based on our own testing that the concepts padding and margin are unknown or confusing, sometimes mixed between each other.

If you think an important part of your target base will be people with at least some knowledge, then padding and margin will be the accurate way to go.

While not exactly mentioning your specific case, see what Apple recommends as generic rules at iOS Human Interface Guidelines: Terminology and Wording. Also, MSDN has a similar approach, you can read at How to Create the Best User Experience for Your Application.

If you read the 2 documents above, you'll notice that your proposed approach

Outer spacing: Above, Below, Left, Right

Inner spacing: Top, Bottom, Left, Right

is probably right. Nevertheless, this should be tested, I see you have a lot of limitations on what you can do, so I hope testing is not one of those limitations as well!


PS: out of your specific question, yes, you should have some kind of visual aid, you should strongly consider it

PS2: you might be interested in MSDN's article Powerful and Simple as well

| improve this answer | |
  • +1 for this for focusing on my specific question and recognizing my limitations at present. Did you use different terminology after your own testing when you concluded that margin and padding were 'unknown or confusing' ? – Dave Haigh Apr 21 '16 at 7:50
  • No, we used the same wording, but we added visual aid explaining the difference, just like Firefox and Chrome Web developer does. If you're limited to just wording, your choice seems really smart – Devin Apr 21 '16 at 14:30
1

A picture is worth a thousand words.

How about illustrating what each of those items are and allow the user to adjust the numbers on the diagram? As they adjust that, also update the sizing on their actual UI so they can visualize how their changes are affecting the layout?

Example taken from Google Chrome inspector. enter image description here

| improve this answer | |
  • all great ideas if I had the option to get implemented. At the moment I have no preview of changes and no visual aid options. – Dave Haigh Apr 20 '16 at 15:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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