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 
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.
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?
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”
[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.
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 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 ! A negative count ?
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.
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.
Es razonablemente claro cómo cerrar el panel. Pero el problema no es que el usuario intente cerrar el panel y no sepa cómo hacerlo. En cambio, el usuario no ve ninguna razón para cerrarlo porque no sabe que hay algo interesante oculto detrás de él. Luego se siente abrumado al editar la sintaxis de markdown sin una vista previa.
Creo que este es un posible obstáculo para los usuarios que no están familiarizados con los editores de markdown, y las primeras publicaciones son precisamente cuando la facilidad de aprendizaje de la interfaz de usuario es más importante.
Es posible que podamos hacer un panel de educación “justo a tiempo” la primera vez que el usuario vea el editor. Pero entonces, ese es el punto de este panel… ya hay educación “justo a tiempo” sucediendo aquí, para educar a las personas sobre cómo ser civilizadas al participar mientras comienzan a escribir su primera respuesta:
Bienvenido a {sitename} – ¡gracias por contribuir!
¿Mejora tu respuesta la conversación de alguna manera?
Sé amable con los miembros de tu comunidad.
La crítica constructiva es bienvenida, pero critica ideas, no personas
Para más información, consulta nuestras directrices comunitarias. Este panel solo aparecerá para tus primeras 2 publicaciones.
Esto es… consejo muy, muy importante. Algunos de los más críticos que proporcionamos. Ahora, este panel de consejos debe omitirse si indicas “Omitir las cosas para nuevos usuarios” durante la incorporación inicial, así: esto se introdujo en Discourse 2.6 a finales de 2020:
También está disponible como preferencia del usuario.
Dicho esto, no creo que escribir palabras, como estoy haciendo aquí, requiera típicamente mucha (¿o alguna?) formato, y la gente generalmente se siente cómoda escribiendo palabras en cuadros en Internet hoy en día, 30 años después.
(De hecho, el principal “formato” en la mayoría de las publicaciones son las imágenes, que es algo que la gente promedio hace en sus teléfonos y dispositivos todos los días; supongo que la gran mayoría del mundo entiende cómo hacerlo, presionando el botón “agregar imagen” en la barra de herramientas o el editor.)
Bueno, acabo de venir de un sitio de Discourse recién implementado que está reemplazando dos sitios heredados. Todavía lo estamos ajustando y una de las primeras cosas con las que me encontré fue no encontrar una vista previa. Es decir, cada sitio sensato para publicar texto tiene algún tipo de vista previa y estuve buscando frenéticamente algún botón para revelarla. Me atrevo a decir que soy un usuario experimentado de foros, pero me llevó minutos tener la idea de cerrar los paneles amarillo y, posteriormente, azul (temas similares).
A menudo tenemos usuarios que pegan fragmentos largos de código o URL mal formateadas. Una vista previa es necesaria desde el principio y especialmente para los usuarios primerizos. Por favor, traten esto como comentarios de usuario y no como una idea abstrusa.
Una solución (supongo) fácil es simplemente reducir el panel de bienvenida a 2/3 de su ancho para que el panel de vista previa subyacente sea visible. Entonces quedará claro que cerrar el panel realmente logrará algo.
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…
A negative count ?
