For the needs of a line drawing program, I need to edit an array of integers. The only constraint on the array is its length, which has to be even, and greater or equal to two. The solution I have for now looks like this:

The [ x ] stands for editable text boxes.

Initially: ( this one represents the default dashed line: - - - -)

[ 1 ] [ 1 ] [ ] [ ]

User has filled one of the two empty fields: (inconsistent state)

[ 1 ] [ 1 ] [ 2 ] [ ]

User has filled the remaining field:

[ 1 ] [ 1 ] [ 2 ] [ 2 ] [ ] [ ]

Is this correct, or is there a better way to do this ?

Edit: I don't want any form of markup language as suggested in one answer.

  • Sounds to me you already have a form of markup language: a list of an even number of integers to represent a line... You might want to re-think using that way of creating lines to begin with.
    – André
    Jul 4, 2012 at 12:18

2 Answers 2


So, am I understanding your situation correctly when I assume that …

- - - - - - - 
--  --  --  --
- --  - --  - --  

I guess it's necessary to provide pairs because this should also be possible:

-- -- -- -- -- 

First of all, I don't think it's necessary to require the user provide a pair of values. If the number of values is odd, then the last number can be assumed to be meaning an even dash/gap section, so that …

[1] => [1][1]
[2][2][1] => [2][2][1][1]

This is also how it's implemented in Adobe Illustrator. Quite frankly, I can't think of a better way of doing this.

Adobe Illustrator's Dashed Line UI


Another way of allowing for uneven fields would be to just repeat the sequence as provided in the inputs, so that …


- --- --- --- --- --
(- --|- --|- --|- --|- --|- --)

While I think this approach would be less intuitive, it would – on the other hand – add the flexibility of creating offsets at the beginning of the line (as seen in the second example). It might help to preview the resulting sequence near the inputs, like so:

right: Suggestion #1, current Adobe Illustrator approach left: Suggestion #2, slightly more flexible


download bmml source – Wireframes created with Balsamiq Mockups

  • I do like your #2 suggestion. Seems quite intuitive (to me at least). Ultimately, I think it's more important to show immediate feedback on the look of the dashed line, in a similar way that you have in your examples, it would help the user learn what each box is doing.
    – Chris Kent
    Oct 2, 2012 at 15:45

A simpler way to do this would be to have a single text box and get the user to input a series of numbers separated by spaces:

1 2 3 4 5 6 7 8

This has a number of benefits:

  • You can quickly split the string on the space (or other delimiter) to determine how many elements there are and raise an error if there are an odd number of values.

  • There are no constraints on the number of pairs of values the user can enter.

If you really want to use separate text boxes (for syntax and error highlighting as you mention) then convert each box to take a pair of numbers separated by a space:

[1 2] [3 4] [5 6] ...

Thus there will always be an even number of values and you can use your highlighting scheme and also raise an error if any box contains anything other than two numbers.

  • One of the reason why I want to use individual fields, is because I like to use the background color of each fields to notify errors to the user, or to explain the role of each number (white for line, light gray for hole, in my example with the dashed line)
    – alecail
    Jul 4, 2012 at 11:44
  • I don't want the user to type comas or any other form of markup characters. Hence the creation of edit boxes at runtime I mentioned in my question.
    – alecail
    Jul 4, 2012 at 11:56
  • @Antoine - in that case you have to go to with what you've got. Though you could use a space as a separator. Does that count as a "markup character"?
    – ChrisF
    Jul 4, 2012 at 11:57
  • 1
    Commas can be tricky in any case. They are used as decimal separators in a significant part of the world.
    – André
    Jul 4, 2012 at 12:15
  • @André - good point there.
    – ChrisF
    Jul 4, 2012 at 12:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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