DISEO DE INTERFACES MULTIMEDIA Y USABILIDAD GUI (Graphic User Interfaz: Interfaz Grfica de Usuario): Introduccin y concepto La Interfaz Grfica

de Usuario (GUI, Graphic User Interface) se puede definir como aquella parte de una herramienta o de una tecnologa con la cual interacta el usuario. En un proyecto formativo o multimedia se delimita como el entorno de comunicacin creado para acoger los contenidos del sitio y todos los dispositivos de navegacin 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. Detrs del diseo grfico de una interfaz se encuentra toda una elaboracin terica que supone una sntesis 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 interactuacin cmoda y sencilla. Una mala interfaz genera un grave problema de usabilidad. sta se define como una medida de su utilidad, facilidad de aprendizaje y apreciacin para una tarea, un usuario y un contexto dado. 1.2 La metfora Antes de comenzar a disear la interfaz es imprescindible pensar el concepto que se necesita expresar. Elegir una metfora adecuada apoya y refuerza el concepto y el proceso de comunicacin sin distraer, proporcionando una realidad fsica para el entorno abstracto en el que se tienen que introducir los usuarios. La metfora tiene que: -Transmitir correctamente el mensaje. -Captar la atencin del usuario sin distraerle. -Servir de hilo conductor, de forma consistente, en todos los aspectos del proyecto. -Ser familiar, sencilla y lgica. -Utilizar siempre la misma temtica grfica. -Ser casi invisible, pasar desapercibida, puesto que la interfaz no es un

Interfaz de Usuario

Definicin. La interfaz de usuario (IU) es uno de los componentes ms importantes de cualquier sistema computacional, pues funciona como el vnculo entre el humano y la mquina. La interfaz de usuario es un conjunto de protocolos y tcnicas para el intercambio de informacin entre una aplicacin computacional y el usuario. La IU es responsable de solicitar comandos al usuario, y de desplegar los resultados de la aplicacin de una manera comprensible. La IU no es responsable de los clculos de la aplicacin, ni del almacenamiento, recuperacin y transmisin de la informacin. El xito de un programa frecuentemente se debe a qu tan rpido 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 ms sencilla posible. Es importante sealar que dentro del proceso de creacin de la IU existen cuatro diferentes tipos de personas involucradas. La primera persona, y probablemente la ms 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 diseador o arquitecto de la interfaz de usuario . Trabajando muy cercanamente con el diseador estar el programador de la aplicacin, este ser el encargado de la escritura del software del resto de la aplicacin. Muy frecuentemente el diseador utilizar herramientas especiales para la creacin del software de la IU, y estas herramientas son elaboradas por el creador de herramientas.

Dificultad de un diseo iterativo El diseo iterativo es el mtodo ms empleado en el diseo de interfaces ([Myers and Rosson, 1992]). Los dos modelos iterativos ms usados son el modelo de cascada (waterfall model), y el modelo de fabricacin rpida de prototipos (rapid prototyping model) ([Schach, 1990]). Bsicamente ambos modelos dependen de la realizacin de un prototipo, el cual es diseado repetidamente y probado con un grupo de usuarios hasta que el modelo cumpla con las expectativas finales. Este modelo de desarrollo presenta mltiples desventajas, entre ellas altos costos de produccin de prototipos y la dificultad de conseguir usuarios reales con los cuales probar la interfaz.

Desconocimiento del usuario Es difcil saber el grado de conocimientos de cmputo del usuario final, lo cual, frecuentemente, hace que las interfaces de usuario desarrolladas no sean las apropiadas. Se da el caso de que el diseador implemente la IUs pensando en que la van a usar programadores avanzados, como el propio diseador, 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 mltiples eventos. El software de la interfaz generalmente debe de estar organizado para manejar mltiples eventos, los cuales se suelen presentar de manera concurrente. Los usuarios desean tener la posibilidad de abortar acciones, y tambin de deshacerlas. As mismo, debe ser posible realizar todas estas acciones por medio de distintos mtodos 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 operacin que tome mucho tiempo, como la impresin, bsqueda, e incluso el repintado de la pantalla, deben de ser ejecutados en un proceso separado. Una motivacin extra para el empleo de procesos mltiples es el hecho de que el usuario pueda estar trabajando con distintas ventanas pertenecientes a una misma aplicacin. Cada una de esas ventanas necesitar recordar y manejar todos los eventos producidos por el usuario, o por la misma aplicacin.

Existen requerimientos de tiempo real para la de los eventos de entrada. La creacin de IUs tiene las dificultades de la programacin en tiempo real. La mayora de las interfaces grficas y con manipulacin directa tendrn 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 prxima generacin de interfaces de usuario incluira nuevas tecnologas como video, reconocimiento de voz, animacin de simulaciones, y otros tipos de multimedia que contarn con las restricciones de la programacin 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 cdigo para que la aplicacin tenga el control, la aplicacin debe ms bien estar dividida en muchas subrutinas que son llamadas cuando el usuario realiza alguna accin. Se requiere de una programacin con un cuidado extremo en la organizacin y modularizacin 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 debern 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. bibliografa especializada recomienda que la porcin correspondiente a la IU est separada del resto del software, para facilitar que esta sea fcilmente alterada (para el diseo iterativo). Desafortunadamente, la separacin de estas dos partes es muy difcil, prcticamente imposible, ya que los cambios en la IU requieren inevitablemente cambios en el resto del software. Incluso con la utilizacin de herramientas para la creacin de interfaces de usuario grficas (Graphical User Interfaces - GUI) el problema de modularidad se hace ms difcil 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 aplicacin 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 * Manipulacin de archivos y directorios * Herramientas de desarrollo de aplicaciones

* Comunicacin con otros sistemas * Informacin de estado * Configuracin de la propia interfaz y entorno * Intercambio de datos entre aplicaciones * Control de acceso * Sistema de ayuda interactivo.

Tipos de interfaces de usuario Segn 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 alfanumricas (intrpretes de mandatos) que solo presentan texto. * Interfaces grficas de usuario (GUI, Graphics User Interfaces), las que permiten comunicarse con el ordenador de una forma muy rpida e intuitiva representando grficamente los elementos de control y medida. * Interfaces tctiles, que representan grficamente un "panel de control" en una pantalla sensible que permite interaccionar con el dedo de forma similar a si se accionara un control fsico.

Segn su construccin Pueden ser de hardware o de software: * Interfaces hardware.- Se trata de un conjunto de controles o dispositivos que permiten la interaccin hombre-mquina, 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 grfica de usuario

En el contexto del proceso de interaccin persona - ordenador, la interfaz grfica de usuario es el artefacto tecnolgico de un sistema interactivo que posibilita, a travs del uso y la representacin del lenguaje visual, una interaccin amigable con un sistema informtico. La interfaz grfica de usuario (en Idioma ingls Graphical User Interface, GUI) es un tipo de interfaz de usuario que utiliza un conjunto de imgenes y objetos grficos para representar la informacin y acciones disponibles en la interfaz. Habitualmente las acciones se realizan mediante manipulacin directa para facilitar la interaccin del usuario con la computadora. Surge como evolucin de la lnea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno grfico. Como ejemplo de interfaz grfica de usuario podemos citar el escritorio o 'desktop' del sistema operativo Windows y el entorno X-Window de Linux y tambin Aqua de Mac OS X. Diseo de Interfaces Graficas de Usuarios Presentation Transcript

1. Diseo de Interfaz grfica del usuario publicaciones digitales. El diseo de interfaz grfica :: L.D.G. Lizbeth Luna Gonzlez 2. DiseadoresDestacar la importancia que tiene el diseo 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 diseadores tenan 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 diseo deinterfaces, los cuales nos ayudan a resolver una publicacin de lamejor manera. 4. Diseo de Interfaces Grficas 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 diseo de una interfaz requiere de un trabajo dondeestn inmersas viarias disciplinas en funcin a un mismo objetivo: cubrir lanecesidad del hombre de transmitir y comunicar, en este caso, a travs de unmedio electrnico. Las disciplinas pueden variar pero las que se mantienen dealguna manera constante son: la ingeniera, la pedagoga y diseo. No importa sila publicacin es cientfica, de divulgacin o de entretenimiento, la interfaz esfundamental para la consulta adecuada del documento. 6. Todo usuario requiere un tiempo de adaptacin a una interfaz, entre menorsea el tiempo dedicado a realizar est accin, las posibilidades de xito estngarantizadas. 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 lasituacin fuera de control, por ejemplo.1.- Mensajes poco claros.2.- El encontrar informacin se vuelve complicado.3.- No existen jerarquas, ni de informacin, 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 situacin.Varios factores influyen en la toma de decisiones para el diseo de interfaz 8. El Poder del Contenido y la Imagen 9. El medio digital nos ofrece una serie de recursos multimedia (imagen, sonido, animacin,video, etc.) y no hay que dejarse seducir por ellos: Una publicacin 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 aplicacin de estas herramientas, en funcin del reforzamiento de las ideas quese quieren transmitir, estaremos cumpliendo con elementos rectores de una interfaz, esdecir, que sea eficaz, de fcil uso y memorizacin, as como de una imagen agradable, queprovoque, incluso, un estado emocional, lo que en ingls se conoce como usability (algunostextos en espaol lo manejan como usabilidad). El principal estudioso de esta rea es JakobNielsen 10. Lo anterior se logra, si conseguimosque la interfaz sea bsicamente:1. Sencilla2. Clara3. Predecible4. Flexible5. Consistente6. Intuitiva7. Coherente http://www.lacoste.com/ 11. 1.- Sencilla: Los elementos estn para apoyar, ayudar y guiar, nopara confundir, evitemos la saturacin y colocacin innecesaria delos mismos. 12. 2.- Clara: La informacin debe ser fcilmente localizable, es decir, debe estarorganizada ya sea de manera lgica, jerrquica o temtica. En el ejemplo sepuede apreciar una organizacin temtica. 13. 3.- Predecible: A acciones iguales, resultados iguales Que el usuariocomprenda rpidamente cuales son las opciones de bsqueda, cul ser lavisualizacin de un contenido en la pantalla 14. 4.- Flexible: La publicacin deber verse y entenderse claramente en la mayora de losnavegadores y plataformas (Mac, PC), al menos en las ms comunes. Debemos pensar siempreen opciones (botones, textos) que nos permitan regresar al punto de partida (de ser posible)y a la pgina principal (recordemos que por las caractersticas 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 ms le convenga.Para la actualizacin el diseo debe permitir la adecuacin de la interfaz a agregar nuevassecciones, cambio de algunas imgenes, modificar textos, etctera. 15. http://www.marvel.com/http://www.viaarte.com/ 16. http://www.defensayjusticia.com.ar5.- Consistente: Lograr una semejanza entre las secciones o captulos. Los elementos unavez organizados y definidos deben permanecer en la misma rea, con la misma funcin y lamisma funcin con el mismo texto o imagen, la nica que permite presentar variaciones dela distribucin de los elementos es la pgina principal, pero la representacin grfica y detexto que se haga de las funciones debe permanecer igual en todas las secciones, porejemplo: El men de navegacin. 17. http://www.bauhaus.de

18. 6.- Intuitiva: El usuario se siente ms seguro en una publicacin en la que notenga que adivinar ni pensar como ejecutar acciones. 19. http://www.quino.com.ar/7.- Coherente: Tanto texto como grficos, colores y dems elementos utilizados deben corresponder alcontenido de la publicacin. Apoyados generalmente por una construccin de palabras, frases y elementosvisuales. 20. La labor de un diseador de interfaces grficas es adelantarse, ponerse en el lugar del usuario, prevercualquier situacin que pueda resultar un punto de conflicto (ya sea psicolgico o tcnico) y resolver elproblema antes de que se presente. Si el lector de una publicacin digital encuentra que para teneracceso a la misma, previamente debe solucionar problemas tcnicos, ajenos al documento, en lo quebusca, encuentra y aprende a usar esas nuevas herramientas, seguramente habr olvidado el porqude la lectura inicial o bien encontrado otro sitio donde venga la misma informacin y el acceso a ellasea mucho ms sencillo, por supuesto la eleccin resulta obvia. 21. http://www.ariza.com.tr/site.html Es compromiso del diseador es usar los programas comoherramientas para comunicar y reforzar ideas, que connoten y denoten el mensaje, NO para lucir su dominio tcnico de los programas y recursos multimedia. 22. El diseo de una interfaz como cualquier proyecto en diseo 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 tecnolgicos lo hacen. Sin embargo, las premisasbsicas de una buena interfaz, no se pierden, slo se transforman y adaptan almedio. que la interfaz grfica de usuario sirve como medio para la comunicacin conun sistema. El diseador cumple una funcin primordial como materializador yconstructor de mensajes. Todo proyecto de diseo implica un proceso pensado yconsiente que puede tener variaciones, todo depende de diversos factores entre ellosdel cambio y evolucin que tenga el medio electrnico-digital para lograr que sta seaeficaz, de fcil uso y memorizacin y que incluso provoque emociones en el usuario,en beneficio directo del mismo.

Apto para vehculos con Pantalla de 8" o Sistema de Navegacin Touch Premium.

Funcionalidades

3 Entradas AV controladas desde los mandos originales (incluida desde la pantalla tctil original). 1 Salida AV para pantallas traseras. 1 Entrada para Cmara Trasera. Control tctil para navegacin y para Multimedia (TDT, USB, etc)*1. Activacin de la funcin de vdeo en movimiento para poder ver la imagen procedente de cualquier fuente original o conectada al interface. Activacin de funcin de cmara trasera en Modo LOW si no se dispone de cmara/s originales. (Slo disponible imagen de cmara sin informacin visual

PDC, salvo en combinacin con sistemas de cmara originales, donde se mantiene su funcionalidad) Posibilidad de conectar una cmara trasera aftermarket tipo NTSC*2. Conmutacin Automtica en cualquier modo del sistema a la imagen de cmara cuando se engrana la marcha atrs. No afecta a las funciones de navegacin en caso de incorporarla. Tipo de Conexin Plug & Play. Tecnologa CAN BUS.

*1 La navegacin, TDT o USB Multimedia son accesorios al interface que se pueden suministrar opcionalmente. *2 Cmara no incluida. Se puede suministrar opcionalmente. Lovely Chart es una aplicacin web que se utiliza para disear diagramas de flujo, grficos, sitemaps, wireframes y ms, proporcionndonos un buen conjunto de herramientas de dibujo y bibliotecas de smbolos, completamente gratis. Lovely Charts es una herramienta muy sencilla de manejar, slo debemos arrastrar y soltar los dibujos, para centrarnos en lo que realmente nos importa, sin tener que preocuparnos en la configuracin 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. Podramos utilizarlo para diagramar un proyecto, determinar la cadena de mando o podemos organizar la estructura de un sitio web, como se deben enlazar las pginas web, etc. Incluso, podemos crear un organigrama tradicional con preguntas y respuestas, o tal vez un rbol genealgico. La versin completa de Lovely Charts est disponible de forma gratuita, pero tambin tiene una versin profesional (por US$ 29 dlares al ao) para aquellos que deseen importar sus propias imgenes e ilustraciones, compartir y colaborar con colegas o clientes, adjuntar comentarios a un diagrama, y otras caractersticas ms. La mayora de los programas para crear diagramas requieren que nos preocupemos por los colores, tipos de conos, escoger las flechas y los smbolos correctos, etc. Pero, Lovely Charts se encarga prcticamente de todo esto, dejando que nos enfoquemos en nuestras ideas y su representacin. La versin gratuita es muy completa, pero limita la edicin de los diagramas a uno slo para guardar y un mensaje en la parte inferior de Made with lovelycharts.com, se guardar en la imagen. Por lo dems, es una herramienta muy recomendable.

Caractersticas comunes a toda interfaz bien diseada Antes de proceder a disear la interfaz de nuestro producto, es importante entender primero que es lo que hace que una interfaz sea buena. Que cualidades deberamos conseguir. Las interfaces bien diseadas comparten las siguientes cualidades o caractersticas: 1. Claridad: evitando la ambigedad y dejando los diferentes elementos claros a travs del lenguaje, el flujo visual, la jerarqua y las metforas para los elementos visuales (iconos descriptivos). Las interfaces claras no necesitan manuales. Incluso aseguran que el usuario cometa menos errores.

Etiquetas, textos destacados, numeracin y flujo visual a travs de un path, son los elementos de diseo que utiliza esta web para facilitar la navegacin. 2. Concisin: es fcil hacer que una interfaz sea fcil de entender especificndo y etiquetando todos sus elementos, pero corremos el peligro de disear una interfaz sobrecargada donde hay demasiadas cosas en la pantalla, haciendo que al usuario le resulte difcil encontrar lo que busca, o simplemente tenga que realizar una "tarea de investigacin" desanimndole 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 metforas de la vida real para dar significado a los elementos de nuestra interfaz ( por ejemplo una distribucin de apartados a base de carpetas o etiquetas que nos recordar a un archivador ). La metfora de la carpeta le resultar familiar al usuario y por tanto se encontrat ms cmodo trabajando.

Mediante la metfora de utilizar etiquetas para macetas consigue destacar los distintos apartados de una forma original. El hecho de que los enlaces sean formas geomtricas 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 debera hacer esperar, y debera priorizar las tareas ms 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 estn siendo procesadas correctamente ( ej. splash screen, mensaje informativo especificando tiempo estimado de respuesta, mensaje 'si no es redirigido a la pgina en unos segundos haga click aqu' ). 5. Consistencia: Mantener el diseo de nuestra interfaz consistente a lo largo de toda la aplicacin es importante porque permite a los usuarios reconocer patrones de uso. Por otro lado evita ambigedades y confusiones. Una vez que los usuarios aprenden cmo 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 diseo como bien nos muestra este site.

6. Esttica: 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 diseo agradable contribuir a que la experiencia de usuario mejore.

En esta web se mantiene la consistencia en el diseo, utilizando la repeticin de elementos visuales, pero en las zonas de ms texto utiliza colores claros que facilitan la lectura e invitan a la reflexin

7. Eficiencia: El tiempo es dinero, y una buena interfaz debera conseguir que los usuarios obtuvieran mayor productividad a travs de atajos y de un buen diseo. Al fin y al cabo ste es uno de los beneficios inherentes de la tecnologa: nos permite realizar tareas en menos tiempo y con menos esfuerzo, haciendo la mayora 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 botn de acceso

8. Gestin de errores: Todo el mundo comete errores, y cmo se encargue de gestionar los errores de usuario ser un test de calidad. Ser fcil deshacer acciones, recuperar archivos borrados, una buena interfaz no debera castigar a los usuarios por sus errores sino ms bien facilitarles los medios para arreglarlos.

Olvidar la password es un error comn, pero ste formulario va ms all y nos aconseja que no le demos a la opcin "remember me" si estamos en un ordenador pblico o compartido

Disear una interfaz que incorpore todas estas caractersticas no es fcil porque a veces enfatizar en una caracterstica puede afectar a las otras. Por ejemplo cuantos ms elementos de interfaz pongamos, ms informacin tendr que procesar los usuarios, pero si por el contrario reducimos demasiado podemos hacer que sea una interfaz ambigua o difcil de interpretar. Crear algo que sea simple y elegante y al mismo tiempo claro y consistente es el objetivo que debemos perseguir como diseadores 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 pequeas tareas o actividades que hay que realizar para llegar a la meta,si nos enfocamos en cada paso, seran ms fcil de realizarlas y llevando una secuencia lgica obtendremos eficiencia. La creacin 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 estn divididos en dos Etapas: la Planificacin y la Creacin.

Planificacin La planificacin consiste es plasmar en papel todas las ideas que tenemos en nuestras cabezas del como nos imaginamos el producto multimedia Definicin de la Audiencia Antes de que el equipo multimedia empiece a trabajar es necesario definir quienes sern 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 Investigacin y Anlisis 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 servirn para establecer la apariencia y el comportamiento del producto multimedia. Realice una comparacin 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. Cul es la finalidad del producto multimedia? Posibles Respuestas/ (Informar, entretener, otra) 2. Cul es el perfil promedio de mi audiencia? Posibles Respuestas/ (rango de edad, sexo predominante, estado familiar o civil, grado de escolaridad, conocimientos sobre informtica, conocimientos sobre el ingls, posee discapacidades, etc.) 3. Cunto deberan saber los usuarios del tema antes de utilizar el producto multimedia? Posibles Respuestas/ (bsico, intermedio o avanzad ) 4. Cuant tiempo (aproximado) los usuarios navegarn a travs del contenido? Posibles Respuestas/ ( _____ minutos )

5. Los usuarios obtendrn ms de este contenido si el medio que predomina es? Posibles Respuestas/ (texto, audio, imgen, animacin o vdeo)/i> 6. Qu tipo de interaccin prefieren los usuarios con el producto multimedia? Posibles Respuestas/ (vnculos, botones, otros) 7. Los usuarios prefieren responder a travs del dispositivo o perferico de entrada? Posibles Respuestas/ (mouse, teclado, pantalla de contacto, controlador de juego, otros.) 8. Cunto tiempo debe transcurrir para actualizar el contenido del producto multimedia? Posibles Respuestas/ ( _____ minutos ) Diseo Multimedia Tomando en cuenta las necesidades y requerimientos de nuestra audiencia, podemos empezar con el Diseo Multimedia que tiene 3 objetivos principales: 1. Delimitar el contenido exacto 2. Establecer la secuencia del contenido 3. Especificar los recursos u opciones que se le proporcionaran al usuario Para realizar un anuncio comercial o una pelcula cinematogrfica primero es necesario establecer un GUIn (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 rectngulo representaremos una pantalla, una pgina web o una diapositiva. En cada rectngulo introduciremos el tema o nombre que identificar a cada uno de ellos y el medio (texto, audio, imagen, animacin o vdeo) que se utilizar para el contenido. Y para establecer la secuencia entre cada rectngulo dibujaremos flechas que representarn el vnculo o la relacin entre ellos. Para crear el storyboard, contamos con 3 estructuras bsicas: Estructuras 1. Lineal: en donde el usuario va siguiendo una secuencia de principio a fin, dando paso por paso, esto quiere decir que la relacin es de uno a uno (1 - 1), un ejemplo puede ser una presentacin en donde desde un inicio se mueve diapositiva por diapositiva hasta llegar a la ltima. 2. Jerrquica: en donde el usuario desde un punto de inicio puede navegar o desplazarse haca varios destinos, la relacin es de uno a muchos (1 - *), por ejemplo un sitio Web que tiene una pgina de inicio (Homepage) la cual contiene un men para desplazarse a cualquiera de las categoras.

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 pgina donde se encontraba anteriormente 4. Mezcla o Mix: Se puede crear un CD-ROM multimedia en donde el principio sea lineal pasando del ttulo a una introduccin y llegar hasta un men en donde el usuario puede escoger el tema que quiere ver (jerrquica) y que tambin tenga un glosario con vnculos a todas las pginas donde aparezcan esos conceptos. Para las animaciones o los vdeo usaremos como herramienta de diseo los bocetos (sketch) , dibujando varias escenas para comprender el movimiento de la animacin o vdeo. Para establecer la apariencia del producto multimedia, podemos disear la GUI, distribuyendo los componentes que la conformarn, estableciendo la paleta de colores que se utilizarn (a travs de la teora 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 pginas web que lo conforman, dndole 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 Ttulo del Sitio. Tambin se asigna el lado izquierdo para el men que contiene los subtemas. Al final de la pgina se encuentra una especie de pie de pgina, colocando el nombre o Email del autor, la fecha de actualizacin, los derechos reservados y otra informacin del sitio, no del contenido. El espacio que sobra es para el contenido o la informacin que queremos publicar. Opcionalmente podemos asignar un rea para una barra de navegacin grfica. Prcticamente es como disear 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 estn distribuidos. La Paleta de Colores Generalmente un producto multimedia puede tener de 2 a 4 colores que predominarn usndolos con diferentes intensidades, entonces es necesario asignarle un color a: 1. 2. 3. 4. 5. 6. 7. 8. el Fondo el Ttulo el Texto (normal) del contenido otro Tipo de Texto a las Figuras u Objetos sombra de los Objetos a los Vnculos (Normales) a los Vnculos (Activos)

9. a los Vnculos (Visitados) Las empresas o instituciones generalmente ya tiene los colores con los que las identificamos, pero si tenemos la opcin de elegir los colores del producto multimedia podemos hacer uso de la Teora del Color y para que sea legible hay que contratar el color del fondo con el color del texto, podemos ver que las seales de trnsito utilizan estas combinaciones: 1. Fondo: rojo, Texto blanco 2. Fondo: amarillo, Texto negro 3. Fondo: verde, Texto blanco Tipografa 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 categoras: 1. Serif: (en francs significa patines): tiene una rayitas que ayudan a leer mejor en documentos impresos pero que distorsionan las letras en el monitor, especialmente si el tamao es pequeo 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 categoras anteriores, ejemplo: tipo carta, gtica, etc. Seleccin de las Herramientas Una vez que tenemos las ideas plasmadas en papel de lo que queremos hacer en el Diseo Multimedia, podemos seleccionar tanto el Hardware como el Software necesario para la siguiente etapa que es la Creacin. El Hardware De acuerdo al tamao y calidad del proyecto as sern las caractersticas que debe poseer la computadora que se utilizar para la creacin del producto multimedia, adems de la computadora tambin es necesario seleccionar los perifricos con que se debe contar para utilizar todos los medios, como por ejemplo (cmara, escner, etc.). Existe varios estndares como el PC99 o el MPC3 que establecen los requerimientos mnimos necesarios para que la computadora pueda reproducir un programa multimedia.

Caractersticas 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 decisin: 1. 2. 3. 4. El tamao o presupuesto del proyecto Los medios utilizados para mostrar el contenido Las capacidades de Interactividad Las Caractersticas de navegacin

StoryBoard orientado a la multimedia

Toon Boom Animation lanz Storyboard Pro 2, la segunda versin de su software para la creacin, desarrollo y visualizacin de bocetos durante la pre-produccin. Un software dirigido a los profesionales del video, desde animadores, cineastas y profesionales que en general trabajan con grficos en movimiento. Entre las novedades de esta nueva versin, se cuentan herramientas de dibujo mejoradas, mayores capacidades de movimiento de cmara, integracin con Final Draft 8 y un motor de exportacin de PDFs, entre otras.

A los usuarios que comienzan con el uso de software de animacin 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 ms archivos de texto que la versin pasada, que nicamente soportaba .txt, adems en esta versin es ms fcil aadir dilogos en los paneles, adems de verse mejorada la integracin con Final Cut Pro. Ahora es es ms fcil crear proyectos a partir de bocetos escaneados, hay nuevas opciones de animacin y la transparencia de capas es otra de las mejoras introducidas en la nueva versin.

Una de las principales ventajas de Storyboard Pro 2 es sin duda el ahorro y optimizacin de tiempo, una vez que tenemos nuestro storyboard lo podemos

exportar como PDF, Quicktime o SWF pudiendo verlo ya animado e incluso con sonido. Adems del audio, por ser un programa para storyboards, podemos hacer anotaciones para cada cuadro, ya sean anotaciones tcnicas o dialogos de personajes.

Toon Boom Storyboard Pro 2 viene con ms de tre horas de videotutoriales online que cubren temas como: Introduccin e iniciacin con Storyboard Pro, Descubriendo la Interfaz, Guin y Paneles, Dibujo, Aadiendo Colores, Capas, Biblioteca, Animacin, Supervisar el Storyboard y Exportar. Guin multimedia La realizacin de una pieza periodstica multimedia requiere de una planificacin detallada de cada uno de los elementos que formarn parte de ese material y de la vinculacin entre ellos. Esa organizacin se realiza a travs de lo que se denomina "Guin multimedia". Es importante destacar que este tipo de producciones se aplica a trabajos de investigacin periodstica, para la cual es necesario contar con un objetivo previo orientado a producir el material necesario para el diseo de la pieza multimedia: fotografas, videos, audios, material de archivo, etc. A la hora de disear una pieza periodstica multimedia, es necesario cumplir con algunos pasos sucesivos: - Anteproyecto: hay que tener claro qu investigar, acotando el objeto de estudio de acuerdo a nuestro inters y nuestras posibilidades reales para abordarlo (tiempo, distancias, equipamiento, etc.) - Preproduccin: una vez definida la idea del trabajo, hay que realizar una lista de los recursos que sern utilizados en la investigacin, las locaciones donde se realizarn las grabaciones o registros y el material de archivo que se va a usar. En esta etapa se realiza el guin multimedia donde aparecen todos los elementos que formarn parte

de la pieza periodstica y su organizacin hipertextual que permitir la interactividad con el usuario. La etapa de Produccin contempla la toma, captura, registro, digitalizacin, etc. de todos los recursos a utilizar. Finalmente, en la etapa de Post-produccin, esos recursos se editan para la presentacin final. En el caso del periodismo digital, sta admite al menos tres posibilidades: a) presentacin en un CD-Rom (dxr, el formato resultante de programas como Director, Toolbook, Authorware, etc.) b) presentacin en conjunto de pginas web (html, el formato resultante de programas como Dreamweaver, Frontpage, etc.) c) presentacin multimedia interactiva (swf, el formato resultante del programa Flash)

Realizacin del guin multimedia Para el presente trabajo tomamos los conceptos de Jos Luis Orihuela y Mara Luisa Santos en su libro "Introduccin al Diseo Digital". Los autores proponen comenzar con lo que denominan "Diagrama del hipertexto" ( o grafo general segun Bou Bouz) Refleja a modo de esquema grfico la articupacin del contenido editorial del proyecto en nodos y enlaces. Disear la estructura hipertextual de la aplicacin exige fragmentar el contenido editorial dsponindolo en zonas, secuencias y nodos y estableciuendo su correspondiente codificacin. Por ejemplo: Z1-S1-N4. El diagrama del hipertexto en tanto ilustra la disposicin de los nodos y los trayectos de navegacin posibles constituye el mapa del interactivo, como se ilustra en la figura. (OrihuelaSantos, 1999: 79)

Para cada uno de los nodos, los autores proponen la confeccin de una ficha ( como storyboard) que de cuenta de los elementos utilizados y su articulacin en la pieza. MODELO DE STORYBOARD (Orihuela-Santos, 1999: 83) CODIFICACIN DEL NODO ( Por ejemplo B 1) Boceto de pantalla

Textos

Imagenes

Sonidos

Programacin

Proponemos realizar un trabajo compuesto por textos lingisticos, imgenes, audios, etc, a partir de una idea central.Cada equipo debe disear un guin multimedia de una nota periodstica que formar parte del Trabajo Final del seminario. El trabajo comenzar en la clase presencial del prximo viernes, y continuaremos durante las siguientes semanas, con el contacto con los tutores. Para la realizacin del guin multimedia se sugiere: 1: ELEGIR EL TEMA 2: Sugerir las distintas piezas que compondrn la nota 3: Realizar el esquema. Tal vez resulte ms 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 Salaverra de CELULA INFORMATIVA

1. Produccin Multimedia 2. Produccin Multimedia Etapas en la creacin de un producto multimedia Planeacin Diseo 3. Etapas en la creacin de un producto multimedia Produccin Multimedia Producto 7 6 5 4 1. Planeacin o anlisis 3 2. Diseo 2 3. Desarrollo 1 4. Evaluacin 5. Documentacin 6. Implementacin 7. Actualizacin 4. Etapas en la creacin de un producto multimedia Produccin Multimedia 1. Planeacin o anlisis Est compuesta por cuatro tipos de anlisis: a) Anlisis de necesidades b) Anlisis de usuarios c) Anlisis de contenidos d) Anlisis tecnolgicos Cada uno depende de los dems por lo que la planeacin debe ser integral 5. Etapas en la creacin de un producto multimedia Anlisis 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 cmo puede resolverse con el producto multimedia. Produccin Multimedia Se empiezan a identificar los tipos de contenidos que se abordarn, los tiempos aproximados para su Alcance general desarrollo y los costos estimados. Tipos de contenido Tiempos y costos estimados Es importante considerar caractersticas como: rango de edades, nivel educativo, experiencia en el uso de computadores. Se debe investigar sobre el tipo de tecnologas a las que tienen acceso que le facilitarn o dificultarn el Anlisis de usuarios uso del producto. Conviene realizar encuestas para determinar la experiencia y expectativas en cuanto a contenidos esperados o que pueden ser ms solicitados. Caractersticas Indagar sobre el tipo de tareas que desarrollarn con la multimedia. Tecnologas

Contenidos Deben ser identificados con claridad, los ms relevantes de acuerdo con el anlisis de usuarios. Tareas Una vez identificados, se deben revisar en trminos de sus caractersticas, a fin de utilizar la presentacin ms adecuada para los mismos, haciendo uso de la tecnologa ms apropiada. Se deben abordar las consideraciones especiales en cuanto a la forma como el usuario tendr Anlisis de contenidos interaccin con los contenidos y las funcionalidades del producto multimedia. Especificaciones de contenidos Tecnologa no apropiada Se deben revisar tecnologas disponibles para la planeacin, el diseo, el desarrollo y las que el usuario final requiera para utilizar el producto multimedia. Interaccin de usuarios con contenidos Algunas preguntas clave: Funcionalidad de contenidos a) En qu consistir el proyecto multimedia? describirlo lo ms especficamente posible b) Cul es el propsito principal? Anlisis de tecnologas c) Quin lo va a usar? d) Cules sern los temas o mdulos en que se puede dividir el tema principal? e) Qu elementos multimedia se necesitan? Qu tipo de textos, sonidos, imgenes, colores? Para la planeacin f) De dnde se pueden tomar esos elementos o cmo pueden crearse? Se necesitarn Para el diseo g) permisos para usarlos? Qu herramientas de preparacin se usarn? Para el desarrollo h) Qu hardware se requiere? i) Se necesitar de ayuda para crear elementos y usar software de edicin? Disponibles al usuario j) Cunto tiempo se tardar? Estas preguntas ayudarn a realizar una adecuada planeacin del proyecto. Los proyectos multimedia, generalmente, se trabajan en forma de equipos de desarrollo en donde las tareas se dividen por reas como: diseo, video, audio, texto, analistas, programadores, caricaturistas, guionistas, entre otros. 6. Etapas en la creacin de un producto multimedia 2. Diseo Produccin Multimedia Una vez que se tiene el anlisis de necesidades, usuarios, contenidos y tecnologas se pasa a la etapa de diseo. Aqu se definen los objetivos especficos del proyecto, se disean las tareas que los usuarios debern realizar, se realiza el diseo 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 diseo involucra cuatro tipos: a) Diseo de interfaz b) Diseo de contenidos c) Diseo de interactividad d) Diseo de estilo y redaccin 7. Etapas en la creacin de un producto multimedia Diseo de Interfaz Incluye tener una adecuada estructuracin de contenidos, creacin de bocetos de la interfaz. Estructura de contenidos Produccin Multimedia Debe incluir referencias a las formas de alineacin, coherencia y consistencia para que Bocetos de interfaces tenga mayor usabilidad. Diseo de storyboards Especificaciones generales de interfaz Conocer las caractersticas generales de los textos, el audio, el video, la animacin, etc., permiten una adecuada seleccin y organizacin de los contenidos, as como una Diseo de contenidos organizacin visual acorde con el diseo de la interfaz. Los tipos de fuente, los colores, los tipos de conos que den unidad y coherencia visual, Caractersticas generales de contenidos fortalecen considerablemente el producto multimedia final. Tipos de fuentes, colores y elementos Tipos de conos, grficos e imgenes Permite desarrollar mtodos de interaccin de los usuarios con los contenidos en forma Tipos de sonido, audio, video, animacin. De animaciones y funciones asociadas a contenidos. Establece un mapa de navegacin permite conocer

cmo se relacionan los contenidos de Diseo de Interactividad acuerdo con la seleccin del usuario durante la navegacin. Mapas de navegacin Cuidar los estilos de presentacin, redaccin, contenidos grficos, mensajes, botones y Animaciones mens, son es bsico para dar coherencia al producto. Interaccin de usuarios con contenidos Funcionalidad de contenidos Diseo de estilo y redaccin Estilo de presentacin La documentacin de la etapa de diseo del proyecto debe incluir: Estilo de redaccin a. Mapa de navegacin o estructura del proyecto. Este mapa proporciona una Estilo de contenidos grficos tabla de contenidos y una carta de funcionamiento lgico de la interfaz Estilo de mensajes, botones y men b. Diseo de bocetos e interfaces c. Diseo de storyboards generales d. Diseo de botones o conos generales e. Explicacin del por qu de los colores de fondo, del tipo de letra seleccionado y tipos de sonidos incluidos.

BIBLIOGRAFA - Orihuela, Jos Luis, Santos Mara Luisa, Introduccin al diseo digital, Anaya Multimedia, Madrid, 1999 - Bou Bouz, Gullem, El guin 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-unproducto-multimedia http://desarrolloparaweb.blogspot.com/2010/01/caracteristicas-comunes-todainterfaz.html http://www.slideshare.net/jmospina/etapas-de-creacion-de-un-producto-multimedia