Help us test a new composer style

testing

(Kris) #1

We’ve deployed a restyled post/reply composer on Meta. If you notice anything strange or buggy, please report it here.

New

Old


Updated Composer Style
Show title, category and tags in composer preview for new topics
(Kris) #2

(Jeff Atwood) #3

Some internal design rationales for this change:

  • less “sea of grey” for a lighter, airier, simpler look
  • no need to take the full width of the browser
  • stronger emphasis on the primary input area (left) vs. the preview (right)
  • less borders, easier to theme
  • better arrangement of tag field, more integrated

Be sure to compare “New Topic” with “New Reply” as they are different scenarios. Plus mobile, of course.


(Sam Saffron) #4

A couple of visual fixes needed:


(Stephen) #5

Wrapping has gone all squirrelly:

Under the old composer the two panes maintain their width, on the new one the left pane will get periodically wider without explanation.


(Sam Saffron) #6

The grey background on the preview section makes quotes get lost

Compare:

To:

I think we got to keep the preview area white so it matches the colors that it will have in the stream


(Barry van Oudtshoorn) #7

Agreed – whilst I like the fact that it’s a more subtle way of differentiating the areas, it should match what’s in the stream as closely as possible.

Also, the “hide” button looks as though it’s part of the presence indicator: in the new design, I assumed that clicking it would show more details about the people replying, but it hides the composer.


(cpradio) #8

Yeah, I ran into that myself too.

The blue text for Create a New Topic looked like a link to me at first as well, so I had clicked on it to see what would happen (nothing does).


(Barry van Oudtshoorn) #9

Is this title even required? I’d say that it’s fairly obvious from context that you’re creating a new topic; the placeholder text for the title can be tweaked to make this clearer, perhaps. Maybe it could read “Type a title or paste a link for your new topic here”


(Jeff Atwood) #10

A few tweaks I recommend:

Changes I made:

  • I added spacing at the top. The top is WAY too tight as is… when looking at it, I feel like I am wearing a t-shirt that is one size too small. Yes fine I should lose some weight but my point stands. More breathing room is needed at the top for sure.

  • Having a grey background for preview is a bit problematic, as it buries quotes and is just more “stuff”. I think it’s fine to have it be clear / transparent and float. The “hide preview” text is right under it, so there’s no possible confusion as to what that area is. And it looks good to me, floating, no border needed?

  • I made “hide preview” grey to de-emphasize it. There is a fair bit more blue now with the blue bar, so we risk burying the blue reply button which is the primary action … there’s no way “hide preview” needs to be full blue drawing all that attention to itself, as we’ve definitely used up our blue ink attention budget.

(looking at this a bit more I am not sure the topic title should be in blue, either… and definitely not “Create new topic” text)

Overall I am a HUGE HUGE fan of this change, I think it looks so much better, and it’s long overdue!! :+1:


Move hide preview button to line between composer and preview
(Joshua Rosenfeld) #12

6 posts were split to a new topic: Move hide preview button to line between composer and preview


Move hide preview button to line between composer and preview
(Republic Wireless) #13

On a good note, it works properly with Grammarly now.


(Jeff Atwood) #15

Looking at this again, I do feel we should bury the blue both in the top (make “create new topic” or “reply to {blah}” grey), and at the bottom right (make “hide preview” grey). Mockup:

This is nice because now only the exact right two things we want to pop, actually pop:

  • the bar “hey pay attention the editor is up man! and you can resize me yay!”

  • the action buttons “hey, do you want to post this? or not?”

That looks really good to me @awesomerobot … dare I say super sweet


(Kris) #22

2 posts were split to a new topic: Restrict width of the composer when the preview is hidden


(Kris) #23

Thanks for the feedback so far everyone; I made a first round of updates based on some of the above


If title has been added, composer should only be minimised, not terminated
(Angus McLeod) #25

Nice! It looks classy :man_in_tuxedo:

The old grey slab felt a bit nineties PC

download

Also, the absolute positioning of the old composer was a bit tricky to work with. Nested flexboxes are an improvement.


(Sam Saffron) #29

One thing I am noticing is that the “expansion” effect is not super smooth, I see a fair bit of flashing and moving around when I move from collapsed composer to expanded. Is there any way to make it smoother?

The changes you made definitely improved this quite a lot!


(Jeff Atwood) #33

This video was captured on chrome desktop at 60fps, where are you seeing scroll bar flashes?


(Sam Saffron) #34

This happens only when composer is empty due to overflow-x: hidden. Ideally if we can start off with overflow: hidden on the text area and then remove it once expanded it will look much better.


(Sam Saffron) #35

One thing I would like improved is giving composing and preview more space on desktop.

We are not using entire browser width for preview like we used to do, even when the area used for composer is less wide than the post we are going to end up posting.

This all ends up feeling needlessly cramped.

I get to “full width” at 1800px width, previously we were there at 1460px, so this is forcing me to have much wider windows to avoid: