Artículos etiquetados con:diseño
Navegación móvil: el menú está servido

Durante los últimos años, en el campo del diseño y la usabilidad se ha hablado mucho sobre navegación en móvil. Y cuando digo mucho, quiero decir más de lo usual. En este post haremos un repaso de su evolución y trataremos de explicar cuáles son los motivos de este interés tan constante.

 

ANTES DE iPHONE, TODO ERA PC

Parece que no, pero las interfaces digitales en dispositivos cotidianos llevan con nosotros ya unas cuantas décadas. Cleopatra se lleva menos tiempo con los primeros móviles que con las primeras pirámides, así que imagina.

Con el lanzamiento del primer iPhone, allá por 2007, la navegación móvil comienza a desvincularse de la navegación de escritorio. Por entonces, las interfaces en dispositivos digitales lucían más o menos así:

Vista navegación pocket pc

Windows Mobile 5.0, 2005

Los ordenadores más pequeños o pocket PC (recibían un nombre casi literal) tenían el estilo, la cantidad de opciones, y hasta los mismos fallos de diseño que los sistemas operativos de la época.

Después llegaron las Blackberry con sus teclados físicos y su mejora en la tecnología de stylus para pantallas pequeñas. Poco tiempo tardó Apple en presentar su solución para el Smartphone moderno, ese que no necesita teclas ni punteros ya que su interfaz está pensada para los rechonchos dedos humanos.

Fue en este momento cuando se introdujo una de las pocas soluciones que perduran en el tiempo en el diseño de interfaz digital: el Tab Bar.

 

TAB BAR, UN VIEJO CONOCIDO

El Tab Bar organiza toda la información de la app al primer y más básico nivel de navegación de la misma. Aparece fijo en la zona inferior de la aplicación y permite cambiar rápidamente entre diferentes secciones de la misma. Por regla general, siempre mantiene el mismo formato y aspecto en toda la aplicación.

Navegación móvil - Tab bar iphone

Tab Bar. Guías de estilo de iOS 2017

Es una herramienta útil, relativamente elegante y, lo más importante, funciona. A pesar de ello, con el tiempo la Tab Bar empezó a verse cada vez más como un elemento anticuado, de una época pasada. Éramos personas modernas, no podíamos tener las opciones ahí abajo ocupando sitio. ¿Qué somos? ¿Animales? Necesitábamos una solución más elegante, más sutil, más de diseño.

 

¡OH, THE HAMBURGER MENU!

Eran momentos excitantes en la escena del diseño de UI/UX en productos digitales. Todo era posible. Así que arrastramos todas las opciones que nos ensuciaban la pantalla y las pusimos bajo un icono en una esquina. Nacía así el menú hamburguesa, bautizado por Google con el grandilocuente nombre de Nav Icon.

Navegación móvil - Google Material

Guía de Estilo de Material Design. Google, 2017.

El funcionamiento del menú hamburguesa es sencillo: al pulsarlo se despliega un listado en el que aparecen todas las secciones. Se trata del navigation drawer, un cajón (como indica su nombre en inglés) donde podemos guardar y organizar todas las opciones disponibles, y donde podemos situar otros elementos secundarios como enlaces a preferencias, logos de patrocinadores, etc. El resultado es una interfaz limpia donde destaca únicamente el contenido. Es sencillo, dinámico y nos permite extender la aplicación de forma indefinida. También es muy fácil de vender, pero eso es otro tema…

 

NAVIGATION DRAWER: UN CAJÓN ¿DESASTRE?

Con el nacimiento de la metodología de diseño Mobile First (diseñados primero para móviles y ya, si eso, vamos ampliando hasta la vista de escritorio) este patrón de navegación se fue incorporando a la web. La web comenzó a tener esta pinta:

Portal del empleado de Restalia. Proyecto de SDOS, 2016.

Cabeceras con imágenes enormes, completamente limpias, y con el menú hamburguesa siempre en la esquina. Si tu objetivo principal es ese: ¡enhorabuena, vas en buena dirección! No obstante, hay que tener en cuenta que este tipo de navegación penaliza aspectos esenciales de algunas tipologías de aplicaciones y webs, como la transparencia, el engagement y la facilidad de uso por parte del usuario. Al no ser una opción tan evidente, la cantidad de usuarios que cambian entre secciones baja irremediablemente, y la experiencia en general es más pobre. No se invita a navegar.

Luke Wroblewski, uno de los diseñadores más importantes que actualmente trabajan en Google, compartía hacía unos años en su artículo Lo obvio siempre gana las métricas de una de sus aplicaciones, Polar: la cantidad de usuarios que cambiaban entres secciones se reducía drásticamente al pasar de un menú de navegación con pestañas a uno desplegable, similar al menú hamburguesa.

 

También Mike Stern, autodenominado Apple Design Evangelist, argumenta que en una interfaz digital siempre deberías ver claramente de dónde vienes y hacia dónde puedes ir. Los menús laterales no cumplen con esa función, puesto que ocultan toda la información al primer vistazo del usuario. Además, apunta que un menú hamburguesa duplica (como mínimo) el número de acciones a realizar para cambiar de sección.

Como hemos visto, el menú hamburguesa puede ser una opción interesante a nivel estético pero, a nivel funcional y de experiencia de usuario, los tests de usabilidad demuestran serias dificultades:

  • Afecta negativamente al descubrimiento del contenido, tanto en escritorio como en móvil.
  • No da una idea de lo que hay detrás.
  • La dificultad de las tareas aumenta al no mostrar las opciones claramente desde el primer momento.
  • El tiempo en completar tareas se duplica, como mínimo.
  • Los usuarios no están familiarizados con él. Esta conclusión puede variar según el público objetivo de la aplicación o web, pero sí es cierto que no es reconocible en el 100% de los casos: porque no es un estándar,porque no está soportado por todas las plataformas ni todas las herramientas, y porque lleva relativamente poco tiempo con nosotros.

Entonces, ¿debemos desechar por completo el menú hamburguesa en nuestros diseños? No todavía. Existen herramientas, webs o aplicaciones que se benefician de este tipo de navegación. Es el caso de aplicaciones en las que lo que interesa resaltar un contenido, una funcionalidad o mantener el área limpia y despejada en favor de la productividad.

 

PRIORITY+ O LA OPCIÓN SEGURA

Si el Tab Bar nos limita en número de opciones y los efectos negativos del menú hamburguesa desaconsejan su uso, seguro que te estás preguntando ¿cuál es la mejor opción? La respuesta es ninguna de las dos y las dos a la vez. Nace así el patrón de navegación Priority+, la combinación de ambas soluciones: cuando hay demasiados enlaces, mostramos los más recurrentes o interesantes y escondemos el resto. Un ejemplo claro es el de la aplicación como Facebook, donde se han optado por incluir botones de Más opciones dentro de sus barras de navegación.

Estamos ante una muy buena alternativa, pues da prioridad a ciertos contenidos mientras que deja otras opciones menos importantes a la voluntad de descubrir y buscar del usuario. Los datos indican que el 80% de nuestros usuarios utilizará solamente las opciones destacadas, y no echará de menos las demás. Para los que quieran realizar tareas secundarias o más avanzadas, siempre las podrán encontrar bajo el botón Más.

Navegación móvil - Tab bar Priority+

Gluten Detect. Proyecto de SDOS, 2017.

 

DISEÑANDO MÁS ALLÁ DE LAS TENDENCIAS

A simple vista, este último patrón puede parecer la solución definitiva a todos los problemas de navegación. Sin embargo, ninguna opción será la ideal para todos y cada uno de nuestros proyectos. Cada dispositivo y cada tipo de contenido necesita una estructura distinta en función del objetivo del proyecto y del comportamiento que busquemos provocar en el usuario. Cada proyecto requiere un tipo de navegación.

Portal web de la Diputación de Sevilla. Proyecto de SDOS, 2016.

  • En escritorio, es preferiblemente presentar la navegación de forma evidente, mostrando links en la barra superior de la web. A no ser que tu intención sea la de crear un sitio web lo más elegante y limpio posible.
  • En móvil,  lo aconsejable es repensar la navegación, cuanto más mejor.
    • Si se puede, reducir a 4 o 5 links principales, mostrarlos de forma que sean muy visibles y que resulte evidente que tienen una posición alta en la jerarquía de información.
    • Si tenemos más de 5 enlaces, la opción más razonable es ocultar algunos. Para ello podemos hacer uso del patrón de navegación Priority+.
    • Si una sección tiene mucho contenido, se podría implementar una línea de pestañas en la parte superior, de forma que lo filtre o lo pagine, y facilite la lectura.
    • No olvidemos otros tipos de navegación, ni la conveniencia de colocar enlaces de manera frecuente acompañando al contenido. Utilizando de forma inteligente los estados vacíos de ciertas pantallas sencillas o los tutoriales podemos ayudar a la navegación.

Como ves, no se debe tirar a la basura una solución concreta por sistema, sino estudiar cuidadosamente cada proyecto y sus objetivos para finalmente decidir qué tipo de navegación sería la más conveniente.

En diseño UI/UX, lo realmente importante es aplicar las buenas prácticas de usabilidad a cada proyecto, independientemente de la plataforma en la que estemos. Guiar al usuario a través de nuestra app o nuestra web sin interrupciones ni saltos no es fácil, pero si lo conseguimos, haremos que su experiencia sea agradable y, lo que es mejor aún, haremos que repita.

Y tú, ¿qué opinas?


La desestructuración del diseño web: renovarse o morir

Con la aparición de smartphones y apps, muchos afirmaban que la muerte de la web era simple cuestión de tiempo. Sin embargo, esta fue la oportunidad que los diseñadores aprovechamos para reinventar la web y sus formas.

Poco a poco, el contenido fue reduciéndose y las estructuras que regían los elementos pasaron a ser responsive para adaptarse a los nuevos dispositivos. A medida que cambiaba la forma de consumir contenidos digitales, cada vez de forma más móvil e inmediata, las mejoras de los equipos y los avances en CSS3 y html5 se fueron sucediendo, permitiendo así diseños más atractivos para el usuario.

Uno de los cambios más llamativos se ha producido en las estructuras o grids de diseño web. Estas nuevas formas de componer los elementos se conocen como broken grids u open composition; ya que en ellos los elementos parecen situarse sin responder a un orden lógico. A continuación, veremos algunas de las características más llamativas de este tipo de layouts.

 

COMPOSICIÓN LIBRE

Las nuevas tendencias en web design apuestan por composiciones más abiertas y fluidas en las que es más fácil crear puntos de atención destacando ciertos bloques. Con este tipo de diseño, evitamos la monotonía de bloques sucesivos a la que hemos estado acostumbrados hasta hoy.

Desaparece la segmentación marcada de contenidos cuyos límites eran fáciles de identificar y dejan paso a una separación entre ellos menos obvia.

Como vemos en el caso de AGQ Labs, los contenidos se suceden uno detrás de otros sin que haya una separación visible. El uso de espacios en blanco es suficiente para proporcionar la noción de estructura necesaria para entender la división de los bloques.

Navegación web en el proyecto AGQ - SDOS

 

 

CONTENIDOS ENFOCADOS A LA EXPERIENCIA DE USUARIO

Ahora que el usuario se ha acostumbrado a navegar por la web de manera totalmente intuitiva, es posible aprovechar esta ventaja para mostrar los contenidos de una forma más atractiva. Incluso contenidos que a priori no parecen ser útiles para el usuario, como aquellos más enfocados a comunicar los valores de marca.

Gracias a este tipo de contenido, creamos el interés necesario para prolongar el tiempo medio de permanencia en el sitio web y, sobre todo, conseguimos transmitir al usuario una experiencia positiva asociada a la marca, el producto o cualquiera que sea el objeto de la web.

En el proyecto que realizamos para Campus Ineco, al ser un sitio web dedicado a la consultoría de ingeniería, decidimos apostar por un contenido más visual. El objetivo era dar una dimensión humana y alejada de esa visión fría que se atribuye en general a las actividades que implican tecnología.

Proyecto web para Campus Ineco - SDOS

 

CONSUMO INMEDIATO

Si queremos que los contenidos de la web calen en los usuarios, debemos tener en cuenta los nuevos hábitos de consumo. Tal y como mencionábamos al principio de este post, la aparición de los smartphones ha cambiado por completo la manera de relacionarnos con los contenidos. No hay más que pensar en nosotros mismos: ¿cuánto tiempo dedicamos a cada post en nuestro feed de Facebook? O ¿cuántos caracteres caben en un tweet? Probablemente ni siquiera lleguemos a leerlos por completo. Priman la inmediatez y el carácter visual sobre todas las cosas.

En general, nos sobran los textos y nos basta con las imágenes. Los nuevos layouts abiertos permiten satisfacer ambas necesidades presentando la información de la misma manera en que lo haríamos en una red social a través de imágenes y textos reducidos.

Esta fue la principal consideración que tomamos en el proyecto Gambrinus Gastro. La estructura de este sitio web permite navegar de un contenido a otro como si se tratase de pequeñas historias, de imagen a imagen. A medida que hacemos scroll, sólo se visualizan imágenes y un texto reducido estableciendo así un paralelismo con la navegación en redes sociales.

Proyecto web para Gambrinus - SDOS

 

Como vemos, las nuevas tendencias de layouts web más flexibles no son más que la respuesta a la necesidad de poner en valor los contenidos en un momento en el que la atención y el tiempo que prestamos a estos se reduce progresivamente. Sin embargo, a la hora de diseñar un sitio web, hemos de tomarlo como lo que es, una tendencia. Puede ayudarnos a pulir la apariencia final; pero nunca basarnos en él como un dogma. La clave para garantizar el éxito de nuestro diseño y su durabilidad, reside en dar una respuesta personalizada a cada caso atendiendo a sus necesidades específicas.

 


La Francerie, más que un café

Esta semana se ha publicado la presencia digital de una nueva enseña del Grupo de Restauración Beer&food, al que pertenecen otras marcas como Gambrinus, La Chelinda, La Clueca, Cruz Blanca, Official Irish Pub, Indalo Tapas o Dublin House. Se trata de La Francerie, una cadena de cafés de estilo francés en los que poder disfrutar de productos de calidad a cualquier hora del día: desayuno, almuerzo, merienda y cena.

En esta ocasión creamos una propuesta adaptada a la línea estética y la identidad corporativa de la enseña, un diseño modular responsive que permite su perfecta visualización desde cualquier dispositivo. Para crear dinamismo se han incluido animaciones, integración con redes sociales y geolocalización. El resultado es una imagen fresca y elegante totalmente alineada con los valores que quiere transmitir la marca.

Desarrollado en tecnología Drupal, el sitio permite agilidad en la gestión y flexibilidad ante la ampliación de contenidos y locales, algo que, estamos convencidos, no tardará en suceder.

¿Quieres ver más de este proyecto? Aquí te lo enseñamos.


Diseño para vivir: tecnología y accesibilidad

AudescMobile y Artaccés estarán desde hoy expuestas en Diseño para vivir, una exposición temporal organizada por el Museu del Disseny de Barcelona que muestra las soluciones tecnológicas que contribuyen a la accesibilidad.

Estos proyectos permiten disponer mediante el dispositivo móvil de contenidos accesibles, subtítulos y/o audiodescripciones, de reproducciones audiovisuales independientemente del medio en el que se emitan.

Con el lema de 99 proyectos para el mundo real, la exposición plantea cómo el diseño y la tecnología permiten resolver continuamente y de forma articulada graves problemas de alto impacto social, mejorando la vida de los usuarios a quienes va destinado.

La exposición, que se inaugura hoy, estará abierta desde el 19 de febrero hasta el 17 de mayo de 10 a 20h (de martes a domingo).

Estar presentes en esta muestra supone para SDOS el reconocimiento a unos desarrollos que se han constituido como referentes en el sector de no sólo de la accesibilidad, sino también de la movilidad.


Uso de cookies

Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continúas navegando estas dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pincha el enlace para obtener más información.

ACEPTAR