Inclusión. Accesibilidad y Usabilidad web.

MouseFlow. Analizando el comportamiento de los usuarios en tu web

He estado probando MouseFlow para analizar la usabilidad y tener un elemento más de juicio a la hora de hacer mejoras en los sitios web, y la verdad es que creo que se va a convertir en una de las herramientas obligatorias a la hora de realizar análisis de las páginas webs a pesar algunas limitaciones que tiene actualmente.

• MouseFLow permite grabar los movimientos del ratón de los usuarios que utilizan tu web, y donde hacen click.
• Gratuíto: Cien muestras por mes

Lo primero que me llamó la atención del servicio es lo usable que es. Tardé 3 minutos, por reloj, en ponerlo a funcionar en una página web y entender como funcionaba.

Limitaciones

Las limitaciones más importantes nacen de la propia tecnología que utiliza. Graba por un lado los movimientos del ratón y por otro la url en la que está navegando el usuario superponiendolas para su visualización.

Esto funciona perfectamente en un gran porcentaje de páginas web pero hay algunos casos en los que he encontrado ciertos aspectos a mejorar.

• Javascript: Como los sistemas de pestañas, slides, cargas ajax de datos, etc. Son comportamientos de cliente web y no tienen reflejo en la url por lo que Mouseflow no se entera de los cambios realizados en la web y ves el movimiento del ratón imaginándote el escenario donde está el usuario
• Variables de sesión, variables ‘POST’ de formulario: Al igual que en el caso anterior al realizar las transiciones de páginas por variables no reflejadas en la url, Mousflow no es capaz de reproducir con certeza la página que está viendo el usuario.
• Zonas Privadas: El sistema no es capaz de autentificarse, por lo que las zonas de la web que necesitan esta autentificación no podrán ser analizadas.

Cómo maquetar un correo electrónico HTML para los distintos clientes

A pesar de que las redes sociales están consideradas como la manera más directa de mantener las relaciones con los clientes, no podemos caer en el error de despreciar medios como el correo electrónico para mantener esa comunicación.

Si a la hora de maquetar una web tenemos problemas con la visualización en los distintos navegadores, al crear un correo electrónico la casuística de clientes aumenta en gran medida, y su capacidad para interpretar el HTML y las CSS se reduce en muchos casos, por lo que hay que ser especialmente cuidadoso con los recursos que utilizamos.

Consejos para la creación de un boletín de correo electrónico

Contenidos

• No incluyas demasiados gráficos o imágenes de mucho peso, porque dismunuye su entregabilidad
• Evita todo el diseño con imágenes o podrá ser etiquetado como SPAM
• Contenido claro y sencillo, la mayoría de la gente dedicará 1,4 segundos a leer tu correo
• Si es un boletín de subscripción, facilita siempre el enlace para poder darse de baja.

Maquetación

• Utilice tablas para crear la estructura: El tratamiento de float, margin, padding en Gmail o en Outlook 2007 no nos permitirá usar estos estos recursos para la maquetación
  • Fije el ancho en las celdas, no en las tablas
  • Para dar espacio utilice cellpadding
• Anide tablas siempre que pueda en vez  de jugar con márgenes o espaciados interiores
• Utilice <td bgcolor=”#ff6600″> mejor que por CSS. Para las imágenes actúe igual, tenga en cuenta que algunos clientes de correo no soportatrán esta propiedad por lo que debe  proporcionar un color de fondo coherente.
• Evite los espacios en blanco en sus celdas
• Algunas CSS son soportadas correctamente por la mayoría de los lectores de correo como  font.
• No utilice métodos abreviados para declarar sus CSS
  • NO: p {font:bold 1em/1.2em georgia,times,serif;}
  • SI: p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;}
• Enlaces:
  • Proporcione definiciones de colores inline y una etiqueta <span> redudante para garantizar la visualización del color deseado
  • <a href="http://somesite.com/" style="color:#ff00ff"><span style="color:#ff00ff">this is a link</span></a>
• Imágenes:
  • No utilice formato PNG
  • No se olvide del atributo ALT
  • Incluya siempre la dimensión de la imagen
  • No use float, utlice align

Más información

• The Email Marketing Experience
• Rock Solid HTML Emails
• Lista de  CSS soportadas por los clientes de correo
  

10 normas de diseño web para conexiones con baja velocidad de transferencia

Aunque continuamente está mejorando el ancho de banda que tenemos en nuestras casas y en nuestras oficinas, sigue existiendo a nivel mundial una gran cantidad de usuarios que utilizan conexiones con poca velocidad de conexión.

Además el aumento de conexiones desde dispositivos móviles cuya velocidad de transferencia de datos a es baja vuelve a crear las necesidad de optimizar las web para este tipo de conexiones.

10 Consejos

1. Páginas más pequeñas de 25Kb: Páginas que carguen en menos de 10s para conxiones de 20Kbps.
2. Reduce el número de imágenes: Es posible diseñar bien sin muchas imágenes, usando CSS para el layout y rollover.
3. Estructura bien la web: Proporciona navegación simple, no hagas a los usuarios cargar páginas innecesarias.
4. Usa Estilos en Cascada: No uses tablas para el Layout.
5. Minimiza las llamadas http: Cada imagen, cada archivo CSS o Jav script es una llamada http distinta. Muchas pueden provocar lentitud en la carga de la página.
6. Permite la compresión: Comprimiendo las página en el servidor puedes reducir a la mitad las páginas.
7. Páginas Cacheable: Permite a los navegadores mantener en cache los contenidos.
8. No uses PDFs: Si los usas optimizalos tambien. Pueden optimizarse usando graficos vectoriales y minimizando el número de fuentes.
9. Pon primero los items más útiles: Pon el menú de navegación en la cabecera de cada página y así será lo primero en cargarse. Haz tus páginas útiles antes de que termine la carga.
10. Muestra el tamaño de los enlaces: No obligues a a descargar archivos grandes, enlazalos siempre, y si son mayores de 75kb muestra  el tamaño.

Mas información: Web Design Guidelines for Low BandWidth

10 Crímenes de Usablidad que no deberías cometer

Hay prácticas que el usuario agradece, y otras que a fuerza de encontrarlas acaba exigiendo. Este listado de Line25 nos recuerda algunas prácticas que debemos tener siempre presentes.

Me he permitido  reordenar la lista original por la gravedad del crimen (lo que puede molestar al usuario).

1. Logo que no enlaza con la página de inicio de la web
2. Subrayar algo que no es un enlace
3. No diferenciar los enlaces visitados
4. Crear contenidos largos y aburridos sin partirlos en apartados
5. Decir a la gente “click aquí”
6. No indicar el campo activo en un formulario
7. Imágenes sin el atributo ALT
8. Una imagen de fondo sin un color de fondo similar
9. Justificar los textos
10. Etiquetas <label> no asociadas a los campos <input> del formulario

Podeis encontrar más información en: 10 Usability Crimes You Really Shouldn’t Commit

24 Herramientas para realizar test de Usabilidad

Una lista muy completa de herramientas para realizar test de usabilidad.

1. A Paper and Pencil
2. Concept Feedback
3. Chalkmark
4. Clickheat
5. ClickTale
6. Clixpy
7. Crazy Egg
8. Ethnio
9. Feng-GUI
10. Five Second Test
11. Feedback Army
12. Loop11
13. Mechanical Turk
14. Morae
15. Open Hallway
16. Silverback
17. Simple Mouse Tracking
18. Usabilla
19. UserFly
20. UserTesting.com
21. UserVue
22. Google Analytics
23. Google Website Optimizer
24. Website Grader

via: Useful Usability

Más Artículos

Usabilidad: No por ser más intuitivo y simple es mejor. ¿Y el aprendizaje?

10 consejos para un mejor sitio web ¿bibliotecario?

¿Cómo adapto un interfaz web para móvil?

La usabilidad del proceso final de compra

Políticos gallegos: Muy 2.0 y poco accesibles

Inclusión. Accesibilidad y Usabilidad web.