Tutoriales de After Effects 6.5

Aunque la versión de este Software ya está en la Nro. 7, es posible acceder a tutoriales en su versión anterior.

AyatoWeb.com (en inglés)



After effects Tutorial (7.0) (en inglés)
Ejercicio básico (en Inglés)

Video

Tron - 1982 - Walt Disney

Metáforas visuales

Las metáforas visuales:

Con textos del artículo Semiótica y Retórica Visual Aplicada al diseño de Interfases: La Metáfora como elemento de Navegación. http://nolimit-studio.com/tesis/

Interrogantes (http://nolimit-studio.com/tesis/)

• ¿De qué manera podemos diseñar elementos gráficos para una interfaz que al usuario le resulten familiares e intuitivos?
  
• ¿Qué conceptos del diseño de objetos y señalizaciones reales pueden ser transportadas a un sistema de señalización virtual?
  
• ¿Comó reducir la ambigüedad en la interpretación de los signos gráficos?

Hipótesis

• Una interface confusa hace que el usuario pierda interés en utilizarla, de tener varias opciones elegirá aquella que le resulte más clara y sencilla de usar. Si por el contrario la interfaz está diseñada no sólo para ser fácil de usar sino además para guiar al usuario de forma amigable esto se traducirá en una mejora de comunicación entre el producto y el usuario.
• El uso de metáforas visuales ayudará al usuario a comprender mejor el funcionamiento de las interfaces ya que hará una conexión mental entre los objetos físicos que ya está acostumbrado a usar.
• Una interface gráfica tiene como función servir de mediador entre las aplicaciones y las personas que las usan, nunca deben tener un rol protágonico que opaque la importancia mayor del contenido.

Definición de Metáforas visuales

• Una metáfora es una figura del lenguaje donde se realiza una comparación entre dos objetos que no tienene ninguna relación aparente .
  
  Un ejemplo concocido es la frase “El tiempo es oro” donde se transfieren las características de la palabra “oro” (valioso, escaso, preciado) a la palabra “tiempo” para dar a entender su valor.
  
  Originalmente metáfora es una palabra griega que significaba transferír . Su etimología viene de meta que significa “cambio” y pherein que significa “llevar o trasladar”. Asi, la palabra Metáfora tiene a su vez un significado metáforico: “llevar o transferir un significado de una cosa a otra”
• 
  Las metaforas visuales funcionan de una manera similar, se sustituye un mensaje complejo mediante una imágen más simple pero evocatíva que le transfiere a éste su significado. Por ejemplo cuando una empresa que produce jugos de frutas enlatados le pone a su producto una marca con un pictográma representando a un árbol está pretendiendo sustituír en la mente del receptor las características del producto (enlatado, industrializado, producido en serie etc.) por las del árbol (naturaleza,frescura,saludable).

Uso de metáforas visuales en interfaces gráficas de usuario

La necesidad de interfaces más intuitívas

Una de las cosas que resultan obvias cuando uno hace una prueba de usabilidad — ya sea que esté uno probando sitios web, software o electrodomésticos— es la gran cantidad de gente que usa las cosas sin saber en realidad como funcionan o con ideas completamente erroneas acera de su funcionamiento.

Muy poca gente se toma el tiempo de leer instrucciones.

En su lugar el usuario avanza, experimenta, haciendo historias, vagamente plausibles acerca de qué qué hace y por qué funciona.

Para el usuario no es relevante saber como funcionan las cosas, en tanto que pueda usarla.

No es un problema de inteligencia sino de falta de interés.

Si logran hacer que algo funcione, no importa que tan mal lo haga, no buscarán otra manera de hacerlo.

Si los usuarios entienden, hay entonces una mejor oportunidad de que encuentren lo que buscan y cumplán sus objetivos, lo que es bueno tanto para el usuario como para el proveedor del servicio. Ademas, el usuario se sentirá mas inteligente y en control cuando use nuestro sitio, lo que garantizará su regreso.

¿Por qué usar metáforas visuales en Interfaces Gráficas de Usuario?

Para poder interactuar efectivamente con una aplicación es importante para los usuarios obtener un modelo cognitivo apropiado y relacionado a esa aplicación (.

Una manera simple de presentarle al usuario una funcion abstracta dentro de la funcionalidad de una aplicación es estableciendo una comparación entre esa funcionalidad y un objeto tangible del mundo real con el que estè familiarizado. Esto se logra mediante el uso de metáforas.Las metáforas contenidas en la interfaz de usuario final de un aplicación son herramientas poderosas para el desarollo de modelos cognitivos y conceptuales.

Muchas de los lenguajes de las culturas antiguas eran visuales o ideográficos al menos en parte. Tomemos por ejemplo los jeroglíficos egipcios, los pictogramas mayas y la escritura china son todos pro necesidad un tipo de atajos visuales.

La clave de estos lenguajes era representar visualmente solo la cantidad necesaria para sugerir el objeto en cuestión. Lo que significa que mucha de la responsabilidad de completar los detalles faltantes reside en el lector, aunque este esfuerzo de descifrado se vuelve innecesario con el tiempo al acostumbrarse éste a saltar (mentalmente) de la imágen a la idea .

En este contexto, una metáfora es el uso deuna idea u objeto en lugar de otro para sugerir una similitud.

• Una metáfora visual es un ideográma que representa visualmente esa idea
  abstracta. La importancia de las metáforas reside en su habilidad para iniciar
  una transferencia cognitiva entre un dominio del conocimiento familiar hacia
  otro menos familiar.

Lineamientos para el diseño de metáforas visuales efectivas.

Los íconos, ideogramas, ilustraciones y demás componentes gráficos que componen una interfaz de usuario deben tener una temática específica, por ejemplo, en los cortos de película que están publicados en el Blog, es claro que las metáforas visuales corresponden a una determinada temática.

Errores comunes en uso de metáforas visuales.

• Si los pictogramas o las metáforas requieren, para ser comprendidas la inclusión de un texto monosémico e inequívoco, hay que pensar si es preferible utilizar sólo la palabra en lugar de una metáfora ambigua y dotarle mejor de condiciones optimas de legibilidad .
  
• Otro error común es la falta de consistencia en el diseño de las metáforas a través de todo el sistema íconico, puesto que se toman metáforas existentes de diveras fuentes que no siguen una misma línea estética en su diseño. Esto genera confusión y falta de identidad.

Recomendaciones para diseñar sistemas de metáforas para una interfaz.

Cuando existan metáforas estandarizadas, úselas. Si bien, no existen manuales internacionales con estandares establecidos, algunos estándares están surgiendo. Es bueno estár informado de como avanza la comunidad de diseño en éste sentido.

Cuando una metáfora es usada en varias aplicaciones, implementelas en la manera estándar. Es bueno tener conjuntos de íconos probados y examinados que se relacionen con determinadas metáforas partículaes listos para ser adaptados y reutilizados.

Use una metafora en toda su extensión. Una implementación incompleta puede llevarnos a confusión, frustración y el desarrollo de estructuras pobremente formadas.

Esto es claro sobre todo al usar sistemas metafóricos complejos como en el caso del escritorio, un elemento perteneciente a otro campo semántico — como una sartén, por ejemplo— creará confusión en cuanto a su uso y le restará seriedad a la aplicación.

Evite metáforas similares cuando uses multiples metáforas. Obviamente, metáforas similares están propensas a provocar confusión en situaciones donde se producen íconos que podrían ser igualmente aplicables a una u otra metáfora.

No use referencias alusivas a un lenguaje específico. Esto es especialmente importante al diseñar aplicaciones con alcance internacional como puede ser un sitio web. Por ejemplo, en inglés se utiliza la palabra home (casa) para designar a la página principal de un sitio, pero en otros idiomas se utiliza otra palabra para describirlas, en español por ejemplo, decímos portada, índice o simpelmente página principal.

Así que el uso de un ícono que representa una casa será confuso para todo aquel que no domine el idioma inglés.

Diseño de información - Definición del producto

Tareas críticas:

• Público
  
  Seleccionar el público objetivo al que va dirigido el mensaje. Tener en cuenta si es para niños, adultos, ¿saben leer?, etc. Son consideraciones que aunque parecen innecesarias al final tienen que ver con el resultado de nuestro producto.
  

• Distribución
  Es la manera como se distribuirá el mensaje. Esto es, por CD, DVD, VHS, Internet, dispositivos móviles, etc. Dependiendo de esta decisión, se tomará en cuenta la tecnología y software necesarios, así como el equipo humano que debe participar en el proyecto.
  


• Software
  Las CURVAS DE APRENDIZAJE deben ser tenidas en cuenta ya que se tomar decisiones erradas al interponer en proyectos, la utilización de software para el cual no se es experto o sobre el que se tienen espectativas diferentes al verdadero alcance del software.


• Contenido
  Se deben tener ideas varias e irlas consignando en apuntes para documentar el proyecto, bocetos visuales, ideas escritas sobre contenidos, metáforas, ilustración, etc.
  
  Una vez recogidas las ideas principales, se recomienda pasar a definir el proyecto y NO a la confección propia de la pieza multimedial, ya que suelen haber muchos cambios y esto hace inoperante, y extenuante el trabajo en el proyecto.
  
  Tener en cuenta por ejemplo, la realización de storyboards, guiones, antes del diseño. O lo que equivale a plantear el proyecto como tal en un documento escrito, tal como se describe en Propuesta de un proyecto Multimedia
  



• Planificar el proyecto
  La planificación tiene que ver con fechas de entrega de cada uan de las partes del proyecto, la realización de guiones, storys y demás material gráfico y textual de refrencia para ayudar al cliente a comprender el trabajo que se le entregará así como al equipo de trabajo, en lo que se deberá desarrollar de acuerdo al plan de fechas.


• Organizar el Contenido
  Definir los objetivos del producto, nos ayuda seleccionar los demás items del desarrollo del trabajo: Video, animación, ilustración, programas, ¿QUé será la mejor opción para comunicar mi proyecto?.
  


• Diagrama de flujo del contenido
  Los Diagramas de Flujo nos ayudan a entender cómo se va a organizar la información del proyecto, que se enlaza con qué, que contenidos van a tener las secciones . Nos dan una visual de como organizar ETIQUETAS de botones, que nombres deben tener, y la profundidad de los CLICKS en un producto interactivo, que generalmente no debe ser más de 2.
  
  Ayudarían a decidir, por ejemplo el uso de pestañas, navegación cruzada, lineal, horizontal, vertical (temas que estudiaremos más adelante).