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.

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.

share|improve this question
    
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 '12 at 12:18
add comment

2 Answers

up vote 3 down vote accepted

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

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

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

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

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

EDIT:

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

[1]
----------------
(-|-|-|-|-|-|-|-|-)

[1][1][2]
- --- --- --- --- --
(- --|- --|- --|- --|- --|- --)

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
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 '12 at 15:45
add comment

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 comma 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.

share|improve this answer
    
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) –  Antoine Lecaille Jul 4 '12 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. –  Antoine Lecaille Jul 4 '12 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 '12 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 '12 at 12:15
    
@André - good point there. –  ChrisF Jul 4 '12 at 12:18
show 2 more comments

Your Answer

 
discard

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.