パネルの下でプレビューが生成されていることをユーザーに知らせる

I’ve been onboarding new users onto our Discourse site and taking note of how they are interacting and where they get tripped up.

One big pain point I noticed was that new users easily miss that a preview of their post is being generated to the right of the compose window because it’s completely covered up by the educational / yellow panel.


[Image Description: Screenshot of situation decribed above.]

For people new to markdown, something like
![Screenshot of Google Chrome (10-13-20, 2-49-45 PM)|690x197](upload://3OvVqVJ86INccIlpsOKv6ZbE98a.png)

or

[Write How We Communicate FAQ](https://hub.youthpowercoalition.org/t/write-how-we-communicate-faq/451/2)

especially when copied in from a different text, looks really odd and not intuitively like it would work because the preview isn’t showing. My new user copied something in and then immediately started editing out things like the * in *bolded text* . She never clicked esc in order to dismiss the help text and then discover that the odd characters actually resulted in the post that she wanted.

So, from a UX perspective, I think there should be something that makes it obvious that a preview IS being generated and the help text is dismissable. It’s not obvious enough right now.

「いいね!」 12

Tagging in @tobiaseigen because we started this conversation outside of Meta.

This was Tobias’s initial response

I did not realize that it does not go away by itself because I always immediately use the X to close it. If people do not realize it can be closed and don’t close it, then indeed the composer functionality is going to be super confusing and hard to use. If you could add a reply to How to disable the yellow panels for first two posts? with this feedback, we can work on improving it. One thought I have is to have a close button on the popup, and to disallow typing until it is selected? Or to close it automatically after a little while?

What are your ideas?

「いいね!」 5

How about positioning it horizontally above the edit / preview panes instead of over the preview pane?

「いいね!」 5

Maybe a little transparency for the panel background?
I would also place (another?) Esc x button on the left side of the panel, the one on the right side, usual location, is really far from the “eye action” :grin:

「いいね!」 1

Here’s a great write-up on potential solutions!

Could it be more of a modal that comes up from the bottom instead?


[Image Description: Screenshot from article that shows what I described above]

I wonder about this because I think there are a lot of places that put x’s on the upper right side. What I’d like is for the x and the esc shortcut to be a much darker color and for the x to match that x in a circle icon that I’ve come to expect. See the article above.

「いいね!」 2

I like the idea of it coming up from the bototm.

「いいね!」 3

I’m not sure how significant of an issue this is, because

  • there is a very clear close button and “esc” text in the traditional upper right area of the UI element

  • it only appears for your first two posts (and first two topics, if you are creating topics), anyway

Well you’re right, it’s objectively not a big deal, but I can testify that in some rare case where users are really not used to… any ui at all, everything is a mountain on the road to actually write something. The very subtlety of discourse that we all love can be perceived as frightening. I know my case is fringe but I had to convince some of my users to go from pen and paper directly to discourse without passing go! So yes, the panel was a (small) friction.
I think a two parts composer is a concept difficult (relatively of course) enough to apprehended, the panel “murks” a little bit the first impression (by hiding only the part on the right, for a short time, I agree).

Oh yes about that :thinking: I’ve always thought it was weird that I still see this panel, as an admin, after hundreds of posts and topics, but it never bothered me that much…
but I’ve just checked, the summary says I’ve created -313 messages ! :anguished: A negative count ?

I’ve watched new users miss this more often than not.

New users are the people who will be most confused.

「いいね!」 2

You’re also assuming these users will never post more than 2 times. Is that typically the case in your community?

We’re a small team at the moment and currently redesigning our forum, hence the 1:1 onboarding/user tests, so I’m not worried about our current users.

I think you’re underestimating how big a deal friction is for new users, though, especially for communities that exist only via a forum. Markdown can look very intimidating to people. I’m super tech savvy and I still rely heavily on the preview pane to know that I’m on the right track. People who are scared away from ever posting, well, of course they wouldn’t show up as users who post more than twice.

I changed my mind. I think it’s definitely worth trying if moving the x and esc to the left changes things for users. And, I’ve since noticed it on the left side for a lot more websites than I anticipated.

「いいね!」 3

The other thing you could do is turn this message off entirely; then new users would only see the preview. I believe that’s possible today via existing Discourse site settings.

「いいね!」 2

I’ll give this a shot and see what happens. Could you point me to the correct setting? I couldn’t figure out where exactly it lives.

「いいね!」 1

I think it’s educate until posts

「いいね!」 4

Thank you. I changed that setting to 0 and will see how things go.

「いいね!」 3

Let us know if that doesn’t work, since I think it is the easiest solution.

「いいね!」 1

Can definitely confirm the issue. Just spent 5 minutes looking for an answer and found this topic googling.

パネルを閉じる方法が分からないということはありません。しかし、問題はユーザーがパネルを閉じようとして、その方法が分からないということではありません。むしろ、ユーザーはそのパネルの裏に何か興味深いものが隠されていることを知らないため、閉じようとする理由がありません。そして、プレビューなしでマークダウン構文の編集に圧倒されてしまいます。

これはマークダウンエディタに慣れていないユーザーにとって潜在的な障害となる可能性があり、最初の数回の投稿はユーザーインターフェースの学習可能性が最も重要になる時期だと思います。

「いいね!」 4

エディタを初めて使用する際に「ジャストインタイム」の教育パネルを設置することも可能ですが、それこそがこのパネルの目的です。すでにここでは「ジャストインタイム」の教育が行われており、最初の返信を入力し始めたときに、参加時のマナーについて教育しています。

内容は以下の通りです。

{sitename}へようこそ – ご協力ありがとうございます!

  • あなたの返信は会話を改善するものでしょうか?
  • コミュニティのメンバーに親切に接しましょう。
  • 建設的な批判は歓迎しますが、人ではなくアイデアを批判してください。

詳細については、コミュニティガイドラインをご覧ください。このパネルは最初の2つの投稿にのみ表示されます。

これは.. 非常に、非常に重要なアドバイスです。私たちが提供する最も重要なアドバイスの一部です。さて、最初のオンボーディング中に「新規ユーザー関連をスキップする」を選択した場合、このアドバイスパネルはスキップされるべきです。これは、Discourse 2.6(2020年後半)で導入された設定です。

ユーザー設定としても利用可能です。

とはいえ、ここで私がやっているように単語を入力するだけで、通常はあまり(あるいは全く?)フォーマットを必要としないと思います。人々は今日、インターネット上のボックスに単語を入力することに慣れています。30年以上も前からそうです。

(実際、ほとんどの投稿における主な「フォーマット」は画像の追加であり、これは平均的な人々が毎日携帯電話やデバイスで行っていることです。ツールバーやエディタの「画像を追加」ボタンを押せば、世界の大多数の人がその方法を理解していると仮定します。)

「いいね!」 2

最近導入されたDiscourseサイトから来ました。このサイトは2つのレガシーサイトを置き換えるものです。まだ調整中ですが、最初に見つけた問題の1つはプレビューが見つからなかったことです。つまり、テキストを投稿するあらゆるまともなサイトには何らかのプレビュー機能がありますが、それを表示するボタンを必死に探していました。フォーラムユーザーとしては経験豊富だと自負していますが、黄色いパネルとそれに続く青いパネル(類似トピック)を閉じるという考えに至るのに数分かかりました。

ユーザーが長いコードやフォーマットが不正なURLを貼り付けることがよくあります。プレビューはすでに必要であり、特に初めてのユーザーにとってはなおさらです。これは単なる難解なアイデアとしてではなく、ユーザーからのフィードバックとして扱ってください。

(おそらく)簡単な修正は、ウェルカムパネルの幅を現在の3分の2に狭めることで、その下にあるプレビューペインを表示可能にすることです。そうすれば、パネルを閉じることが実際に何かを達成することになるのが明確になります。

「いいね!」 5