- Los menús contextuales reducen el ruido visual y bajan el costo de interacción, pero implican un trade-off de bajo aroma de información y menor descubribilidad
- Son adecuados para agrupar y ofrecer acciones secundarias o complementarias vinculadas a un objeto específico como publicaciones, fotos o eventos del calendario, y los íconos de kebab (⋮) y meatball (⋯) suelen entenderse como “ver más/acciones adicionales”
- Si el tamaño, contraste o ubicación del ícono no son buenos, con frecuencia el usuario ni siquiera ve el ícono o malinterpreta su significado, y si se ocultan acciones importantes, estas se vuelven funciones clave difíciles de encontrar, empeorando la experiencia de uso
- Para usarlos de forma efectiva se necesitan reglas consistentes, como incluir solo acciones secundarias, colocarlos cerca del contenido relacionado, no ocultar solo una o dos acciones, diferenciar su función de la del menú hamburguesa y garantizar accesibilidad
- Un menú contextual bien diseñado puede ser una herramienta para simplificar el layout y aumentar la concentración, pero si se abusa o se usa mal, puede convertirse en un factor de riesgo que incrementa la confusión, los clics extra y la carga de aprendizaje, por lo que debe utilizarse con cuidado
Resumen de los menús contextuales
- Un menú contextual es un menú que reúne un conjunto de acciones relacionadas con un elemento específico de la UI, un área de la pantalla, un fragmento de datos o una vista de la aplicación
- En una publicación puede incluir acciones como Edit, Pin, Delete; en una foto, Share, Download, Set as Background; y en un evento de calendario, Delete, Reschedule, Duplicate, Invite
- Estos menús normalmente se usan para mantener al alcance funciones secundarias que se necesitan de vez en cuando, pero que no tienen que estar siempre visibles
- En desktop suelen activarse con clic derecho o clic con dos dedos en el trackpad; en entornos táctiles, con long press; y cada vez más a menudo mediante los íconos de kebab (⋮) y meatball (⋯)
Percepción y límites de los íconos kebab y meatball
- Los participantes de investigación interpretaron en general los íconos kebab (⋮) y meatball (⋯) como una señal de que “hay más opciones u otras acciones ocultas”
- Esta percepción se mantiene tanto en móvil como en desktop, y se entiende de forma más consistente cuando se siguen bien las guías de diseño
- Estos íconos se perciben como un interruptor que abre un conjunto de funciones o íconos temporalmente ocultos
- Al mismo tiempo, estos íconos tienen bajo aroma de información, por lo que el usuario suele hacer clic sin poder anticipar con claridad qué opciones concretas hay detrás
- También se observaron casos en los que ni siquiera se detecta la existencia del menú contextual cuando el ícono está demasiado lejos del contenido, es muy pequeño o está diseñado con poco contraste
Ventajas y trade-offs de los menús contextuales
- Como ventaja, los menús contextuales ayudan a reducir el ruido visual, simplificar el layout y mantener el foco
- Pero también traen consigo los siguientes problemas de usabilidad
- Dificultad para encontrarlo (menor findability): si el ícono es pequeño, tenue o está lejos del área de trabajo principal, se vuelve un elemento muy fácil de pasar por alto
- Falta de aroma de información (Information Scent): como es difícil anticipar qué contiene el menú, el usuario queda en una situación en la que cuesta decidir si vale la pena pulsarlo
- Posibilidad de confusión: si la ubicación o el modo de uso no son buenos, puede ocurrir que el usuario lo confunda con un indicador de progreso o con un control de carrusel
- Por eso, la decisión de usar o no un menú contextual debe tomarse equilibrando las restricciones del layout, las expectativas del usuario y la prioridad de las tareas
1. En el menú contextual solo deben ir acciones secundarias y no esenciales
- El menú contextual no es un lugar para acciones clave de uso frecuente, sino para acciones complementarias o de menor prioridad
- Se recomienda ocultar, con base en investigación, aquellas funciones que no forman parte del flujo principal pero que se usan con cierta frecuencia
- Es importante no ocultar detrás del menú contextual acciones esenciales y de uso frecuente
- Por ejemplo, en la interfaz de chat de AT&T, colocar End Chat dentro del menú contextual es un mal ejemplo de una acción central de cierre escondida
- Cuando se esconden tareas importantes detrás del menú, el usuario puede no encontrarlas o sufrir fricción repetida en tareas que realiza con frecuencia
2. Coloca el menú contextual cerca del contenido al que afecta
- Las personas interpretan la relación entre elementos a través de la proximidad espacial, así que la posición del ícono del menú contextual debe dejar claro a qué objeto pertenecen esas acciones
- Si el menú se aplica solo a un elemento concreto, el ícono debe colocarse dentro de ese elemento o justo al lado
- Si las acciones afectan a un campo completo o a una transacción completa, debe ubicarse cerca del área donde se agrupa la información relacionada
- Hay que evitar colocar el ícono en una posición aleatoria o en un lugar que no parezca conectado con ningún elemento
- Como en el caso de Ramp.com, donde un ícono kebab pequeño y de bajo contraste aparece separado en la esquina inferior derecha de la pantalla: es difícil saber a qué elemento corresponde, lo que reduce tanto la descubribilidad como la relación contextual
3. Asegura tamaño y contraste suficientes para garantizar visibilidad
- En pantallas densas o aplicaciones complejas, el ícono del menú contextual a menudo se representa de forma tan sutil que prácticamente deja de verse
- El ícono debe tener tamaño y contraste suficientes y, si es posible, conviene que permanezca visible siempre, incluso sin hover
- Se recomienda seguir guías de diseño visual validadas y usar contraste de color claro, bordes definidos y fondos reconocibles
- Hacer que solo aparezca en hover o volverlo demasiado tenue en nombre del minimalismo perjudica la descubribilidad
- Como en el ejemplo de Ramp, un ícono kebab pequeño, de bajo contraste y alejado es fácil de pasar por alto,
- mientras que el caso de la app móvil de Rippling, donde el ícono está dentro de un recuadro y combina puntos negros con fondo blanco para aumentar el contraste, es un ejemplo positivo que mejora tanto la posibilidad de tocarlo como el aroma de información
4. Agrupa en el menú contextual solo acciones relacionadas
- Las opciones dentro del menú contextual deben agruparse como acciones que pertenecen lógicamente a un mismo objeto, elemento o nivel jerárquico
- Por ejemplo, si se trata de un archivo, debería incluir solo acciones relacionadas con ese archivo, como Duplicate, Share, Delete
- Si es posible, también se recomienda mostrar algunas acciones directamente junto al ícono del menú para aportar un poco más de aroma de información sobre qué tipo de acciones adicionales están ocultas
- Debe evitarse mezclar en un solo menú acciones globales y acciones de un elemento específico, o incluir acciones que no tengan relación entre sí
- Esa mezcla perjudica la claridad, la facilidad para encontrar opciones, la memoria espacial y la carga cognitiva
- Un buen ejemplo es Slack en desktop, donde el menú de un mensaje solo oculta acciones relacionadas con ese mensaje, mientras que las acciones para manejar todo el hilo están en otra ubicación
5. Mantén íconos y comportamientos consistentes en toda la interfaz
- El ícono de menú contextual debe conservar la misma función, comportamiento y apariencia en todo el producto
- Si se decide usar el ícono meatball o kebab como menú contextual, debe mantenerse exclusivamente con ese significado y no reutilizarse para otras funciones
- Debe evitarse reutilizar el mismo ícono para expandir contenido oculto en un lugar, abrir un pop-up en otro y abrir un panel lateral en otro más
- Ese tipo de uso daña el modelo mental y la confianza del usuario, además de afectar la capacidad de aprendizaje y recuerdo
- En los resultados de búsqueda de Google se ve que el ícono kebab de los resultados patrocinados abre un modal de My Ad Center, mientras que el kebab de los resultados normales abre un panel lateral derecho, con posiciones y comportamientos distintos
- Como consecuencia, acciones útiles como Like, Block, Report, Share, Save quedan ocultas y son poco descubribles, y al usuario le resulta difícil predecir qué pasará al hacer clic en el mismo ícono
6. Si el ícono es ambiguo, refuerza su significado con tooltip o etiqueta
- Los íconos kebab y meatball son íconos abstractos con poco significado por sí mismos, así que incluso una pequeña pista de texto puede mejorar mucho la usabilidad
- Siempre que sea posible, conviene añadir una etiqueta visible o un tooltip al pasar el cursor para explicar de manera más concreta qué tipo de acciones contiene el menú
- Por ejemplo, usando expresiones claras que incluyan el elemento objetivo, como Post Actions o Message Options
- Deben evitarse etiquetas ambiguas como Options o rótulos como Ellipses, que solo describen la forma del ícono
- Como en el ejemplo de Patagonia, donde la acción de ampliar una imagen se asigna a un ícono meatball y el label en hover dice Ellipses, un caso que falla en comunicar el significado
- En cambio, en la app de desktop de Notion, un tooltip al pasar el cursor como “Style, Export, and more…”, que anticipa con más precisión el tipo de acciones del menú, es un patrón positivo que mejora notablemente el aroma de información
- Ese tooltip además cambia según el contexto y el contenido del menú
7. Usa el ícono de menú contextual solo para acciones, no para expandir contenido
- Como los íconos meatball y kebab se interpretan como una señal para abrir acciones u opciones adicionales, es mejor no usarlos para expandir texto o imágenes
- Para desplegar texto parcial o agrandar una imagen, se recomienda usar etiquetas de texto explícitas como Read more o Expand
- Como en el ejemplo de las reseñas de Etsy, el patrón de abrir el texto completo con un ícono meatball debajo de la reseña es un mal ejemplo por su bajo aroma de información
- En cambio, cuando en las reseñas de Google la misma función aparece como enlace de texto More, la expresión es mucho más adecuada para una acción de expansión de contenido
- El ícono kebab en la parte superior de las reseñas de Google, que solo ofrece la acción Report, también viola la guía posterior de no ocultar solo una o dos acciones
8. No uses un menú contextual para ocultar solo una o dos acciones
- Siempre que sea posible, cuando solo hay una o muy pocas acciones, es mejor mostrarlas directamente en la interfaz
- Si se esconden una o dos opciones detrás de un menú, casi no se ahorra espacio y solo aumentan la cantidad de clics y el costo de descubribilidad
- Sobre todo cuando ya existe un ícono estándar muy conocido, como “x”, la papelera o la bandera de reporte, volver a ocultarlo debajo de un meatball o kebab no aporta ningún beneficio
- En el caso de Weather.com, al hacer clic en el ícono kebab este se convierte en un botón negro que contiene solo el botón Delete,
- pero el espacio en pantalla que ocupa es prácticamente el mismo que si Delete se mostrara desde el inicio, así que no hay motivo real para esconderlo
- En cambio, en el ejemplo de Pinterest, al pasar el mouse sobre un pin se muestran directamente acciones importantes como Save (botón superior derecho) y Share (ícono inferior derecho)
- Ese enfoque es un patrón positivo porque no oculta acciones importantes dentro del menú contextual y permite usarlas de inmediato cuando hace falta
9. No uses el ícono hamburguesa como disparador de un menú contextual
- El ícono hamburguesa (☰) es ampliamente reconocido como símbolo de navegación global o principal,
- mientras que los íconos kebab y meatball (⋮·⋯) ya están establecidos como patrón para acciones contextuales asociadas a un elemento o ítem específico
- Por eso, se recomienda usar el ícono hamburguesa solo para la navegación global del sitio o la app, y reservar kebab o meatball para acciones contextuales
- Debe evitarse usar la hamburguesa cerca del contenido para acciones contextuales, o a la inversa, usar kebab o meatball para acciones globales como ajustes de cuenta o preferencias generales del sitio
- Mezclar esos patrones diluye el significado de ambos y rompe el modelo mental del usuario, provocando dudas y omisiones
- En el ejemplo del chat de Banana Republic, al pulsar el ícono hamburguesa en la esquina inferior izquierda de la ventana de chat aparece una sola acción contextual: Save Transcript
- Ese caso no solo usa la hamburguesa como menú contextual en vez de navegación global, sino que además también viola el lineamiento 8 al ocultar una sola acción
10. Garantiza siempre accesibilidad con teclado y lector de pantalla
- Los menús contextuales deben poder ser utilizados también por personas que no usan mouse o pantalla táctil, por lo que necesitan una estructura que permita abrirlos y recorrerlos con teclado y lector de pantalla
- El menú debe poder abrirse y recorrerse con Tab, Enter y las teclas de flecha, y los elementos dentro del menú deben poder ser leídos por el lector de pantalla, recibir foco y ejecutarse
- Deben evitarse los menús accesibles solo por clic o tap, así como interacciones personalizadas que rompen los patrones estándar de accesibilidad
- Diseñar con accesibilidad como prioridad no solo beneficia a usuarios con discapacidad, sino también a usuarios avanzados, además de ayudar a cumplir con criterios de diseño inclusivo
Conclusión
- Los menús contextuales son una herramienta potente para mantener la interfaz simple y, al mismo tiempo, ofrecer acciones complementarias cuando se necesitan
- Resultan especialmente útiles para ordenar el layout y abrir opciones adicionales solo cuando hace falta, sin sacar al usuario de su foco de trabajo
- Sin embargo, como son una estructura con descubribilidad y claridad limitadas, su uso siempre requiere cuidado
- Deben reservarse para acciones realmente secundarias y diseñarse considerando ubicación, consistencia, aroma de información y accesibilidad
- El mensaje central es equilibrar el minimalismo visual con la usabilidad real,
- y los menús contextuales ofrecen su mayor valor cuando se usan como una herramienta para ordenar la interfaz sin ocultar el flujo principal
1 comentarios
A veces me toca retocar el frontend que corre en la intranet interna de la empresa, y una vez me regañaron por poner íconos como ☰ ⋮ ⋯ + en el dashboard que ven los directivos. Me preguntaban dónde se había ido tal o cual función, y cuando les decía que había que presionar ese botón, respondían que no se veía, que mejor lo pusiera simplemente como texto y me reclamaban por eso... Al final hubo una vez en que lo regresé a la interfaz de los años 2000 que usábamos antes. Supongo que, como con todo, el frontend es difícil.