确保用户知道预览将在面板下方生成

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.

关闭面板的方式相当清楚。但问题不在于用户想关闭面板却不知道怎么关,而在于用户不知道隐藏在后面的有趣内容,所以根本没想去关闭它。然后,他们就会被没有预览的 markdown 语法编辑搞得不知所措。

我认为这对于不熟悉 markdown 编辑器的用户来说是一个潜在的障碍,而用户界面的可学性在最初的几个帖子中最为重要。

4 个赞

我们可以为用户首次使用编辑器时提供一个“即时”教育面板。但这就是这个面板的意义所在……这里已经有“即时”教育了,用于在用户开始输入他们的第一个回复时教育他们如何文明参与:

内容如下:

欢迎来到 {sitename} —— 感谢您的贡献!

  • 您的回复是否能为对话带来一些改进?
  • 请善待您的社区成员。
  • 欢迎建设性批评,但请批评 想法,而不是人。

更多信息请参阅我们的社区准则。此面板仅在您发布前 2 篇帖子时显示。

这是…… 非常、非常重要的建议。这是我们提供的一些最关键的建议。现在,如果您在初始设置过程中选择了“跳过新用户内容”,则应跳过此建议面板——此设置已于 2020 年底在 Discourse 2.6 中引入:

它也可以作为用户偏好设置。

话虽如此,我觉得像我现在这样输入文字,通常不需要太多(甚至不需要?)格式设置,而且如今人们普遍习惯在互联网上往框里输入文字,这已经 30 多年了。

(事实上,大多数帖子中的主要“格式设置”是添加图片,这是普通人每天在手机和设备上都会做的事情;我假设世界上绝大多数人都知道如何通过点击工具栏或编辑器中的“添加图片”按钮来做到这一点。)

2 个赞

嗯,我刚从一个新实施的 Discourse 站点过来,它取代了两个旧站点。我们还在调整它,我遇到的第一件事就是找不到预览。我的意思是,每个发布文本的合理站点都有某种预览,我一直在疯狂地寻找一个按钮来显示它。我敢说我是一名经验丰富的论坛用户,但花了很长时间才想到关闭黄色和随后的蓝色(相似主题)面板。

我们经常有用户粘贴大段代码或格式错误的 URL。预览是必需的,尤其是对于首次使用的用户。请将此视为用户反馈,而不仅仅是一些晦涩的想法。

一个(我认为)简单的修复方法是将欢迎面板的宽度缩小到其宽度的 2/3,以使下面的预览窗格可见。这样,用户就会清楚关闭面板实际上会产生某种效果。

5 个赞