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

Discourse サイトの新しいユーザーのオンボーディングを行っており、彼らの行動やつまずきポイントを記録しています。

大きな問題点の一つとして、投稿のプレビューが作成 compose ウィンドウの右側に表示されることに、新しいユーザーが簡単に気づかないことが挙げられます。これは、教育用の黄色いパネルによって完全に覆い隠されてしまうためです。


[画像説明: 上記の状況を表すスクリーンショット。]

Markdown に不慣れな人にとって、以下のような記法
![Screenshot of Google Chrome (10-13-20, 2-49-45 PM)|690x197](upload://3OvVqVJ86INccIlpsOKv6ZbE98a.png)

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

は、特に他のテキストからコピー&ペーストした場合、非常に奇妙に見え、機能するとは思えないほど直感的ではありません。なぜなら、プレビューが表示されていないからです。私の新しいユーザーは何かを貼り付けた後、すぐに *bolded text* のような * などを削除し始めました。彼女はヘルプテキストを閉じるために esc キーを押すこともなく、その奇妙な文字が実際には望んだ投稿を生成することに気づきませんでした。

したがって、UX の観点からは、プレビューが生成されていることと、ヘルプテキストを閉じられることを明確に示す何らかの仕組みが必要だと考えます。現状では、それが十分に明確ではありません。

「いいね!」 12

@tobiaseigen をタグ付けします。この会話は Meta 外で始まったためです。

Tobias の最初の返信は以下の通りです。

すぐに X をクリックして閉じる習慣があるため、それが自動的に消えないことに気づいていませんでした。もし他の人々が閉じられることに気づかず、閉じないままなら、確かに作曲機能は非常に混乱しやすく、使いにくくなるでしょう。このフィードバックを How to disable the yellow panels for first two posts? の返信として追加していただければ、改善に取り組むことができます。私の考えとしては、ポップアップに閉じるボタンを追加し、それが選択されるまで入力を禁止するというのはどうでしょうか?あるいは、少し時間をおいて自動的に閉じるようにするのはどうでしょうか?

皆様のご意見をお聞かせください。

「いいね!」 5

プレビューペインの上に配置するのではなく、編集/プレビューペインの横に水平に配置するのはどうでしょうか?

「いいね!」 5

パネルの背景に少し透明度をつけてみてはどうでしょうか?
また、パネルの左側に(もう一つの?)Esc x ボタンを配置するといいかもしれません。右側にある通常の位置のボタンは、「目アクション」からかなり離れていて不便です😁

「いいね!」 1

素晴らしい解決策のまとめ記事があります!

https://medium.com/tap-to-dismiss/tap-to-dismiss-fbc66bdf500a

あるいは、下部からモーダルとして表示する形の方がよいでしょうか?


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

この点について疑問に思っています。なぜなら、多くの場所で × が右上に配置されているからです。私が望んでいるのは、xesc ショートカットをより濃い色にし、x を私が慣れ親しんだ円の中に × があるアイコンと同じデザインにすることです。上記の記事をご覧ください。

「いいね!」 2

ボトムから上がってくるというアイデアが好きです。

「いいね!」 3

この問題がどの程度深刻かは確信が持てませんが、

  • UI要素の右上という従来の位置に、非常に明確な「閉じる」ボタンと「esc」のテキストが表示されていること
  • いずれにせよ、最初の2つの投稿(およびトピックを作成する場合は最初の2つのトピック)にのみ表示されること

からです。

確かにその通りです。客観的に見れば大した問題ではありません。しかし、UIに全く慣れていないユーザーがごく稀に存在するケースでは、何から始めればよいかわからず、すべてが障壁のように感じられることがあります。私たちが皆愛するDiscourseの非常に繊細なデザインでさえ、彼らには恐ろしく映る可能性があります。私のケースは極端かもしれませんが、私のユーザーの中には、紙と鉛筆からいきなりDiscourseへ移行し、中間ステップを踏まないように説得しなければならなかった人もいました。ですから、あのパネルは(小さな)摩擦要因でした。

2段階のコンポーザーという概念は(相対的に当然ですが)理解するのが難しいものです。パネルは最初の印象を少し曇らせます(右側の部分を短時間隠すためですが、同意します)。

ああ、それについてですね:thinking: 私は管理者として数百の投稿とトピックを作成した後でも、まだこのパネルが表示されるのがいつも不思議に思っていました。しかし、それほど気にはなりませんでした…
しかし、今すぐ確認しましたが、サマリーには「-313件のメッセージを作成しました」と表示されています!:anguished: マイナスの数値?

新しいユーザーがこの点を見逃すケースを、私はしばしば目撃してきました。

新しいユーザーこそが、最も混乱する人々です。

「いいね!」 2

また、これらのユーザーが2回以上投稿しないことを前提としているようですが、あなたのコミュニティではそれが一般的でしょうか?

現在は小規模なチームで、フォーラムの再設計を進めているため、1対1のオンボーディングやユーザーテストを実施しています。そのため、現在のユーザーについては心配していません。

ただし、新規ユーザーにとっての「摩擦」の重要性を過小評価されているように思います。特にフォーラムのみで存在するコミュニティにおいては顕著です。Markdown は人々にとって非常に威圧的に見えることがあります。私自身、技術に詳しいにもかかわらず、正しい方向に進んでいるかを確認するためにプレビューペインに大きく依存しています。投稿することを恐れてしまう人々は、もちろん2回以上投稿するユーザーとしてカウントされません。

考えを変えました。X キーと Esc キーを左側に移動させることがユーザーにとって変化をもたらすなら、試す価値は十分にあると思います。また、その後、多くのウェブサイトにおいて、それらが左側に配置されていることに気づきました。

「いいね!」 3

もう一つの選択肢として、このメッセージ自体を無効にすることもできます。そうすれば、新規ユーザーにはプレビューのみが表示されます。これは現在、Discourseの既存のサイト設定を通じて可能だと考えています。

「いいね!」 2

試してみます。どこに設定があるか教えていただけますか?正確な場所がわかりませんでした。

「いいね!」 1

「educate until posts」まで教育すると思います。

「いいね!」 4

ありがとうございます。その設定を0に変更しましたので、今後の様子を見てみます。

「いいね!」 3

それでもうまくいかない場合はお知らせください。それが最も簡単な解決策だと思っているからです。

「いいね!」 1

確かにその問題を確認できます。5 分ほど答えを探して、Google で検索したらこのトピックを見つけました。

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

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

「いいね!」 4

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

内容は以下の通りです。

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

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

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

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

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

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

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

「いいね!」 2

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

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

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

「いいね!」 5