¿Interfaz nativa o diseño propio?

Diseño UX
12/7/2016
|
Samuel Gimeno Artigas
Escritorio redondo con laptop, gafas, planta, celular, lápices y unas manos de mujer tecleando.

Hoy vamos a comentar el uso que hacen varias aplicaciones de las más usadas por usuarios de dispositivos móviles de las guías de estilo de los diferentes sistemas operativos móviles. Para no alargar mucho el artículo, hemos elegido las dos plataformas más usadas, iOS y Android, y cuatro aplicaciones móviles de uso común, como son Whatsapp, Facebook, Twitter e Instagram.

Botón estándar de Material Design
Botón estándar de Material Design

Introducción a las guías de estilo de iOS y Android

La guía de estilo para iOS se llama iOS Human Interface Guidelines (Principios del Interfaz humano de iOS). El nombre deriva de Apple Human Interface Guidelines, los principios de interfaz persona-computador que guiaban el GUI de Apple y que fueron desarrollados por Bruce Tognazzini, entre otros.

Para Android podemos encontrar Android Design y Material Design. La primera de ellas es una introducción al diseño para este entorno y la segunda, es una guía completa de diseño  para el framework de Android. Una interfaz que siga la guía de Material Design se identifica a simple vista por sus botones. Sean redondos o cuadrados, se distinguen por sus vistosos colores y el uso de ellos como si fueran CTAs de un comercio electrónico.

Whatsapp

Whatsapp es la aplicación móvil de mensajería instantánea más usada del mundo. Como idea principal, adaptan las versiones de su aplicación a las guías de estilo de cada sistema operativo.

Chat de Whatsapp en Android/iOS
Chat de Whatsapp en Android e iOS

Como se puede ver en la imagen, a la izquierda tenemos la versión para Android y a la derecha es la de iOS de un chat de Whatsapp sacada de las capturas de la aplicación de las respectivas tiendas.

En iOS usan los iconos por defecto del sistema para mostrar las tres operaciones más destacadas de la aplicación: enviar archivos, capturar una imagen con la cámara o enviar un mensaje de voz.

En Android, sin embargo, alejan la opción de enviar archivos a la esquina superior derecha, agrupando las otras dos opciones en la parte interior. El diseño sugiere que entienden que para un usuario de Android es más normal que quiera enviar un mensaje de voz o capturar una imagen que enviar un archivo. Android tiene mejor integrado que iOS en su sistema la opción de compartir archivos. Por tanto, los usuarios se han acostumbrado a compartir archivos mientras los están viendo, mientras que en iOS la opción de compartir archivos no está tan bien integrada y, por tanto, se utiliza de forma ocasional.

A continuación analizaremos la pantalla de llamada. Como podemos ver, las diferencias son notables y se asemejan a las notificaciones de llamadas del propio sistema operativo. De hecho, en Android es fácil que pase desapercibido que se trata de una llamada vía Whatsapp y no por teléfono, a excepción del rotulado superior. La interfaz en iOS es más intuitiva que Android, por el rotulado de acompañamiento, pero en ambos casos la aplicación se adapta a lo que el usuario está acostumbrado, lo que sin duda es una buena práctica.

Llamada de Whatsapp en iOS/Android
Llamada de Whatsapp en iOS y Android

En definitiva, Whatsapp adapta su interfaz y hace que el usuario no tenga que pensar para usar la aplicación, facilitando la integración con el sistema operativo que haya elegido el usuario.

Facebook

Facebook utiliza un diseño propio con muchas menos concesiones a cada sistema operativo. De hecho, salvo por pequeños detalles, las diferencias son apenas apreciables. La única diferencia entre ambas aplicaciones es una ligera reordenación de los elementos y que en iOS hay un rotulado de acompañamiento, que en Android no se incluye.

News Feed de Facebook en iOS/Android
News feed de Facebook en iOS y Android

En la imagen podemos comprobar ver que las dos aplicaciones son muy similares en el muro de noticias (News Feed) de Facebook. En Android, por ejemplo, no se incluyen los característicos botones de Material Design y en iOS tampoco utilizan iconos estándar del sistema. Facebook suele actualizar más la app de iOS que de Android, lo que también se percibe en las capturas de pantalla disponibles en las aplicaciones, ya que la aplciación para iOS incluye las reacciones y la de Android todavía no.

Facebook prioriza que un usuario conozca su aplicación esté en el dispositivo móvil que esté, y se sienta cómodo con su experiencia de usuario frente a cumplir las normas de diseño de interfaz del sistema operativo.

Al ver un perfil en la aplicación de Facebook, se percibe alguna diferencia más entre iOS y Android, pero ninguna característica es reseñable para hacernos pensar que estamos en uno de los dos sistemas, exceptuando los tres puntos para indicar más opciones (que en iOS son en horizontal y en Android son en vertical). Hay que ser bastante prolijo para darse cuenta.

Perfil en Facebook en iOS/Android
Perfil en la app Facebook en iOS y Android

En definitiva, Facebook opta por un diseño similar para que el usuario no tenga dificultades en usar su aplicación, haciendo que la curva de aprendizaje se reduzca considerablemente.

Twitter

Twitter opta por una opción intermedia entre usar un diseño propio y cumplir a rajatabla las guías de estilo, ya que incorpora elementos propios de cada SO dentro de su diseño.

En iOS, Twitter opta por un diseño minimalista. Elimina todo lo que suponga molestar en el timeline, transmitiendo la idea de que el timeline es para leer, buscar o escribir.

En Android el diseño es práctico e intuitivo, utilizando botones Material Design para la acción de escribir un tuit. Puedes acceder a todo de un solo toque a todo (escribir, mensajes, notificaciones, leer el timeline o los mensajes directos).

Timeline en Twitter en iOS/Android
Timeline en la app de Twitter en iOS y Android

En iOS, Twitter elimina todo lo que pueda molestar en el timeline (transmite la idea de que el timeline es para leer,buscar o escribir), mientras que en Android puedes acceder a todo de un solo toque a todo (escribir, mensajes, notificaciones, leer el timeline o los mensajes directos). El minimalismo de iOS frente al utilitarismo de Android en la misma app.

Al ver un perfil de un usuario pasa lo mismo, el diseño es similar pero con su peculiariadades en cada sistema operativo. En Android usa botones Material Design, en iOS usan los iconos estándar de atrás y buscar, pero el diseño es el mismo para los SO.

Perfil en la app de Twitter en iOS/Android
Perfil en la app de Twitter en iOS/Android

Es decir, minimalismo frente a utilitarismo. Esta elección de Twitter sobre su app hace que el usuario se sienta cómodo y la curva de aprendizaje se mantenga razonablemente estable.

Instagram

Post de Instagram en iOS/Android
Post en Instagram en iOS/Android

Si Facebook usaba prácticamente el mismo diseño en iOS y en Android, Instagram usa el mismo. Hay que fijarse mucho para distinguir en qué SO estamos, apenas los iconos del sistema son la única diferencia.

Cámara de Instagram en iOS/Android
Cámara en Instagram en iOS/Android

En cualquier de las dos capturas se puede ver que Instagram ha optado por estandarizar su interfaz sea nula y si cambian de SO no tengan problemas al usar la app.

Conclusiones

En definitiva, en aplicaciones móviles hay dos tendencias claras: utilizar las interfaces nativas que cada SO te ofrece o hacer uso de un diseño propio, que lo haga independiente del sistema operativo.

¿Qué opción es mejor? Dependerá de lo que pretendamos y lo que digan los datos. Como siempre, os recomendamos que hagáis test con usuarios y veáis que es mejor mediante un test A/B, o con qué tipo de interfaz se consigue mejor vuestros objetivos de negocio.

En Torresburriel Estudio estamos especializados a diseñar y realizar tests con usuarios para diferentes productos o servicios digitales, dependiendo de los objetivos del proyecto. Contacta ahora con nosotros y hablamos :-).

¿Quieres darnos tu impresión sobre este post?

3 respuestas a “¿Interfaz nativa o diseño propio?”

  1. Me sorprende la gran diferencia entre la interfez de whatsapp, mi duda ¿Cual es el material design verdadero de la app? Si lo usas en Windows es mas parecido la interfaz de android.

    Acabo de pasar de Iphone a un Lanix(https://lanix.com/mx/smartphone/ilium-l1400) y la verdad si hay algunas apps me gusta en IOS porque es se ve mas fino y un solo patrón pero no voy a negar que me fascina los colores y la personalidad de las apps en android ya que se ve con mas vida pero no podría elegir.

  2. WhatsApp es una aplicación de Facebook actualmente, que se caracteriza por cambiar de interfaz de usuario según el sistema operativo debido al fiasco que tuvieron con la app de Android en sus primeras versiones al hacerla igual a la de iOS. He usado WhatsApp en Android y iOS personalmente y hay ligeros cambios. Si eres usuario de ambos sistemas apenas lo notas, pero si es cierto que si vienes únicamente de iOS o de Android y cambias la curva de aprendizaje es mayor.

    Android es un SO que está hecho para ser maleable y que cada uno (ya sea desarrollador o usuario) dentro de unos límites pueda hacer lo que quiera (es software libre), mientras que iOS tiene unas directivas de aplicaciones más estrictas que cumplir para que no hayas apenas variaciones de comportamiento entre las diferentes apps y la curva de aprendizaje sea menor. Son dos filosofías diferentes de desarrollo de software: el bazar (Android) donde sólo hay unas pocas reglas sencillas que cumplir y libertad total dentro de ellas y la catedral (iOS) donde todo está pensado, dirigido y supervisado. Son ideas que ya desarrolló Eric S. Raymond en su libro «La catedral y el bazar»: https://es.wikipedia.org/wiki/La_catedral_y_el_bazar

Deja una respuesta

Aquí va tu texto personalizado.

Blog

Nos encanta compartir lo que sabemos sobre diseño de producto y experiencia de usuario.
Ver todo el blog
Puedes consultarnos lo que necesites
Envíanos un mensaje
Nombre
Email
Mensaje
Gracias por escribirnos. Nuestro equipo se pondrá en contacto contigo tan pronto como sea posible.
Ha ocurrido un error. Estamos trabajando para resolverlo. Puedes escribirnos al chat.