Diseño UI

Patrones de navegación en Apps: Google v/s Apple

La navegación móvil debe ser intuitiva para usuarios nuevos y antiguos. Sin embargo, alcanzar la accesibilidad suele ser un desafío mayor, ya que es necesario priorizar los contenidos por sobre los componentes de la interfaz. lo vio vió

Existen diferentes patrones de navegación que apuntan a resolver diferentes problemas, pero mantienen algunas fallas desde la usabilidad. Para conocer los detalles de esta materia, compararemos los patrones más populares de hoy: Google y Apple.

Material Design de Google

Es un framework desarrollado por Google, orientado al diseño de interfaces para Android, web y otros. A continuación, describimos los patrones de navegación principal de esta app.

• Barra de tabs superior: Como principal modo de navegación, Material Design propone un sistema de tabs ubicado en la parte superior de la pantalla. Esto permite acceder a los contenidos de primera categoría. También facilita la exploración y el cambio entre diferentes pantallas, permitiendo hacer scroll o mantenerse fijo.

Según Google, los tabs permiten organizar contenidos de primer nivel, cambiar entre diferentes vistas y grupos de aspectos funcionales de la app.

También recomiendan ejecutar cambios frecuentes entre distintas vistas; mantener apps con pocos contenidos de primer nivel y promover la existencia de vistas alternativas.

• Barras de tabs inferior: La navegación inferior, en cambio, es relativamente nueva. La misma, trata de imitar el sistema de navegación en iOS. Material Design limita su uso sólo para dispositivos móviles (para desktop recomienda el uso de sidebars).

Al encontrarse en la parte inferior de la pantalla, el usuario puede acceder fácilmente a ellos con un simple movimiento de dedo. Se recomienda que no tenga scroll, aunque puede tener ícono y/o texto.

Esta acción está recomendada para realizar cambios frecuentes entre distintas vistas; apps con pocos contenidos de primer nivel y para promover la existencia de vistas alternativas y con accesibilidad en mobile.

• Panel de navegación: Corresponde al menú lateral que se despliega desde un costado de la pantalla. Puede ser permanente, persistente o temporal. Para desktop se recomienda que esté siempre visible.

La principal desventaja de este sistema de navegación es que sus contenidos se encuentran ocultos, aumentando las probabilidades de que los usuarios no puedan acceder a ellos.

El panel lateral de navegación está recomendado para apps con muchos contenidos de primer nivel. Permite la navegación rápida entre vistas no relacionadas, de una estructura de navegación muy profunda y para dar espacio a contenidos no tan relevantes para el usuario.

iOS Human Interface Design

Estandariza y define los principios básicos del diseño de interfaz del usuario en dispositivos móviles Apple. Si bien es menos extensa y detallada que la documentación de Google, hace hincapié en los principios fundamentales que rigen su usabilidad.

• Barra de tabs inferior: Como principal patrón de navegación, Apple contempla una barra de tabs en la parte inferior de la pantalla. Este le permite a los usuarios cambiar rápidamente entre categorías sin importar la ubicación actual del usuario.

Algunas recomendaciones de Apple para su uso son para utilizar en la navegación entre distintas vistas y que cuente con 3 o 5 tabs.

• Controles segmentados: Corresponde a un horizonte de 2 o 3 segmentos. Cada uno despliega una vista diferente de una misma pantalla. Funciona de manera más “local” a modo de “switch” y suelen utilizarse en la parte superior de la pantalla.

Poseen menor jerarquía que la barra de tabs inferior y se distinguen visualmente de los contenidos de la página.

Unificando las experiencias

Aunque ambos sistemas son bastante flexibles, existen algunos aspectos que se priorizan en cada una. En el caso de Apple, el mayor énfasis se da en el uso del menú inferior de navegación. Esto se debe a la facilidad ergonométrica, permitiendo accesos más cercanos.

De forma nativa Apple no contempla un menú lateral desplegable. La navegación principal se dirige aún más hacia el menú inferior.

Por ejemplo, Youtube e Instagram se están esforzando por unificar las experiencias de uso de su App, independiente del dispositivo en que se navega. En el caso de Youtube, se utiliza el mismo tab bar inferior tanto para iOS y Android.

Aunque no hay rutas obligadas al momento de diseñar, la experiencia de uso dependerá directamente de la arquitectura de información. Diseñar para dispositivos móviles significa que los contenidos deben estar optimizados para pantallas de espacio reducido.

Para los dispositivos móviles menos es más, pues permite crear una experiencia de usuario consistente.