Patrones de diseño animados: el nuevo esqueuomorfismo
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 
Genial post, que bueno es leer cosas interesantes antes de empezar el día