Tabs with long content #542
Replies: 6 comments 16 replies
-
Truncado de textosHabría que tener cuidado en truncar texto en elementos base de navegación, esta información es necesaria para el usuario en su totalidad y provoca que este elemento no sea accesible. Mi propuesta aquí sería que los textos hicieran crecer cada una de las tabs proporcionalmente a su contenido sin restricción. Overflow en el contenedorPara casos en los que la cantidad de tabs necesarias sea mayor que la cantidad óptima, una solución podría ser agrupar todos aquellos elementos que no entran en un overflow menú, mostrando los tres puntos y desplegando un dialog con la lista de opciones. Ej. Github:
En este ejemplo las tabs no ocupan todo el ancho del contenedor, por tanto se muestran todas
Las tabs ocupan más espacio del disponible, se muestra en menú con las que no pueden mostrarse Scrollable arrowsOtra solución es incluir scroll horizontal en el contenedor y permitir el movimiento a través de botones a izquierda y derecha (en función de la posición del scroll) Ej. Carbon
https://carbondesignsystem.com/components/tabs/usage#scrollable |
Beta Was this translation helpful? Give feedback.
-
|
Aquí en lo referente a la interacción por teclado el overflow también simplifica su uso, no sería necesario dividir dos niveles de foco (Uno para las tabs y otro para las flechas de scroll), recorro los elementos uno a uno y cuando llego al último soy capaz, sin abandonar el flujo de tabeo, de continuar a los siguientes elementos. Aunque se produzca scroll automático a medida que me muevo entre tabs, debería pasar posteriormente por la flecha si quiero entrar dentro del contenido de una determinada página, un paso innecesario. (Aquí hay que contar con que deberíamos arreglar el componente para que el movimiento entre tabs sea a través de las flechas en función de su orientación y no con tabulador [Salvo que se planteen tabs de navegación con un link por debajo]) Por poner algún ejemplo más en la palestra :) Microsoft fluent plantea la misma solución que GitHub: Salesforce lightning se suma al overflow menu: |
Beta Was this translation helpful? Give feedback.
-
|
Entiendo lo que me comentáis, pero yo particularmente sigo inclinandome más por los chevrones. Tenemos un ejemplo muy claro del funcionamiento en nuestro menú. En este caso no utilizamos un overflow. Está funcionando muy bien y sin problemas con los chevrones. Si ahí le decimos que el comportamiento es con chevron, no veo la razón por la que no hacerlo en un tab. Y si estamos reproduciéndo este comportamiento en el menú principal, quizás sea buena idea hacer lo mismo en los tabs que desborden y no tener un comportamientos diferentes, ni por dispositivos ni por componente. Cuando pulsas el chevron, caben los siguientes items ocultos en una animación de desplazamiento de derecha a izquierda. No vas de uno en uno y por tanto no necesitas más clics.
|
Beta Was this translation helpful? Give feedback.
-
|
para mí esto no es el componente tab, al menos como está definido en Mística. Para mi esto que muestras es un carrusel |
Beta Was this translation helpful? Give feedback.
-
|
No, hombre, es un ejemplo. Ya sé que no es el componente tab. Sin entrar en otro tipo de valoraciones, esto se hizo mucho antes de tener siquiera ese componente creado. Es solamente para que se vea que la solución con chevrones funciona y ya lo tenemos así en el site. No me imagino esto con overflow. No funciona igual. |
Beta Was this translation helpful? Give feedback.
-
|
Hola! Participo en este foro por primera vez así que si hay algo en lo que fallo let me know :) Haciendo un poco de bench y pensando en la mejor experiencia posible, en el caso del overflow veo patrones repetidos como en el caso de github. ¿El ejemplo más reconocido? Microsoft word/google docs... Otro caso donde repite es en el sistema de diseño Polaris para Shopify Igualmente apoyo la moción de hacer un test A/B. Lanzo otra pregunta menos enfocado al continente y más al contenido... ¿Cuánto de necesario es tener más de n tabs? ¿Quizás tiene sentido re-agrupar contenido para no forzar la carga cognitiva del usuario? |
Beta Was this translation helpful? Give feedback.
-
|
Por entender un poco el contexto en el que se coloca el componente, son unas tabs que segregan un contenido que forma parte de una página o son tabs que cambian el contenido de toda la página? |
Beta Was this translation helpful? Give feedback.
-
|
Cambia el contenido que se visualiza justo debajo de cada tab. No cambia la página al completo. |
Beta Was this translation helpful? Give feedback.
-
|
Debido a la división de opiniones que hay y que no hay una clara diferencia entre ambas de cuál puede funcionar mejor, podríamos plantear un test de usuario para valorar qué opción es la más óptima y que decida el poder del research ✨ |
Beta Was this translation helpful? Give feedback.
-
|
Patricia Ramirez propone hacer un click test con tareas para evaluar con cuál se entiende mejor el usuario, randomizando los ejercicios para que el usuario no pueda asociar atajos. |
Beta Was this translation helpful? Give feedback.
-
|
Me parece una idea muy razonable. Estaba a punto de proponer lo mismo. |
Beta Was this translation helpful? Give feedback.
-
|
Añado por aquí otro caso en mobile:
Cuando el contenido es excesivamente largo o el usuario ha modificado el tamaño de texto de su dispositivo, aunque el número de tabs es pequeño, la definición actual provoca que el contenido se salga de su contenedor. Dejo un Figma con posibles soluciones: |
Beta Was this translation helpful? Give feedback.
-
|
Se ha transformado esto en algún tipo de ticket JIRA? Cual es el siguiente paso? |
Beta Was this translation helpful? Give feedback.
-
|
yo tiraría la por la opción 1 en cuanto a lo que mística implica. Si el equipo de diseño quiere considerar la opción 3 pues es toda su decisión. @jpadronl genero issue de esto, actualizamos specs y crearemos ticket en jira a webcore |
Beta Was this translation helpful? Give feedback.
-
|
Cierro discussion. Nos ponemos con la opción 1 en la tarea #1161 |
Beta Was this translation helpful? Give feedback.
-
|
Hola compañeros! Justo se nos da este problemas en las tabs del CMS de modular pages. Al aumentar el numero de tabs el contenedor se amplia y se nos recorta la preview, pero si ponemos un ancho al contenedor de las tabs no tenemos forma de hacer scroll a los elementos ocultos. Necesitamos desbloquear estol |
Beta Was this translation helpful? Give feedback.
-
|
El componente tab necesita un rediseño fuerte en desktop, no termina de ajustarse bien en muchos de los casos y es bastante rigido. Has pensado una opción pasajera de usar Chips como selectores? |
Beta Was this translation helpful? Give feedback.
-
Desde movistar españa se necesita usar el componente de tabs con 8 elementos. Aunque el componente lo admite, desde diseño recomendamos no tener tabs con más de 6 elementos.
La definición de las specs diverge de la definición que existe en desktop ya que no existe la elipsis sino que las tabs van a multilinea
https://ibit.ly/hcUF
Beta Was this translation helpful? Give feedback.
All reactions