Diseño UI

Android v/s iOS: Patrones y componentes de navegación

Diseño 11 min. de lectura

Uno de los principales factores que delimitan el diseño de interfaz para aplicaciones móviles es el sistema operativo. Te ayudamos a reconocer los principales factores de los sistemas iOS y Android para diseñar aplicaciones intuitivas sin perder la identidad de tu marca.

Comparación de interfaz iOS y Android en blog IDA.

Actualmente, es común que nuestros productos se trabajen para los dos gigantes de la tecnología. Hablamos de Android e iOS. Estos son los sistemas operativos más utilizados en el universo de dispositivos móviles y sus diferencias se pueden notar a simple vista.

En este artículo veremos cada uno de los elementos relevantes para diseñar una app móvil en estos dos sistemas.

Diseño de Apps

Cuando diseñamos apps móviles es fundamental entender los criterios de diseño que se establecen para cada sistema operativo. Si bien están enfocados para un mismo objetivo de conversión, su comportamiento y distribución en la interfaz de usuario (UI) cambia. Por eso, debemos estar al tanto de las diferencias e implicancias de estos cambios. Ya que sólo conociéndolas, podremos hacer nuestra plataforma más efectiva, accesible y usable en cada una de sus interacciones.  

Al hablar de la interfaz de un producto digital, nos sumergimos en la etapa donde le damos vida a nuestros wireframes. Es ahí donde creamos la apariencia de la plataforma y elegimos algunos de sus componentes. De los cuales destacamos los más comunes:

Sin embargo, todos estos componentes deben estar pensados para el sistema operativo en el que funcione nuestro producto. 

Bases del diseño en cada App

El trabajo de todo diseñador es entender la morfología del diseño y los criterios que cada sistema operativo establece. Con ello, podemos determinar la identidad del sistema y adaptar nuestros proyectos al diseño final de la plataforma para la cual se está creando. Muchas veces se debe diseñar simultáneamente para ambos sistemas operativos y es aquí donde encontramos unos de los principales desafíos de todo diseñador.

Sistemas operativos

Las aplicaciones móviles nativas para iOS y Android tienen características específicas para cada sistema operativo.

En primer lugar debemos saber que Android usa Material Design (diseño de materiales), que establece una normativa de diseño enfocado en la visualización del sistema operativo Android. Esto interviene en la web y en cualquier plataforma que estemos utilizando desde un dispositivo móvil. Si tú estás diseñando para Android de seguro tienes que investigar este mundo creado por Google y enfocado al diseño.

iOS por otra parte utiliza Human Interface Guidelines (Pautas de Interfaz Humana) de Apple. Son documentos que ofrecen a los diseñadores y desarrolladores de aplicaciones un conjunto de recomendaciones destinadas a mejorar la experiencia de usuario. Con ellas, se ejecutan interfaces de uso más intuitivo, aprendibles y constantes. 

Aunque hay varios elementos similares entre sistemas operativos, vale la pena interiorizar sobre cómo podemos crear diseños útiles para cada uno.

Retroceder

Aunque volver atrás sea algo “fácil” de relacionar en la interfaz, es necesario tomar en cuenta este elemento. En Android este el botón que facilita esta acción, se muestra en la barra de navegación de la parte inferior del móvil. Es parte de los patrones de navegación incorporados en todos los dispositivos de dicho sistema operativo. Así resulta fácil e intuitivo de utilizar, sin embargo, para iOS esta acción es más compleja de abordar.

En iOS no existe dicho botón, lo que significa que debemos incluirlo en la etapa de diseño de interfaz. Para lograrlo, se utiliza una flecha que apunta hacia la izquierda en el extremo superior izquierdo de cada una de las pantallas que se visualizan en la app. 

Para sortear este alcance, iOS también utiliza el gesto de deslizar de izquierda a derecha para volver a la pantalla anterior. Un gesto que funciona en la mayoría de las aplicaciones, por lo que es muy importante considerarlo a la hora de diseñar herramientas para este sistema operativo. 

Iconografía 

Muchas veces nos vemos en la incertidumbre con respecto a los íconos que utilizaremos en nuestra plataforma, y la verdad es que hay un mundo detrás de esto. 

Cuando trabajamos en la iconografía de nuestra app, debemos considerar que cada sistema operativo tiene su propia identidad iconográfica. Esta le entrega personalidad a cada sistema y es una de las diferencias significativas de cada diseñador. Sin embargo también podemos diseñar nuestra propia iconografía para acciones específicas. Con ellas podemos mejorar la comprensión del contenido o simplemente entregar mayor personalidad e identidad a la marca con la que trabajamos.

Patrones de diseño de Android (Material Style) comparadas a las iOS.

En la página de Ionicons puedes visualizar las diferencias entre la iconografía de Material style e iOS style. Inclusive puedes descargarlas.

Botones 

Otro elemento importante son los botones de acción. Como su nombre lo dice, permiten que el usuario realice una acción e interactúe con la plataforma. Algunos tienen mayor jerarquía que otros, esto se debe a la prioridad, visibilidad y nivel de navegación de la acción. Material Design utiliza los conocidos botones flotantes que sirven para dar mayor prioridad a dichas acciones. Un ejemplo es el botón flotante de Gmail que permite escribir un nuevo e-mail. 

Por lo general estos botones son principalmente circulares y con sombreado. Esto se utiliza para dar la sensación de que están una capa más arriba, flotando sobre contenido principal. Generalmente se encuentran en el extremo inferior derecho de la pantalla, lo que permite otorgar una mayor usabilidad para el usuario. Para interiorizarte sobre todas las pautas de diseño en la creación de un botón flotante, te recomiendo mirar este instructivo de Material Design, con todos los detalles y características que debemos considerar.

Por otra parte en iOS muchas aplicaciones funcionan de manera distinta. Estas destacan por ubicar los botones más importantes en la parte superior de la pantalla. Este patrón permite que se pueda visualizar la acción fácilmente y agilizar los procesos de conversión para los objetivos del usuario. Los botones son personalizables y pueden incluir un título o ícono según la identidad de tu marca. 

Diseño de botones

El sistema también nos proporciona varios estilos de botones predefinidos para diferentes casos de uso, pero también podemos diseñar botones totalmente personalizados para el enfoque y la gráfica de nuestra app. Algunas de las pautas para estos botones incluyen:

  • Usar verbos en los títulos
  • Mantener títulos cortos
  • Considerar usar un borde o fondo cuando sea necesario

Si estás diseñando un producto digital enfocado en el sistema de iOS, te recomiendo ver las pautas de Human Interface Guidelines enfocadas en el uso de botones.

Menú de navegación

Muchas veces cuando hablamos del menú en una aplicación, esperamos que aparezca el típico menú hamburguesa que todos ya conocemos. Pero este no es el único elemento que ayuda al usuario a seguir el correcto flujo de nuestra app. Muchas de las aplicaciones están pasando de los menús hamburguesas agregando otras opciones de navegación con las opciones siempre visibles.

Cada vez es más frecuente encontrar barras de pestañas fijas en la parte superior de la pantalla (también llamadas Tabs). Por su lado, la parte inferior de la pantalla también es usada con barras de navegación fijas. La verdad es que no existe un criterio establecido para iOS o Android en este tipo de soluciones. 

Youtube y Spotify funcionan de manera similar. Las dos aplicaciones utilizan una barra de navegación fija en ambos sistemas. Incluso en algunos casos tienden a utilizar la misma iconografía, no así la app de mensajería Whatsapp. En esta última podemos notar a simple vista las grandes diferencias existentes entre estos dos sistemas operativos.

Interfaz de la aplicación Whatsapp presentada a la izquierda en versión iOS y a la derecha en versión Whatsapp.

Navegación en la app de Whatsapp. A la izquierda iOS, a la derecha Android.

Sistemas operativos en Whatsapp

Como podemos ver en la imagen, en esta aplicación existen patrones de navegación establecidos según el sistema operativo. A la izquierda podemos ver la app Whatsapp en el sistema iOS. En esta versión posee un menú de navegación fijo en el sector inferior de la pantalla, el cual nos permite encontrar rápida e intuitivamente las categorías y elementos que nos entrega la aplicación.

En esta versión también podemos ver que su interfaz es mucho más gráfica que la de Android. Ya que muestra la barra de navegación fija con iconografía y texto. Por otra parte si comparamos las imágenes, veremos que en el sistema Android se visualizan las pestañas o tabs en la parte superior de la pantalla. 

También podemos destacar otro elemento relevante: el uso del color. A diferencia de iOS que es un sistema donde se prioriza el uso del blanco, Whatsapp utiliza el color verde junto a la gráfica propia del sistema Android, además de añadir un botón flotante, como ya mencionamos anteriormente.

Ambas maneras de situar los elementos en la pantalla crean una composición visual y ayudan a crear una personalidad e identidad para cada plataforma, según el sistema operativo al que va dirigido nuestro producto digital.

Diseñar Apps

Para tener un mayor dominio sobre como diseñar tus productos digitales, es importante saber los principios básicos de cada sistema operativo. Estos funcionan como pautas y no necesariamente debemos seguirlas al pie de la letra, puesto que no son reglas estrictas. 

No existe una manera correcta de crear. Todas las soluciones son válidas si funcionan, por eso las etapas de research son importantes ya que los test de usabilidad nos permitirán reconocer el funcionamiento de nuestro diseño. Lo importante es crear una interfaz intuitiva, accesible y fácil de utilizar para nuestros usuarios. Entregar un producto verdaderamente significativo y deseable.

 

Recomendados:

Interaction Design patterns : iOS vs Android – Ved Medium

Diseño de las Apps: Android vs. iOS – GoodBarber

Cómo crear una app para Android e iOS – GoodBarbet

Ionicons: Beautifully crafted open source icons – Ionicons

 

Acerca del Autor

Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.

Agregar un comentario