Patrones de diseño animados: diseño de interfaz

Patrones de diseño animados: el nuevo esqueuomorfismo

Emma Llensa 3 diciembre, 2013 Diseño gráfico 2 minutes

Esta semana en el «Curso on-line de diseño y conceptualización de apps» hablamos de las interfaces animadas y de cómo representarlas mediante prototipos funcionales. Queremos compartir con vosotros una breve introducción a este punto del temario porque creemos que puede ser de interés de diseñadores de interfaces de dispositivos móviles y diseñadores de interacción.

Esqueuomorfismo: metáforas que funcionan

Hace un tiempo hablamos en el blog sobre la dicotomía entre el diseño esqueuomórfico y el diseño plano (flat). Llegamos a la conclusión de que el diseño esqueuomórfico funcionó durante mucho tiempo gracias a la utilización de metáforas a las cuales la gente estaba acostumbrada. Las primeras versiones de iOS (el sistema operativo del iPhone, iPad, etc.) contenía multitud de ejemplos de diseño esqueuomórfico. El bloc de notas era como un bloc de notas real, la agenda se parecía mucho a una agenda de verdad, el Game Center era como un billar, el quiosco era como una estantería real de madera… Esta simulación del mundo real ayudó a los usuarios de este tipo de dispositivos a entender estos teléfonos. Con la salida de iOS 7, Apple ha abandonado el diseño esqueuomórfico siguiendo el ejemplo de Google con Android y de Microsoft con su Windows Phone.

Patrones de diseño animados: el nuevo esqueuomorfismo

Se ha abandonado este tipo de diseño, pero no se ha abandonado la intención de los diseñadores de hacer que el usuario entienda la interfaz y el funcionamiento de una app mediante la simulación de acciones y procesos del mundo físico. ¿Cómo lo han hecho? Mediante patrones de diseño animados. Si analizamos el diseño de Windows Phone o el nuevo iOS 7 nos daremos cuenta de que las animaciones ayudan al usuario a entender de dónde viene y a dónde va, dónde está la información, etc. Las animaciones y transiciones en el diseño de la interfaz de una app añaden la dimensión del tiempo a esta, haciendo que el usuario entienda mucho mejor el funcionamiento de la misma. De esta manera, con estas transiciones y animaciones conseguimos mejorar la experiencia que el usuario tendrá utilizando nuestra app.

En este ejemplo podéis ver cómo la nueva pantalla aparece de derecha a izquierda, mostrándole al usuario cómo está estructurada la información de la app.

En este ejemplo podéis ver cómo ordenar ítems en una lista de la app Clear

Gracias a estas animaciones y transiciones en la interfaz podemos ofrecer al usuario un producto mucho más fácil de utilizar (más intuitivo). Imaginaros el ejemplo de la app Clear sin que la interfaz estuviera animada: sería mucho menos intuitivo para el usuario entender cómo está reordenando los ítems de la lista. Mañana continuaremos con el tema de las interfaces animadas analizando la app Clear, así que estad atentos