Make sure users know that a preview is being generated below panel

Seeing how there is a little white (yellow) space in the panel, why not simply add a line telling users to close the box to see the preview pane? That would give an additional nudge to hit ESC or the close button (X). Maybe Close this panel to see the Preview pane.

3 Likes

I got bit by this as a user of the Rust forums. That Discourse instance (wrong term?) has a blue “Your topic is similar to…” box which is styled similarly to this yellow “Welcome” box, but it doesn’t quite cover half of the bottom area. After closing that, the yellow one looking different led me to assume it was pushing the text entry area over (making it narrower), so I left it open at first. It never occurred to me that the formatted preview I was hunting for would fit perfectly underneath the yellow box.

Another idea to address this: add a sentence along the lines of “Hide this panel with the button in the upper right to see the formatted preview of your post.” to the contents. I’m guessing it’s customizable per instance, but adding the sentence to the default template would probably result in most instances having it appear.

2 Likes

Yes, please.

I’ll try this hack out!

You are not the average user. You’re building this product and have years of experience navigating technology. We are observing what is actually happening.

2 Likes

I would be very curious to see alternative visual mocks that leave enough of a visual hint that a preview is hiding behind. (maybe just narrowing the window a bit or limiting height a bit)

100% feasible in a theme component.

2 Likes

that’s what I thought too, 80-90% of the height/width of the preview part of the composer, aligned with it on the bottom right corner, but with the close X on the upper left side, so the eye could focus at the line under the panel and the X at the same time.

1 Like

I’d argue Facebook users have been using that site since 2010 at least and have a decade of experience navigating “how to type words in boxes on webpages” by now, though. The original Apple Mac manuals described how to use the mouse, but I don’t think computers these days include any instructions on how a mouse or touchpad works, for example…

As for the rest of the topic, these new user education panels only appear for your first two posts (and that’s only if you’ve not opted out of the new user onboarding), and they literally say that on them.

image

There’s also the word “esc” next to the “X” to indicate you can clear the education note.

image

So by your third post, the education panels won’t appear, however, the “your topic is similar to…” will appear (when creating a new topic) but only after typing enough for there to be a similarity match.

My suggestion is, if you’re worried about it for your users, turn down the education panels via site settings and/or hide them with CSS.

1 Like

Something like this?

For that I shaved 5% off the width. My CSS is very novice though, so it may not be a genuine solution. :slight_smile:

.composer-popup {
    width: calc(45% - 16px);
}
5 Likes