t5.0. resumen del tema: diseño multimedia
TRANSCRIPT
LOGO
Tecnologías Multimedia – Periodismo Online
Profesor: Manuel Gértrudix
Mapa de contenidos
Diseño aplicado al desarrollo de productos de
comunicación en Red
Claves de diseño multimedia
Diseño centrado en experiencia de
usuario
Reglas esenciales de usabilidad
Normas y recomendaciones
de accesibilidad
Estándares y especificaciones
básicas
Principios de composición y diseño visual
Consideraciones generales
Reglas y modelos
Diseño de Interfaces
Tipografía web
Técnicas de guionización multimedia
Técnicas de guionización específicas
Modelos y herramientas
Claves de diseño
multimedia
Primeras reflexiones
¿Dónde está el 1,25?
Diseño centrado en Experiencia de Usuario (EU)
Diseño centrado en Experiencia de Usuario (EU)
Lo maravilloso de la tecnología es que la gente acabautilizándola para algo completamente distinto de su destinooriginal. Es este valor de lo inesperado lo que subyace a lacreatividad en la sociedad. (Manuel Castells, 2002: 249)
Una nueva ola en la forma de experimentar los productos, en este casoel software, que va más allá de la informática. Estamos entrando en unmundo que cada vez está más cerca de Minority report en cuanto a laexperiencia del usuario. (Forest Key, 2006)
Diseño centrado en EU
La Experiencia de Usuario es la sensación, sentimiento,respuesta emocional, valoración y satisfacción del usuariorespecto a un producto, resultado del fenómeno deinteracción con el producto y la interacción con suproveedor. (Hassan y Martín)
Factores de la experiencia de usuario
Morville (2004)
Utilidad?
Utilidad
www.barrabes.com
www.diazdesantos.es
www.bankofamerica.com
Utilizable?
“Encontrable”?
“Encontrable”
www.20minutos.es
www.cope.es
www.guardian.co.uk
Adecuado
www.weyerhaeuser.com/
www.bowater.com/en/
www.bc.com/
Deseable
http://www.audi.es
http://www.ayto-getafe.org
Accesible
http://www.once.es
http://www.sport.es/
Creíble?
Valioso
www.efe.com
http://web.alerta-antivirus.es
Accesibilidad Web como objetivo Razones para construir una web para todos
Marco legal y normativo.
Factores socioeconómicos
Integración e igualdad.
Dimensión moral
La expectativa del futuro.
Dimensión práctica
“La mitad de tus visitas a tu sitio provienen de Google, y Google sólo ve lo que un ciego puede ver. Si tu sitio no es accesible, tendrás menos visitas. Fin de la historia” (Pemberton)
Dificultades en el acceso a la web ¿Quiénes?
Dificultad Estable
• Discapacitados Físicos (Visuales, Auditivos, Motóricos).
• Discapacitados Psíquicos.
Dificultad Temporal
Dificultad Tecnológica
Dificultad derivada de la
Edad
Accesibilidad Pautas y regulación
W3C (Consorcio para el desarrollo de estándares y especificaciones
técnicas para el crecimiento de Internet)
WAI (Iniciativa para la Accesibilidad Web)
WCAG 1.0 (Guías para el Contenido Accesible en la Web 1.0)
Pautas A, AA, AAA
Prioridad 1, 2 Y 3
Nuevo WCAG 2.0 (Guías para el Contenido Accesible en la
Web 2.0)
Nueva estructura
Niveles de adecuación 1, 2 y 3
Productos Multimedia Accesibles PAUTAS FUNDAMENTALES WCAG 1.0
1. Proporcionar alternativas equivalentes para el contenido visual y auditivo
2. No basarse sólo en el color.
3. Utilizar hojas de estilo y hacerlo apropiadamente.
4. Identificar el idioma usado. Crear tablas que se transformen correctamente.
5. Asegurar la accesibilidad directa de las interfaces incrustadas.
6. Utilizar las tecnologías y pautas W3C.
7. Proporcionar información de contexto y orientación.
8. Asegurarse de que los documentos sean claros y simples.
9. No utilizar ventanas emergentes, o al menos hacerlas accesibles.
Productos Multimedia Accesibles PAUTAS FUNDAMENTALES WCAG 2.0
El contenido debe ser perceptible.
La interfaz y sus elementos deben ser operables.
El contenido y los controles deben ser comprensibles.
El contenido debe ser suficientemente robusto como para poder funcionar tanto con la tecnología web actual como con la futura, incluyendo tecnología asistiva.
Ayudas Técnicas Software y Hardware
Software Lectores de pantalla
JAWS (Comercial)
ORCA (Libre, Open Source)
Gnopernicus (Libre, Open Source)
Magnificadores de pantalla
Sistemas de reconocimiento de voz
Teclados virtuales, emuladores de ratón, sistemas de barrido.
Hardware Línea Braille, Horno Fusser.
Bucle magnético.
Ratones, teclados, dispositivos para manejo del teclado, pulsadores,etc…
Estándares y especificaciones básicas
¿Qué son los estándares web?
Conjunto de tecnologías y protocolos establecidos por el consorcio W3C que definen, en relación al contenido basado en Web
Cómo se debe crear
Cómo se debe interpretar
Con la finalidad de que puedan estar siempre disponibles y accesibles para todos los usuarios de la Red
Estándares y especificaciones básicas
¿Por qué hay que diseñar con estándares? Se trabaja más rápido (aunque inicialmente lleve más tiempo
aprenderlos)
El mantenimiento es más fácil, sencillo y rápido.
Es menos costoso
Centralizan el diseño (en pocos ficheros, fácilmente administrables)
Facilita el despliegue en cualquier SO, navegador, dispositivo (antiguo, actual o futuro) y salida (pantalla, impresión…)
Ficheros más optimizados (descarga y presentación más rápida)
Mayor accesibilidad y mejor experiencia de usuario
Facilitan el posicionamiento en los buscadores (marcado semántico)
En consecuencia, maximiza la audiencia potencial
Principios de composición y diseño visual
La comunicación multimedia
VISUAL• Fija
• Movimiento
AUDITIVA• Voz
• Música
• Efectos
INTERACTIVA
• Operaciones
• Itinerarios
TEXTUAL• Texto gráfico
• Texto escrito
¿Cómo producimos comunicación visual?
Lenguaje Alfabeto Sintaxis Comunicación
Comunicación visualCreación de significado con el concurso de
Técnicas visuales de composición
¿Qué son las técnicas visuales de composición?
Son un conjunto de estrategias y técnicas que nos permiten construir el mensaje visual y “predecir” cuál será la “reinterpretación” estadísticamente posible del mensaje visual por parte del receptor.
Supone la interacción de pares opuestos e inseparables:
Contenido Forma
Creador Audiencia (Autolector)
Dodo Arslan.it
¿Cuáles son esas técnicas?
El mensaje visual se construye a través de la definición de varios factores que funcionan conjuntamente: Textura
Forma
Estructura
Módulo
Movimiento
Color…
Frank Gebhard - www.cpeach.de
Uso del color en el diseño web
Herramientas online para color web
Herramienta en línea de Adobe: http://kuler.adobe.com/
Modelos de diseño web
Diseño de Interfaces
¿Qué es una Interfaz? La Teoría de los procesos de
interacción persona-ordenador define la interfaz de un sistema interactivo como un dispositivo tecnológico que permite una interacción amigable con dicho sistema a través de modelos de representación de distinto tipo (textual, visual, sonoro, etc.)
Interfaz principal de la web “Same”
Interfaz principal de la web “VeraT”
Tipología de interfaces
PARC User Interface (PUI)
Touchscreen user interface (TUI)
Interfaces 3D
Zooming user interface (ZUI)
Interfaces multimodales
Experiencia más completa y real
Experiencia menos completa y real
GUI Proceso de realización
Procesos que intervienen en el desarrollo de una aplicación compuesta de diferentes interfaces de usuario:
1. Conceptualización: desarrollo de un prototipo de interfaz de usuario.
2. Creación de una línea de diseño: número reducido de pantallas (2 a 3) en las que se definen los elementos gráficos que caracterizarán a la aplicación.
3. Diseño de todas y cada una de las pantallas (interfaces) que componen la aplicación.
4. Programación de efectos visuales (si los hubiera: gif’s animados, Flash, etc.)
5. Programación “cliente”: desarrollo de las interfaces previamente diseñadas.
6. Programación “servidor”: programación de la/s interacción/es prevista/s en la interfaz.
Tipografía Web Reglas básicas
Básicas
Legibilidad por encima de todo
Usar fuentes sans-serif para mostrar en pantalla
Usar medidas en “ems” e integradas en CSS (nunca píxeles)
Alto contraste letra-fondo
Preferentemente, usar colores seguros para la web
Fuentes “seguras”: Arial, Verdana y Georgia.
No utilizar “cursivas”
Útiles
Los textos enlazados en azul y subrayados
…
Técnicas de guionizaciónmultimedia
El guión en los procesos de creación multimediaFunciones
Recoge los resultados de las tareas de documentación
Concreta la arquitectura de la información:
Organización de la información y los contenidos
Recuperación de la información
Estructura de la información e interacción
Define la utilización de elementos multimedia
Define los elementos narrativos:
Personajes
Acción
Espacio
Tiempo
Presenta la estructura narrativa
Sirve de orientación a las tareas de producción
Desarrolla la información, los contenidos, el relato.
Elaboración de un guión multimedia Fases de elaboración
1. Documentación previa > Ideación
2. Selección de elementos multimedia
Ilustración, animación, fotografía, vídeo, música, efectos sonoros, locuciones, textos escritos)
y su tratamiento.
3. Diseño de la arquitectura de la información:
Selección de contenidos
Definición de la Interfaz (funciones y elementos) (*)
Definición de la navegación – Estructura de contenidos: (*) Diagrama de arquitectura (*)
Elaboración de un guión multimedia Fases de elaboración
4. Descripción de existentes: escenarios, personajes y elementos gráficos de la interfaz.
5. Descripción de la acción y la interacción: (*) (*)
Estructura: bloques / secuencias / escenas / planos
Variables: tareas de fondo; eventos interacción (si...entonces)
Contenidos: acción y diálogos -locuciones-.
Técnicas de guión multimedia
Storyboarding
Técnicas de guión multimedia
Wireframing
Modelos de guión multimedia
Estructura de navegación, prototipado…
Aplicaciones para el proceso de guión-planificación
Tipología de aplicaciones
AplicacionesProducciónmultimedia
Creación
(Guión)
Planificación
de la
Producción
Previsión
y seguimiento
producción
Integrales
Especializadas
Flujo de
trabajo
Creación de
Story Board
Referencias
Claves de diseño
Stanford Web Credibility Research (http://www.webcredibility.org)
Internet System Consortium (http://www.isc.org/index.pl?/ops/ds/hosts.php)
WebbyAwards (http://www.webbyawards.com)
Conceptos sobre usabilidad (http://ingenieriasimple.com/usabilidad/)
Usabilidad
Useit.com (Jakob Nielsen)
Usarte.org
No solo usabilidad
Accesibilidad
W3C, FUNDACIÓN ONCE, SIDAR, FIAPAS , CEAPAT, CESYA, RPD (Real Patronato para la Discapacidad)
Herramientas BrowserShot, TypeTester, Kuler
LOGO
Tecnologías Multimedia – Periodismo Online
Profesor: Manuel Gértrudix