Usabilidad web PYMES autónomos

Daniel Torres Burriel

Usabilidad web para PYMES y autónomos
9 de noviembre de 2009

www.torresburriel.com


Í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


Qué es la usabilidad
● Definición
● Principios relacionados
– Estándares web
– Vista en pantalla
– Ayuda contextual


Definición de usabilidad
La 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 uso
Organización Internacional para la Estandarización

Usabilidad es un atributo de calidad que mide lo fáciles de usar que son las interfaces web
Jakob Nielsen

Desarrollo de sistemas fáciles de usar y de aprender
Jenny 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ífico
Niegel 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 dado
Eduardo Mercovich


Conceptos que aparecen:

● Medida
● Facilidad de uso

● Software

● Hardware

● Aplicación web

● Comprender

● Aprender

● Usar

● Atracción

● Calidad

● Aceptabilidad

● Usuarios

● Tareas

● Entorno


La 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)


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.


Estándares web (II)
● HTML (HyperText Markup Language)
● CSS (Cascading Style Sheets)


Estándares web (III)


Estándares web (IV)


Estándares web (V)


Estándares web (VI)


Estándares web (VII)


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


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


origen de estas conclusiones

scientiﬁc web design: 23 actionable lessons
from eye-tracking studies


conclusión #1

el texto atrae más la atención que las imágenes
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)



conclusión #2

inicialmente, el ojo ﬁja su atención en la parte
superior izquierda de la pantalla
contexto occidental (sistema de escritura)
lectura en “f”
lectura en “l”



conclusión #3

los usuarios se ﬁjan en la parte
superior izquierda de la
pantalla y posteriormente en la
zona superior de la misma,
para después ﬁjar su atención
progresivamente hacia abajo y
hacia la derecha



conclusión #4

los usuarios ignoran los banners



conclusión #5

el texto con formato “divertido” es menos atrayente
que el texto convencional
se confunde con banners
diﬁcultad para localizar información en bloques de texto
multicolor
implica una pérdida de información para el usuario



conclusión #6

los usuarios se ﬁjan más en los números escritos
con números que con texto
los números se identiﬁcan rápidamente escaneando
los números, escritos, no se localizan escaneando



conclusión #7

el tamaño del texto inﬂuye en la conducta de los
usuarios
el texto grande invita a escanear la página
el texto pequeño invita a leerlo



conclusión #8

los usuarios sólo se ﬁjan en el tagline si les interesa

si el tagline es un formalismo perderá relevancia
el tagline se lee de forma muy rápida
si no es comprensible, se obviará



conclusión #9

los usuarios escanean pequeñas porciones de la
página
puede ser una ventaja: seccionemos la interfaz
¿qué información es la importante? destaquémosla



conclusión #10

los párrafos cortos son más adecuados que los
largos
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



conclusión #11

los textos a una columna proporcionan una mejor
ﬁjación visual que los multi-columna
no proporcionar demasiada información a la vez
la simplicidad facilita la lectura
posibilidad de que el usuario ignore mucha información



conclusión #12

la publicidad situada en la parte superior izquierda
es la que recibe mayor atención visual
el ojo es ahí donde ﬁja su atención
contexto occidental (sistema de escritura)
atención visual no implica ‘click’



conclusión #13

la publicidad situada junto al mejor contenido es la
que se visualiza más a menudo
el contexto puede proporcionar publicidad más efectiva
si lo añadimos a #12 puede ser una buena opción



conclusión #14

la publicidad textual es la que más se ve de forma
intencionada
la gente no pasa mucho tiempo mirando cosas que
aparentan ser publicidad
los anuncios textuales lo aparentan menos



conclusión #15

las imágenes grandes son las que más llaman la
atención del usuario
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



conclusión #16

las imágenes con caras son las que atraen más
ﬁjación de la mirada
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



conclusión #17

los titulares deben permanecer limpios, claros e
impolutos
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)



conclusión #18

los usuarios ocupan mucho tiempo mirando los
menús y los botones
merecen una atención especial a la hora de su diseño
captan una gran ﬁjación de la atención
es una de las partes más importantes de una web



conclusión #19

los listados aumentan la atención visual del usuario

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



conclusión #20

los bloques largos de texto son evitados por el
usuario
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



conclusión #21

dar algún formato al texto hace que se le preste
atención, pero con medida
aliados: negrita, cursiva, highlight
tener presente que un abuso de formato hace perder la
facilidad de escaneado



conclusión #22

el espacio en blanco es nuestro amigo

Bote de Zamora, obra de arte califal cordobés



conclusión #23

las herramientas de ayuda a la navegación son más
efectivas en la zona superior de la pantalla



gracias ;-)
torresburriel@gmail.com


Usabilidad web PYMES autónomos

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Usabilidad web PYMES autónomos

Ähnlich wie Usabilidad web PYMES autónomos (20)

Mehr von SATI pyme

Mehr von SATI pyme (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Usabilidad web PYMES autónomos