0

I'd like to get some feedback on an UI I'm currently assembling -
in a simple graphical editing app of mine users can edit properties of graphical objects like

  • their position,
  • angle and
  • other common attributes like colors.

The width and height fields are read-only and display the current dimensions of the elements bounding box, i.e. for a square rotated by 45 degrees it will show different values than for the same object rotated by 0 degrees.

For some objects - rectangles for example - users can specify the width and height parameters in dedicated text boxes.

These are always the actual heights and widths regardless of the current rotation of the object.

This is roughly how the UI will look like:

enter image description here

I've been fiddling with this issue for quite a while now but could not come up with a satisfying alternative..

Any advice on how to design this user interaction less confusing for the user is much appreciated!

Improve this question
4
  • one question: for the adjustable rectangles and text boxes, are they also resizable, rotatable and movable by dragging on handles (e.g. like Google Slides, PowerPoint or Photoshop)? Or are the input boxes on the right the primary interface for manipulating the shapes?
    – tohster
    Commented Feb 27, 2015 at 10:06
  • @tohster Yes, both via UI and parameters. Most people will probably eye-ball elements and use handles only while some might require/want precise dimensions thus using the width/height boxes!
    – cacau
    Commented Feb 27, 2015 at 10:07
  • got it. two more: 1. powerpoints/slides/photoshop have maximimized canvas by minimizing toolbars and input panels...is that important to you or are the proportions above roughly what you're looking for (i.e. 50% canvas/50% toolspace); and 2. how often would you guess users spend time on the toolspace (either looking at coords/dimensions or inputting) versus the canvas?)
    – tohster
    Commented Feb 27, 2015 at 10:11
  • @tohster Ah, no: It's actually just a side bar much like Illustrator. Most screen real estate is reserved for drawing canvas. As the sidebar also contains other things like color pickers, a list of layers plus additional information (and will be collapsable only as a whole) it's probably quite a central aspect of the overall UI.
    – cacau
    Commented Feb 27, 2015 at 10:25

1 Answer 1

Reset to default
1

You're right that there isn't a great mapping between the input boxes and the shape on screen.

But, I would guess that other UX priorities dominate the layout issue here because:

  • The x/y/rot/dimensions controls aren't used very often, so they don't need to be prominent (or even noticeable under regular use). They usually just need to be easily discoverable for the occasional situation where the user needs to fine-tune something or check dimensions.

  • Usually in drawing apps, you want to maximize canvas space and keep the toolspace reasonably small, to allow users to focus on the drawing. So you could lay out the dimension controls more intuitively (e.g. use a minimap or facsimile of the rectangle) but this would take up more space, which is not worth the space it costs for a control that is used far less often than, say, color palette, layers, pencil, etc.

So, even though it appears to violate good mapping design, it may actually be good UX design to scale down the dimensions controls so they are readily discoverable if users need them, but otherwise fit nicely onto the bottom part of a sidebar, or horizontally (as in photoshop) across a toolbar. For example:

enter image description here

This lacks the intuitiveness of a better mapped control, but could be totally appropriate because it occupies small space and draws minimal attention, which is perfectly proportional to its rare use.

I've consolidated the width/height into a 2 input boxes instead of 4, where the input is read-only if the rectangle can't be edited (I'm not sure why you had 2 separate sets for output and for input, but obviously you could leave it that way too).

BTW, if you really want to spend the space and time on a mapped control, the following one from Chrome's CSS browser is thoughtfully laid out for describing different dimensions for an HTML box.....it would be easily adapted to a mapped control for a PowerPoint rectangle or text box:

box model

Improve this answer
1
  • Thanks for the exhaustive response! The type of user I'm dealing with is really quite casual and not your typical computer user so I'm aiming for a friendly, discoverable and intuitive UX. In this regard space constraints are less of an issue - and I totally like the mapped control approach! Couldn't be more obvious what parameter is edited. I'll give that a try - Thanks!
    – cacau
    Commented Feb 27, 2015 at 12:07

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