5

So I'm developing a word processor app in that also includes drawing tools. Nothing really crazy, just some simple vector drawing capabilities like node editing and layering. The problem I'm running into is that word processing tools and drawing tools call for very different workspaces and I'm not sure how to implement a switch for this. I'm developing on macOS.

The two modes have equal importance in the flow of this app, and users need to be able to freely swap back and forth between these modes.

So far I have this:Writing Workspace Concept One Drawing Workspace Concept One and to swap back and forth you click the mode switch button. However, I don't like this. I feel like the button down there just gets in the way.

I figured I could do what Adobe Lightroom does with tabs, something like this:Writing Workspace Concept TwoDrawing Workspace Concept Two but standard NSTabViews don't work that way, and it makes the window a lot larger for not a lot of functionality. Both of my ideas also look really ugly, at least if I use whats given in Interface Builder.

I guess what's really confusing me is attempting a good looking and functional UI that does my mode switching with standard Interface Builder elements. Any ideas on how to best accomplish my goals?

EDIT: I guess text editing is the primary mode people will be in, but there are some people who absolutely need the vector graphic editing part without having to leave the app, which causes problems for the text they're editing. Images won't ever be raster graphics, it's not precise enough for the diagrams users will be drawing, since the print resolution is very low. And if certain things don't fit on a page, they'd need to be able to switch back real quick to make a change, or to be more precise in positioning of either text or a diagram.

I also want this switch positioned somewhere that makes sense, since the toolbars will change depending on the editing mode the user is in. NSToolbar nowadays is always under the window title, and having an NSTabView underneath it causes a weird disconnect. As far as I know, it's not possible to place an NSTabView above an NSToolbar, not without breaking something at least.

EDIT 2: I just realized, which probably led to confusion and I'm very sorry about that, one image is wrong. It was the first "tabs workspace idea" image (the 3rd overall image) and it included a layers panel which only is supposed to be visible when editing drawings, not with text. Never draw quick images when you're tired I guess. I've replaced it with the correct image.

Improve this question
4
  • Is this a WYSIWYG tool or do you have separate editing and presentation views?
    – Andre Dickson
    Oct 16, 2017 at 3:51
  • This is a WYSIWYG tool, yes.
    – user107961
    Oct 17, 2017 at 0:45
  • The interface you are describing doesn't make sense to me. If it is a WYSIWYG tool then the problem of switching modes is not actually a problem. Users will edit the appropriate content as they come across it. Choosing to edit text or drawing will trigger the appropriate mode. I don't envision a use case when one would need to switch between modes otherwise. Am I confused? Can you clarify if I am?
    – Andre Dickson
    Oct 17, 2017 at 18:14
  • That's what I'm trying to figure out the best way to do. Use a toggle button to decide to edit text or edit drawings? Use tabs? I pretty much have 2 environments that I'm trying to tie together. 1 mode acts like MS Word, the other acts like Adobe Illustrator. The tools and functions will change to best suit these modes. How do I best allow people to switch between these "editing workspaces" (I really don't know if that's the best term for this)?
    – user107961
    Oct 18, 2017 at 2:56

2 Answers 2

Reset to default
1

Are the two modes really equal importance? Doesn't the drawing mode create drawings that are effectively embedded in the larger document of the app (correct me if I'm wrong). That is, you have an overall document open in the app, and you are creating and editing graphics within the document?

If so, what about lightboxing/overlaying the graphics editing UI when a graphic is being added/edited in the document?

For example, on this site, you can "insert" a Balsamiq mockup when composing an answer. These mockups can be quite large, even larger than the text content (so it's not about size when talking about equality) but they are still a part of, or a "child" of, a complete answer. They are lightboxed and take up the whole screen, but the user is aware of how they got into that mode (clicking a toolbar button while composing an answer) and what will happen if they close it (go back to composing the answer). Here's a screenshot- note how the underlying answer draft is still visible along the top of the screen:

enter image description here

Improve this answer
5
  • I would say they are equal yes. These aren't small diagrams, they can easily take up an entire page, since everything is low resolution. This overlay idea might work, but how would a user activate it?
    – user107961
    Oct 17, 2017 at 0:51
  • Have you ever added a Balsamiq mockup as an answer to a post on this site? I'm envisioning a very similar UI- it ends up being pretty much full screen (so not like a small modal dialog) but it's still contextualized/lightboxed since it's a "child" of your response you're drafting.
    – J. Dimeo
    Oct 17, 2017 at 15:40
  • I've never heard of that, and that seems like an interesting idea. Though would this work if I needed multiples of these window overlays or would this work if I only had one overlay?
    – user107961
    Oct 18, 2017 at 3:20
  • I added a screenshot and more context. Since they are modal, you would only ever have one active at once, but I understood from your question that the drawing UI would be complex enough that you wouldn't/couldn't be editing two graphics in parallel...
    – J. Dimeo
    Oct 21, 2017 at 2:27
  • This gives me a bit of an idea so I guess I will mark this as the answer.
    – user107961
    Oct 22, 2017 at 19:50
1

For those who are not familiar with NSTabView mentioned in the poster's question, it's a standard Tab view UI widget for Mac OS that looks like this:

Question: One big unknown is, what kind of use cases are you thinking of? I understand you said the Word Processor and Image editor both take equal priority, but aren't you still targeting users that are primarily word document creators who also want seamless integration with image editor? Or are you also targeting people that edit images AND need word processor as part of image editing workflow?

Either way, if you can tell us about typical use cases in which your target users would need to toggle back and forth, then we'd be able to provide more accurate answer, but I have a feeling you'd be able to answer the question yourself if you elaborate on this core value proposition.

From high level UI architecture point of view, there's nothing wrong with using NSTabView controller.

Improve this answer
1
  • My recent edit has answered some of your questions. I did originally just plan to use NSTabView, but NSToolbar kind of messed things up, and I do need that as well.
    – user107961
    Oct 15, 2017 at 21:42

Your Answer

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