Usabilidad Web. Tu web fácil de usar. Pedro Jesús González @pedgonvi www.domestika.com www.domestika.org Aula Puerta Bonita - 02 Junio 2010 1

10.000 clientes Socios: madrid tecnología, camerpyme, ministerio industria, google, paypal, vocento, yahoo! Tecnología propia Domestika.org

Productos /carnicos y salchichas ¿Cuándo es el viaje a las Islas Galápagos? ¿Cuántos años tiene la marca BYC? 3

¿Qué es la Usabilidad?

Esto es usabilidad (adecuado a diferentes usuarios) Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Esto no (no aporta información relevante) Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Esto no, desde luego (información contradictoria) Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ Esto sí Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ No. Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

No. Reiteración innecesaria Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Esto sí. Pensar en las necesidades del usuario. Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ No. Nivel técnico Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Siendo breves siempre que sea posible… Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ No. Mensaje ambiguo Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

No es usable. Información contradictoria. Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Mensajes de error irrelevantes Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ Los textos son redactados de forma sencilla Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ Nunca sacrifica función a favor de un malentendido Diseño. No es usabilidad Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ Nunca incluye elementos como “En construcción” Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ Es unívoco Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Imágenes subidas por usuarios a: http://wtf.microsiervos.com/ De verdad… Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Es, en definitiva, lo contrario a esto: Imágenes subidas por usuarios a: http://wtf.microsiervos.com/

Usabilidad y Diseño de Conversión

Conciencia Consideración Objetivo Embudo de Conversión Estrategia Parte 1 Consideración Estrategia Parte 2 Objetivo 24

+ + + = + Una estrategia general: Atraer Tráfico SEO SEM SOCIAL MEDIA Analítica Web + 25

+ + + = + Una estrategia general: Conversión Diseño Orientado Accesibilidad + + + = Usabilidad Analítica Web + 26

La clave: Atraer Tráfico Conversión Éxito Online + = + + 27

7 Cuestiones relevantes.

1.- Préstale la importancia que merece La primera clave es el cariño. Una web es un proyecto que empieza, pero no acaba. Dinero y esfuerzo. Más de lo que parece inicialmente. La imagen de la empresa en juego. 29 29

2.- Fijemos los objetivos de la página Información corporativa. Información sectorial. ¿Venta online? ¿Catálogo online amplio o monoproducto? 30 30

3.- La casa en orden: la estructura web IMAGEN 3.- La casa en orden: la estructura web Estructura acorde con los objetivos de la web. La home se estructura para lograr los objetivos de comunicación: i nformativos, comerciales, atención al cliente, producto, etc. Definición de layouts / wireframes. Sitemap / mapa de la web Tipo de navegación Niveles de navegación 31 31

4.- Si queremos que la usen, hagámosla usable IMAGEN 4.- Si queremos que la usen, hagámosla usable El Diseño no es sólo estético. Establecer criterios de navegación. Especialmente importante si queremos vender online. 32 32

5.- Hacer una web fea cuesta casi igual que una bonita IMAGEN 5.- Hacer una web fea cuesta casi igual que una bonita La estética tiene una utilidad funcional. La imagen de nuestra empresa Las tendencias existen, como en la moda, y las webs se quedan “obsoletas”. Ojo con el flash y las webs sobrecargadas 33 33

6.- Buen contenido y bien actualizado IMAGEN 6.- Buen contenido y bien actualizado El contenido es el rey. Actualización periódica de los contenidos. Estilo directo y conciso. Uso de contenidos multimedia 34 34

7.- Medir, medir y volver a medir IMAGEN 7.- Medir, medir y volver a medir Cuántas visitas, cuántos visitantes únicos, cuántas páginas vistas. Contenido más visto y tasa de rebote. Enlaces entrantes. “Keywords” en buscadores. Éxito de campañas publicitarias. 35 35

II.- Conceptos de diseño web 36

Arquitectura y usabilidad web 37

Arquitectura y usabilidad web URLs claras y únicas. Cada página, una URL descriptiva, única y permanente. Información de contacto clara. Destacada y bien ubicada, fácil de encontrar desde cualquier punto de la web. Rótulos significativos y estándar. Las palabras elegidas como menú de navegación deben ser simples y descriptivas. Clasificación orientada a tareas: (abrir, guardar, cerrar, imprimir...). Clasificación orientada a la audiencia: Navegación completa y descriptiva. Donde estás, dónde has estado, dónde puedes ir. Un sistema de navegación consistente. Máximo 4 niveles de navegación. Arquitectura y usabilidad web 38 38

Arquitectura y usabilidad web (II) Máximo 7 items de navegación. Breadcrums o migas de pan o nubes de etiquetas. Muestra el camino hacia atrás. Enlace a la home en el logo. Recurso sencillo para facilitar la vuelta a la página de inicio. Enlace a la página de inicio desde todas las páginas. Enlaces claros y bien identificados en todo el site. Con estilo propio y bien visibles. Aprovechar la jerarquía visual para estructurar información. Estableciendo niveles de importancia del contenido y poniéndolos en los sitios más visibles. Arquitectura y usabilidad web (II) 39 39

Arquitectura y usabilidad web (III) Evitar sobrecarga informativa. No más de 7 ± 2 elementos por página. Ayuda contextual y mensajes de error. Para tareas complejas, ayudas con globos de texto, información sobre tamaño y formato de un documento, etc., evitando secciones independientes de ayuda. Información de estado. En tareas complejas (como una compra), informar de dónde se está y lo que falta para terminar. Evitar flash innecesario. No usar intros en flash, no construir páginas completamente flash. Usar elementos flash para introducir toques de dinamismo en la web (cabecera, banners, etc). Arquitectura y usabilidad web (III) 40 40

Conversión vs 41

Diseño gráfico para la web 42

La estética juega un valor importante en la utilidad de un site La estética juega un valor importante en la utilidad de un site. Está demostrado que un diseño estético resulta más fácil de usar y fomenta actitudes positivas 43 43

Diseño gráfico en la web Look & feel adaptado a los objetivos y al sector. Los colores y la imagen del “site” debe mantener una “mínima” correspondencia con la actividad de la empresa. La cabecera marca la pauta. En términos de estilo, tono, calidad, actividad de la empresa. Puede llegar a definir el tono cromático del resto de la web. El logotipo de la empresa debe integrarse. En ocasiones se puede modificar ligeramente en color o forma el logotipo para evitar disonancias visuales. Evitemos ruido visual. Lograr un balance en peso gráfico y en estructura: estética, contenidos y usabilidad. Ojo con las imágenes de fondo (sólo en partes externas). Animaciones mínimas. Diseño gráfico en la web 44 44

Diseño gráfico en la web (II) Jugando con los espacios en blanco. Pueden existir, pero en Internet tienen un coste mayor. Ayudan en el equilibrio visual. La jerarquía visual. El peso gráfico de los elementos debe establecer una jerarquía según la estructura web. La cabecera, logo y claim ganan peso, pero podría hacerlo también una imagen de producto. Uso tipográfico adecuado. El tamaño, tipo, resaltados, ancho de línea, alineaciones, etc de los textos son clave para la legibilidad y la organización de la información. Hacer uso de negritas, cursivas, titulares para facilitar la lectura. Contraste entre fuente y fondo. Buscar un efecto positivado, de letra oscura sobre fondo claro. http://blog.duopixel.com/justified.png Diseño gráfico en la web (II) 45 45

Diseño gráfico en la web (III) Evitar el sonido ambiental. Salvo que la actividad lo requiera, el sonido o música no aporta nada. A veces, puede estar incorporado en un flash. En todo caso, se debe poder apagar el sonido. Uso o abuso de ornamentos o recursos gráficos. Pueden aportar equilibrio, belleza, pero deben usarse adecuadamente. Pueden estar bajos de tono, no son protagonistas. Proporciones de los elementos de la web. En función de la actividad, el objetivo de la web, el tamaño de la cabecera, por ejemplo, puede variar. La paleta cromática. Definir paletas cromáticas corporativas y mantener los tonos en toda la web, incluyendo imágenes, ilustraciones o fotos en la medida de lo posible. Diseño gráfico en la web (III) 46 46

Dominio / URL de la web 47

¿Cómo elegir un buen dominio? Representativo de nuestra empresa. Debe introducir el nombre, o una de las palabras del nombre o marca. También debería ser descriptivo de nuestra actividad. Ejemplo: ceramicaslopez.com Fácil de recordar. Mejor corto que largo, aunque algunos giros o expresiones pueden ser llamativos y mnemotécnicos. Evitar números y guiones. Para poder decir y deletrear fácilmente el dominio. ¿Cómo elegir un buen dominio? 48 48

Contenidos web: texto y multimedia 49

El contenido es el rey. Un contenido excelente y la frecuencia de actualización del mismo es un factor crítico del éxito de una web corporativa. 50 50

Estilo de redacción claro y conciso Estilo de redacción claro y conciso. Escribir de forma simple, evitando el lenguaje pomposo típico de la comunicación corporativa. Un mensaje/idea por párrafo. Ojo con los errores gramaticales y ortográficos. Estructura del texto. Ordenar por importancia, resaltar con negritas, cursivas, viñetas y títulos. Imágenes. Usar imágenes (fotos y diagramas) para reforzar las ideas de forma visual. El imparable ascenso del vídeo. Cada vez se usa más el vídeo (corto y conciso) para explicar una idea o presentar una empresa. Contenidos web 51 51

Accesibilidad y maquetación web 52

Aumenta el número de visitantes a nuestra web. Accesibilidad web: Capacidad de acceder a una web y sus contenidos independientemente de la discapacidad de un usuario o de su contexto de uso (dispositivos, etc). Aumenta el número de visitantes a nuestra web. Disminuye los costes de desarrollo. Reduce el tiempo de carga de la web. XHTML y CSS. Hoy día, casi ya un estándar de maquetación web, separa los contenidos del diseño, y facilita la accesibilidad. ¿Visible en cuántos navegadores? A principios de 2009, Internet Explorer 6, IE7 y Firefox tienen un ratio de uso en España de un 4/4/2 aproximadamente. Accesibilidad web 53 53

Errores y formularios 54

Normalmente sabemos porqué se producen Errores Se pueden diseñar Normalmente sabemos porqué se producen Diseño gráfico para la web 55

Son uno de los puntos de contacto más sensibles. Formularios Son uno de los puntos de contacto más sensibles. Diseño gráfico para la web 56

Un formulario de contacto no lo es de segmentación Formularios Un formulario de contacto no lo es de segmentación ¿De verdad vamos a mandar un fax a nuestro cliente? Diseño gráfico para la web 57

Un formulario de contacto no es una bañera Formularios Un formulario de contacto no es una bañera Y sin embargo, muchas veces tenemos un botón de reset cerquita del de enviar Diseño gráfico para la web 58

En el fondo somos niños pequeños… Formularios ¿Y esto para qué? En el fondo somos niños pequeños… Diseño gráfico para la web 59

Formularios ¿Como por ejemplo? Diseño gráfico para la web 60

Literales Diseño gráfico para la web Formularios http://www.caprichosdecocina.com/contact_us.php 61

Herramientas y Técnicas Primera impresión. Five Second Test Hábitos de navegación. Eyetracking Analítica. G. Analytics, Omniture A/B Testing. G. Website Optimizer Informe de Marketing en Internet 62

www.fivesecondtest.com Five Second Test Permite evaluar bocetos Ayuda a convertir www.fivesecondtest.com 63

Permite evaluar conductas Eyetracking Permite evaluar conductas Ayuda a convertir http://www.labsmedia.com/clickheat/index.html http://www.alt64.com/ 64

Permite reconstruir patrones de navegación Eyetracking Permite reconstruir patrones de navegación Permite ver atenciones máximas 65

Eyetracking 66

Eyetracking 67

La evaluación “refinitiva” Es iterativo Es empírico A/B Testing La evaluación “refinitiva” Es iterativo Es empírico ¿Recordáis la diapositiva 27? http://www.google.com/support/websiteoptimizer/?hl=es http://www.wichtestwon.com/ 68

A/B Testing ¡Ganó esta! Generó un 14.9 % más de registros El 49% pensó que no El 49% estaba equivocado 69

A/B Testing Pensar y probar Es gratis No falla Siempre sobre nuestro target (es nuestra web!) 70

Informe de Marketing en Internet Páginas indexadas Posición en buscadores Comparativa con competencia http://www.vexlan.com/informe-marketing-en-internet 71

Para terminar…

Planificar y Definir Diseñar o Ejecutar Evaluar “Sé que la mitad de mi gasto publicidad no me aporta beneficios, pero no sé que mitad” John Wanamaker Tanto en Diseño Web como en Marketing Online Planificar y Definir Diseñar o Ejecutar Evaluar

Gracias, pedro.gonzalez@domestika.com 75