El picaporte de dos milímetros: qué icono debe llevar un acordeón (y por qué los menús partidos son una trampa)

Artículo original en inglés: Accordion Icons: Which Work Best?, de Vitaly Friedman en Smashing Magazine.

Hay un objeto que resume toda la disciplina del diseño de interacción y no es un botón ni una pantalla: es una puerta. Don Norman lo contó hace décadas y seguimos tropezando con la misma hoja de cristal. Una placa plana dice “empuja”; un asa vertical dice “tira”. Si el arquitecto pone un asa en una puerta que hay que empujar, el edificio miente y el visitante se da con la frente. El icono de un acordeón es exactamente eso: el picaporte de una puerta diminuta que se abre cientos de veces al día en millones de webs. Y, a juzgar por lo que cuenta Vitaly Friedman a partir de un estudio de Nielsen Norman Group, seguimos poniendo asas en puertas de empujar.

Un triángulo con más autoridad que un chevron

La conclusión del estudio es casi humillante por lo simple. De todos los símbolos probados (caret o triángulo, chevron, flechas, más y menos, iconos personalizados y la ausencia total de icono), el que mejor comunica “esto se despliega aquí mismo” es el triángulo apuntando hacia abajo. El modesto ▼ que rota hacia arriba o hacia un lado al abrirse. Nada de flechas curvas, nada de pictogramas con personalidad de marca.

Hay un dato que lo explica. Los participantes tocaban la etiqueta y el icono casi a partes iguales en todos los casos, salvo con el caret: ahí el dedo iba al triángulo. Es decir, el caret no solo informa, atrae. Funciona como el asa de Norman: el usuario sabe de qué agarrar antes de pensar. El resto de iconos reparte la atención, y repartir la atención en un control de dos milímetros es pedir problemas.

El signo más que lo significa todo (y por eso no significa nada)

El más y el menos salen bien parados como alternativa, pero Friedman señala su talón de Aquiles con una frase que debería colgarse en cada sala de diseño: el más puede significar cualquier cosa, desde guardar para más tarde hasta añadir al carrito o hacer zoom. En un ecommerce, el icono que despliega la sección de “Materiales” compite semánticamente con el que suma una unidad al pedido. En menús de varios niveles la cosa se enreda aún más: ¿este más añade, expande, crea?

Las flechas tienen el mismo problema, agravado. Una flecha hacia abajo puede pedir que hagas scroll, que deslices, que saltes a una sección de la página o que pases a la siguiente coincidencia en un buscador. Friedman las define con una sola palabra: están sobrecargadas. Un símbolo sobrecargado es una palabra con doce acepciones en el diccionario: técnicamente correcta y prácticamente inútil fuera de contexto.

Sin icono, el usuario espera otra página

Quizá el hallazgo más útil para quien diseña navegación es lo que pasa en ausencia de icono: la mayoría de los usuarios interpreta una etiqueta desnuda como un enlace. Tocarla llevará a otro sitio. Es la convención de la web desde 1993 y sigue intacta en 2026, por mucho que las modas del diseño plano hayan borrado subrayados y colores.

De ahí la recomendación más contundente del artículo, casi un mandamiento: si es un enlace, subráyalo; si abre un acordeón, usa un caret. Así de simple. Friedman asegura que el texto subrayado sin icono para enlaces directos funciona impecablemente, todas y cada una de las veces. No es una opinión estética; es la constatación de que la web ya tiene un lenguaje y que inventar dialectos sale caro.

Menús partidos: la puerta con dos picaportes

Y aquí llega el villano de la película. El menú partido (split button, en la jerga) es ese patrón en el que la etiqueta de una categoría enlaza a la página de la categoría mientras el icono de al lado despliega las subcategorías. En teoría, lo mejor de dos mundos. En la práctica, Friedman no se anda con rodeos: los menús partidos son dañinos y provocan más errores de los que evitan.

Volvamos a la puerta. Un menú partido es una puerta con dos picaportes a cinco centímetros de distancia: uno la abre hacia el pasillo y el otro hacia la escalera. Como el usuario toca etiqueta e icono indistintamente (recordemos el dato del estudio), la mitad de las veces acaba en el pasillo queriendo bajar la escalera. Cada error es una carga de página innecesaria, un botón de “atrás” y un poquito de confianza perdida. El propio ejemplo de botón partido de NN/g, cuenta el artículo, fracasa en los tests de usabilidad.

Un control que admite dos interpretaciones no es flexible: es ambiguo. Y la ambigüedad, en una interfaz, siempre la paga el usuario.

Lo que hace DHL (y lo que debería hacer tu ecommerce)

La alternativa que propone el artículo es tan sencilla que da rabia no verla en más sitios. Toda la fila de la categoría, texto e icono, hace una sola cosa: desplegar. Dentro del bloque desplegado, un enlace explícito de “Visión general” o “Ver todo” lleva a la página de la categoría. DHL.de lo hace así en su navegación: sin flechas decorativas, sin menús partidos, con un enlace de resumen en cada sección. Lens.org, el buscador académico, aplica la misma lógica en móvil con un caret hacia abajo que pasa a apuntar hacia arriba al expandir los resultados.

Fíjate en que ninguna de estas soluciones requiere tecnología nueva ni un rediseño. Requiere decidir que cada control tiene una única responsabilidad, que es lo mismo que pedimos al código desde hace cuarenta años y rara vez exigimos al menú.

Por qué este detalle minúsculo decide tanto

Es tentador leer todo esto como una discusión de pixel-pushers con demasiado tiempo libre. Sería un error. Un acordeón aparece en las preguntas frecuentes, en la ficha de producto, en el checkout, en la navegación móvil de prácticamente cualquier web. Si el 20% de los usuarios duda un segundo ante cada uno, o peor, abre una página que no quería, multiplicad ese segundo por el tráfico mensual y tendréis el coste real de un triángulo mal elegido. Las interfaces no se rompen por catástrofes; se desgastan por fricciones de medio segundo.

Hay también una lección sobre la relación entre marca y convención. Los iconos personalizados, esos que el equipo de branding diseña con cariño para que “no parezcan los de todo el mundo”, son precisamente los que peor funcionan en el estudio: los usuarios no saben que abren un acordeón. La identidad visual tiene sitio en el color, en la tipografía, en el tono. En el picaporte, no. El picaporte tiene que parecer un picaporte.

Friedman lo resume con una máxima que vale para casi todo en esta profesión: más veces de las que creemos, lo simple es mejor. Caret para desplegar, subrayado para navegar, una acción por fila y un enlace de resumen dentro. Cuatro reglas, cero dudas. Si vuestro menú tiene asas en puertas de empujar, ya sabéis por dónde empezar el lunes.