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.

I'm writing an application to create road signs (it won't be obvious to most people), and a certain interaction involves the user clicking an object on the workspace (in this case the text "Newmarket", labeled 5), and the window labeled (6) appearing to provide a means to edit data.

These objects have certain properties such as margin or padding (or in some cases corner radius and border width), and I don't know if the diagram I have in the bottom half of (6) presents the data intuitively to the user. Does this design work, or is there a better way to do it?

share|improve this question
Is using digits for positioning generally necessary? –  uxfelix Dec 6 '13 at 7:42
Margin/padding could be hidden/advanced mode for the user. Give the common options center horizontally/vertically, align, even the spaces... –  ColdCat Dec 6 '13 at 9:07
@uxfelix Each state makes signs with slightly different spacing values, which the sign designer (i.e. the user) would know most of the time anyway. –  Sammi Fernandez Dec 6 '13 at 15:56
add comment

1 Answer 1

up vote 6 down vote accepted

You could make the nature of the values you're presenting clearer by taking a lesson from the development tools currently available in modern browsers. These development tools often come with a way to inspect various elements on the page and view their border, margin and padding values. Often, you can open them with F12 - you can probably press that right now.

Using Firebug for Firefox and inspecting the very box I'm typing in write now, I can see this diagram:

The margin, border and padding values are placed in concentric labelled rectangles, each with their own unique appearance, so it's not hard to imagine what each value corresponds to.

The values are even editable by clicking on them:

Other development tools used in browsers take similar approaches.

  • IE11:

    enter image description here

  • Chrome:

    enter image description here

  • Firefox's native inspector:

    enter image description here

    (Possibly the least clear of the bunch, but each number is explained once you hover over it)

share|improve this answer
add comment

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.