Redesign editor to improve the writing experience [on Desktop]

[madrush (Marco V Morelli)]

I’m really interested in having good and conscientious writers on my Discourse site—writers who not only write well, but also enjoy the aesthetics of writing, and who feel that their own writing process is served by the aesthetics of the interface before their eyes.

By this I don’t mean beauty for beauty’s sake, or any kind of unnecessary frills. One thing that’s a nice about a simple, spiral-bound notebook, for example (for purposes of journaling or taking notes) it’s that is just so serviceable and unprepossessing. (A notebook that’s too nice is hard to write in.)

There is a functional simplicity, an aesthetic spareness, to a good notebook that does everything you need, which is essentially one thing: let you think.

A forum is similar. Its purpose is to work out our minds—with other minds.

I would like to imagine, for my community of writers, that we are writing together in a sort of “internet of notebooks.” But we get to write on each other pages, add stuff in the margins, and make connections between scraps of thought in a somewhat organized (by categories and topics and such) yet organic way.

One of the reasons I’m so excited about Discourse is that it seems to provide the background technology to accomplish this. However, I believe the actual aesthetic of the writing experience (to get back to my original point) can be improved. By “aesthetics” I also mean something like visual ergonomics.

For example: as I sit at my desktop writing this post, here is what I see:

Here’s what I like:

• not too many buttons.
• good width to composer
• default vertical space is good, but could give a little more height for breathing room

What I don’t like:

• My eyes have to look at lower left corner of screen, instead of front and center.
• Seeing double. I prefer a single pane to focus on by default.
• But if I hide the preview area, my line length goes twice as wide. Too wide for reading comfort.

Of course, I wouldn’t want to lose the context of the site, or the post I may be replying to, in the background; so I wouldn’t put the editor totally front and center, covering the entire screen (like Wordpress’ full-screen editor view). This is not a personal blog, but still a discussion space…

So my feedback boils down to that there needs to be a more elegant balance, in my opinion, between the editor (the writing and thinking I’m focused on) and the background content I’m engaging with (the “notebook”).

Maybe something like this could be workable?

The only thing I’m not sure of is how the preview would be appear. Maybe as an overlay?

Thanks for the great software! I’m enjoying learning how it works and conceiving the possibilities for my site.

[Tom_Newsom]

Having to context switch to preview is worse than sliding your eyes right, IMO. In the absence of wysiwyg, you have to have live preview if you want to keep the writing experience fluid.

[tobiaseigen]

I think this is quite good feedback, actually. WordPress does this well with its tabbed toggle Visual/Text view and I prefer it to the side by side view. The optional full screen mode to let you completely focus on your writing is nice too.

I’m willing to go along with the current setup personally and have gotten used to it, but new members usually find the side by side composer to be very confusing and don’t know where to look and click.

Simply defaulting to the view without preview (this could be an admin or user setting) and showing the composer, centered and same relative width, would already be a big improvement.

[mik01aj]

@madrush

The only thing I’m not sure of is how the preview would be appear. Maybe as an overlay?

Imho this would require a WYSIWYG editor. Gmail does it right:

Btw. There is a recent related topic:

Help us test the rewritten Composer

We’ve been using pagedown as our rich composer for years. Unfortunately, we’d outgrown it in a few ways: It’s very hard to extend to add features. It hasn’t been updated in years. It had implementations of features we didn’t like or found buggy like undo/redo. We forked the editor and removed them but that just left us with a lot of dead code. It had zero tests. Modifying it meant we could be taking a detour to regression town U.S.A. We made the decision to rewrite our composer us…

[madrush (Marco V Morelli)]

Ah, thanks! I was looking for that post. I had seen it in a digest, which is what got me thinking about the editor. But, I was searching for “editor” instead of “composer” so it didn’t come up to add my feedback there.

I agree that the Gmail design is an improvement. The only thing I don’t like about either Discourse’s pagedown or Gmail is having the editor/composer in a bottom corner of the screen. It seems to de-prioritize the actual act of ‘composing’.

My eyes want to look straight ahead, not down to the left or right, when I’m writing. The subtle effect is to make my mind feel like I’m “squeezing in” my thoughts in the corner, rather than expressing them openly and straightforwardly.

I don’t know if anyone else feels this way, or I’m just being picky. But generally, if I actually want to write something meaningful and thoughtful, I want to eliminate distractions and put the blank page or window right in front of my eyes.

On the other hand, I still need to write in context—in this case, in reply to a discussion thread. Therefore, I think it’s still important that the context be visible behind the composer. But I think it should be faded or receded somehow…again, to allow better focus on the act of writing itself.

[Mittineague]

@madrush

bottom corner of the screen

I have no problem with it being there, but I’m used to working with apps that have “panes”

@madrush

eliminate distractions

I don’t find the topic posts to be distracting. In fact I often rely on them being there for “reference” and to select - quotes from them. So some type of “lightbox modal” wouldn’t work for me.

[madrush (Marco V Morelli)]

If nothing else where to change, I think I would be a happy camper if, when I hid the preview window, the main composer window was centered while maintaining the same width (or even a flexible width I could drag to where I want it).

Kind of like my screenshot sketch above…

I do agree about a “lightbox modal” not being desirable. It’s useful to have direct access to thread one is replying to.

[simon]

Something like this? If so, it can be done with css.

[Mittineague]

I agree if it was able to be drag - drop it would be nice.
Even dockable would be OK.
(though probably more work coding up than it would be worth)

And having it fall in line with the post might work visually but the work area would be reduced.

I think having it dead center of the view-port would annoy me. My peripheral vision isn’t bad, but I’d rather not play “look behind”

I’m also not sure how changes in its position would affect having dev tools open (I’m at a web dev forum so I often do have it open) it can be a bit squeezed as it is now.

[madrush (Marco V Morelli)]

So maybe like this? Not dead center, but aligned with the stream of discussion? I think that would be good. (And maybe can be done w/ CSS?)

I’d just add the preview button in line with the editor buttons across the top, for less pointer distance (from the other buttons) to access.

[Tom_Newsom]

How about showing the preivew in-line with the discussion?
When you click Reply or Save Edit, all that happens is the border (or whatever styling you use to show that the post is being modified) disappears. Very smooth.

This could even work on mobile.

Maybe keep the “show preview” button in case you get lost while scrolling around the topic and need to get back to your post.

Only downside is that you can’t reference the rest of the topic and watch the preview at the same time. You have to scroll back to the preview to see the effects of your edits (should this happen automatically when you type?). But I feel this is a less painful context switch than jumping between compose and preview.

[codinghorror (Jeff Atwood)]

1. Does not work on mobile (where you would want a preview / tab button) so it distracts from the larger design goal

2. Requires that the “bottom” of the topic be in constant view

Not a fan

[sam (Sam Saffron)]

I am a fan of allowing a simple medium like editor as a user option, for simple authoring it can be fine

However it would have some interoperability issues, if people start with markdown it would have to remain markdown (eg wiki edits and so on)

[jeanj (Jean)]

I’d like to add a plea to not get locked up in the browser. While others are worrying about the toolbar and placement of the editor window in the browser, I have my local editing environment that’s more powerful and custom-configured than any browser box could be. Using https://github.com/docwhat/itsalltext I’m immediately editing locally — as long as the site allows me. All I need is a plain textarea input. This could be hidden as a small button. Discourse doesn’t offer this.

Whenever I save, my work in progress is sent to the site, and the preview and/or in-browser editor can update.

This way, it’s not down to the discourse authors to create the one true ideal editing experience. You can benefit from the work of the makers of WriteRoom, OmniWriter, ZenWriter, or for techie forums BBEdit, TextPad or Vim!