12

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?

Improve this question
4
  • Is using digits for positioning generally necessary?
    – uxfelix
    Dec 6, 2013 at 7:42
  • 1
    Margin/padding could be hidden/advanced mode for the user. Give the common options center horizontally/vertically, align, even the spaces...
    – ColdCat
    Dec 6, 2013 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 De Guzman
    Dec 6, 2013 at 15:56
  • Who are your users? What do they do as a profession, what do they do all day?
    – Ken
    Feb 24, 2015 at 18:47

1 Answer 1

Reset to default
25
+50

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)

Improve this answer
1
  • Firefox's native inspector perhaps has the least text available up-front, however, it's layout is the most realistic, making the parts the easiest to understand without reading.
    – Danny Varod
    Feb 25, 2015 at 15:49

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.