Integración Multimedia

Friday, September 22, 2006

Trabajo de clase - Segundo parcial

Presentar los bocetos gráficos de la Interfaz Gráfica de Usuario del proyecto que están llevando a cabo en la clase.

Los bocetos no deben tener navegación necesariamente, pueden estar elaborados en cualquier prográma gráfico y debe dar una idea clara de cómo será finalmente la multimedia.

Se presentan las pantallas principales de la multimedia en formato de imagen "JPG" o "PNG".

Es importante definir claramente el espacio para elementos visuales de la interfaz gráfica:
Iconos
Imágenes
Tipografía
Video
Botones

El trabajo se presentará el día 6 de Octubre de 2006 y hace parte de la nota del segundo parcial para el semestre.

Conceptos básicos de Diseño Gráfico

El Diseño es un proceso de creación visual con un propósito comunicativo.
Un buen diseño es la mejor expresión visual de la escencia de "algo", bien sea un mensaje o un producto. Para hacerlo fiel y eficaz, el diseñador debe buscar la mejor forma de que ese "ALGO" sea conformado, usado, distribuido y relacionado a su ambiente. Esta creación deberá estética y funcionalmente reflejar el gusto de su época.

Lenguaje Visual

Es la base de creación en diseño.
Es el seguimiento de unas reglas o conceptos en cuanto a la conformación visual.
Sus leyes no son obvias

En el diseño de interfaces, el lenguaje visual es la utilización de un conjunto de imágenes y objetos gráficos (iconos, ventanas, tipografía, imágenes, fotografías, ilustraciones, textos, videos, animaciones) para representar la información y acciones disponibles en la interfaz.

Los objetos que se integran en la Interfaz Gráfica de Usuario, se disponen en el plano llamado pantalla de manera ordenada siguienso conceptos de diseño básico como pueden ser:

-Elementos conceptuales
-Elementos Visuales
-Elementos Relacionales
- Elementos Prácticos

Conceptuales: Son los que realmente no están en el plano, pero se pueden deducir:
- Punto: Por ejemplo, una flor roja en un jardín de donde predomine el amarillo.
- Linea: Una fotografía arquitectónica las refleja
- Plano: Una área de cualquier forma geométrica coloreada
- Volumen: Objetos que tengan profundidad volumétrica.

Visuales:
- Forma: Todo lo que pueda ser visto, tiene forma
-Medida: Todo lo que se ve tiene una medida (pixeles en el caso de la pantalla)
- Color: Existe toda una teoría aplicable. Primarios, secundrios, teciarios, neutros, tonos,
luminosidad, etc.
-Textura: Atrae el sentido del tacto o la vista. Una fotografía de varias ventanas puede ser una textura.

Relacionales: Nos ubican dentro del espacio y pueden ser sentidos aunque no literlamente como la gravedad y el espacio. Otros más obvios, pueden ser percibidos claramente como la dirección y la posición.
- Dirección: Varios rectángulos ordenados en fila denotarían una direccion a seguir
- Posición: Arriba, abajo, etc
- Espacio: Los espacios vacíos son muy apreciados por los diseñadores de interfaces
- Gravedad: Es una sensación sicológica. Transfiere sensaciones de pesadez, liviandad, estabilidad, etc.

Prácticos: Subyacene n el contendio y los alcances de un determinado diseño.
- Representación: Realista o abstracta, una representación pretende mostrar la naturaleza de las cosas en un plano.
- Significado: El diseño transporta un mensaje.
- Función: Se hace presetne cuando el diseño tiene un determinado propósito.

Todos los elementos visuales están enmarcados dentro de una Pantalla. La Pantalla no es solamente el dispositivo elctrónico del computador, puede sonsiderarse también como pantalla a una tela donde se proyecte una imagen, un marco de un lienzo, una hoja de papel.

Friday, September 15, 2006

Del Diseño de Información al Diseño de Presentación

Ilustración de MC Escher . Escher se caracterizaba por proponer un espacio
irreal en sus composiciones.
En el diseño gráfico existe el concepto de Diagramación, que es la distribución ordenada de elementos comunicativos en un plano, de acuerdo con tres grandes parámetros:

Repetición. Modulación. y Comunicación.

Repetición:

Así como en los libros, revistas y otras publicaciones impresas existen elementos que se repiten en las páginas (números de página, secciones , etc), al diseñar sobre pantalla, los debemos tener en cuenta, estos pueden ser íconos, botones, avisos, menús y otros elementos que siempre se consideran importantes para la navegación por parte del usuario.



En las pantallas anteriores vemos como los elementos compositivos se repiten en las diferentes páginas. Estos elementos se referencian no solo por la forma, sino también por el color.


El usuario espera poder encontrar fácilmente los accesos a la información, y esto se logra no cambiando de lugar de disposición los elementos compositivos. Esta ayuda hace más amena la navegación por el producto multimedia, elimina procesos de reaprendizaje de cómo usar un producto y hace sentir "inteligente" a la persona que usa un producto. "El que no se equivoca es mejor usuario", entonces, depende , en gran parte de nosotros los diseñadores de productos multimedia, el hacer que las personas aprendan, se diviertan y usen mejor nuestros productos.


Modulación o Composición.

La modulación y repetición van íntimamente ligadas a la Comunicación. La modulación se conoce como una repetición de figuras o patrones similares o idénticos en un plano.

Es Estricta cuando se repiten las figuras y se repiten espacios iguales , por ejemplo M C Escher utilizaba mucho este recurso en sus trabajos.

Para más información ver: http://www.cs.technion.ac.il/
~gotsman/Escher/Html/lithographs.html


Es Variada si los elementos dentro de dicho plano se cambian de posición a lo largo del trabajo, para no crear monotonía en el diseño gráfico.

La modulación es, entonces, la distribución de la superficie donde se va a comunicar, en pequeños planos para luego en ellos, colocar nuestros elementos compositivos y comunicativos: Fotos, imágenes, videos, textos, botones, etc.

La modulación puede ser hecha a partir de conceptos como el de la Proporción Aurea, la simetría , la asimetrías.


La proporción Áurea


Luca Paccioli, matemático del renacimiento la llamaba la divina proporción, Leonardo Da Vinci sección áurea y Johannes Kepler astrónomo alemán la consideraba que era una de las dos cosas perfectas junto al teorema de Pitágoras, después cayo en el olvido, hasta que fué redescubierto por el alemán Zeysing en 1850.

A lo largo de la historia de las artes visuales, se han formulado diferentes teorías sobre la composición.

Platón decía que es imposible combinar bien dos cosas sin una tercera, hace falta una relación entre ellas que los ensamble, la mejor ligazón para esta relación es el todo. La suma de las partes como todo es la más perfecta relación de proporción.

Vitruvio acepta el mismo principio pero dice que la simetría consiste en el acuerdo de medidas entre los diversos elementos de la obra y estos con el conjunto, ideó una fórmula matemática, para la división del espacio dentro de un dibujo, conocida como la sección áurea, y se basaba en una proporción dada entre los lados mas largos y los más cortos de un rectángulo. Dicha simetría está regida por un modulo o canon común: que es el número.

http://www.geocities.com/ResearchTriangle/
Thinktank/4492/noticias/la_proporcion_aurea.htm


La proporción aurea consiste en una serie de líneas diagonales partiendo de las bases un cuadrado, que al entrecruzarse, forman las esquinas de un rectángulo . A ese rectángulo se llama rectángulo áureo. Los módulos que provienen de esa manera de distribuir el espacio, reciben el nombre de Composición áurea.


La regla de oro, como también se conoce, expresada gráficamente es la siguiente:
En las composiciones anteriores, de los Diseñadores Gráficos colombianos Carlos Andrés Torres y Victoria Ducuara, vemos claramente la composición áurea. Estas pueden ser las bases para una diagramación de las diferentes pantallas de un producto multimedia.


Para saber más sobre este tema:
Explicación teórica
http://www.geocities.com/ResearchTriangle/
Thinktank/4492/noticias/la_proporcion_aurea.htm


http://www.mailxmail.com/curso/
informatica/diseno2/capitulo6.htm


Explicación matemática
http://centros5.pntic.mec.es/ies.victoria.kent/
Rincon-C/Curiosid/Rc-25/RC-25.htm


http://www.goldenratio.com.ar/
index.php?msg=2006-09-15+06%3A42%3A58


Oras maneras de componer el espacio, como son la simetría y la asimetría (entre otras) son usadas regularmente por los diseñadores. Al parecer, la simetría es canon de belleza que la percepción humana disfruta más que otro tipo de composicón. Igual que la composición aurea

ya que es el tipo de modulaciones más presentes en la naturaleza.

Basados en la espiral natural del Nautilus, se descubrió la existencia de una proporción natural en los seres vivos de la naturaleza. Por esta razón, también se le denomina Divina Proporción, ya que está dada en la evolución natural, como si fuera dictada por un ser divino o superior.

Un artículo sobre composición Simétrica
http://www.desarrolloweb.com/articulos/1424.php


Comunicación.

Es la parte del diseño gráfico de un pieza multimedia (y otras, por supuesto, que no son multimedia como revistas y periódicos) que tiene que ver con la capacidad de un producto de solucionar un determinado problema de comunicación, como podría ser la enseñanaza, diversión o entretenimiento.

El diseñador estará a cargo de hacer posible que esta función se cumpla, ya que, a diferencia de las artes plásticas, queremos generar una respuesta a un problema y no una inquietud como a veces sucede con las artes visuales plásticas, donde los contenidos no necesariamente responden preguntas sino que, más bien, las generan.

La comunicación está ligada a las funciones repetitivas y modulativas ya que sin ellas sería imposible comunicar acertadamente. Suponga una página que por su complejidad en diseño no de acceso fácil a los contenidos.

Ventajas

Aplicar estos tres conceptos al diseño nos da claras ventajas :

  1. No tener que hacer mucho trabajo de creación. La repeteción de elementos además de mejorar la comunicación de la pieza, elimina la necesidad de crear pantallas diferentes cada vez. Esto supone economía, estética y rapidez.
  2. Beneficia al usuario
  3. Beneficia al diseñador
  4. No es necesario el uso excesivo de tecnologías que solo acomplejan el proceso de diseño. Por ejemplo, el uso de efectos de flash, podría dar al traste con la información.

Friday, September 01, 2006

Ejercicio de organización.

Esto se logra creando unas tarjetas en cartulina o papel con los nombres de los temas para después agruparlas manualmente.

1. Haga una lista de todas las categorías de contenido posibles:
No se preocupe de si están o no organizadas, si son grandes o pequeñas, después se organizarán.

2. Haga una agrupación temática:
Serán los temas de nivel superior o lo que los usuarios verán primero. De esa lista pueden salir temas secundarios, los que se harán en un segundo paso. No es necesario hacer un tercer nivel ya que eso demanda mucho trabajo y detalle no necesario.

3. Redefina grupos temáticos:
Habrá temas que se vinculen a varias categorias, nos daremos cuenta de parte de nuestro trabajo en diseño también será crear una categoría si hace falta, o desechar una que se repita, etc.

Ejemplo de una lista principal:


Sueldo
beneficios médicos
Opciones de inverisón
maternidad
vacaciones
excendencias o ganancias ocasionales
año sabático
críticas
gimnasio
despido
plan de jubilación
ética
politicas de incapacidades laboral
política laboral
incapacidades laborales
primas
saludos

En dicha lista tenemos una serie de temas de un trabajo multimedia para una empresa que quiere informar a sus empleados sobre sus diferentes políticas laborales.

4. Organizar por grupos dentro de la estructura:

En la tabla siguiente vemos como esa información está organizada de una manera coherente y no simplemente en una lista con elementos uno tras de otro:















































Su tiempo Su dinero Su salud Su trabajo
horas de trabajo sueldobeneficios médicos política de incapacidad
vacacionesprimasmaternidadpolítica laboral
año sabático opciones de inversión gimnasioética
excedenciasjubilaciónaccidentes laborales acos

préstamosseguro de incapacidad crítica



despido
El tema de incapacidad, maternidad, podría cruzarse al momento de acceder a la información ya que uno es de salud y otro es de trabajo, pero tienen que ver el uno con el otro.

Los 4 grupos principales dan una mejor idea de organización, estructura y por lo tanto de navegación.

Organización de la información

Objetivos - necesidades del público - entorno ---> contenido - listas -categorías ---> estructura - acceso - diagrmaa de flujo.

Organizar no es simplemente organizar por categorías. El diseño del producto multimedia incluye preguntas como:

- Prioridades del material
-Lo que necesita saber el público sobre dicho material
-Qué se persigue con la información.

"Muchas veces tendremos que desechar material "bonito" en aras de la comunicación. no por bonito siempre sirve".

Las tareas hechas hasta el momento con la definición de la información, nos han ayudado a definir la información, pero debemos hacernos cuestionamientos tales como:

-¿Cómo convertirla en interfaz?
-¿Cómo saber de qué manera usarán mi producto los usuarios?
-Temas con prioridad para el usuario.
- Tipos de acceso, vínculos y control quiere y necesita el usuario.

Las preguntas anteriores, simpre amrradas del concepto de información que tenemos como objetivo: Enseñar, divertir, recordar, promocionar, etc.


Estructuración, el uso de la Simplicidad.

Una vez se empiece a reunir la información en grupos y subgrupos, nos damos cuenta de que generalmente existen categorías basadas en:

- Tema o asunto
- Tamaño o escala
- Ubicación geográfica
- Secuencia histórica
- Secuencia narrativa

Ejemplo: SI vamos a convertir un manual de empleados o uin informe anual de un empresa, es posible que ya esté muy bien categorizado y jerarquizado (niveles de importancia de cada grupo), pero se debe pensar también en proporcionar links directos a temas, búsqueda del contenido, reorganizar el contenido para un mejor acceso y funcionamiento.

Existen métodos tales como la

1. Prueba Heurística o por criterios
. Es la realizada por evaluadores especializados a partir de principios establecidos por la disciplina de la IPO/HCI. Esta evaluación detecta aproximadamente el 42% de los problemas graves de diseño y el 32% de los problemas menores, dependiendo del número de evaluadores que revisen el sitio. Posteriormente se recomienda realizar un test de usuarios para completar la evaluación.

Mayor
información de este tipo de pruebas en Ainda.info


2. Test de usuarios. A través de la observación y registro del comportamiento de los usuarios en tareas previamente encomendadas, se extrae la información sobre la usabilidad de un sitio web. Es una técnica que complementa perfectamente a la evaluación por criterios.

3. Evaluación a través de simulación cognitiva (cognitive walkthrough). En ella se simulan detalladamente y paso a paso todos los procesos de uso (toma de decisiones, resolución de problemas, etc.) por un usuario. Una variante de esta es la simulación por equipo multidisciplinar (pluralistic walkthrough), en la que un grupo compuesto por usuarios, programadores y profesionales de IPO/HCI discuten cada uno de los elementos del sitio.

4. Evaluación de la usabilidad intercultural. Evalúa la adecuación de los contenidos, símbolos y estructuras de la información en el contexto cultural del usuario objetivo.

5. Evaluación de la Accesibilidad. En esta evaluación se comprueba la adecuación del sitio web a su uso por parte de discapacitados.

6. Métodos de evaluación poco adecuados para evaluar la usabilidad son los estudios de mercado y los estudios automatizados ya que tienen serios inconvenientes.

Más información en www.ainda.info