Nuevos estilos de menú desplegable de encabezado / menú de notificaciones

Mis puntos azules no leídos parecen un poco en zigzag y hacen que las descripciones se corten muy pronto.

¿Quizás ya no necesitamos los puntos ahora que las notificaciones leídas están “en gris”?

6 Me gusta

El truncamiento se debe a que se trunca en el “salto de palabra”, lo que creo que es mejor para la legibilidad.

Los puntos irregulares / en zigzag son lo que hacemos en las listas de temas y en la barra lateral. Basándome en los comentarios, fui en esta dirección, pero personalmente prefiero que todos estuvieran en la zona más a la derecha.

Hmm, eso es interesante.

En este momento, estamos fusionando y imitando dos patrones en nuestra interfaz de usuario.

En la barra lateral para los no leídos:
punto azul

En la lista de temas para los no leídos:
punto azul y color primario para el texto

2 Me gusta

¿Quizás el punto con el icono del tipo de notificación es lo suficientemente similar como para que no necesitemos otro a la derecha? (¿funcionaría con el color terciario más claro para que coincida?)

Me falta la segunda línea para el título, ¡3 palabras es muy poco!

4 Me gusta

[cita=“awesomerobot, post:43, topic:369574”]
Tal vez el punto con el icono del tipo de notificación sea lo suficientemente similar como para que no necesitemos otro a la derecha?
[/cita]

Sí, ahora veo que el icono con el color de fondo más o menos actúa como una notificación de punto “azul”.

3 Me gusta

¿Podríamos recuperar alguna indicación de qué notificaciones ya han sido vistas/descartadas y cuáles son nuevas? No estoy viendo ninguna diferencia en este momento.

2 Me gusta

¿Estás diciendo que no ves esto?

¿O es que la diferencia aquí no es lo suficientemente fuerte?

Me pregunto sobre la emulación del estilo de la aplicación móvil de Gmail. Es un paradigma tan establecido

(Negrita vs delgada)

2 Me gusta

Eso es un poco mejor.


El objetivo es imitar la lista de temas, pero intrínsecamente podríamos necesitar más diferenciación debido a una lista de elementos tan compacta y densa aquí. No creo que desviarse un poco más de la norma de la barra lateral/lista de temas sea algo malo.

1 me gusta

Como solo tenía elementos nuevos en el menú desplegable de notificaciones y no vi ninguna marca que pareciera diferente, no noté los íconos de color gris deprimente en los elementos ya leídos hasta que miré la página completa de notificaciones.

Me gustaba el “mar de azul” cuando tenía elementos no leídos, nunca pensé ni una sola vez “wow, eso es demasiado color mirándome fijamente”. Era fácil ver que las cosas necesitaban mi atención y/o que alguien realmente quería hablar conmigo.

4 Me gusta

Esta es una excelente retroalimentación. Con un mar de azul, está bastante claro que “oye, necesito limpiar todo esto”.

Una vez eliminado eso, la notoriedad definitivamente se pierde. Tal vez traer de vuelta los puntos sea algo bueno solo para ese propósito.

3 Me gusta

Para mí, la diferencia entre azul y gris es muy pequeña. Quizás esto se deba en parte a que el gris es más oscuro debido a la paleta WCAG. Creo que preferiría que la notificación leída fuera todavía un icono gris sobre blanco; entonces la diferencia sería más clara.

Así que, por supuesto, veo la diferencia de color, pero creo que si solo tengo notificaciones leídas, las leídas parecen no leídas.

También en https://meta.discourse.org/my/notifications ahora veo iconos negros sobre gris.
image


Cuando hago clic en el sobre para ver solo las notificaciones relacionadas con los MP, todos los mensajes parecen no leídos, aunque todos están leídos.
image

4 Me gusta

Quería pasar esta mañana para que todos sepan que todos estos comentarios son muy apreciados. Ha sido agradable pasar por las iteraciones juntos en un lapso tan corto con todas las ideas presentadas aquí.

Siento que necesitamos una indicación un poco más fuerte para los no leídos, así que me inclino nuevamente por el punto azul.


oh sí… esto no es ideal. ¡gracias!

Interesante… echaré un vistazo.

Me gusta mucho el diseño de la iteración actual, agrupa toda la información relevante en un elemento compacto y el espaciado general de la lista sigue siendo generoso :+1:

Con respecto al estado, no tengo una preferencia fuerte por las diferentes opciones. Pero creo que sería genial si se pudiera abordar de manera más general en una exploración de diseño. No hay un sistema completamente consistente implementado y, en lugar de simplemente buscar el ajuste adecuado para el menú de notificaciones ahora, sería genial tener una exploración más amplia que mapee el estado y el contexto en toda la aplicación y luego aplicarlo con variables.

Por ejemplo, sí, el estado (leído/no leído) es análogo a la lista de temas. Pero el contexto es diferente, y en contextos similares (otros paneles del menú), un gris más sutil generalmente no indica ese estado. Ahora hace que otros elementos del menú parezcan un poco más como si también indicaran un estado atenuado. Por lo tanto, siento que esto realmente podría beneficiarse de un mapeo más sistemático.

5 Me gusta

Por el momento, solo tenemos dos partes de Discourse que utilizan un estado de estilo “leído/no leído”.

La otra parte de este menú es un estado “seleccionado”. Esto es para mostrar la pestaña de notificación seleccionada actualmente. En esta iteración, estamos imitando el estado seleccionado para los elementos de la barra lateral.

Aquí hay una auditoría básica de las cosas que estamos analizando en el menú. Leído, No leído, Seleccionado

Barra lateral
Para la barra lateral, solo indicamos “no leído” con un punto. “Leído” se asume por defecto si no hay un punto azul.

Barra lateral - activa
Aquí está el elemento de la barra lateral actualmente seleccionado, también conocido como activo.

Lista de temas
Para las listas de temas, actualmente mostramos un punto azul y usamos color en el título y los metadatos para diferenciar. Una advertencia es que no mostramos el punto azul en los temas que no estás siguiendo/vigilando. Por lo tanto, no está inmediatamente claro para el usuario si aparece o no el punto azul.

Menús
Usamos seleccionado como estado aquí para mostrar la selección activa. No creo que esto se traduzca a notificaciones, pero se traduce al estado seleccionado de la pestaña actual de notificaciones del menú.

Actualmente hay inconsistencias en el color que usamos para seleccionado.

Para seguimiento, usamos gris.

Para la categoría actualmente seleccionada usamos azul.

Página de notificaciones del usuario
Esta página necesita algo de trabajo en la iteración actual.

2 Me gusta

Aprecio tu trabajo, como siempre, y me gusta que estés trabajando específicamente en esto.

¿Puedo saber la motivación para el relleno en las esquinas de los botones/secciones?

Honestamente, no lo entiendo, pero probablemente me estoy perdiendo algo.

Eso se ve hermoso sin relleno adicional en las esquinas redondeadas :slight_smile:

1 me gusta

Para imitar más de cerca la barra lateral.

1 me gusta

Lo entiendo, la última actualización sin relleno adicional en los botones me parece mejor :ok_hand:

¿Qué opinas de esta sutil mejora?

Se trata de eliminar el efecto de pasar el ratón por encima del panel de botones activo en el lado derecho, al tiempo que se aplica un sutil efecto de mezcla al panel izquierdo.

Esto ayudaría a diferenciar los paneles de los botones y evitaría que la interfaz parezca demasiado saturada o “completamente pintada” cuando hay notificaciones y paneles activos al mismo tiempo.

Aquí hay una idea de iteración basada en más comentarios recibidos aquí.

3 Me gusta

Tal vez sea porque estoy muy acostumbrado al fondo blanco para las notificaciones que ya he visto, pero sí que parece un poco raro tener áreas tan grandes con fondo gris en un tema que, por lo demás, no los usa.

2 Me gusta

Este experimento vuelve a estar activo aquí en meta. Asegúrate de unirte al grupo de experimentos.

3 Me gusta