Las técnicas responsive design nos permiten adaptar una web a múltiples dispositivos… pero el tema del menú no deja de ser un incordio. ¿Cómo trasladar ese magnífico menú desplegable con docenas de paneles anidados a un móvil?
La locura del responsive design es todavía bastante reciente, pero no deja de ser interesante repasar las distintas aproximaciones al problema.
Déjalo fluir
Una solución muy elegante pero tremendamente limitada. Se trata de colocar el menú en la parte superior y dejarlo fluir de manera natural. Si tenemos un menú con un número de elementos verdaderamente reducido puede ser una opción práctica y elegante… pero claro, eso es ponerse en el caso fácil… imagínate que el menú tenga también que verse en alemán.
Es la solución que veo para pequeñas webs corporativas, portfolios online etc.
A favor
- Facilidad.
- Elegancia.
En contra
- Cabeceras enormes a medida que crecen los elementos del menú.
- Limitado, limitado, limitado…
Ejemplos
- http://trentwalton.com/
- http://yiibu.com/
- http://timkadlec.com/
- http://ethanmarcotte.com/
- http://bradfrostweb.com/
Enlaces en el pie
Otra táctica es colocar una lista de enlaces en el pie. Es un sitio práctico porque el hecho de que “crezca” no supone tantos inconvenientes como en la cabecera, pero no deja de ser un sitio menos accesible y, porque no, raro.
A favor
- Fácil.
En contra
- No es muy elegante, incluso algo desorientador. Podríamos decir que es una práctica que va en contra de las convenciones… y ya sabemos lo importante que es abrazar las convenciones.
Ejemplos
Usar un select
Personalmente fue la primera aproximación seria al problema que encontré, pero con la que no dejo de sentirme algo incómodo. Es genial crear el típico select de los formularios y confiar en que los navegadores crearán un menú desplegable o lo que sea necesario para que sea accesible… pero no deja de ser un maldito select.
A favor
- Práctico y usable. Su usabilidad está asegurada en el momento en el que los sistemas operativos móviles se esfuerzan por hacerlo accesible.
En contra
- Solución relativamente poco elegante a nivel técnico. Puede ser necesario crear un menú alternativo y controlar cuando se debe mostrar. Incluso un poco de JavaScript para que funcione bien.
- Feo. Depender de un elemento nativo, como es un select, produce una pérdida de control en el diseno. Nuestro botón aparecerá distinto en los diferentes navegadores, puesto que es muy complicado darle estilo y que lo respeten.
- Limitado a la hora de trabajar con submenús (no queda muy claro qué está dentro de qué).
- Potencialmente confuso. Un select es fácilmente reconocible por los usuarios, eso es cierto, pero están acostumbrados a verlo en el contexto de un formulario, no en el de la navegación.
Ejemplos
- http://viljamis.com/
- http://retreats4geeks.com/
- http://www.fivesimplesteps.com/
- http://www.performancemarketingawards.co.uk/
Menú desplegable
Y llegamos a mi favorita. Recordar bien este botón, porque quizá se convierta en una nueva convención (si no lo es ya).
Se trata de ocultar el menú y hacer que éste se despliegue al pulsar un botón. Es el sistema que usa el kit de desarrollo web de twitter y sí, me gusta especialmente.
A favor
- Usable. Y esto es lo importante. Queda perfectamente claro qué elementos están dentro de otros y el menú se muestra bajo demanda, dejando de estorbar cuando no lo necesitamos.
- Solución elegante. Es posible reutilizar la misa estructura del menú, simplemente cambiando los estilos CSS y añadiendo una pizca de JavaScript.
- Bonito. Las posibilidades que ofrece este enfoque desde el punto de vista del diseno son muy interesantes.
En contra
- Confuso. Es posible que el icono no sea suficiente para que el usuario entienda de qué se trata, puede que ni añadir la palabra “menú” sea suficiente.
- Dependiente de Javascript. Puede parecer menos elegante por el hecho de necesitar un poco de JavaScript para lograr la interacción.
Ejemplos
Menú desplegable desde la izquierda
Una especie de variación curiosa respecto a la anterior. Si no me equivoco la idea viene de la versión móvil de Facebook. Se trata de desplegar el menú desde un lateral, desplazando el contenido a la derecha.
Realmente no sabría decir qué aporta respecto a la solución anterior a parte del cambio visual y de feeling. En cualquier caso resulta anecdótico que lo tenga la web de Obama.
A favor
- Usable elegante y bonito, al menos tanto como la solución anterior.
- Seguimos convenciones. Usar la solución de Facebook puede ser una buena idea, por aquello de no reinventar la rueda y aferrarse a las convenciones.
En contra
- Confuso y dependiente de Javascript, como la solución anterior.
- ¿Raro? Sé que aquí estoy entrando en el terreno de lo subjetivo, pero podría decirse que mostrar un poquito de la web a la derecha no resulta muy útil y, por lo contrario, puede resultar algo confuso. ¿Qué os parece?
Ejemplos
Ocultar el menú
A mi modo de ver esta solución no es ninguna solución en absoluto. Se sustenta sobre la idea de que el usuario móvil quiere ver cosas muy concretas; no tiene tiempo y no necesita todas las funciones de la página original… De ahí que se oculte mediante CSS ciertas partes de la web.
Pero esta idea está ya cerca de ser un mito.
El “ordenador tradicional” está dejando de ser el método por excelencia de acceso a la red. Se prevé que la gente navegue intensivamente desde móviles, tablets, televisores… y vete tú a saber qué más puede inventarse. Precisamente por eso es tan importante la filosofía que hay detrás del responsive design y considero que esta aproximación rompe con ella.
A favor
- Flexibilidad. Si tienes problemas de espacio, ocultar lo que no necesitas resulta un alivio sintomático.
- Puede ser útil en casos concretos. No “incendiemos las naves”, nunca se sabe…
En contra
- Las partes que no se muestran siguen “pesando”. Ocultar mediante CSS sólo afecta a la visualización, el código y las imágenes se siguen descargando.
- Tus usuarios llorarán. Descubrir de repente que no puedes acceder desde tu móvil a lo que el otro día veías desde el ordenador de la oficina puede dejarte un regusto amargo pegado en el fondo del paladar.
Ejemplos
Conclusión
El responsive design puede estar algo verde, de hecho están surgiendo ideas muy interesantes por ahí, como menús “deslizantes” que podríamos desplegar deslizando el dedo hacia abajo.
En cualquier caso el responsive design parece que ha venido para quedarse y que lentamente va limando asperezas, como el tema de la navegación. ¿Qué opináis, se os ocurren más soluciones?
Fuente: http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Pingback: Diseño de interfaces. Lo que deberías saber | Estudio Creativo