Cómo diseñar apps que no timen

Hace unos meses una app me robó y lo hizo a base de presentar una muy baja experiencia de usuario.

Seguramente esta no es la experiencia que sus autores esperaban crear en los usuarios, pero es la que consiguieron conmigo, por ejemplo.

Si no quieres caer en los mismos errores, te invito a escuchar este episodio y ver tres diferencias más entre diseño iOS y Android, y qué implicaciones tiene si decides crear el mismo diseño para ambas plataformas.

¿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...

Hace unos días recordé una app que hará ya unos meses probé y me robó. Sí, tal cual, la app me robó, ¡me timó!. Y lo hizo a base de una baja usabilidad precisamente.

En aquel momento yo quería establecer algunos hábitos en mi vida personal y profesional. Decidí probar varias app’s de productividad, entre las que se encontraba esta.

Nada más abrirla tenía una súper animación. Y luego, tanto el menú como el modal de ayuda tenían también otros efectos súper interesantes y atractivos. (cosas buenas la app, tenía).

En fin, ya te puedes imaginarme de un “wow!!” a otro, «flipadísima», porque era muy atractiva visualmente. Así que empecé mi affair con la app, sorprendida y encantada con aquellas interacciones y animaciones. Pero la alegría duró poco porque enseguida empecé a tener problemas con la dichosa app.

La primera dificultad fue entender su navegación un tanto extraña y liante. No conseguía entender cómo funcionaba realmente aquel diantre de app.

La siguiente dificultad era conseguir ver claramente los hábitos, que precisamente era a lo que iba la app: fijabas unos hábitos y hacías seguimiento de si los habías cumplido o no. Pero la realidad es que  costaba ver todos los hábitos de forma global, ver claros los objetivos y entender si se habían conseguido o no. Toda esta información se mostraba de forma muy atractiva pero resultaba muy poco práctica.

Pero lo que realmente me fastidió más es que haciendo pruebas y mirando todo lo que se podía hacer, ¡¡resultó que compré la suscripción a la app para todo un año!!

Lo sé, parece increíble pero es cierto: la usabilidad era tan baja que se acababa confundiendo lo que era el “quiero acceder a la prueba gratuita” con el “quiero comprar la suscripción”. Yo pensaba que estaba haciendo una prueba y resulta que no, que estaba comprando el paquete completo.

Justo acabar de comprarla y empezar a probarla, me di cuenta del error y contacté con la empresa. Pero me dijeron que su política no incluía opción de devolución.

Así que tuve durante unos meses una app que no utilizaba porque no me ayudaba a cumplir ni el más mínimo hábito y que me desesperaba cuando intentaba utilizarla.

A la que vi que empezaban a salir mensajes en pantalla ofreciéndome activar la renovación automática la desinstalé automáticamente, ante el pánico a volverla a comprar por error. ¡Y aún me quedaban unos meses de licencia!

En fin, ya ves como interacciones, efectos wow y flujos de navegación incorrectos pueden llegar a conseguir convertir una app en un fraude.

El gran error que tenía la app en cuestión desde mi punto de vista es que el equipo de diseño se saltó las diferencias entre plataformas que vimos la semana pasada, así como las que veremos hoy, provocando una experiencia de usuario nefasta.

Por eso quiero hacer énfasis en la usabilidad en apps en el episodio de hoy que, por cierto,  es una continuación del anterior (5 diferencias clave entre diseño iOS y diseño Android) .

Para que no te pase en tu trabajo en proyectos de app’s te recomiendo seguir las normas de hoy y del episodio anterior, así como considerar las consecuencias que hoy te explicaré que tiene el hecho de crear un diseño único en una app tanto para iOS como para Android.

¿De qué hablaremos hoy exactamente?

El episodio de hoy está dividido en dos partes:

  1. Tres diferencias más entre diseñar para iOS y para Android.
  2. Qué implica la uniformidad en las apps  (i.e. crear un único diseño independientemente de la plataforma).

Y hablaremos de todo ello para seguir ampliando nuestras herramientas como diseñadores para conseguir crear app’s que no machaquen, frustren y desesperen a los pobres usuarios, como me pasó a mí con la app de los hábitos.

Cómo diseñar apps: 3 diferencias que complementan la lista del episodio anterior

Diferencia 1: Microinteracciones

Es crucial atraer la atención de los usuarios desde el primer momento con experiencias intuitivas, prácticas y con toques que sorprendan al usuario haciéndole el conjunto más atractivo.

Aquí te recomiendo no ir a por grandes animaciones. Más bien, apuesta por la sutileza para crear una experiencia de uso fascinante con microintereacciones y animaciones sutiles. Es fundamental que siempre tengan sentido y sean lógicas.

Tu objetivo en este tipo de diseños será el de cautivar al usuario, mientras le ayudas a hacer la acción que quiere de forma rápida y efectiva.

La regla de oro en este punto es precisamente la que se saltaron en la app que me timó a mi: se trata de centrarse en crear microinteracciones para ayudar. Nunca debes interponerte con ellas en el camino del usuario para enseñarle un efecto súper “wow!”.

Animaciones e interacciones en iOS y Android: ¿Qué tienen en común?

Si miramos ahora las reglas y recomendaciones de Apple en su Human Interface Guidelines y las de Material Design de Android, podemos deducir que las dos plataformas dan una recomendaciones básicas similares para las micro-animaciones.

Por ejemplo, tanto IOS como Android nos desalientan hacer animaciones excesivas que puedan distraer y afectar al usuario. Lo que sí nos indican es que las animaciones deberían ser usadas para conseguir enfoque e importancia. Deben ser elementos para centrar al usuario en lo que es realmente importante. Por esto debes usarlas sólo cuando es realmente necesario y sin que entorpezcan el uso de la app.

Además, ambas plataformas también nos recomiendan el uso de las transiciones familiares, suaves y discretas de una pantalla a otra para mantener a los usuarios interesados y que no se desubiquen. Las interacciones y transiciones son básicas para ayudar a los usuarios a orientarse en la aplicación mostrando la relación de los elementos entre sí. Con ellas, pues, conseguimos crear consistencia y jerarquía.

No todas las micro-animaciones tienen el mismo peso aunque duren lo mismo

Los usuarios de cada plataforma están muy acostumbrados a las micro-animaciones propias de su plataforma, ya sea iOS o Android, y las perciben como naturales. Es decir, Su cerebro absorbe la relación que le indican de forma mecánica sin pensar mucho. Así pues son un poco invisibles para el usuario asiduo a esa plataforma, y por tanto tienen menos peso para ese usuario en el procesamiento mental de la app.

Vale la pena prestar atención a estas interacciones familiares que resolverán gran parte de casos creando una experiencia buena y natural para los usuarios sin coste extra de procesado para sus cerebros.

Si bien es verdad que tanto las Human-Interface Guidelines como Material Design dan unas recomendaciones básicas similares, también es cierto que debido a su planteamiento de diseño luego hay diferencias a considerar:

Microinteracciones y animaciones en iOS

Los usuarios de iOS están acostumbrados a la sutileza con transiciones suaves.  Apple cree que las interacciones con el dispositivo en una app deben ser una metáfora de experiencias que son familiares para el usuario. Y todo ello, con animaciones que deben llevar al usuario a su destino sin distraerlo del contenido real.

En el caso de apple, debemos recordar que su flat theme está basada en flat design hasta sus últimas consecuencias. Por ello las apps de IOS basadas en flat design se caracterizan por una apariencia completamente minimalista, creando esa sensación de plano, como de impreso. Este enfoque crea diseños que son menos intensivos a nivel de recursos, por lo que requiere menos tiempo de carga y menos consumo de ancho de banda.

Seguramente este es uno de los motivos por lo que se suele decir que las animaciones e interacciones en iOS funcionan de forma más suave que en Android. Y es que están cargando menos al dispotivo (aparte de otros motivos que pueda haber de sistema operativo o del hardware en los que no entraremos).

Microinteracciones y animaciones en Material Design

Los usuarios de Android se mueven en el terreno definido por Material Design. Material Design parte del flat design, es por ello que se ve estéticamente plano también, sobretodo en cuanto a colores.

Pero Material Design es multi-dimensional: toma el eje Z en consideración. Dicho de otra manera, a diferencia que flat Design, Material Design incorpora el factor “profundidad de los elementos UI”.Esta profundidad comunica, da información al usuario, y le ayuda a entender más fácilmente relaciones entre elementos.

Material Design busca el encuentro entre el mundo real y digital. Por eso quiere aportar el toque realista de la materia, y la profundidad es clave para ello.

A diferencia del enfoque más austero de Apple respecto a la animación, Material Design considera que ésta mejora la experiencia de usuario y da vida a otros componentes. Por eso Material Design propone crear animaciones en las interacciones que no sean sólo llamativas, sino que creen las relaciones espaciales, la funcionalidad y las intenciones del sistema con el fin de mejorar la app.

Además, Material Design incorpora también la interacción receptiva, que se caracteriza por ser una interacción reflexiva y con un propósito. No puede ser nunca una animación al azar ni que distraiga del objetivo o acción principal en la app.

Esto lo recomienda basándolo en que cuando un usuario interactúa con una app y ocurre algo que es atractivo visualmente a la vez que lógico, provoca satisfacción en el usuario. Como ves, se trata de fomentar que el usuario explore dentro de la app.

Así que podemos decir que Material Design te anima como diseñador de apps a utilizar animaciones para ayudar y guiar al usuario. Y además lo hace indicando que la animaciones deben estar marcadas por la física y el movimiento auténtico, en este caso incluyendo el factor profundidad. Al promover animaciones combinadas con profundidad y con efectos similiares a los de la física del mundo real, automáticamente obtenemos animaciones más complejas que pueden provocar que requieran más procesado y, por tanto, sean menos suaves.

Diferencia 2: La cuadrícula y los objetivos táctiles

iOS nos indica en sus pautas que los objetos táctiles deberían ser de 44px@1x, mientras que Android apuesta por un formato un poco superior de 48px@1x.
Además, Material Design también sugiere alinear todos los elementos a una cuadrícula base cuadrada de 8dp.

Diferencia 3: Tipografía

A la hora de seleccionar y aplicar la tipografía, cada plataforma tiene también sus preferencias y recomendaciones. iOS utiliza San Francisco como la tipografía del sistema. En cambio, Roboto es la tipografía del sistema en Android.

En el caso de los idiomas que no son soportados por Roboto, la tipografía estándar es Noto.

Así pues, estas serán las tipografías base de cada plataforma. Además, deberás prestar atención a las convenciones tipográficas y de cada plataforma. Hablaremos de esto en más detalle en próximos episodios.

Bien, ya hemos hablado de las animaciones e interacciones, tipografía y cuadrícula en cada plataforma. Con esto acabamos las diferencias que quería comentar y acabamos también la primera parte del podcast de hoy. Vayamos ahora a por la segunda, centrada en la uniformidad.

Uniformidad

Después de todo lo dicho en el episodio de hoy y en el anterior,  habrás comprobado que nos hemos centrado en las diferencias entre una plataforma y otra.

La duda que en este momento te puedes estar planteando entonces  es: ¿Debo siempre diseñar para las dos plataformas por separado si queremos que esté disponible tanto para iOS como para Android?

Y la respuesta es que no, no es obligatorio. Es más, hay apps actualmente que no siguen interacciones y patrones de diseño UI diferentes para cada plataforma. Ya vimos un ejemplo el día anterior precisamente con el caso de Gmail que sigue el patrón de Material Design en iOS e Instagram, que siguen el modelo Human Interface para Android y iOS.

Esto nos lleva a la consideración final con la que acabamos hoy. Hay quien dice que un buen diseño de app se basará en el respeto a lo que ya está establecido en cada plataforma.

Desde este punto de vista, siempre deberías seguir lo que dicen la Human Interface Design Guidelines en el caso de iOS y lo que indica Material Design para Android. Entonces…

¿Instagram y Gmail se han equivocado?

Yo creo que no. Es más, creo que son apps que están muy bien pensadas y diseñadas. Y sin embargo, son lo mismo para las dos plataformas. Así pues, un buen diseño de app no viene estrictamente regido por el hecho de si se ha basado en la plataforma correspondiente o no.

Creo que se trata más bien de que a la hora de diseñar uno/a debe tener en cuenta dos consecuencias directas de las uniformidad, es decir, de un mismo diseño independientemente de la plataforma:

  1. Las implicaciones del diseño en el proyecto: si deseas que cada elemento de tu app tenga el mismo aspecto en todas las plataformas, necesitarás esfuerzos de desarrollo adicional para conseguirlo. Según las implicaciones puede que encarezca notablemente el proyecto o incluso lo haga inviable.
  2. Estás implantando los patrones de navegación y diseño de una plataforma a los usuarios de la otra. Los usuarios a los que les están imponiendo las directrices de diseño de la otra plataforma tienen que aprenderlas y descubrir cómo navegar y moverse por tu app.

    Esto se puede traducir en una baja usabilidad para ellos e incluso en frustración cuando no encuentren las cosas donde suelen estar en las apps de esa plataforma, etc.

Para muestra de este tema de la uniformidad veamos un ejemplo: imagínate que has pensado que una opción es diseñar el elemento de calendario de una forma única en ambas plataformas. Las consecuencias pues serán:

  1. Para conseguir que tenga el mismo aspecto en cualquier sistema operativo, ya sea iOS i Android, se van a tener que hacer unos esfuerzos de desarrollo adicionales que pueden llegar a comprometer el avance del proyecto. Y probablemente, aumentará el coste del proyecto.
  2. Para más inri, puede ser que los usuarios que no están acostumbrados a ese tipo de calendario se sientan que no acaban de entender ese formato o que se les hace incómodo.

Osea, que después de tanto esfuerzo y coste, se acaba consiguiendo la frustración de los usuarios de una plataforma.

Otros casos de usos complicados que implican controles predeterminados son radio buttons, checkboxes, toggles, etc. Cada uno de ellos tiene una forma predeterminada de mostrarse en IOS y Android. Deberás empaparte de ello antes para entender mejor a partir de ahora cómo serán estos componentes en cada plataforma y respetarlo si ves que las implicaciones de no hacerlo no se lo valen.

Por cierto, el respeto hacia estos controles va más allá de no intentar modificar el aspecto visual. Se trata de entender también las interacciones únicas de cada plataforma. Si las respetas estarás respetando los hábitos de los usuarios en cada sistema operativo.

Por ejemplo, el selector de fechas de iPhone está basado en una especie de rueda o carrete dónde lo usuarios pueden ajustar cada dato haciendo swipe hacia arriba o hacia abajo para cada elemento (día, mes. hora…).
Esta interfaz que puede resultar tan efectiva para los usuarios de iOS, es incómoda para los usuarios de Android que están acostumbrados al selector de calendario de esta segunda plataforma.

La opción más segura es respetar y aceptar estos funcionamientos y no diseñar un nuevo selector de fecha y hora para que sea igual en cualquier dispositivo. Si no lo hacemos, podemos acabar con una baja usabilidad, además de complicando posiblemente la complejidad y duración del desarrollo de la app. Ten en cuenta que hay demasiado trabajo y demasiados puntos críticos en cualquier app como para añadir nuevos si no son realmente necesarios.

¡Arriba una elevada UX, abajo el timo!

Espero que gracias al episodio de hoy junto al anterior puedas crear apps que los usuarios disfruten y consigan sus objetivos, y sobretodo, súper importante, ¡que no timen a nadie!

Nos quedan todavía muchas cosas en el tintero, porque aún nos queda ver con más detalle qué nos dicen las Human Interface Guidelines de Apple y también Material Design. Pero estos viajes hasta las profundidades de cada uno de ellos lo haremos en futuros episodios.

Muchas gracias por leerme. Si te ha gustado y te ha parecido interesante este contenido, puedes subscribirte a mi newsletter en maria-pascual.es para no perderte los próximos capítulos.

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.