Mejorando el diseño de la pestaña del menú de usuario

Ahora que tenemos estos menús geniales, ¿hemos pensado en alguna forma de mejorar su apariencia? Siento que hay mucho espacio desperdiciado (especialmente en móviles), lo que también hace que los objetivos de clic sean mucho más pequeños.

Móvil

Escritorio


¿Qué tal algo como esto?

Esto podría hacer que los objetivos sean más fáciles de hacer clic y leer. Quizás podríamos comenzar esto como un experimento solo para móviles debido al espacio adicional.

Otro ejemplo visual de un sitio aleatorio para explicar esto

Si no hay suficiente espacio en el escritorio para esto, ¿podríamos optar por una disposición de 3x3 como se muestra a continuación?

17 Me gusta

Me gusta definitivamente para la primera pestaña, ¿quizás podamos empezar a experimentar allí?

9 Me gusta

Para mí, el gran problema es el área de clic en móvil en la primera pestaña. Me pregunto si un simple ajuste en el espaciado allí nos llevaría casi hasta la solución.

Me gustaría saber qué opina @awesomerobot al respecto. Estoy de acuerdo en que el enorme espacio en blanco es excesivo.

10 Me gusta

No me opongo a cambios más grandes, pero convertirlo en dos columnas es una mejora muy sencilla.

15 Me gusta

Creo que aquí se justifica un cambio mayor para Móvil.

12 Me gusta

Me gustaría que se viera así. :slight_smile:

Por lo que vale, no he tenido ningún problema de usabilidad en la primera pestaña. No es que use esa pestaña a menudo, pero no recuerdo haber hecho clic en algo por error cuando lo he hecho.

Creo que está bien, pero podría ser bueno aislar el botón de cerrar sesión del resto. Por lo que entiendo, puedes conectar ese menú para agregar opciones, y podría resultar confuso si el botón de cerrar sesión se mueve repentinamente del lado izquierdo al derecho o viceversa (incluso si no cambia con frecuencia).


Para mí, lo más incómodo es el espacio vertical en blanco significativo en móvil en todas las pestañas, como mencionó originalmente @rishabh.

7 Me gusta

Dos opciones basadas en los bocetos de @rishabh. Me inclino por las 3 columnas, pero esto limita el espacio para el texto («entrar en modo anónimo» probablemente se puede acortar y, de todos modos, no está activado por defecto…).

Edición: aunque ahora que lo pienso, 2 columnas es probablemente más seguro para diferentes idiomas con palabras más largas.

10 Me gusta

“Entrar en modo anónimo” podría ser un texto en la esquina inferior derecha, como “Cerrar sesión”.

En cuanto al diseño, me gusta un poco más el aspecto compacto del estilo de la tercera columna.

Creo que el problema aquí es el móvil:

Supongo que los botones grandes podrían funcionar aquí, pero entonces movería «Cerrar sesión» a la parte inferior, quizás dándole todo el ancho… No lo sé…

En general, la versión de escritorio se siente más o menos bien tal como está.

8 Me gusta

El escritorio está bien, creo que este cambio debería ser solo para móviles.

8 Me gusta

¿Nuevo tema? Esta discusión parece fuera de tema para el acceso rápido, que ya se ha completado (y es excelente) y no se verá afectado por las últimas propuestas.

No entiendo por qué se necesitan estos últimos cambios. Pero puede que me haya perdido alguna justificación presentada en otro lugar sobre por qué “se justifica un cambio mayor en la versión móvil aquí”.

  • Me gusta que los menús de escritorio y móvil sean iguales. Uso ambos y es menos esfuerzo para mi cerebro.

  • Los diseños de varias columnas generalmente son más lentos de leer. Los iconos son útiles, pero no tanto si se añaden o eliminan botones.

  • Si el espacio de aterrizaje es insuficiente en vertical (ya es el ancho lateral del menú desplegable), ¿por qué no tenemos botones con iconos para todos los menús?

  • Supongo que llenar el espacio blanco vacío es el objetivo principal. Me conformaría con otras funciones antes que los grandes botones propuestos:

    • un tamaño de texto más grande para igualar al botón de Respuesta debajo de cada publicación
    • más opciones de menú, por ejemplo: invitaciones, insignias
    • opciones de agrupación con algún tipo de separación: las opciones del menú de usuario juntas en la misma secuencia que el resumen del usuario; los borradores por sí solos; cerrar sesión por sí solo al final;
    • estadísticas
8 Me gusta

Sí, me inclino por más coherencia (también es más fácil de mantener), pero tocar elementos es una experiencia diferente a hacer clic en ellos… así que a veces se justifican diseños distintos.

No me preocupa mucho esto porque hay muy pocos elementos.

¿Quizás deberíamos? Hay que empezar por algo. Quizás en el futuro también se podría convertir el menú hamburguesa en un icono.

No me opongo a esto para lograr paridad con las pestañas del menú de usuario, pero sospecho que las insignias y las invitaciones no son realmente importantes en este contexto (las insignias ya están en el menú hamburguesa y la mayoría de la gente no usa las invitaciones), por lo que podrían ser más ruidosas que útiles.

Realmente no tiene sentido con 6 o 7 elementos.

Quizás no lo estoy entendiendo bien, pero ya están en el mismo orden (los modos de borrador y anónimo no tienen pestañas completas en la página de usuario, así que eso lo interrumpe un poco).

Esto me pasó por la mente, pero quiero evitarlo por ahora. En este momento, todos estos menús están compuestos exclusivamente por cosas en las que puedes hacer clic para ir a algún lugar o hacer algo… No estoy seguro de que sean el lugar adecuado para contenido puramente informativo.

8 Me gusta

Esto es un poco complicado porque, en realidad, este menú tiene como máximo 7-8 elementos, y hacer que quepan en un iPhone X es diferente a hacerlo en un iPhone más antiguo o en un dispositivo Android. Creo que los cuadros de dos columnas son un mejor aprovechamiento del espacio, pero aún queda espacio en los teléfonos grandes.

Podríamos ser muy creativos y redimensionar dinámicamente estos cuadros según la altura de la ventana visible. Si nuestro objetivo es ocupar espacio y crear zonas de toque muy accesibles, podríamos exagerar. Esto probablemente sea demasiado extremo, pero ilustra que incluso haciendo los elementos enormes, aún queda espacio.

Si se busca que todo sea accesible con una sola mano, idealmente todo este menú debería estar en la parte inferior… (el estilo de pestañas no tiene tanto sentido con este diseño, es solo un ejemplo rápido). Sin embargo, esto complica las cosas en cuanto a la dirección del contenido (¿debería la lista comenzar desde abajo si el menú está en la parte inferior? Eso es un verdadero problema).

En fin, ha sido un poco un divagar… Creo que los cuadros de iconos de dos columnas son un buen punto de partida. Logran mejor aprovechar el espacio y hacen que los elementos sean mucho más fáciles de tocar.

14 Me gusta

En lugar de intentar ocupar todo el espacio, ¿por qué no hacer que el menú solo tome el espacio necesario en lugar de usar toda la altura? Ya cambia de altura dinámicamente en escritorio. ¿Hay alguna razón para no hacer lo mismo en móviles?

El diseño de altura completa sigue el patrón de la aplicación móvil de “menús deslizable de altura completa”. Si no fueran de altura completa, no creo que fuera tan claro que se puedan deslizar para cerrarlos (al menos, el espacio en blanco adicional sirve como área de deslizamiento adicional).

9 Me gusta

Estas serían una gran mejora y me gusta tener un precedente así (no es que la situación actual sea mala).

4 Me gusta

¿Es lo suficientemente común que los usuarios revisen sus borradores como para justificar moverlos a su propia pestaña en el menú (en lugar de la pestaña de perfil), al igual que las notificaciones, los marcadores y los mensajes? Asumo que se usaría relativamente poco en comparación con las notificaciones, pero me pregunto cómo se compararía con los marcadores. Ni siquiera sabía que podías ver todos tus borradores hasta que el cambio más reciente en el menú los colocó en la sección de perfil del menú de usuario, así que me pregunto si hacerlos aún más prominentes sería aún mejor.

1 me gusta

Las marcas de página serán mucho más útiles en breve.

10 Me gusta

Hola Kris @awesomerobot, gracias por todo tu trabajo en la UX.

El diseño de dos columnas es genial.
También la posición más destacada para los borradores sugerida por @seanblue suena como una buena idea. La pasé por alto por completo… es útil y actualmente está oculta.
No estoy seguro de que muchos usuarios vayan siquiera a la izquierda del menú de usuario para ver si es clicable, ya que las tres pestañas a la derecha captan toda mi atención.

Me preguntaba, ya que quizás estás codificando en esa zona… si podrías agregar clases CSS individuales a la lista. Actualmente todas tienen class = “read”. Me gustaría poder ocultar algunas.
Estoy creando un foro privado y personalizado para un cliente donde los usuarios no pueden verse entre sí. Algo similar a lo que @joebuhlig está intentando en su tema.
Saludos