0

I have an application I'm working on where a portion of the interface is very mouse-centric. You drag the mouse to create/manipulate regions, then assign properties to those regions. Below is an example of a current prototype.

Defining Regions

The problem I'm facing, though, is that after dragging to define the region, the user then would typically want to define the properties. This means moving the mouse to the upper left, clicking on the box they want to edit, then typing in the relevant information. To make this more streamlined, I'm trying to come up with a clean way to let the user immediately type the information without any additional clicking. I'm thinking of maybe bringing up a 'pop over' edit box immediately where the mouse cursor is, with focus to begin typing. They can then enter things like '100' or '50 to 130' and either press Enter or click elsewhere to close the text entry.

I have limited UX experience, though (I'm a software engineer by trade), so I'm curious to get feedback on a few items:

  1. Will bringing up a text box automatically like this be perceived as disruptive by the user? A sub-set of users might prefer to define all regions ahead of time, then select them and edit the properties later, for instance. This is a brand new part of the UI (multi-region was not previously supported), so I don't have any data to know how they'll react yet.

  2. How do I make it easy for the user to discover that they can type the values immediately rather than having to click elsewhere first?

  3. When the text box is up, how do I make it easy for the user to discover that they can type not only numbers, but also ranges like '50 to 100' (automatically creating a 'gradient' rather than a 'constant' fill)?

  4. I'm also considering letting the user type something like 'file' to bring up a dialog and load data from a file, for instance (corresponds to the little file icon button in the upper left.) Would it be too disruptive to have a dialog pop up immediately after typing? Should I require they press Enter first?

Some clarifications:

  1. The large yellow rectangle is a 'region'.
  2. The properties you enter apply to the entire 'region' (all boxes inside it.)
  3. My thought is that you can enter the values for the most relevant properties by typing a single line of text.
  4. You can ignore the well selector on the right (that's a way to switch between 'layers' and isn't relevant to this task.)

EDIT:

Here is a candidate 'pop-up' entry box. The gray text is a 'water mark' that goes away when the user starts typing. I'm thinking if the user presses Escape or mouses too far without typing, the popup goes away. They can get it back by clicking on the region again.

enter image description here

Improve this question
7
  • what does the drag-selection accomplish? Does it allow them to enter one text field and have it applied to all 6 selected items at once?
    – DA01
    Commented Mar 21, 2014 at 16:54
  • @DA01, the drag-selection creates the rectangular 'region' to which the particular properties will be applied. Typical flow I envision would be 'drag to create region, set properties, drag to create next region, set properties, etc.'
    – Dan Bryant
    Commented Mar 21, 2014 at 16:56
  • So, if a user selects those 6 as a 'region' are they then typing in 6 properties, or just one property that applies to all six?
    – DA01
    Commented Mar 21, 2014 at 16:57
  • @DA01, I only allow creating/selecting a single 'region' at a time. The large yellow rectangle is a 'region' above. The text entry I'm imagining would apply to the newly created region only.
    – Dan Bryant
    Commented Mar 21, 2014 at 16:59
  • 2
    Ah. Well, I think your 'show a text box upon selection' idea is perhaps the direction to go in. Some of your other ideas, though, appear to be turning the text box into more of a command-line UI. This isn't necessarily bad, but success may be highly contingent on the type of users using your app.
    – DA01
    Commented Mar 21, 2014 at 17:01

1 Answer 1

Reset to default
1

This is an old question and I am no doubt late in answering it. I would love to know which route you took. However, I have a suggestion which offers a split view for the content being dragged and the properties panel.

I assume that this functionality is akin to selecting certain image area while we crop. You drag with mouse and select the right area to work with.

enter image description here

Once the user completes the drag, I will pop in a record in the right side pane with the default text area selected with a cursor in it. If you want you can color code the dragged region with the properties window for that region.

I would not recommend using the top level controls for multiple regions as hierarchically if I am selecting a different region at the bottom, I do not expect the top control to change.

Improve this answer
1
  • 1
    In the end I did end up using something like this split view. All regions would show up in a list on the right side (as well as other global properties.) Those regions were edited with more straight-forward UI controls for choosing region type and entering parameters. Creating a region would generate a pop-up box with the 'console style' entry. Field reports from observing users when demoing the software is that they mostly ignore the options to enter gradients via the console entry and just use it for typing constant values (which are more common anyway.)
    – Dan Bryant
    Commented Mar 30, 2017 at 13:01

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.