49
1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

Embed Size (px)

Citation preview

Page 1: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

1

Diseño Web(La Experiencia del Usuario)

Marketing Online & New Media

Page 2: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

2

Agenda• Conceptos generales de Diseño Web

– Sitio Web– HTML, CSS– Flash– Links

• Arquitectura de Información– Navegación– Jerarquía– Call to Action

• Accesibilidad Web• Usabilidad• Definición de una estrategia de diseño• Prototipos• Pruebas de Usabilidad• Diseño Centrado en el Usuario (DCU)• Experiencia del Usuario (UXD)• Trabajo en Grupo

Page 3: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

3

Objetivo del Taller

• Poder evaluar el diseño de un sitio web y aconsejar y asesorar mejoras al diseño del sitio de los clientes.

• Elaborar la estrategia de diseño para el trabajo grupal.

Page 4: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

4

¿Qué es un Sitio Web?

“Un sitio web es un conjunto de páginas web, típicamente comunes a un dominio de Internet o subdominio en la World Wide Web en Internet”

Page 5: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

5

Tipos de Sitios WebEstática Dinámica

Consulto un Sitio Web

HTML

HTML

HTML

HTML

HTML

HTML

Elementos (imágenes, css, videos, etc.) Elementos (imágenes, css, videos, etc.)

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

¿Qué me está pidiendo?

PHP ASPX JSP ◄ Lenguajes de Programación

HTML

Este es el resultado

Proceso la información

Información ◄ Acceso a Base de Datos

En los 2 casos devuelvo HTML

Page 6: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

6

¿Qué es HTML?<head><title>Páginas Amarillas - Yell Perú (hoteles, hostales, transporte de pasajeros, clínicas y hospitales, colegios, ...)</title> </head>

<meta name="description" content="Directorio de empresas y profesionales en Peru (hoteles, hostales, transporte de pasajeros, clínicas y hospitales, colegios ...)" />

<meta name="keywords" content="Hoteles, hostales, transporte de pasajeros, clinicas y hospitales, colegios, institutos de ense&ntilde;anza superior, agencias de viajes y turismo, fiestas infantiles, florerias" />

HyperText Markup LanguageLenguaje de Marcado de Hipertexto HyperText Markup LanguageLenguaje de Marcado de Hipertexto

Page 7: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

7

¿Qué son los CSS? StyleSheet ó Hojas de Estilos

Con CSSSin CSS

Cascading Style SheetsCascading Style Sheets

Page 8: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

8

Animaciones en Flash

Se recomienda usar Flash solo para Banners y animaciones especiales. No se debe desarrollar un sitio 100% en flash

http://www.adidas.comhttp://www.2advanced.com/ http://www.adidas.comhttp://www.2advanced.com/

Page 9: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

9

Hipervínculo (Link)

Activo Sobre Visitado

Page 10: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

10

Arquitectura de la Información

• Arte y ciencia de organizar la información para ayudar a la gente a encontrar la información que quiere.

• Los sitios se forman de contenido editorial, contenido gráfico y codificación.

• La manera en que todo eso se estructura es la arquitectura de la información.

Ricardo Palma“El Bibliotecario Mendigo”

¿Cómo organizo la información?

¿Cómo estructuro la información?

Page 11: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

11

Tipos de Navegación

JerárquicaJerárquica

Page 12: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

12

Tipos de Navegación

GlobalGlobal

Page 13: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

13

Tipos de Navegación

LocalLocal

Page 14: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

14

Tipos de Navegación

Lineal ó SecuencialLineal ó Secuencial

◄ ►

Page 15: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

15

Usted está aquí

Page 16: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

16

Jerarquía visual

- Promueve la claridad de los contenidos

para su adecuada comprensión e

interacción.- Ayuda a un usuario a identificar qué es lo

más importante de una página.

“Un buen diseño hará que los elementos que tengan más peso visual sean los que más relevancia tengan y que los componentes más importantes sean los más destacados visualmente”

Page 17: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

17

ComprarNo necesitas tarjeta de crédito

ComprarNo necesitas tarjeta de crédito

“Call to Action” Llamada a la acción

Características:

• Tamaño• Ubicación• Colores• Opciones• Presión: Ofertas y Precios

Características:

• Tamaño• Ubicación• Colores• Opciones• Presión: Ofertas y Precios

“Animar al visitante a realizar alguna acción concreta.”“Animar al visitante a realizar alguna acción concreta.”

Page 18: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

18

¿Qué es accesibilidad?“…posibilidad de que un producto o servicio web pueda ser accedido y usado por el mayor número posible de personas, indiferentemente de las limitaciones propias del individuo o de las derivadas del contexto de uso.”

Limitaciones:- Visuales- Motrices- Auditivas- Cognitivas

Limitaciones:- Visuales- Motrices- Auditivas- Cognitivas

Page 19: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

19

Usabilidad

Page 20: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

20

Usabilidad

¿Usable?

“Usabilidad se define coloquialmente como facilidad de uso, ya sea de una página web, una aplicación informática o cualquier otro sistema que interactue con un usuario.”

“Usabilidad se define coloquialmente como facilidad de uso, ya sea de una página web, una aplicación informática o cualquier otro sistema que interactue con un usuario.”

NONO SISI

Page 21: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

21

Page 22: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

22

Page 23: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

23

Page 24: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

24

10 errores de usabilidad web comunes

1. Splash Screens2. Links no fáciles de identificar, Link o no link?3. Ruido visual.4. Pobre navegación5. Imágenes parpadeantes6. No más de una navegación por página7. Mal etiquetado en links o menús8. Buscadores deficientes9. Texto difícil de leer10. El botón de atrás no funciona

Page 25: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

25

1. Splash Screens

http://www.elranchograndedelperu.com/ http://www.elranchograndedelperu.com/

Page 26: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

26

2. Links no fáciles de identificar, Link o no link?

http://www.hotelperupacifico.com/ http://www.hotelperupacifico.com/

Page 27: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

27

3. Ruido visual

http://www.miscostillitas.com/ http://www.miscostillitas.com/

Page 28: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

28

4. Pobre navegación

http://www.precisionperu.com http://www.precisionperu.com

Page 29: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

29

5. Imágenes parpadeantes

http://www.cineplanet.com.pe/ http://www.cineplanet.com.pe/

Page 30: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

30

6. No más de una navegación por página

http://www.dtallos.com.pe/ http://www.dtallos.com.pe/

Page 31: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

31

7. Mal etiquetado en links o menús

http://www.roselen.com/ http://www.roselen.com/

Page 32: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

32

8. Buscadores deficientes

http://www.floreriasperu.com.pe http://www.floreriasperu.com.pe

Page 33: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

33

9. Texto difícil de leer

http://www.dunloptire.com.pe/ http://www.dunloptire.com.pe/

Page 34: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

34

10. El botón de atrás no funciona

http://www.mra.com.pe/ http://www.mra.com.pe/

Page 35: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

35

Estrategia de Diseño WebEstrategia de Diseño Web

Page 36: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

36

Objetivo del Sitio

“Debemos definir cual es el objetivo principal del Sitio Web.”“Debemos definir cual es el objetivo principal del Sitio Web.”

Page 37: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

37

Perfiles de Usuario

Page 38: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

38

Tareas del UsuarioEl InvestigadorEl Investigador El EmpresarioEl Empresario La RománticaLa Romántica

Page 39: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

39

Prototipos (Mockups, Wireframes)

Page 40: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

40

Pruebas de Usabilidad

Eye tracking Evaluación de Expertos

¿Cómo evaluamos la usabilidad?

Encuestas Observación

¿Tipos de Pruebas?

Exploratoria Cumplimiento de tareasPruebas A/B

Page 41: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

41

Pruebas de Usabilidad

Page 42: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

42

¿A dónde nos lleva todo esto?

Page 43: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

43

Diseño Centrado en el Usuario (DCU)

El Diseño Centrado en el Usuario (DCU) es una manera de diseñar enfocándose en información recogida de las personas que utilizarán el producto.

• Especificación el contexto de uso, identificar a la gente que utilizará el producto, para qué lo usarán y bajo qué condiciones lo usarán.

• Especificación de requerimientos, identificar necesidades del negocio o metas de usuarios que deban ser lo gradas por el producto para ser exitoso.

• Creación de soluciones de diseño, se comienza haciendo prototipos de baja calidad hasta lograr diseños más elaborados.

• Pruebas de Usabilidad, la etapa más importante de este proceso es la evaluación, a través de pruebas de usabilidad con usuarios reales, garantizando la calidad y funcionalidad del producto.

Page 44: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

44

Experiencia del Usuario (UXD)

La experiencia de usuario es el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo.

La experiencia de usuario depende no sólo de los factores relativos al diseño sino además de aspectos relativos a las emociones, sentimientos, construcción y transmisión de la marca, confiabilidad del producto, etc.

Page 45: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

45

Page 46: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

46

En resumen…• Conceptos generales de Diseño Web

– Sitio Web– HTML, CSS– Flash– Links

• Arquitectura de Información– Navegación– Jerarquía– Call to Action

• Accesibilidad Web• Usabilidad• Definición de una estrategia de diseño• Prototipos• Pruebas de Usabilidad• Diseño Centrado en el Usuario (DCU)• Experiencia del Usuario (UXD)• Trabajo en Grupo

Page 47: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

47

Trabajo en grupo

• Elaborar la estrategia de diseño web para el sitio web asignado en el trabajo de grupo.

• Se debe considerar:

• Objetivo del Sitio Web

• Definición de Perfiles de Usuario

• Asignar tareas a los perfiles

• Elaborar 3 prototipos en papel (Home y 2 interiores)

• Elaborar la estrategia de diseño web para el sitio web asignado en el trabajo de grupo.

• Se debe considerar:

• Objetivo del Sitio Web

• Definición de Perfiles de Usuario

• Asignar tareas a los perfiles

• Elaborar 3 prototipos en papel (Home y 2 interiores)

Page 48: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

48

http://www.facebook.com/oscarbarriga

http://pe.linkedin.com/in/oscarbarriga

http://twitter.com/obarriga

¡¡Muchas Gracias!!

[email protected]

Page 49: 1 Diseño Web (La Experiencia del Usuario) Marketing Online & New Media

49

¡¡Muchas Gracias!!

[email protected]

http://www.linkedin.com/in/christiannh

http://www.facebook.com/stugra

http://twitter.com/stugra