Subscribe to
NSLog(); Header Image

Drawing Application User Interface Question

So imagine a drawing application which maintains a library of your drawings on the left (kinda like iTunes) with a standard NSToolbar at the top which contains items for things like "Print" or "New Drawing" or "Import" or whatever... but which also ideally contains drawing tools - a rectangle, oval, and line tool, for example - as well as items that interact with the canvas, like "Zoom +" and "Flip" and so on.

Almost every application which has an NSToolbar contains things which you click and are then done. Some will show state - for example "Group/Ungroup" or "Mark as Read/Unread" - but none will show "selected" because, despite the name, the NSToolbar is not actually a great place for tools.

In this particular application the use of a floating toolbox (like most drawing applications) is not ideal or even necessarily possible. The drawing tools need to be contained in the main window, so Photoshop or Pixelmator type interfaces are not possible.

The only application I can think of which achieves this "mixed toolbar" type state is OmniGraffle, and I'm not entirely sold on how it looks. It uses an NSSegmentedControl (or something which functions like it) to show the currently selected tool.

One small addition, too, is that our tools will have a few options - for the purpose of this analogy let's say they'll have options to choose line thickness, color, and opacity or something. Not a lot of options, but a few, so they need a place to hang out as well.

The way I see it, there are three solutions:

  1. Do the toolbar the way we want. It may break with convention but it's just a few tools and maybe if we make them "glow" or look like they're pressed down (their click state, basically) we can convey that the tool is selected.
  2. Use an NSSegmentedControl type view in the toolbar like OmniGraffle.
  3. Embed the tools elsewhere in the user interface.

I'm currently leaning towards heavily investigating the latter.

Any other solutions? Possibilities? Ideas?

2 Responses to "Drawing Application User Interface Question"

  1. There are other apps that do this but which you don't notice as such: Preview spends its day mixing these types of selectable tools and actions all over the toolbar.

    You can place the tools lineup anywhere, as long as they have cognitive weight, that is to say look and feel special. Make a segmented control with a custom look that's focused on a) highlighting the tool and b) making the tool itself clear, and that should probably work.

    If you want something else near the tools, say in the toolbar, that's fine too, as long as they're easily distinguishable and preferably separate.

  2. VectorDesigner puts tools that would often be in a palette into the toolbar, and uses the selected state to let you know what tool is on. See The select, shape, text, path tools in their screenshot

Trackback URI | Comments RSS

Leave a Reply

Please abide by the comment policy. Valid HTML includes: <blockquote><p>, <em>, <strong>, <ul>, <ol>, and <a href>. Please use the "Quote Me" functionality to quote comments.