Metáforas de Interfaces
¿Qué es una metáfora y cuáles son sus características?
Una metáfora en el diseño de interfaz se entiende como la abstracción y síntesis de modelos complejos del mundo real, los cuales son representados dentro del diseño de un sistema multimedia, manteniendo la analogía del contexto natural del cual son extraidos... esta vendría siendo mi propia definición.
"Metaphors define everything we think about in the world. Especially digital world. Referencing familiar elements of the physical world helps us understand the function, purpose and spatial relationships of our digital tools." (Appleton, 2015)
Sus principales características serían:
Las metáforas deben ser analogías entre la UI y los objetos físicos.
Deben proveer una estructura similar a entidades familiares, pero también tener sus propios comportamientos y propiedades.
Deben ofrecer una "conversación" entre el usuario y el sistema.
Las metáforas deben reforzar el mensaje y el atractivo hacia la audiencia objetiva.
Los elementos que considero e incluyo en el diseño de metáforas dentro de mis proyectos son:
1. Semiosfera del Usuario y la Aplicación: Que también puede entenderse como el lenguaje común o el contexto en el cual los usuarios se encuentran, permitiéndoles asimilar, entender, aprender y usar la información expuesta en las interfaces. Si la semiosfera es incorrecta, puede confundir o guiar erróneamente al usuario.
2. Los 12 Principios de la Animación: Para quienes no estén familiarizados con la teoría de la animación, existen 12 principios que fueron creados por los animadores Ollie Johnston y Frank Thomas cuando trabajaban en de los Studios Disney , posteriormente escribieron el libro "The Illusion of life: Disney Animation" en donde los explicaban a mayor detalle. Aquí les dejo un video donde se explican mejor cuales son dichos principios:
Estos principios son la base teórica de toda la animación, no solo en Disney y USA, sino que aplica en todo el mundo. Si bien estos principios fueron creados exclusivamente para su uso en material animado, su fundamento teórico puede ser aprovechado y dirigido a otros contextos, tales como el Diseño de Juegos y el Diseño de Interfaces.
En mi trabajo como Diseñador de Juegos y Multimedia Interactiva, siempre he dado preferencia a la creación de interfaces llenas de metáforas, principalmente porque TODO el contenido visual de un juego ES LA INTERFACE, no se limita únicamente a botones y menúes. Personajes, items, escenarios, animaciones, efectos visuales, efectos sonoros, todos ellos forman parte del diseño del UI del juego, pues toda esa información es de vital necesidad para que los jugadores (usuarios) puedan entender lo que sucede en la pantalla.
He podido participar en varios proyectos, justamente me encuentro en el desarrollo de un nuevo proyecto propio, un pequeño juego con temática de las Micros de la CDMX. En estos momentos me encuentro en una etapa de rediseño (por diversas razones) pero uno de los elementos importantes del juego consiste en la metáfora de "subir pasaje" para obtener puntos (dinero). Aquí les dejo una primera iteración de dicha metáfora:
Cómo se puede apreciar en el video, el jugador controla a la Micro, la cual recorre las calles en búsca de pasaje (las personas) que se encuentran de píe en las banquetas. En esta primera implementación pude darme cuenta de que la metáfora era interpretada de forma incorrecta, pues daba la idea de que el jugador debía de "atropellar" a los peatones para conseguir puntos. Fue así que decidí rediseñar la mecánica y agregé nuevos elementos a la metáfora.
En esta nueva interación, lo que hice fue agregar el elemento de "la Parada", en donde las personas estarán esperando a que el jugador llegue por ellas. Si bien la simulación no es perfecta (y en ningún momento se pretendió que lo fuera) este nuevo diseño permitió que la metáfora fuera más apropiada, ya que la idea de atropellar gente en las banquetas fue eliminada y en su lugar el jugador ahora busca las paradas llenas de gente para poder obtener los puntos.
Como mencioné anteriormente, me encuentro rediseñando el juego, en la nueva versión voy a mantener el uso de la metáfora de "las Paradas" pero veré si puedo mejorarla aún más. De mientras, aquí les dejo un adelanto de los últimos avances del juego.
Fuentes:
Appleton, M.(2015). Why Metaphors Matter for App Designers. STRV Design. Retrieved from https://medium.com/strv-design/why-metaphors-matter-for-app-designers-2fb477854f66
