DISEÑO DE INTERFACES MULTIMEDIA Y USABILIDADGUI (Graphic User Interfaz: Interfaz Gráfica de Usuario): Introducción y conceptoLa Interfaz Gráfica de Usuario (GUI, Graphic User Interface) se puede definir como aquella parte de una herramienta o de una tecnología con la cual interactúa el usuario. En un proyecto formativo o multimedia se delimita como el entorno de comunicación creado para acoger los contenidos del sitio y todos los dispositivos de navegación necesarios para acceder a ellos.

Los objetivos primordiales de una interfaz son:- Informar de qué acciones son posibles. -Mostrar el estado actual de cada uno de los botones y objetos.-Permitir actuar con o sobre el sistema y la herramienta.

Detrás del diseño gráfico de una interfaz se encuentra toda una elaboración teórica que supone una síntesis de conceptos y de estrategias tramadas por el equipo completo de desarrollo multimedia. La interfaz, por tanto, no es un objetivo sino un medio de llegar al producto en sí, por lo que la mejor interfaz es aquella que no se ve y que permite una interactuación cómoda y sencilla.

Una mala interfaz genera un grave problema de usabilidad. Ésta se define como una medida de su utilidad, facilidad de aprendizaje y apreciación para una tarea, un usuario y un contexto dado.

1.2 La metáforaAntes de comenzar a diseñar la interfaz es imprescindible pensar el concepto que se necesita expresar. Elegir una metáfora adecuada apoya y refuerza el concepto y el proceso de comunicación sin distraer, proporcionando una realidad “física” para el entorno abstracto en el que se tienen que introducir los usuarios.

La metáfora tiene que:-Transmitir correctamente el mensaje.-Captar la atención del usuario sin distraerle. -Servir de hilo conductor, de forma consistente, en todos los aspectos del proyecto.-Ser familiar, sencilla y lógica.-Utilizar siempre la misma temática gráfica.-Ser casi invisible, pasar desapercibida, puesto que la interfaz no es un

Interfaz de Usuario

Definición.

La interfaz de usuario (IU) es uno de los componentes más importantes de cualquier sistema computacional, pues funciona como el vínculo entre el humano y la máquina. La interfaz de usuario es un conjunto de protocolos y técnicas para el intercambio de información entre una aplicación computacional y el usuario. La IU es responsable de solicitar comandos al usuario, y de desplegar los resultados de la aplicación de una manera comprensible. La IU no es responsable de los cálculos de la aplicación, ni del almacenamiento, recuperación y transmisión de la información.

El éxito de un programa frecuentemente se debe a qué tan rápido puede aprender el usuario a emplear el software, de igual importancia es el que el usuario alcance sus objetivos con el programa de la manera más sencilla posible.

Es importante señalar que dentro del proceso de creación de la IU existen cuatro diferentes tipos de personas involucradas. La primera persona, y probablemente la más importante, es el usuario final o simplemente usuario. El usuario es quien va a utilizar el programa final. La segunda persona es aquella que crea la interfaz de usuario. Esta persona es conocida como diseñador o arquitecto de la interfaz de usuario . Trabajando muy cercanamente con el diseñador estará el programador de la aplicación, este será el encargado de la escritura del software del resto de la aplicación. Muy frecuentemente el diseñador utilizará herramientas especiales para la creación del software de la IU, y estas herramientas son elaboradas por el creador de herramientas.

Dificultad de un diseño iterativo

El diseño iterativo es el método más empleado en el diseño de interfaces ([Myers and Rosson, 1992]). Los dos modelos iterativos más usados son el modelo de cascada (waterfall model), y el modelo de fabricación rápida de prototipos (rapid prototyping model) ([Schach, 1990]).

Básicamente ambos modelos dependen de la realización de un prototipo, el cual es diseñado repetidamente y probado con un grupo de usuarios hasta que el modelo cumpla con las expectativas finales. Este modelo de desarrollo presenta múltiples desventajas, entre ellas altos costos de producción de prototipos y la dificultad de conseguir usuarios reales con los cuales probar la interfaz.

Desconocimiento del usuario

Es difícil saber el grado de conocimientos de cómputo del usuario final, lo cual, frecuentemente, hace que las interfaces de usuario desarrolladas no sean las apropiadas. Se da el caso de que el diseñador implemente la IUs pensando en que la van a usar programadores avanzados, como el propio diseñador, por lo que cuando el producto final es usado por el usuario es posible que se presenten una gran cantidad de problemas de usabilidad.

Deben manejar múltiples eventos.

El software de la interfaz generalmente debe de estar organizado para manejar múltiples eventos, los cuales se suelen presentar de manera concurrente. Los usuarios desean tener la posibilidad de abortar acciones, y también de deshacerlas. Así mismo, debe ser posible realizar todas estas acciones por medio de distintos métodos de entrada (con el teclado o el mouse, p. ej.).

El programa en que se haya implementado la IU debe de estar estructurado de tal manera que pueda aceptar los eventos de entrada en cualquier momento, aun y cuando esté ejecutando otros comandos. Consecuentemente, cualquier operación que tome mucho tiempo, como la impresión, búsqueda, e incluso el repintado de la pantalla, deben de ser ejecutados en un proceso separado. Una motivación extra para el empleo de procesos múltiples es el hecho de que el usuario pueda estar trabajando con distintas ventanas pertenecientes a una misma aplicación. Cada una de esas ventanas necesitará recordar y manejar todos los eventos producidos por el usuario, o por la misma aplicación.

Existen requerimientos de tiempo real para la de los eventos de entrada.

La creación de IUs tiene las dificultades de la programación en tiempo real. La mayoría de las interfaces gráficas y con manipulación directa tendrán objetos que sean animados o que sea posible moverlos con el mouse. Para que esto sea atractivo para el usuario, los objetos deben de ser redibujados entre 30 y 60 veces por segundo, sin pausas notables.

La próxima generación de interfaces de usuario incluiría nuevas tecnologías como video, reconocimiento de voz, animación de simulaciones, y otros tipos de multimedia que contarán con las restricciones de la programación de tiempo real.

Deben de ser programadas de ``adentro hacia afuera''.

Las IU modernas son escritas de adentro hacia afuera. En vez de organizar el código para que la aplicación tenga el control, la aplicación debe más bien estar dividida en

muchas subrutinas que son llamadas cuando el usuario realiza alguna acción. Se requiere de una programación con un cuidado extremo en la organización y modularización del software de la IU.

El software debe ser especialmente robusto.

Por supuesto que todo el software debe de ser robusto, pero en el caso de la IU este tema es de capital importancia ya que se deberán manejar una gran cantidad de eventos de entrada-salida, ocurriendo de manera concurrente. A diferencia de los programas no interactivos, sin incluir al software para IU, en donde al ocurrir un error se requiere el uso de un debugger para identificar el error y corregirlo, en el caso del software de interfaz de usuario si un error ocurriese se deberá presentar un mensaje de error, explicando que fue lo que sucedió y dar la oportunidad hacer las correcciones pertinentes.

Dificultad para modularizar el programa. bibliografía especializada recomienda que la porción correspondiente a la IU esté separada del resto del software, para facilitar que esta sea fácilmente alterada (para el diseño iterativo). Desafortunadamente, la separación de estas dos partes es muy difícil, prácticamente imposible, ya que los cambios en la IU requieren inevitablemente cambios en el resto del software. Incluso con la utilización de herramientas para la creación de interfaces de usuario gráficas (Graphical User Interfaces - GUI) el problema de modularidad se hace más difícil por la gran cantidad de funciones call-back. Generalmente, cada widget2.2 en la pantalla requiere que el programador escriba al menos un procedimiento de aplicación a ser llamado cuando el operador lo activa. Cada tipo de widget tendrá su propia secuencia de funciones call-back. Una puede contener miles de widgets, por lo que habrá al menos la misma cantidad de funciones call-back.

Funciones principal

Sus principales funciones son los siguientes:

* Puesta en marcha y apagado

* Control de las funciones manipulables del equipo

* Manipulación de archivos y directorios

* Herramientas de desarrollo de aplicaciones

* Comunicación con otros sistemas

* Información de estado

* Configuración de la propia interfaz y entorno

* Intercambio de datos entre aplicaciones

* Control de acceso

* Sistema de ayuda interactivo.

Tipos de interfaces de usuario

Según la forma de interactuar del usuario

Atendiendo a como el usuario puede interactuar con una interfaz, nos encontramos con varios tipos de interfaces de Usuario:

* Interfaces alfanuméricas (intérpretes de mandatos) que solo presentan texto.

* Interfaces gráficas de usuario (GUI, Graphics User Interfaces), las que permiten comunicarse con el ordenador de una forma muy rápida e intuitiva representando gráficamente los elementos de control y medida.

* Interfaces táctiles, que representan gráficamente un "panel de control" en una pantalla sensible que permite interaccionar con el dedo de forma similar a si se accionara un control físico.

Según su construcción

Pueden ser de hardware o de software:

* Interfaces hardware.- Se trata de un conjunto de controles o dispositivos que permiten la interacción hombre-máquina, de modo que permiten introducir o leer datos del equipo, mediante pulsadores, reguladores e instrumentos.

* Interfaces software.- Son programas o parte de ellos, que permiten expresar nuestros deseos al ordenador o visualizar su respuesta.

Interfaz gráfica de usuario

En el contexto del proceso de interacción persona - ordenador, la interfaz gráfica de usuario es el artefacto tecnológico de un sistema interactivo que posibilita, a través del

uso y la representación del lenguaje visual, una interacción amigable con un sistema informático.

La interfaz gráfica de usuario (en Idioma inglés Graphical User Interface, GUI) es un tipo de interfaz de usuario que utiliza un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Habitualmente las acciones se realizan mediante manipulación directa para facilitar la interacción del usuario con la computadora.

Surge como evolución de la línea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno gráfico. Como ejemplo de interfaz gráfica de usuario podemos citar el escritorio o 'desktop' del sistema operativo Windows y el entorno X-Window de Linux y también Aqua de Mac OS X.

Diseño de Interfaces Graficas de Usuarios — Presentation Transcript

1. Diseño de Interfaz gráfica del usuario publicaciones digitales. El diseño de interfaz gráfica :: L.D.G. Lizbeth Luna González

2. DiseñadoresDestacar la importancia que tiene el diseño de una interfaz grafica amigable parasitios web o soportes multimedia, sobre todo porque hasta hace no mucho tiempoera una labor realizada por programadores y pocos diseñadores tenían laoportunidad de adquirir experiencia en ésta área.

3. http://www.startrekmovie.com/Cuando se trata de realizar un proyecto serio en formato digital yconfiable, es necesario contar con conocimientos de diseño deinterfaces, los cuales nos ayudan a resolver una publicación de lamejor manera.

4. Diseño de Interfaces Gráficas de Usuario (IGU) http://www.fordvehicles.com/the2010mustang/http://www.volkswagen.es

5. http://www.fool.com/ http://www.aetna.com/El estudio y desarrollo del diseño de una interfaz requiere de un trabajo dondeestán inmersas viarias disciplinas en función a un mismo objetivo: cubrir lanecesidad del hombre de transmitir y comunicar, en este caso, a través de unmedio electrónico. Las disciplinas pueden variar pero las que se mantienen dealguna manera constante son: la ingeniería, la pedagogía y diseño. No importa sila publicación es científica, de divulgación o de entretenimiento, la interfaz esfundamental para la consulta adecuada del documento.

6. Todo usuario requiere un tiempo de adaptación a una interfaz, entre menorsea el tiempo dedicado a realizar está acción, las posibilidades de éxito estángarantizadas. Curiosamente, una buena interfaz se vuelve invisible almomento de interactuar con ella. Nos damos cuenta de su existencia cuandolos errores se hacen presentes al sentimos perdidos, ingenuos y con lasituación fuera de control, por ejemplo.1.- Mensajes poco claros.2.- El encontrar información se vuelve complicado.3.- No existen jerarquías, ni de información, ni visuales. http://www.havenworks.com/

7. La interfaz de, por el contrario debe hacer sentir al usuario, seguro, confiado y tranquilo,guiarlo e incluso condicionarlo, de tal forma, que el sienta el control

total de la situación.Varios factores influyen en la toma de decisiones para el diseño de interfaz

8. El Poder del Contenido y la Imagen 9. El medio digital nos ofrece una serie de recursos multimedia (imagen,

sonido, animación,video, etc.) y no hay que dejarse seducir por ellos: Una publicación puede estar saturada deanimaciones y efectos visualmente atractivos, lo cual no mejora en nada la calidad delcontenido, pero si lo usamos pensando siempre en el beneficio que puede proporcionar parael usuario la aplicación de estas herramientas, en función del reforzamiento de las ideas quese quieren transmitir, estaremos cumpliendo con elementos rectores de una interfaz, esdecir, que sea eficaz, de fácil uso y memorización, así como de una imagen agradable, queprovoque, incluso, un estado emocional, lo que en inglés se conoce como usability (algunostextos en español lo manejan como usabilidad). El principal estudioso de esta área es JakobNielsen

10. Lo anterior se logra, si conseguimosque la interfaz sea básicamente:1. Sencilla2. Clara3. Predecible4. Flexible5. Consistente6. Intuitiva7. Coherente http://www.lacoste.com/

11. 1.- Sencilla: Los elementos están para apoyar, ayudar y guiar, nopara confundir, evitemos la saturación y colocación innecesaria delos mismos.

12. 2.- Clara: La información debe ser fácilmente localizable, es decir, debe estarorganizada ya sea de manera lógica, jerárquica o temática. En el ejemplo sepuede apreciar una organización temática.

13. 3.- Predecible: A acciones iguales, resultados iguales Que el usuariocomprenda rápidamente cuales son las opciones de búsqueda, cuál será lavisualización de un contenido en la pantalla

14. 4.- Flexible: La publicación deber verse y entenderse claramente en la mayoría de losnavegadores y plataformas (Mac, PC), al menos en las más comunes. Debemos pensar siempreen opciones (“botones”, textos) que nos permitan regresar al punto de partida (de ser posible)y a la página principal (recordemos que por las características del medio, el lector puede iniciarla lectura en cualquier punto de la misma), proporcionar versiones del mismo documento peroen varios formatos (PDF, DOC, TXT) para que el usuario puede elegir el que más le convenga.Para la actualización el diseño debe permitir la adecuación de la interfaz a agregar nuevassecciones, cambio de algunas imágenes, modificar textos, etcétera.

15. http://www.marvel.com/http://www.viaarte.com/ 16. http://www.defensayjusticia.com.ar5.- Consistente: Lograr una semejanza

entre las secciones o capítulos. Los elementos unavez organizados y definidos deben permanecer en la misma área, con la misma función y lamisma función con el mismo texto o imagen, la única que permite presentar variaciones dela distribución de los elementos es la página principal, pero la representación gráfica y detexto que se haga de las funciones debe permanecer igual en todas las secciones, porejemplo: El menú de navegación.

17. http://www.bauhaus.de 18. 6.- Intuitiva: El usuario se siente más seguro en una publicación en la que

notenga que adivinar ni pensar como ejecutar acciones.

19. http://www.quino.com.ar/7.- Coherente: Tanto texto como gráficos, colores y demás elementos utilizados deben corresponder alcontenido de la publicación. Apoyados generalmente por una construcción de palabras, frases y elementosvisuales.

20. La labor de un diseñador de interfaces gráficas es adelantarse, ponerse en el lugar del usuario, prevercualquier situación que pueda resultar un punto de conflicto (ya sea psicológico o técnico) y resolver elproblema antes de que se presente. Si el lector de una publicación digital encuentra que para teneracceso a la misma, previamente debe solucionar problemas técnicos, ajenos al documento, en lo quebusca, encuentra y aprende a usar esas nuevas herramientas, seguramente habrá olvidado el porquéde la lectura inicial o bien encontrado otro sitio donde venga la misma información y el acceso a ellasea mucho más sencillo, por supuesto la elección resulta obvia.

21. http://www.ariza.com.tr/site.html Es compromiso del diseñador es usar los programas comoherramientas para comunicar y reforzar ideas, que connoten y denoten el mensaje, NO para lucir su dominio técnico de los programas y recursos multimedia.

22. El diseño de una interfaz como cualquier proyecto en diseño es un proceso el cual noestá libre de imprevistos, ya que el medio cambia y evoluciona en la medida en que lasociedad, sus necesidades y recursos tecnológicos lo hacen. Sin embargo, las premisasbásicas de una buena interfaz, no se pierden, sólo se transforman y adaptan almedio. que la interfaz gráfica de usuario sirve como medio para la comunicación conun sistema. El diseñador cumple una función primordial como materializador yconstructor de mensajes. Todo proyecto de diseño implica un proceso pensado yconsiente que puede tener variaciones, todo depende de diversos factores entre ellosdel cambio y evolución que tenga el medio electrónico-digital para lograr que ésta seaeficaz, de fácil uso y memorización y que incluso provoque emociones en el usuario,en beneficio directo del mismo.

Apto para vehículos con Pantalla de 8" o Sistema de Navegación Touch Premium.

Funcionalidades

3 Entradas AV controladas desde los mandos originales (incluida desde la pantalla táctil original).

1 Salida AV para pantallas traseras. 1 Entrada para Cámara Trasera. Control táctil para navegación y para Multimedia (TDT, USB, etc)*1. Activación de la función de vídeo en movimiento para poder ver la imagen

procedente de cualquier fuente original o conectada al interface. Activación de función de cámara trasera en Modo LOW si no se dispone de

cámara/s originales. (Sólo disponible imagen de cámara sin información visual PDC, salvo en combinación con sistemas de cámara originales, donde se mantiene su funcionalidad)

Posibilidad de conectar una cámara trasera aftermarket tipo NTSC*2. Conmutación Automática en cualquier modo del sistema a la imagen de cámara

cuando se engrana la marcha atrás. No afecta a las funciones de navegación en caso de incorporarla. Tipo de Conexión Plug & Play. Tecnología CAN BUS.

*1 La navegación, TDT o USB Multimedia son accesorios al interface que se pueden suministrar opcionalmente.*2 Cámara no incluida. Se puede suministrar opcionalmente.

Lovely Chart es una aplicación web que se utiliza para diseñar diagramas de flujo, gráficos, sitemaps, wireframes y más, proporcionándonos un buen conjunto de herramientas de dibujo y bibliotecas de símbolos, completamente gratis.

Lovely Charts es una herramienta muy sencilla de manejar, sólo debemos arrastrar y soltar los dibujos, para centrarnos en lo que realmente nos importa, sin tener que preocuparnos en la configuración del software.

Con Lovely Charts podemos crear una variedad de diagramas, incluyendo organigramas, diagramas de red, wireframes, mapas de sitios web y diagramas de flujo, entre muchos otros. Podríamos utilizarlo para diagramar un proyecto, determinar la cadena de mando o podemos organizar la estructura de un sitio web, como se deben enlazar las páginas web, etc. Incluso, podemos crear un organigrama tradicional con preguntas y respuestas, o tal vez un árbol genealógico.

La versión completa de Lovely Charts está disponible de forma gratuita, pero también tiene una versión profesional (por US$ 29 dólares al año) para aquellos que deseen importar sus propias imágenes e ilustraciones, compartir y colaborar con colegas o clientes, adjuntar comentarios a un diagrama, y otras características más.

La mayoría de los programas para crear diagramas requieren que nos preocupemos por los colores, tipos de íconos, escoger las flechas y los símbolos correctos, etc. Pero, Lovely Charts se encarga prácticamente de todo esto, dejando que nos enfoquemos en nuestras ideas y su representación.

La versión gratuita es muy completa, pero limita la edición de los diagramas a uno sólo para guardar y un mensaje en la parte inferior de “Made with lovelycharts.com”, se guardará en la imagen. Por lo demás, es una herramienta muy recomendable.

Características comunes a toda interfaz bien diseñada Antes de proceder a diseñar la interfaz de nuestro producto, es importante entender primero que es lo que hace que una interfaz sea buena. Que cualidades deberíamos conseguir.

Las interfaces bien diseñadas comparten las siguientes cualidades o características:1. Claridad:evitando la ambigüedad y dejando los diferentes elementos claros a través del lenguaje, el flujo visual, la jerarquía y las metáforas para los elementos visuales (iconos descriptivos). Las interfaces claras no necesitan manuales. Incluso aseguran que el usuario cometa menos errores.

Etiquetas, textos destacados, numeración y flujo visual a través de un path, son los elementos de diseño que utiliza esta web para facilitar la navegación.

2. Concisión: es fácil hacer que una interfaz sea fácil de entender especificándo y etiquetando todos sus elementos, pero corremos el peligro de diseñar una interfaz sobrecargada donde

hay demasiadas cosas en la pantalla, haciendo que al usuario le resulte difícil encontrar lo que busca, o simplemente tenga que realizar una "tarea de investigación" desanimándole a seguir usando esa interfaz.

El verdadero reto será hacer una interfaz concisa y clara al mismo tiempo.

3. Familiaridad: Algo resulta familiar cuando nos recuerda a cosas con las que ya hemos trabajado anteriormente. Incluso si un usuario utiliza una interfaz por primera vez podemos conseguir que ciertos elementos le resulten familiares. Podemos usar metáforas de la vida real para dar significado a los elementos de nuestra interfaz ( por ejemplo una distribución de apartados a base de carpetas o etiquetas que nos recordará a un archivador ). La metáfora de la carpeta le resultará familiar al usuario y por tanto se encontratá más cómodo trabajando.

Mediante la metáfora de utilizar etiquetas para macetas consigue destacar los distintos apartados de una forma original. El hecho de que los enlaces sean formas geométricas en lugar de texto facilita el acceso

4. Capacidad de respuesta: Esto significa un par de cosas: en primer lugar velocidad. Una buena interfaz no debería hacer esperar, y debería priorizar las tareas más comunes (ej. cajeros). En segundo lugar la interfaz debe proporcionar un buen feedback al usuario sobre qué está pasando y si las acciones del mismo están siendo procesadas correctamente ( ej. splash screen, mensaje informativo especificando tiempo estimado de respuesta, mensaje 'si no es redirigido a la página en unos segundos haga click aquí' ).

5. Consistencia: Mantener el diseño de nuestra interfaz consistente a lo largo de toda la aplicación es importante porque permite a los usuarios reconocer patrones de uso. Por otro lado evita ambigüedades y confusiones. Una vez que los usuarios aprenden cómo funcionan ciertas partes de la interfaz, pueden aplicar éste conocimiento al resto de áreas y funcionalidades dado que la interfaz y su funcionamiento se mantienen constantes.

No hace falta mantener los mismos colores para conseguir consistencia en el diseño como bien nos muestra este site.

6. Estética: Aunque no sea el primer objetivo, no deja de ser un objetivo a cumplir. Una interfaz no necesita ser bonita para poder funcionar, sin embargo hacer un diseño agradable contribuirá a que la experiencia de usuario mejore.

En esta web se mantiene la consistencia en el diseño, utilizando la repetición de elementos visuales, pero en las zonas de más texto utiliza colores claros que facilitan la lectura e invitan a la reflexión

7. Eficiencia: El tiempo es dinero, y una buena interfaz debería conseguir que los usuarios obtuvieran mayor productividad a través de atajos y de un buen diseño. Al fin y al cabo éste es uno de los beneficios inherentes de la tecnología: nos permite realizar tareas en menos tiempo y con menos esfuerzo, haciendo la mayoría del trabajo por nosotros. Quien no recuerda el copiar pegar, o el comando deshacer.

El formulario nos ofrece la posibilidad de recordar nuestros datos, un link por si no nos acordamos del password y utiliza colores para destacar claramente el botón de acceso

8. Gestión de errores: Todo el mundo comete errores, y cómo se encargue de gestionar los errores de usuario será un test de calidad. Será fácil deshacer acciones, recuperar archivos borrados, una buena interfaz no debería castigar a los usuarios por sus errores sino más bien facilitarles los medios para arreglarlos.

Olvidar la password es un error común, pero éste formulario va más allá y nos aconseja que no le demos a la opción "remember me" si estamos en un ordenador público o compartido

Diseñar una interfaz que incorpore todas estas características no es fácil porque a veces enfatizar en una característica puede afectar a las otras. Por ejemplo cuantos más elementos de interfaz pongamos, más información tendrá que procesar los usuarios, pero si por el contrario reducimos demasiado podemos hacer que sea una interfaz ambigua o difícil de interpretar.

Crear algo que sea simple y elegante y al mismo tiempo claro y consistente es el objetivo que debemos perseguir como diseñadores de interfaces de usuario.

Existe el dicho "Divide y venceras", eso es lo que se pretende lograr con los procesos, ya que para lograr un objetivo hay que enlistar todas las pequeñas tareas o actividades que hay que realizar para llegar a la meta,si nos enfocamos en cada paso, seran más fácil de realizarlas y llevando una secuencia lógica obtendremos eficiencia.

La creación de un Producto Multimedia requiere formar un equipo de personas interdisciplinarias que tengan diferentes habilidades para que aporten su trabajo al proceso que contiene 6 pasos los cuales están divididos en dos Etapas: la Planificación y la Creación.

Planificación

La planificación consiste es plasmar en papel todas las ideas que tenemos en nuestras cabezas del como nos imaginamos el producto multimedia

Definición de la Audiencia

Antes de que el equipo multimedia empiece a trabajar es necesario definir quienes serán nuestros usuarios. Al igual que cuando en las empresas se crea un nuevo producto o se quiere relanzar uno ya existente, se debe de auxiliar de la herramienta conocida como Investigación y Análisis de Mercado. No vamos a entrar mucho en esa área pero en este primer paso es necesario conocer las necesidades y la forma en que el usuario utilizará el producto multimedia. Las necesidades y requerimientos de los usuarios servirán para establecer la apariencia y el comportamiento del producto multimedia.

Realice una comparación de la apariencia de 3 sitios web con diferentes audiencias:

Sitio sobre bebes Sitio de Noticias Sitio de un Grupo de Rock

Algunas de las preguntas que deben ser contestadas para determinar la audiencia son las siguientes:

1. ¿Cuál es la finalidad del producto multimedia?Posibles Respuestas/ (Informar, entretener, otra)

2. ¿Cuál es el perfil promedio de mi audiencia?Posibles Respuestas/ (rango de edad, sexo predominante, estado familiar o civil, grado de escolaridad, conocimientos sobre informática, conocimientos sobre el inglés, posee discapacidades, etc.)

3. ¿Cuánto deberían saber los usuarios del tema antes de utilizar el producto multimedia?Posibles Respuestas/ (básico, intermedio o avanzad )

4. ¿Cuantó tiempo (aproximado) los usuarios navegarán a través del contenido?Posibles Respuestas/ ( _____ minutos )

5. ¿Los usuarios obtendrán más de este contenido si el medio que predomina es?Posibles Respuestas/ (texto, audio, imágen, animación o vídeo)/i>

6. ¿Qué tipo de interacción prefieren los usuarios con el producto multimedia?Posibles Respuestas/ (vínculos, botones, otros)

7. ¿Los usuarios prefieren responder a través del dispositivo o períferico de entrada?Posibles Respuestas/ (mouse, teclado, pantalla de contacto, controlador de juego, otros.)

8. ¿Cuánto tiempo debe transcurrir para actualizar el contenido del producto multimedia?Posibles Respuestas/ ( _____ minutos )

Diseño Multimedia

Tomando en cuenta las necesidades y requerimientos de nuestra audiencia, podemos empezar con el Diseño Multimedia que tiene 3 objetivos principales:

1. Delimitar el contenido exacto2. Establecer la secuencia del contenido3. Especificar los recursos u opciones que se le proporcionaran al usuario

Para realizar un anuncio comercial o una película cinematográfica primero es necesario establecer un GUIón (storyboard) que es la herramienta que servirá para conseguir los objetivos de este paso.

El tipo de storyboard que utilizaremos será en forma de diagrama estableciendo el orden en que los eventos del contenido deben ocurrir, visualizando el recorrido completo del producto multimedia. Con un rectángulo representaremos una pantalla, una página web o una diapositiva. En cada rectángulo introduciremos el tema o nombre que identificará a cada uno de ellos y el medio (texto, audio, imagen, animación o vídeo) que se utilizará para el contenido. Y para establecer la secuencia entre cada rectángulo dibujaremos flechas que representarán el vínculo o la relación entre ellos.

Para crear el storyboard, contamos con 3 estructuras básicas:

Estructuras

1. Lineal: en donde el usuario va siguiendo una secuencia de principio a fin, dando paso por paso, esto quiere decir que la relación es de uno a uno (1 - 1), un ejemplo puede ser una presentación en donde desde un inicio se mueve diapositiva por diapositiva hasta llegar a la última.

2. Jerárquica: en donde el usuario desde un punto de inicio puede navegar o desplazarse hacía varios destinos, la relación es de uno a muchos (1 - *), por ejemplo un sitio Web que tiene una página de inicio (Homepage) la cual contiene un menú para desplazarse a cualquiera de las categorías.

3. Desordenada o en forma de Red: en donde el usuario avanza y regresa de un contenido a otro, la relaciones es (* - *) como los wikis que tiene palabras claves vinculadas a un glosario del cual puede regresar a la página donde se encontraba anteriormente

4. Mezcla o Mix: Se puede crear un CD-ROM multimedia en donde el principio sea lineal pasando del título a una introducción y llegar hasta un menú en donde el usuario puede escoger el tema que quiere ver (jerárquica) y que también tenga un glosario con vínculos a todas las páginas donde aparezcan esos conceptos.

Para las animaciones o los vídeo usaremos como herramienta de diseño los bocetos (sketch) , dibujando varias escenas para comprender el movimiento de la animación o vídeo.

Para establecer la apariencia del producto multimedia, podemos diseñar la GUI, distribuyendo los componentes que la conformarán, estableciendo la paleta de colores que se utilizarán (a través de la teoría del color) y el tipo de fuente que mejor se adecué a la audiencia sin perder de vista la legibilidad.

Por ejemplo un Sitio Web utiliza una plantilla que estandariza todas las páginas web que lo conforman, dándole uniformidad al sitio. Generalmente en esa plantilla se asigna la parte superior para una pancarta (Banner) que contiene el logo de la empresa, el nombre o Título del Sitio. También se asigna el lado izquierdo para el menú que contiene los subtemas. Al final de la página se encuentra una especie de pie de página, colocando el nombre o Email del autor, la fecha de actualización, los derechos reservados y otra información del sitio, no del contenido. El espacio que sobra es para el contenido o la información que queremos publicar. Opcionalmente podemos asignar un área para una barra de navegación gráfica. Prácticamente es como diseñar y distribuir los componentes de una casa, colocando cada elemente de la mejor manera posible

Visite uno de sus Sitios Web preferidos, enliste sus componentes y realice un bosquejo de la forma en que están distribuidos.

La Paleta de Colores

Generalmente un producto multimedia puede tener de 2 a 4 colores que predominarán usándolos con diferentes intensidades, entonces es necesario asignarle un color a:

1. el Fondo 2. el Título 3. el Texto (normal) del contenido 4. otro Tipo de Texto 5. a las Figuras u Objetos6. sombra de los Objetos 7. a los Vínculos (Normales) 8. a los Vínculos (Activos)

9. a los Vínculos (Visitados)

Las empresas o instituciones generalmente ya tiene los colores con los que las identificamos, pero si tenemos la opción de elegir los colores del producto multimedia podemos hacer uso de la Teoría del Color y para que sea legible hay que contratar el color del fondo con el color del texto, podemos ver que las señales de tránsito utilizan estas combinaciones:

1. Fondo: rojo, Texto blanco 2. Fondo: amarillo, Texto negro3. Fondo: verde, Texto blanco

Tipografía

Otro aspecto que hay que tomar en cuenta es el tipo o fuente de texto que vamos a utilizar, a pesar que en un procesador de palabras tenemos una gran cantidad de fuentes y si no es suficiente podemos descargar otras en Internet, las podemos clasificar en tres categorías:

1. Serif: (en francés significa patines): tiene una rayitas que ayudan a leer mejor en documentos impresos pero que distorsionan las letras en el monitor, especialmente si el tamaño es pequeño

2. Sans Serif: (sin patines) no tienen esas rayitas por lo que se recomiendan utilizarlas en monitores (pantallas)

3. Otras: cualquier otro tipo de texto que no entra en las dos categorías anteriores, ejemplo: tipo carta, gótica, etc.

Selección de las Herramientas

Una vez que tenemos las ideas plasmadas en papel de lo que queremos hacer en el Diseño Multimedia, podemos seleccionar tanto el Hardware como el Software necesario para la siguiente etapa que es la Creación.

El Hardware

De acuerdo al tamaño y calidad del proyecto así serán las características que debe poseer la computadora que se utilizará para la creación del producto multimedia, además de la computadora también es necesario seleccionar los periféricos con que se debe contar para utilizar todos los medios, como por ejemplo (cámara, escáner, etc.).

Existe varios estándares como el PC99 o el MPC3 que establecen los requerimientos mínimos necesarios para que la computadora pueda reproducir un programa multimedia.

Características PC99 MPC 3 Actual

El Software

El equipo multimedia puede seleccionar de una gran variedad de programas, marcas y versiones para desarrollar multimedia, dependerá de estos aspectos para tomar la decisión:

1. El tamaño o presupuesto del proyecto 2. Los medios utilizados para mostrar el contenido3. Las capacidades de Interactividad4. Las Características de navegación

StoryBoard orientado a la multimedia

Toon Boom Animation lanzó Storyboard Pro 2, la segunda versión de su software para la creación, desarrollo y visualización de bocetos durante la pre-producción. Un software dirigido a los profesionales del video, desde animadores, cineastas y profesionales que en general trabajan con gráficos en movimiento. Entre las novedades de esta nueva versión, se cuentan herramientas de dibujo mejoradas, mayores capacidades de movimiento de cámara, integración con Final Draft 8 y un motor de exportación de PDFs, entre otras.

A los usuarios que comienzan con el uso de software de animación se les hará muy intuitivo y de cierta forma familiar la interfaz de Storyboard Pro 2. Las herramientas de brushes, goma, pintura, texto, corte y zoom son similares a las de Photoshop o Painter, dentro de un entorno profesional, muy intuitivo y orientado a artistas del bocetaje.

Storyboard Pro 2 soporta más archivos de texto que la versión pasada, que únicamente soportaba .txt, además en esta versión es más fácil añadir diálogos en los paneles, además de verse mejorada la integración con Final Cut Pro. Ahora es es más fácil crear proyectos a partir de bocetos escaneados, hay nuevas opciones de animación y la transparencia de capas es otra de las mejoras introducidas en la nueva versión.

Una de las principales ventajas de Storyboard Pro 2 es sin duda el ahorro y optimización de tiempo, una vez que tenemos nuestro storyboard lo podemos exportar como PDF, Quicktime o SWF pudiendo verlo ya animado e incluso con sonido. Además del audio, por ser un programa para storyboards, podemos hacer anotaciones para cada cuadro, ya sean anotaciones técnicas o dialogos de personajes.

Toon Boom Storyboard Pro 2 viene con más de tre horas de videotutoriales online que cubren temas como: Introducción e iniciación con Storyboard Pro, Descubriendo la Interfaz, Guión y Paneles, Dibujo, Añadiendo Colores, Capas, Biblioteca, Animación, Supervisar el Storyboard y Exportar.

Guión multimedia

La realización de una pieza periodística multimedia requiere de una planificación detallada de cada uno de los elementos que formarán parte de ese material y de la vinculación entre ellos. Esa organización se realiza a través de lo que se denomina "Guión multimedia".

Es importante destacar que este tipo de producciones se aplica a trabajos de investigación periodística, para la cual es necesario contar con un objetivo previo orientado a producir el material necesario para el diseño de la pieza multimedia: fotografías, videos, audios, material de archivo, etc.

A la hora de diseñar una pieza periodística multimedia, es necesario cumplir con algunos pasos sucesivos:

- Anteproyecto: hay que tener claro qué investigar, acotando el objeto de estudio de acuerdo a nuestro interés y nuestras posibilidades reales para abordarlo (tiempo, distancias, equipamiento, etc.)

- Preproducción: una vez definida la idea del trabajo, hay que realizar una lista de los recursos que serán utilizados en la investigación, las locaciones donde se realizarán las grabaciones o registros y el material de archivo que se va a usar. En esta etapa se realiza el guión multimedia donde aparecen todos los elementos que formarán parte de la pieza periodística y su organización hipertextual que permitirá la interactividad con el usuario.

La etapa de Producción contempla la toma, captura, registro, digitalización, etc. de todos los recursos a utilizar. Finalmente, en la etapa de Post-producción, esos recursos

se editan para la presentación final. En el caso del periodismo digital, ésta admite al menos tres posibilidades:

a) presentación en un CD-Rom (dxr, el formato resultante de programas como Director, Toolbook, Authorware, etc.)

b) presentación en conjunto de páginas web (html, el formato resultante de programas como Dreamweaver, Frontpage, etc.)

c) presentación multimedia interactiva (swf, el formato resultante del programa Flash)

Realización del guión multimedia

Para el presente trabajo tomamos los conceptos de José Luis Orihuela y María Luisa Santos en su libro "Introducción al Diseño Digital". Los autores proponen comenzar con lo que denominan "Diagrama del hipertexto" ( o grafo general segun Bou Bouzá)

Refleja a modo de esquema gráfico la articupación del contenido editorial del proyecto en nodos y enlaces. Diseñar la estructura hipertextual de la aplicación exige fragmentar el contenido editorial dsponiéndolo en zonas, secuencias y nodos y estableciuendo su correspondiente codificación. Por ejemplo: Z1-S1-N4. El diagrama del hipertexto en tanto ilustra la disposición de los nodos y los trayectos de navegación posibles constituye el mapa del interactivo, como se ilustra en la figura. (Orihuela-Santos, 1999: 79)

Para cada uno de los nodos, los autores proponen la confección de una ficha ( como storyboard) que de cuenta de los elementos utilizados y su articulación en la pieza.

MODELO DE STORYBOARD (Orihuela-Santos, 1999: 83)

CODIFICACIÓN DEL NODO ( Por ejemplo B 1)

Boceto de pantalla

Textos Imagenes Sonidos Programación

Proponemos realizar un trabajo compuesto por textos lingüisticos, imágenes, audios, etc, a partir de una idea central.Cada equipo debe diseñar un guión multimedia de una nota periodística que formará parte del Trabajo Final del seminario. El trabajo comenzará en la clase presencial del próximo viernes, y continuaremos durante las siguientes semanas, con el contacto con los tutores. Para la realización del guión multimedia se sugiere:

1: ELEGIR EL TEMA

2: Sugerir las distintas piezas que compondrán la nota

3: Realizar el esquema. Tal vez resulte más claro denominar a los distintos niveles con una LETRA y con un numero o colorear los distintos SECTORES

4: Elaborar las distintas piezas

Rescataremos para este trabajo la idea de Salaverría de CELULA INFORMATIVA

1. Producción Multimedia

2. Producción Multimedia Etapas en la creación de un producto multimedia • Planeación • Diseño

3. Etapas en la creación de un producto multimedia Producción Multimedia Producto 7 6 5 4 1. Planeación o análisis 3 2. Diseño 2 3. Desarrollo 1 4. Evaluación 5. Documentación 6. Implementación 7. Actualización

4. Etapas en la creación de un producto multimedia Producción Multimedia 1. Planeación o análisis Está compuesta por cuatro tipos de análisis: a) Análisis de necesidades b) Análisis de usuarios c) Análisis de contenidos d) Análisis tecnológicos Cada uno depende de los demás por lo que la planeación debe ser integral

5. Etapas en la creación de un producto multimedia Análisis de necesidades a) Se plantea el objetivo general; b) Se describe el tipo de producto; c) Se indica el tipo de personas que atenderá y qué beneficios dará. • Objetivo general Se determina qué es lo que el usuario necesita y cómo puede resolverse con el producto multimedia. Producción Multimedia Se empiezan a identificar los tipos de contenidos que se abordarán, los tiempos aproximados para su • Alcance general desarrollo y los costos estimados. • Tipos de contenido • Tiempos y costos estimados Es importante considerar características como: rango de edades, nivel educativo, experiencia en el uso de computadores. Se debe investigar sobre el tipo de tecnologías a las que tienen acceso que le facilitarán o dificultarán el Análisis de usuarios uso del producto. Conviene realizar encuestas para determinar la experiencia y expectativas en cuanto a contenidos esperados o que pueden ser más solicitados. • Características Indagar sobre el tipo de tareas que desarrollarán con la multimedia. • Tecnologías •

Contenidos Deben ser identificados con claridad, los más relevantes de acuerdo con el análisis de usuarios. • Tareas Una vez identificados, se deben revisar en términos de sus características, a fin de utilizar la presentación más adecuada para los mismos, haciendo uso de la tecnología más apropiada. Se deben abordar las consideraciones especiales en cuanto a la forma como el usuario tendrá Análisis de contenidos interacción con los contenidos y las funcionalidades del producto multimedia. • Especificaciones de contenidos • Tecnología no apropiada Se deben revisar tecnologías disponibles para la planeación, el diseño, el desarrollo y las que el usuario final requiera para utilizar el producto multimedia. • Interacción de usuarios con contenidos Algunas preguntas clave: • Funcionalidad de contenidos a) ¿En qué consistirá el proyecto multimedia? – describirlo lo más específicamente posible b) ¿Cuál es el propósito principal? Análisis de tecnologías c) ¿Quién lo va a usar? d) ¿Cuáles serán los temas o módulos en que se puede dividir el tema principal? e) ¿Qué elementos multimedia se necesitan? ¿Qué tipo de textos, sonidos, imágenes, colores? • Para la planeación f) ¿De dónde se pueden tomar esos elementos o cómo pueden crearse? ¿Se necesitarán • Para el diseño g) permisos para usarlos? ¿Qué herramientas de preparación se usarán? • Para el desarrollo h) ¿Qué hardware se requiere? i) ¿Se necesitará de ayuda para crear elementos y usar software de edición? • Disponibles al usuario j) ¿Cuánto tiempo se tardará? Estas preguntas ayudarán a realizar una adecuada planeación del proyecto. Los proyectos multimedia, generalmente, se trabajan en forma de equipos de desarrollo en donde las tareas se dividen por áreas como: diseño, video, audio, texto, analistas, programadores, caricaturistas, guionistas, entre otros.

6. Etapas en la creación de un producto multimedia 2. Diseño Producción Multimedia Una vez que se tiene el análisis de necesidades, usuarios, contenidos y tecnologías se pasa a la etapa de diseño. Aquí se definen los objetivos específicos del proyecto, se diseñan las tareas que los usuarios deberán realizar, se realiza el diseño preliminar de las funcionalidades generales que tendrá el producto multimedia, se hace un esquema general de los contenidos y se crea un prototipo en papel. El diseño involucra cuatro tipos: a) Diseño de interfaz b) Diseño de contenidos c) Diseño de interactividad d) Diseño de estilo y redacción

7. Etapas en la creación de un producto multimedia Diseño de Interfaz Incluye tener una adecuada estructuración de contenidos, creación de bocetos de la interfaz. • Estructura de contenidos Producción Multimedia Debe incluir referencias a las formas de alineación, coherencia y consistencia para que • Bocetos de interfaces tenga mayor usabilidad. • Diseño de storyboards • Especificaciones generales de interfaz Conocer las características generales de los textos, el audio, el video, la animación, etc., permiten una adecuada selección y organización de los contenidos, así como una Diseño de contenidos organización visual acorde con el diseño de la interfaz. Los tipos de fuente, los colores, los tipos de íconos que den unidad y coherencia visual, • Características generales de contenidos fortalecen considerablemente el producto multimedia final. • Tipos de fuentes, colores y elementos • Tipos de íconos, gráficos e imágenes Permite desarrollar métodos de interacción de los usuarios con los contenidos en forma • Tipos de sonido, audio, video, animación. De animaciones y funciones asociadas a contenidos. Establece un mapa de navegación permite conocer

cómo se relacionan los contenidos de Diseño de Interactividad acuerdo con la selección del usuario durante la navegación. • Mapas de navegación Cuidar los estilos de presentación, redacción, contenidos gráficos, mensajes, botones y • Animaciones menús, son es básico para dar coherencia al producto. • Interacción de usuarios con contenidos • Funcionalidad de contenidos Diseño de estilo y redacción • Estilo de presentación La documentación de la etapa de diseño del proyecto debe incluir: • Estilo de redacción a. Mapa de navegación o estructura del proyecto. Este mapa proporciona una • Estilo de contenidos gráficos tabla de contenidos y una carta de funcionamiento lógico de la interfaz • Estilo de mensajes, botones y menú b. Diseño de bocetos e interfaces c. Diseño de storyboards generales d. Diseño de botones o íconos generales e. Explicación del por qué de los colores de fondo, del tipo de letra seleccionado y tipos de sonidos incluidos.

BIBLIOGRAFÍA

- Orihuela, José Luis, Santos María Luisa, Introducción al diseño digital, Anaya Multimedia, Madrid, 1999

- Bou Bouzá, Gullem, El guión Multimedia, Anaya, 1997

http://dmdesignmultimedia.blogspot.com/2011/01/storyboard-pro-2.html

http://infotek.bitacoras.com/archivos/2010/05/03/5-3-proceso-para-disenar-un-producto-multimedia

http://desarrolloparaweb.blogspot.com/2010/01/caracteristicas-comunes-toda-interfaz.html

http://www.slideshare.net/jmospina/etapas-de-creacion-de-un-producto-multimedia