Tema 3. Gestión de proyectos de desarrollo multimedia y sistemas web. Diseño para web. Guías de estilo

(1)

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

(2)

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:

– Suponenque hay que dedicarle demasiado esfuerzo a navegar por el sitio.

– Suponenque no tiene el producto o servicio que están buscando.

– Se desilusionan.

– Sientenque 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.

(3)

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

(4)

Ejemplos de los peores diseños para web

(5)

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/

(6)

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

(7)

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.

(8)

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

(9)

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)

(10)

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

5. Fixed Font Size

(11)

Otras consideraciones prácticas

10 errores en el diseño de páginas web 1. Bad Search

3. Not Changing the Color of Visited Links

4. Non-Scannable Text

5. Fixed Font Size

Otras consideraciones prácticas

10 errores en el diseño de páginas web 1. Bad Search

5. Fixed Font Size

(12)

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.

(13)

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

(14)

Tendencias en el diseño para web

– Diseño plano

– Diseño adaptativo

Tendencias en el diseño para web

– Imágenes de calidad

(15)

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

(16)

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

-Diseño

-Programación:

• Responsive web design • HTLM5, CSS3 y Java Script • Phyton y Ruby

-Usabilidad:

• Interactivo • Multitouch

• Barra de navegación fija • Scroll infinito…

(17)

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”