5 diferencias clave entre diseño iOS y diseño Android

Hoy te presento 5 diferencias para poder empezar tu trabajo considerando 5 aspectos de diseño que serán diferentes según si es una app iOS o Android.

Y es que si pruebas unas misma app en iOS y luego en Android, probablemente verás que la experiencia de usuario no es la misma. No tiene por qué ser mejor o peor, pero probablemente sí que será diferente.

Así que es importante saber a qué atenerse en cada plataforma para poder crear diseños UI únicos con experiencias de usuario plenas.

Notas del episodio

Enlaces mencionados en el podcast

Aquí están los  enlaces mencionados en el episodio de hoy:

Ejemplos comentados en el podcast

   

Ejemplo de diferencia 2: El pantallazo de la imagen de la izquierda corresponde a la versión iOS de la app de Linkedin.  En él podemos ver la flecha en la esquina superior izquierda de la pantalla para poder acceder a la pantalla anterior. En la imagen de la derecha, la versión de la app nativa en Android, vemos que esta flecha no está.

Pantallazo de app Linkedin en iOS
Pantallazo de app Linkedin en Android
   

Ejemplo de diferencia 3: El pantallazo de la primera imagen corresponde a la versión iOS de la app de YouTube.  En él podemos ver la navegación inferior mediante tabs con iconos y etiquetas. En la segunda imagen, la versión de la app nativa en Android, vemos que las barra de navegación con pestañas se encuentra en la parte superior de la pantalla y sólo tiene iconos.

 

Ejemplo de diferencia 5: El siguiente pantallazo muestra el enfoque de la misma app de Medium para iOS. Este enfoque está basado en la barra de navegación inferior de pestañas. Fíjate como algunas opciones del menú hamburguesa de la app en Android han tenido que moverse ahora a la pestaña de opciones User. También verás que por motivos de espacio se ha prescindido de las etiquetas en estas pestañas, pese a ser una app en iOS. 

 

Ejemplo de diferencia 5: El siguiente pantallazo muestra algunos ejemplos de menús en la app de Medium para Android. Como puedes ver, la app dispone en Android de un icono de hamburguesa en la parte superior izquierda, el cual muestra las diferentes opciones y áreas de la aplicación.

 

NOTA: Estos ejemplos se han extraído del artículo Interaction Design Patterns: iOS vs Android, escrito por Ved.

¿Eres de los que prefieren leer?

Transcripción del podcast por si lo tuyo es leer a tu rollo con una buena taza de te/café/mate...

Imagina que recibes una llamada de un cliente potencial pidiendo una estimación para esa app que quiere hacer. Quiere tanto la web app como como la app nativa para  iOS y la app nativa para Android, las plataformas líderes hoy en día.

¿Qué tipo de diferencias crees que tendrán entre ellas? Muchas veces se suele caer en el error de pensar que estas diferencias se reducen sólo a aspectos visuales.

Realmente se ven diferentes, y el motivo básico es sencillo: Las apps móviles nativas para IOS y Android tienen características especiales que vienen definidas por el sistema operativo.

Pero la realidad es que las diferencias derivadas de cada sistema operativo van más allá de los aspectos visuales, al incluir diferencias en estructura y flujo de las apps.

Por este motivo, encontrarás que entre una app en IOS y la misma en Android habrán diferencias de tres tipos:

  1. Visuales: cómo se muestran los diferentes elementos UI
  2. De estructura: ubicación de los elementos en la pantalla.
  3. De flujo: la navegación será diferente según la plataforma.

Tener en cuenta estas diferencias será básico para mejorar la experiencia de usuario.

Para ayudarnos en este proceso, Apple y Google nos recomiendan en sus directrices utilizar controles de navegación estándar de la plataforma siempre que sea posible.

La idea detrás es sencilla: los usuarios están familiarizados con la forma en que los controles (como los controles de página, pestañas, etc) suelen funcionar en la plataforma que ellos usan.

Si el usuario Android se encuentra el formato de barra de pestañas de Android lo reconocerá fácilmente, y de forma intuitiva lo usará correctamente en la aplicación. De esta manera, el usuario tendrá una buena experiencia de uso, y no se frustrará, ¡ni te maldecirá!

Así pues, veamos ahora de forma concreta estas diferencias a considerar para conseguir una elevada experiencia de usuario.

1. Filosofías de diseño diferentes

Para las apps en Android, Google creó un lenguaje de diseño: Material Design.

Este lenguaje se puede entender como un marco de trabajo para el diseño de apps en Android. Parte de una profunda reflexión sobre el diseño de interacción desde el punto de vista del usuario.

Por cierto, acabo de nombrar un concepto clave en el diseño de apps: diseño de interacción. En las apps tenemos el diseño de interfaz (UI) (diseño visual, es decir, lo que los usuarios ven). En cambio, el diseño de interacción se centra en definir cómo los usuarios se relacionan con la interfaz, y cómo ella responde y da feedback a los usuarios para que sepan que han logrado lo que querían.

Volviendo a Material Design, lo que hace es definir un conjunto de principios que te ayudarán a diseñar apps con una elevada usabilidad, pero a la vez dejándote libertad a ti como diseñador.

Material Design recibió su nombre por estar basado en objetos materiales y, por tanto, en la realidad táctil. Esto provoca que los elementos se coloquen en un lugar, ocupando un espacio y con un movimiento determinado. Podréis encontrar un enlace a Material Design en las notas de este post.

Para diseñar una app en Android lo recomendable es tener en cuenta el marco definido por Material Design. Hay algunas excepciones, como es el caso de Instagram, pero de esto hablaremos ya en el próximo programa

En el caso de las apps para iOS, Apple creó las Human Interface Design Guidelines. También podréis encontrar un enlace a ellas en las notas de este post.

Estas guías son una exhaustiva lista de patrones para las apps nativas para iOS. También estoy preparando un futuro episodio para hablar en concreto sobre estas guías y poder ofreceros materiales que creo que os serán útiles.

2. Diferentes formas de moverse entre estados y pantallas

Los usuarios se mueven continuamente hacia adelante y hacia atrás entre pantallas. Android dispone de una barra de navegación universal en la parte inferior de los dispositivos.

Esta barra es un elemento muy útil y práctico que ofrece, entre otros, un botón para volver atrás. Suele funcionar así en casi todas la aplicaciones para Android.

El enfoque de IOS es muy diferente. iOS prescinde completamente de una barra de navegación global, así que el usuario no puede retroceder utilizando ningún botón global de Atrás incorporado en el dispositivo.

Este detalle afecta al diseño de las apps móviles para IOS porque te obligará a ti, el diseñador, a incluir en el diseño de las pantallas internas una barra de navegación nativa con un botón Atrás en la esquina superior izquierda. En las notas de este post podrás encontrar el caso de Linkedin como ejemplo de ello.

Si tienes un iPhone a mano lo puedes ver ahora mismo también. Navega por los settings del iPhone y verás que a la que haces tap en un elemento de la lista, accedes al siguiente nivel. Verás que en la parte superior izquierda ha aparecido la palabra “settings” para volver a la anterior pantalla de settings generales. De esta manera, se ofrece la opción de poder navegar atrás en iOS.

3. Diferencias en los patrones de navegación

Las apps incluyen áreas en ellas para permitir la navegación entre diferentes secciones de una app. Normalmente estas áreas se organizan en pestañas. Un ejemplo de área de navegación sería el formado por las siguientes 4 pestañas: Home, Favoritos, Buscar y Configuración.

En Android, este área de pestañas con las diferentes áreas de una app se suele mostrar en la parte superior. En cambio, en iOS estas pestañas se suelen encontrar en la parte inferior.

En realidad Material Design también contempla el componente de navegación inferior. Pero, según las pautas de Material Design, no se recomienda el uso de pestañas y navegación inferior al mismo tiempo porque pueden causar confusión al navegar.

Otro punto a considerar en nuestros diseños es que la versión Android suele mostrar sólo iconos en las pestañas, mientras que en iOS los iconos van acompañados de etiquetas o labels.

Por cierto, Android permite pasar de una a otra pestaña con el gesto de swipe de izquierda a derecha. En cambio, en iOS este mismo gesto suele utilizarse en casi todas las apps para acceder a la pantalla anterior.

De esta manera iOS ofrece una solución al hecho de no disponer por defecto de una barra universal con un botón de volver atrás, como hace Android. Ahora bien, nos encontramos que un mismo gesto producirá resultados muy diferentes en cada plataforma.

Puede que todo esto te suene a detalles que no tienen importancia, (e incluso te plantees ‘Pero María, qué le importarán estas nimiedades al usuario de la súper app que voy a diseñar”). La realidad es que sí que le importarán, y mucho.

Para empezar puedes cometer el error más básico de todos en una app en iOS: no permitir al usuario volver atrás y dejarlo sin poder salir de una pantalla si se te olvida poner el botón de volver atrás en tu diseño. Sólo puede salvarle el gesto de swipe, pero no todos los usuarios lo conocen.

Pero además, el tema puede ir más allá. Si tú diseñas una app y le otorgas al movimiento de swipe una acción que no es la que suele tener asociada para la plataforma del usuario, debes ser consciente de que estarás luchando contra lo que muchos usuarios ya tienen integrado y les funciona, con lo cual les puede sorprender este uso, y no siempre gratamente.

Es importante, pues, ser consciente de estas diferencias del uso habitual de los elementos y los gestos entre plataformas. El motivo es sencillo: todos ellos son fundamentales para poder mantener la coherencia con otras apps y evitar frustraciones a los usuarios.

Si aún pese a todo lo que decimos aquí decides saltártelo, entonces por lo menos sabrás a qué te estás enfrentando y buscarás maneras de dejarlo todo claro, intuitivo y bien indicado para el usuario.

4. Botones de acción

Otra diferencia fundamental entre ambas plataforma se encuentra en la ubicación de los botones flotantes de acción.

Un botón de acción flotante en un botón superpuesto al resto de elementos de la pantalla, y que permite realizar la acción principal de esa pantalla, es decir, la que tiene más prioridad en ella.

Algunos ejemplos básicos y muy comunes de acción principal son crear un post, subir una fotografía, compartir en una red social, etc.

Seguramente sin saberlo ya estás muy acostumbrado a este botón, porque se ha convertido en un patrón de diseño esencial desde que Material Design lo popularizó.

Un buen ejemplo de este botón nos lo da Google mismo en el caso de la app de Gmail, en la cual hay un botón flotante en la parte inferior derecha para la acción de “Redactar correo” (acción principal).

Por cierto, Gmail sería otro ejemplo de diseño único, como Instagram. En este caso se ha aplicado un diseño basado en los principios de Material Design tanto para Android como para iOS.

La diferencia a destacar en este botón se encuentra en su ubicación según la plataforma. Como hemos visto antes al tratar las diferencias en la navegación, en Android las pestañas de navegación suelen estar en la parte superior de la pantalla, mientras que en iOS suelen estar en la parte inferior.

Esto tan simple afecta también al botón flotante. Si en Android ponemos el botón flotante en la parte superior, tapará las pestañas de navegación. Por tanto, deberemos tener en cuenta que en Android este botón suele estar en la parte inferior derecha y en iOS suele estar en la parte superior derecha.

En cualquier caso, siempre deberás tener en cuenta dónde se ubica para asegurar que no tapa las pestañas ni cualquier otro elemento esencial.

En iOS existe también el conocido como botón de llamada a la acción. Es el análogo al botón flotante, pero a diferencia de este, el botón de llamada a la acción se ubica en el centro de las pestañas de la barra de navegación inferior.

5. Configuración de la app y opciones

Ambas plataformas toman diferentes enfoques para dar acceso a la configuración de la app y sus opciones.Lo más común es encontrar menús hamburguesa en Android y menú de pestañas en iOS.

Al prescindir del menú hamburguesa, muchas apps en iOS se ven forzadas a añadir el acceso a secciones básicas, como la pantalla de inicio de la app o a la cuenta del usuario, en las pestañas inferiores.

Así pues, si necesitabas ya varias pestañas en esta barra inferior para acceder a funcionalidades de la app en iOS, ten en cuenta que igual necesitas añadir estas pestañas extras como el de home, configuración, etc.

Esto es importante porque el espacio es muy limitado en los dispositivos móviles. Además, demasiados iconos pueden acabar saturando al usuario al entorpecer la navegación, y por tanto la experiencia de usuario.

Más diferencias…

Existen otras diferencias importantes que veremos en el próximo episodio. Hoy hemos visto las 5 primeras que nos han mostrado la diferencia en navegación y flujo de las apps, así como la filosofía de diseño de cada plataforma y algún aspecto visual más.

Por supuesto, hay excepciones: algunas aplicaciones de iOS siguen los principios de Material Design (como Gmail) y algunas aplicaciones de Android siguen las Pautas de Human Interface de Apple (como Instagram). Pero de esto también hablaremos en próximos episodios.

Por ahora, después de todo lo explicado hoy, llegamos al final del episodio 16. Si este contenido te ha parecido interesante, puedes subscribirte a mi newsletter para no perderte los próximos capítulos.

¡Muchas gracias por leerme y hasta muy, muy pronto!

2 opiniones en “Episodio 16 – 5 diferencias clave entre diseño iOS y diseño Android”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descubre cómo aumentar tu productividad y eficiencia en tu negocio con Lecciones UI para creativos

Breves podcast semanales en las que comparto contigo cómo mejorar los procesos tanto de gestión como de producción UI.

Lecciones UI
para Creativos

Subscríbete para descargar los contenidos. Si ya estás suscrito, puedes acceder a ellos a través del enlace que recibiste en el email de bienvenida.

Términos y condiciones

Puedes cambiar de opinión en cualquier momento haciendo clic en el enlace "dar de baja" que hay en el pie de página de cualquier correo electrónico que recibas de nuestra parte, o poniéndote en contacto conmigo en info@maria-pascual.es Trataré tu información con sumo respeto y cuidado. Para obtener más información acerca de nuestras prácticas de privacidad, visita nuestro sitio web.