30258- Diseño Centrado en el Usuario. Diseño para la Multimedia Tema 3. Gestión de proyectos de desarrollo multimedia y sistemas web. Diseño para web. Guías de estilo 30258- Diseño Centrado en el Usuario. Diseño para la Multimedia

Objetivos Desarrollo de proyectos multimedia y sistemas web utilizando técnicas de diseño centrado en el usuario. Características de las aplicaciones multimedia y web Definición de elementos multimedia: Texto Imagen / Gráfico Audio Video / Animaciones Algunas consideraciones prácticas: Diseño para web. Guías de estilo.

Guías de estilo para la Web Diseñar para la Web es diferente de diseñar interfaces de usuario tradicionales. Muchos de los principios de diseño (diseño de la interfaz, diseño visual, diseño de la interacción) son aplicables pero la Web tiene sus particularidades. Una característica importante de la Web es la falta de interfaces de usuario comunes. La prioridad en la web es conseguir una interfaz atractiva y fácil de usar, y que además, se diferencie de otras páginas similares.

Guías de estilo para la Web La gente abandona un sitio web si: Suponen que hay que dedicarle demasiado esfuerzo a navegar por el sitio. Suponen que no tiene el producto o servicio que están buscando. Se desilusionan. Sienten que les lleva demasiado tiempo cargar la página. Para evitar esto hay que ser claro, pero siempre en función de los usuarios y clientes potenciales.

Guías de estilo para la Web Los sitios web simples y bien diseñados permiten ahorrar tiempo a sus usuarios, reducen el tiempo de mantenimiento y mejoran la satisfacción general. Ejemplo de un buen diseño: Google ¿Gran diseño gráfico? ¿Propuesta atractiva? ¿última tecnología? Simplicidad, facilidad de uso, mejores resultados, fácil descarga, rapidez en las respuestas. El diseño de Google se ha realizado utilizando técnicas de DCU

Ejemplos de los peores diseños para web Algunos ejemplos:

Ejemplos de los peores diseños para web Otros ejemplos: The Afterlife – http://heaven.internetarchaeology.org/heaven.html#bottom Constellation 7 – http://www.constellation7.org/Constellation-Seven/Josiah/Index.htm JamiLinBLOG – http://www.jamilin.com/ Bavarian Brathouse – http://bavarianbrathaus.info/ Pennyjuice – http://www.pennyjuice.com/htmlversion/whoispj.htm Mercia Tourist Board – http://www.merciame.ic24.net/Merciame.html One Nation – http://sa.onenation.com.au/ Wet Water Equipment – http://www.waterequipment.com.au/ Water Services Ltd. – http://www.arvanitakis.com/en/ Leoneck Hotel – http://www.leoneck.ch/en/

Ejemplos de buenos diseños para web Problema Buscar ejemplos de buenos diseños para aplicaciones web: http://www.thebestdesigns.com/ http://www.webawards.com.au/ Justificar la respuesta.

Guías de estilo para la Web Para afrontar el problema de obtener un buen diseño varias empresas y organismos han publicado sus guías de estilo Web: Apple IBM Yale University, Information Technology Services U.S. Department of Health and Human Services World Wide Web Consortium (W3C) …

Guías de estilo para la Web Apple: 1996 Guía de diseño web: Comunicación y diseño eficiente Apariencia Interactividad html 2014 iOS Human Interface Guidelines: Diseño Navegación Interactividad y retroalimentación Animación Color, tipografía

Guías de estilo para la Web IBM Información online “Web Page Design”: Diseño Creación y Edición Texto Imágenes … Responsive Web Design:

Guías de estilo para la Web Yale University, Information Technology Services Una de las guías de estilo más reconocidas. Cubre todos los elementos básicos implicados en la creación de un sitio web. Se centra en la interfaz y en los principios de diseño gráfico subyacentes al diseño de un sitio web.

Guías de estilo para la Web Web Style Guide. Contenidos: 1 Procesos 2 Usabilidad Universal 3 Arquitectura de la Información 4 Diseño de la Interfaz 5 Estructura del Sitio 6 Estructura de la Página 7 Diseño de la Página 8 Tipografía 9 Estilo Editorial 10 Formularios y Aplicaciones 11 Gráficos 12 Multimedia

Guías de estilo para la Web U.S. Department of Health and Human Services (HHS) Usability.gov Improving the user experience Esta guía de estilo se ha ido actualizando a lo largo de los años para incorporar las nuevas tendencias en comunicación digital: Diseño adaptativo Estrategias móviles Aplicaciones Redes sociales Throughout 2013, we are updating the Research-Based Web Design and Usability Guidelines that so many of you reference and rely on. The first step in that process was to implement a searchable database. The database allows you to access the guidelines associated with your area of interest and allows us to update the guidelines more easily and frequently. At present, the database houses the current guidelines published in 2006. Moving forward, we will update the database to cover current trends and topics in digital communications, including: Responsive design Mobile strategy Applications (apps) Social media

Guías de estilo para la Web U.S. Department of Health and Human Services (HHS) Research-Based Web Design and Usability Guidelines Proceso de diseño y evaluación Experiencia de usuario Accesibilidad Hardware y software Página Principal Navegación Texto Listas Gráficos, Imágenes y Multimedia Búsquedas…

Guías de estilo para la Web World Wide Consortium (W3C) El W3C alberga la Iniciativa de Accesibilidad Web (WAI), patrocinada por varias organizaciones. WAI ofrece diferentes guías y técnicas: Web Content Accessibility Guidelines (WCAG) Authoring Tool Accessibility Guidelines (ATAG) User Agent Accessibility Guidelines (UAAG) Accessible Rich Internet Applications (WAI-ARIA) Independent User Interface (Indie UI) User Agent = web browsers and media players, assistive technologies ARIA: dynamic web content (Ajax, DHTML) IUI user actiosn to communicate with web apps. Web Content Accessibility Guidelines (WCAG) Principios de diseño para hacer los sitios web accesibles. Estudian escenarios que pueden ocasionar problemas a usuarios discapacitados Authoring Tool Accessibility Guidelines (ATAG) Asisten a los desarrolladores de herramientas de creación de contenidos web para que estos sean accesibles User Agent Accessibility Guidelines (UAAG) Explican las características de las interfaces que benefician a las personas con discapacidades (navegación por teclado, opciones de configuración, documentación, comunicación por voz…)

Otras consideraciones prácticas 10 errores en el diseño de páginas web 1. Bad Search 2. PDF Files for Online Reading 3. Not Changing the Color of Visited Links 4. Non-Scannable Text 5. Fixed Font Size 6. Page Titles With Low Search Engine Visibility 7. Anything That Looks Like an Advertisement 8. Violating Design Conventions 9. Opening New Browser Windows 10. Not Answering Users' Questions

Otras consideraciones prácticas 10 errores en el diseño de páginas web 1. Bad Search 2. PDF Files for Online Reading 3. Not Changing the Color of Visited Links 4. Non-Scannable Text 5. Fixed Font Size 6. Page Titles With Low Search Engine Visibility 7. Anything That Looks Like an Advertisement 8. Violating Design Conventions 9. Opening New Browser Windows 10. Not Answering Users' Questions

Otras consideraciones prácticas 10 errores en el diseño de páginas web 1. Bad Search 2. PDF Files for Online Reading 3. Not Changing the Color of Visited Links 4. Non-Scannable Text 5. Fixed Font Size 6. Page Titles With Low Search Engine Visibility 7. Anything That Looks Like an Advertisement 8. Violating Design Conventions 9. Opening New Browser Windows 10. Not Answering Users' Questions

Otras consideraciones prácticas 10 errores en el diseño de páginas web 1. Bad Search 2. PDF Files for Online Reading 3. Not Changing the Color of Visited Links 4. Non-Scannable Text 5. Fixed Font Size 6. Page Titles With Low Search Engine Visibility 7. Anything That Looks Like an Advertisement 8. Violating Design Conventions 9. Opening New Browser Windows 10. Not Answering Users' Questions

Otras consideraciones prácticas A tener en cuenta en diseño web: ¿Cómo leen los usuarios en la web? (1997) Rompiendo las reglas gramaticales por claridad (2014) Artículos relacionados con escritura para la web http://www.nngroup.com/topic/writing-web/

Otras consideraciones prácticas Home Pages Las reglas de diseño de páginas principales que menos se tienen en cuenta. Las 10 reglas de diseño más importantes para lograr una página principal usable.

Tendencias en el diseño para web 5 tendencias en el diseño web: Las webs para móviles van a dejar de existir El retorno de los efectos multimedia en el diseño web El contenido web como clave para el posicionamiento SEO (Search Engine Optimization) Las imágenes se utilizarán en formato SVG Quitar el :hover (efectos que se producen al pasar el ratón sobre un elemento de una web).

Tendencias en el diseño para web 10 tendencias en diseño web para 2014: Diseño plano Diseño adaptativo Imágenes de calidad Parallax Infografías para la presentación de datos Tipografías Simplificación de contenidos Videos cortos de presentación Mejora en el diseño de boletines Menú de navegación fijo

Tendencias en el diseño para web Diseño plano Diseño adaptativo

Tendencias en el diseño para web Imágenes de calidad Parallax (falso 3D)

Tendencias en el diseño para web Infografías para la presentación de datos Tipografías

Tendencias en el diseño para web Simplificación de contenidos Videos cortos de presentación

Tendencias en el diseño para web Mejora en el diseño de boletines Menú de navegación fijo

Tendencias 22 tendencias en diseño, programación y usabilidad web Responsive web design HTLM5, CSS3 y Java Script Phyton y Ruby Usabilidad: Interactivo Multitouch Barra de navegación fija Scroll infinito…

Referencias – Diseño web Lecturas recomendadas: Nielsen Norman Group: http://www.nngroup.com/topic/writing-web Artículo: “Why Research-Directed Website Design Will Make Your Website Better” http://www.peachpit.com/articles/article.aspx?p=1403982