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
  

Compártelo

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

Compártelo

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

Compártelo

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

Compártelo

• Reordenando las tareas
• Realizando  tareas siempre desde la Home

Reta a darle forma matemática a  la curva de aprendizaje en una web.

Al hilo de esto…

¿Es más importante el tiempo que tardamos en aprender a realizar una tarea o el tiempo que podemos tardar en completarla? 

Al diseñar una web intentamos que los usuarios consigan realizar siempre la tarea que se propone.

Para ello diseñamos la navegación, los procesos, la iconografía de la forma más intuitiva, y de forma que no se pierdan en el proceso, sacrificando en muchos casos la velocidad de los procesos.

Pero a veces nos olvidamos de la capacidad de  aprendizaje que tiene el usuario. Un visitante que navega en nuestra web, por segunda o tercera vez para realizar una compra o utilizar un servicio, valorará un acceso que le permita en un solo paso seleccionar el producto que quiere elegir.

Las listas desplegables en los formularios, por ejemplo para categorías, que despliegan otras subcategorías y otras…. hasta llegar al producto, serán muy útiles si el usuario ya conoce el árbol y le evitará tener que ir navegando por sucesivas páginas.

Diseñando interfaces para aplicaciones de gestión, y observando a los usuarios, te das cuenta que para tareas repetitivas y cuyo aprendizaje es posible, los “botones mágicos” son muy apreciados. Botones, que sin saber cómo, graba en los pedidos, envía por correo a los clientes, avisa al jefe de departamento, suma en la cuenta de resultados etc… y todo sin dar ni un solo aviso, ni una sola explicación, y con una etiqueta tan explicativa como “Guardar”, es lo que el usuario mejor valora.

El uso de la teclas rápidas en programas como “Ctlr + C” y “Ctrl + V” no parecen muy intuitivas, sobre todo para la hispanohablantes, pero todos lo aprendemos y cuando un programa no funciona con ellas protestamos.

Compártelo

1. Promoción
2. Segmentación
3. Señales visuales
4. Una imagen vale más que mil palabras
5. Cajas de búsqueda
6. Versión de la web para dispositivos móviles
7. Retroalimentación
8. Redundancia
9. Mejora contínua
10. Bibliotecarios (Servicios)  24/7

Leyendo los consejos que nos da, y pensando en cualquier sitio web podemos observar que las directrices para hacer una web de calidad son similares para cualquier web y sólo hay que saber utilizar y explotar aquellas que son más beneficiosas para el objetivo de nuestro desarrollo.

Compártelo

La solución tiene que:

1. Mantener contenidos: No quieren tener que actualizar dos webs (cómodo para ellos)
2. Quieren que se mantenga la imagen de la web y de la entidad (nos permiten ciertas licencias)
3. Quieren que funciones todos los servicios  (flash?, ajax?, java?)

Por suerte:

1. La web está ya diseñada siguiendo los standards y con una hoja de estilos separada: Esto nos permitirá jugar con la imagen de manera más simple y adaptar aquello que nos interese sin tener que depender del código generado por el CMS
2. No utiliza Flash, ni javascript, ni hay popups:  Muchos móviles no soportan los embed y tienen problemas con plugins y scripts.
3. El gestor de contenidos tiene un sistema de plantillas: Lo que nos permitirá crear una plantilla adaptada si es necesario, sin cambiar para nada la actualización de contenidos.

¿Que hacemos entonces?

Tenemos claro que el interfaz gráfico es mucho más pequeño y las limitaciones son varias.

1. Ancho máximo 120px: Consideramos que el ancho máximo es 120px (a tener en cuenta en las imágenes sobre todo)
2. Rediseñamos la cabecera: Mantenemos el logo pero usamos una versión alargada, minimizando el espacio que ocupa.
3. Estructuramos los bloques: Evitamos crear varias columnas, de manera que la lectura sea totalmente lineal, y las líneas lo más largas posibles.
4. Cambiamos los mecanismos de navegación
   1. Utlizamos la miga de pan como elemento principal de navegación. Si es necesario creamos un menú con las mínimas opciones necesarias, pero siempre intentando que sea un línea.
   2. Movemos el menú principal al final de la página. Si alguien quiere ver toda la navegación, ahí la tiene.
5. Ajustamos las imágenes: Ponemos solamente las imprescindibles, y si se puede las optimizamos este medio (más pequeñas, mínimo peso)
6. Comprobamos las fuentes: las aumentamos para facilitar la lectura en las pantallas o las optimizamos probando en distintos navegadores móviles
7. Usamos medidas relativas:  Evitamos siempre medidas absolutas para permitir que según sea la pantalla móvil se adapte todo el contenido.
8. Evitamos el scroll horizontal

La W3C nos da más recomendaciones,  pero muchas de ellas ya se evitan si seguimos los estándares para la creación de páginas webs (tablas, frames, popups, plugins externos…)

• Test W3c para móviles

Me parece que este blog tiene mucho que mejorar para los móviles.

Compártelo

Los videoblogs de campaña quin.tv, RecargandoGalicia y Touriño.tv, muestran una serie de videos e imágenes con la que intentan transmitir en imagen lo que tradicionalmente escriben en el programa electoral. Intentan parecer cercanos, explicar de manera distinta sus propuestas sus iniciativas, parecer modernos,  estar “in”.

Intentan llegar a un público cada vez más grande, que utilizan internet como principal fuente de información. Intentan adaptarse en los formatos, en la formas, llegar a todo el mundo.

Pero hay algo que delata que no es un compromiso real con las nuevas tecnologías y con la democraticación de la información, ignoran que hay un público al que las nuevas tecnologías de la información pueden ayudarles a recibir su mensaje y que de otra forma no pueden, personas maiores que cada vez más se acercan a las nuevas tecnologías, personas con problemas de visión,  personas con problemas auditivos…No hacen el menor esfuerzo por llegar a todos los públicos.

No hablamos de soluciones técnicamente complejas o especialmente caras ni que exijan un esfuerzo de I+D

Hablamos de cosas tan simples como:

• subtitular los videos
• poner texto alternativos a los contenidos auditivos

Ya todos nos hemos acostumbrado a ver en los mítines políticos a personas que signan en la lengua de signos, subtítulos en los canales de televisión, pero en el tema de internet parece que nos queda esperar.

Estos mismos políticos son lo que luego regulan y pretenden penalizar a las empresas privadas que no cumplen las leyes nacionales accesibilidad a los contenidos de internet, o son los responsable que las webs de las administraciones públicas cumplan. Existe una guía internacional de acceso a los contenidos multimedia y una norma AEONOR de aplicación nacional que cualquiera puede consultar y por supuesto aplicar.

No es el objeto de este post realizar un estudio a fondo, y un análisis pormenorizado de la accesibilidad de estas webs porque salta a primera vista que no se ha tenido la sensibilidad de querer llegar de verdad a todos los públicos, no me merece la pena ni perder un segundo realizando un Test Automático.

Parece que padecen el “síndrome del microondas” con las nuevas tecnologías y la web 2.0, no hay cocina sin él, aunque no se sabe muy bien para que sirve.

PD: Sé que es un tema local y puntual pero me pareció ilustrativo.

Compártelo

Existe mucha literatura e información sobre tipo de test, metodologías, etc, pero se le da muy poca importancia al que en esencia es el protagonista: el usuario; éste es al fin y al cabo quien hace las “pruebas con usuarios reales” .

¿Vale cualquier persona para hacer un test?

La pregunta parece de perogrullo. Si hacemos un test de una web, cualquiera que pueda ser usuario podría hacerlo.

Esta afirmación nos lleva a la respuesta políticamente incorrecta. No vale cualquier persona. Sólo nos valen aquellas que puedan ser usuarios de nuestra web.

Yo no valdría para hacer un test real de una página japonesa, por ejemplo: http://www.2-u.co.jp/  Una prueba como: “¿Cuál es el teléfono de atención al cliente?”  Ni idea. ¿Pero sería capaz de comprar? ¡Casi! Me quedé en el formulario de compra. ¿Les importa a ellos?

Deberes: Intentar comprar tres botellas de vino para el cumpleaños de mi padre.

Por lo tanto no vale cualquier persona. Solo un posible usuario. El concepto “pruebas con usuarios reales” toma sentido.

¿Que características tiene que tener un “usuario real”?

El concepto básico es el de una muestra reprensentativa. Pero, ¿cuál es la muestra representativa?.

Por ejemplo, viendo el post de Meneame en el que muestra las visitas por navegadores  nos damos cuenta que esta web tiene un público un tanto especial: ¡60% usuarios de Firefox!

Es un factor más a tener en cuenta en este caso, además de los demográficos habituales: edad, nivel de estudios, sexo (¿machismo? ¿feminismo?), uso de internet, ¿compra en la competencia y no en la mía?…  Los grandes estadistas y sociólogos pueden seguramente introducir muchas más variables.

Conclusión: Es muy complicado hacerlo a la perfección, o lo que es lo mismo: muy caro.

Así que tendremos que valorar dos patrones básicos:

• Los usuarios (medios)  que tenemos, y
• Los usuarios (medios) que nos gustaría tener.

que casi nunca coinciden (normalmente queremos tener más y mejores). Ya que no van a ser muchos, pidamos:

• Que navegue por internet, pero no mucho.
• Que haya comprado algo por internet, pero solo alguna vez.
• Que sea capaz de pensar en voz alta mientra navega, pero que tenga las ideas claras.
• Que pueda comprar el producto que vendemos.
• Que esté familiarizado con la jerga básica de internet como el “carrito de la compra”.
• Que tenga una tarjeta de crédito a mano, y los números de seguridad de su banco.
• Que sea capaz de contarnos qué le pareció la web, pero sin meterse en detalles del estilo “ese menú no me gusta; debería ser más grande y color rojo y estar en la parte de la derecha” (¿Quién se supone que es el experto? ¿O el cliente siempre tiene la razón?)
• Que conozca los productos, pero que no sea un especialista en el sector.

¿Cuántos?

Nielsen habla de cinco usuarios y de un mínimo de dos, aunque con excepciones: si la web es muy grande, o si los públicos son muy diversos.

Conclusiones

1. Para conseguir los resultados óptimos:
   1.  La selección de la  muestra tiene que ser óptima.
   2. La persona que tiene que sacar conclusiones tiene que saber interpretar muy bien todos los datos
2. La frase típica que se le dice al usuario “estamos probando la web, no su capacidad” es incompleta. Siempre se pone a prueba el sistema web y al equipo que tiene que sacar conclusiones. La importancia de este equipo aumenta cuanto menor es la muestra.
3. Cualquier prueba que se haga, y en cualquier cantidad, es mejor que ninguna. Una prueba con usuario nos puede ayudar a descubrir detalles de usabilidad y detalles técnicos como un enlace roto, un proceso que no funciona correctamente, y eso tambien es usabilidad.

Compártelo