usabilidad web para pymes y...
TRANSCRIPT
![Page 1: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/1.jpg)
Daniel Torres Burriel
Usabilidad web para PYMES y autónomos9 de noviembre de 2009
www.torresburriel.com
![Page 2: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/2.jpg)
Daniel Torres Burriel
Índice de contenidos● Qué es la usabilidad● Contexto● Objetivo: rentabilidad > ganar dinero● Evaluación de la usabilidad: test de usuarios● Aspectos prácticos: conclusiones eyetracking
![Page 3: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/3.jpg)
Daniel Torres Burriel
Qué es la usabilidad● Definición● Principios relacionados
– Estándares web– Vista en pantalla– Ayuda contextual
![Page 4: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/4.jpg)
Daniel Torres Burriel
Definición de usabilidadLa usabilidad (del inglés usability) es la medida de la facilidad de uso de un producto o servicio, típicamente una aplicación software o un aparato (hardware)Wikipedia
La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de usoOrganización Internacional para la Estandarización
Usabilidad es un atributo de calidad que mide lo fáciles de usar que son las interfaces webJakob Nielsen
Desarrollo de sistemas fáciles de usar y de aprenderJenny Preece
Facilidad de uso y la aceptabilidad de un sistema o producto para una clase particular de usuarios que llevan a cabo tareas específicas en un entorno específicoNiegel Bevan
Definimos Usabilidad de un sistema o herramienta como una medida de su utilidad, facilidad de uso, facilidad de aprendizaje y apreciación para una tarea, un usuario y un contexto dadoEduardo Mercovich
![Page 5: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/5.jpg)
Daniel Torres Burriel
Definición de usabilidadConceptos que aparecen:
● Medida● Facilidad de uso● Software● Hardware● Aplicación web● Comprender● Aprender● Usar● Atracción● Calidad● Aceptabilidad● Usuarios● Tareas● Entorno
![Page 6: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/6.jpg)
Daniel Torres Burriel
Definición de usabilidadLa clave de un sitio usable es que quien navega por él consiga entender su estructura y realizar con satisfacción aquello que pretendía realizar.
J. C. García (www.usalo.es)
![Page 7: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/7.jpg)
Daniel Torres Burriel
Estándares web (I)Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) acerca de cómo crear e interpretar documentos para la Web.
![Page 8: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/8.jpg)
Daniel Torres Burriel
Estándares web (II)● HTML (HyperText Markup Language)● CSS (Cascading Style Sheets)
![Page 9: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/9.jpg)
Daniel Torres Burriel
Estándares web (III)
![Page 10: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/10.jpg)
Daniel Torres Burriel
Estándares web (IV)
![Page 11: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/11.jpg)
Daniel Torres Burriel
Estándares web (V)
![Page 12: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/12.jpg)
Daniel Torres Burriel
Estándares web (VI)
![Page 13: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/13.jpg)
Daniel Torres Burriel
Estándares web (VII)
![Page 14: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/14.jpg)
Daniel Torres Burriel
Errores más comunes● Top 10 de los errores en diseño web de 2005*
➔ Problemas de legibilidad➔ Enlaces alejados de su formato estándar➔ Flash➔ Contenido no escrito para la web➔ Búsquedas deficientes➔ Incompatibilidades entre navegadores➔ Formularios incómodos➔ Ausencia de vías de contacto con los responsables del sitio web➔ Maquetación con ancho fijo➔ Ampliación inadecuada de las imágenes
* Top Ten Web Design Mistakes of 2005 - http://www.useit.com/alertbox/designmistakes.html
![Page 15: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/15.jpg)
Daniel Torres Burriel
Back to Basics in Web Design➔ Que el texto sea legible➔ Que los contenidos respondan a sus expectativas➔ Que los sistemas de navegación y búsqueda les ayuden a
encontrar lo que buscan➔ Formularios más cortos y simples➔ Que no haya cosas que no funcionen, enlaces que no lleven a
ninguna parte, contenido desactualizado
![Page 16: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/16.jpg)
scientific web design: 23 actionable lessonsfrom eye-tracking studies
Daniel Torres Burriel
www.torresburriel.com
origen de estas conclusiones
![Page 17: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/17.jpg)
el texto atrae más la atención que las imágenes
Daniel Torres Burriel
www.torresburriel.com
conclusión #1
observado desde estudios de 1994 (nielsen)
es un tema recurrente: aparece en sucesivos estudios
los usuarios van en busca de información (asociada a texto, no a imágenes)
![Page 18: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/18.jpg)
inicialmente, el ojo fija su atención en la parte superior izquierda de la pantalla
Daniel Torres Burriel
www.torresburriel.com
conclusión #2
contexto occidental (sistema de escritura)
lectura en “f”
lectura en “l”
![Page 19: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/19.jpg)
los usuarios se fijan en la parte superior izquierda de la pantalla y posteriormente en la zona superior de la misma, para después fijar su atención progresivamente hacia abajo y hacia la derecha
Daniel Torres Burriel
www.torresburriel.com
conclusión #3
![Page 20: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/20.jpg)
los usuarios ignoran los banners
Daniel Torres Burriel
www.torresburriel.com
conclusión #4
![Page 21: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/21.jpg)
el texto con formato “divertido” es menos atrayente que el texto convencional
Daniel Torres Burriel
www.torresburriel.com
conclusión #5
se confunde con banners
dificultad para localizar información en bloques de texto multicolor
implica una pérdida de información para el usuario
![Page 22: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/22.jpg)
los usuarios se fijan más en los números escritos con números que con texto
Daniel Torres Burriel
www.torresburriel.com
conclusión #6
los números se identifican rápidamente escaneando
los números, escritos, no se localizan escaneando
![Page 23: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/23.jpg)
el tamaño del texto influye en la conducta de los usuarios
Daniel Torres Burriel
www.torresburriel.com
conclusión #7
el texto grande invita a escanear la página
el texto pequeño invita a leerlo
![Page 24: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/24.jpg)
los usuarios sólo se fijan en el tagline si les interesa
Daniel Torres Burriel
www.torresburriel.com
conclusión #8
si el tagline es un formalismo perderá relevancia
el tagline se lee de forma muy rápida
si no es comprensible, se obviará
![Page 25: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/25.jpg)
los usuarios escanean pequeñas porciones de la página
Daniel Torres Burriel
www.torresburriel.com
conclusión #9
puede ser una ventaja: seccionemos la interfaz
¿qué información es la importante? destaquémosla
![Page 26: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/26.jpg)
los párrafos cortos son más adecuados que los largos
Daniel Torres Burriel
www.torresburriel.com
conclusión #10
hay que diseñar para comunicar pequeñas porciones de información
la atención del usuario se centra en esas pequeñas porciones de información
minimizar siempre que el contexto lo permita
![Page 27: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/27.jpg)
los textos a una columna proporcionan una mejor fijación visual que los multi-columna
Daniel Torres Burriel
www.torresburriel.com
conclusión #11
no proporcionar demasiada información a la vez
la simplicidad facilita la lectura
posibilidad de que el usuario ignore mucha información
![Page 28: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/28.jpg)
la publicidad situada en la parte superior izquierda es la que recibe mayor atención visual
Daniel Torres Burriel
www.torresburriel.com
conclusión #12
el ojo es ahí donde fija su atención
contexto occidental (sistema de escritura)
atención visual no implica ‘click’
![Page 29: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/29.jpg)
la publicidad situada junto al mejor contenido es la que se visualiza más a menudo
Daniel Torres Burriel
www.torresburriel.com
conclusión #13
el contexto puede proporcionar publicidad más efectiva
si lo añadimos a #12 puede ser una buena opción
![Page 30: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/30.jpg)
la publicidad textual es la que más se ve de forma intencionada
Daniel Torres Burriel
www.torresburriel.com
conclusión #14
la gente no pasa mucho tiempo mirando cosas que aparentan ser publicidad
los anuncios textuales lo aparentan menos
![Page 31: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/31.jpg)
las imágenes grandes son las que más llaman la atención del usuario
Daniel Torres Burriel
www.torresburriel.com
conclusión #15
si vamos a usar imágenes, el tamaño sí importa
la imagen tiene más valor para el usuario cuando tiene mucha información (detalles)
la imagen debe ser, siempre, relevante en el contexto
![Page 32: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/32.jpg)
las imágenes con caras son las que atraen más fijación de la mirada
Daniel Torres Burriel
www.torresburriel.com
conclusión #16
las imágenes artísticas o las abstractas, si bien pueden ser consistentes con el diseño, no atraen la atención
las fotos de gente real atraen la atención más que las de modelos
![Page 33: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/33.jpg)
los titulares deben permanecer limpios, claros e impolutos
Daniel Torres Burriel
www.torresburriel.com
conclusión #17
los titulares son lo primero que se lee
evitar los obstáculos para su lectura
es la primera impresión (que es la que cuenta)
![Page 34: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/34.jpg)
los usuarios ocupan mucho tiempo mirando los menús y los botones
Daniel Torres Burriel
www.torresburriel.com
conclusión #18
merecen una atención especial a la hora de su diseño
captan una gran fijación de la atención
es una de las partes más importantes de una web
![Page 35: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/35.jpg)
los listados aumentan la atención visual del usuario
Daniel Torres Burriel
www.torresburriel.com
conclusión #19
son un aliado
son un elemento de creación de porciones de contenido
se llevan muy bien con el escaneado
destacan la información importante
facilitan la localización de contenidos
![Page 36: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/36.jpg)
los bloques largos de texto son evitados por el usuario
Daniel Torres Burriel
www.torresburriel.com
conclusión #20
no importa lo relevante de la información o lo bien escritos que están: se evita su lectura
necesidad de romper ese esquema, hacia bloques más cortos
necesidad de destacar la información relevante dentro de esos bloques de texto
![Page 37: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/37.jpg)
dar algún formato al texto hace que se le preste atención, pero con medida
Daniel Torres Burriel
www.torresburriel.com
conclusión #21
aliados: negrita, cursiva, highlight
tener presente que un abuso de formato hace perder la facilidad de escaneado
![Page 38: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/38.jpg)
el espacio en blanco es nuestro amigo
Bote de Zamora, obra de arte califal cordobés
Daniel Torres Burriel
www.torresburriel.com
conclusión #22
![Page 39: Usabilidad web para PYMES y autónomosdocumentos.camarazaragoza.com/comercio-electronico/usabilidad... · La usabilidad se refiere a la capacidad de un software de ser comprendido,](https://reader033.vdocumento.com/reader033/viewer/2022053000/5f04fbb77e708231d410ad24/html5/thumbnails/39.jpg)
las herramientas de ayuda a la navegación son más efectivas en la zona superior de la pantalla
Daniel Torres Burriel
www.torresburriel.com
conclusión #23