⁓ El usuario no se va a aprender tu sitio aunque te empeñes

Una de las frases más repetidas en este oficio es que hay que diseñar un sitio pensando en los buscadores, pero sobre todo diseñar para los usuarios. Esto último es la usabilidad y aunque parece obvio, en la web -y no sólo en ella-, se sigue diseñando contra el usuario.

Y es que hay que empezar por saber cómo es el usuario para poder diseñar pensando en él. Te presento al usuario:

- El usuario No tiene tiempo, no sabe informática, tecnología ni diseño web. El usuario no sabe inglés, No quiere probarlo todo, No quiere recibir órdenes, No quiere música, No quiere esforzarse, No tiene paciencia, No juega a las adivinanzas.

Y el usuario se deja influir, (si no, que se lo digan a Google).

Jakob Nielsen, (el padre de la Usabilidad) llamó la atención sobre este punto: Los visitantes pasan el 99% de su tiempo en otros sitios web. Sobre todo, los que han venido por el buscador, tienen otras nueve opciones a su disposición si no les gusta lo que ven.

Los usuarios cada vez tienen menos tiempo para comprar y quieren servicios completos pero sencillos y transparentes.

La mayoría prefiere sitios que equilibren el diseño y la sencillez.
El diseño debe ser armonioso y eficaz:

Combina creatividad y usabilidad eligiendo siempre la función sobre la forma.

En el anterior artículo te traje buenas herramientas para medir la usabilidad. Ahora te traigo una lista de control de usabilidad para una puesta a punto de tu sitio web:

⁓ Lista de control de usabilidad

• Equilibrio entre tecnología y necesidades del usuario. No dejes que la tecnología se interponga en la experiencia de usuario. Utiliza tecnologías compatibles, ligeras y sencillas. Muchas de las virguerías que encontramos en Flash, JS… etc se pueden hacer con HTML5 y CSS.
• Siempre que uses algo más allá de HTML, pruébalo en Internet Explorer.
• Optimiza la velocidad de carga de tu sitio. La rapidez es una ventaja que debe aprovecharse en el diseño de una tienda o sitio web. El usuario no espera, se va.
• Añade un vínculo bien visible a la página principal en todas las páginas del sitio.
• Vincula el logotipo a la página principal. Procura colocarlo arriba a la izquierda.
• Procura no utilizar más de siete opciones en tu menú de navegación. Hay que evitar a toda costa agobiar al usuario.
• Utiliza los conceptos estándar para las funciones estándar: "buscar" para las búsquedas, etc.
• Sé coherente, utiliza siempre la misma nomenclatura para las mismas cosas. Hay que evitar confundir al usuario.
• Reduce al mínimo el uso se términos extranjeros. Nuestro usuario no sabe idiomas.
• Evita la jerga técnica: términos informáticos o propios de internet.
• Adapta los textos a las características de tu sitio web.
• Utiliza un texto específico y descriptivo en los vínculos: evita cosas como "pinche aquí".
• Añade una descripción alt en las imágenes. Esto mejora la usabilidad, la accesibilidad y el SEO.
• Haz que las imágenes de los productos se puedan ampliar pulsándolas.
• Crea suficiente contraste entre el color del fondo y el del texto.
• Añade color de fondo a los div que llevan imagen de fondo. Olvidarlo es un error muy común. Para los usuarios que desactivan las imágenes, desaparece el contraste entre texto y fondo, convirtiéndose en texto ilegible.
• No engañes al usuario. Los vínculos deben llevar a donde prometen ir.
• Señala claramente los vínculos a archivos PDF como tal, y especifica su tamaño.
• Facilita la impresión de tus páginas, ofreciéndolo como opción.
• Ofrece tu contenido en otros formatos, como PDF o dispositivos móviles.
• Personaliza la página de error 404: transfórmala en algo humano y sensato.
• Resalta claramente todos los vínculos para que el usuario sepa que se pueden pulsar sin tener que investigarlos.
• Aumenta la zona de accion del vínculo para acertar a la primera: simpemente añadiendo padding alrededor del vínculo. (Esto es muy práctico y sobre todo para los teléfonos móviles).
• Pon un vínculo a tus datos de contacto (o los datos mismos) en un lugar bien visible en todas las páginas web del sitio.
• Añade una página con las indicaciones sobre la protección de datos en tu sitio web.
• Incluye un vínculo a tus datos legales en todas las páginas.
• Prueba todas las funciones en los principales navegadores.
• No lleves al usuario a otras páginas sin que ellos hagan nada. El usuario quiere tener el control.
• Música no, por favor.
• Procura que las aplicaciones den suficiente feedback al usuario. Muchas veces el usuario se encuentra ante una situación en la que no pasa nada, (sin saber que la operación se está realizando), y se va. Se evitaría con un simple: "operación en curso, espere un momento, por favor"
• Retroalimentación: incita al usuario a dejar su opinión. Esta es una útil prueba de usuario para medir la usabilidad de tu sitio web. Utiliza encuestas…

Usabilidad en la Tipografía:

• Una tipografía "sans-serif" facilita la lectura en la pantalla. Arial, Helvética y Verdana son compatibles con todos los navegadores y muy usadas. (Ahora Google ha sacado un directorio de fuentes).
• Un tamaño de fuente suficiente: de 9 a 16 píxel.
• Ancho de texto fijo y de 700 px. máximo.
• Un interlineado adecuado para una buena lectura: Estoy usando 1.65 em.
• Frases breves y concisas: que resuman los puntos clave y vayan al grano.
• Párrafos cortos, de menos de 5 líneas, a ser posible.
• Corrige los textos, por favor.
• Resalta en negrita los conceptos principales de los textos densos.
• Utiliza listas de boliche y numeradas:
• Utiliza títulos y subtítulos concisos y descriptivos.

Usabilidad en los formularios:

Pon especial atención en mejorar la usabilidad de los formularios. En este enlace tienes información completa y detallada. No obstante destaco algunos puntos importantes:

• Cambia el puntero del cursor en las etiquetas para avisar así de que hay un vínculo
• Limita tus formularios a lo realmente imprescindible.
• Asocia las tiquetas de formulario a los campos de formulario de entrada.
• Señala los campos que son obligatorios,
• Incluye mensajes de error adecuados.
• Envía automáticamente por e-mail el formulario rellenado como confirmación.

⁓ Conclusiones

Los servicios de internet tienen la gran ventaja de la inmediatez y la comodidad.
Pero para la mayoría de los usuarios usar un sitio web es algo con lo que quieren terminar cuanto antes para seguir con su vida.

A estas alturas ya te habrás percatado de que los usuarios esperan mucho de los sitios web y son muy poco tolerantes con los diseños poco funcionales: "Quieren Usabilidad"

Pues démosle Usabilidad en nuestras interfaces.

fuentes: "Usabilidad" de Jakob Nielsen

"Website Boosting" de Mario Fisher

Con estas herramientas podrás medir la usabilidad de tu tienda virtual o sitio web y descubrir que el hermoso jardín que para ti es tu web, es para otros una carrera de obstáculos.

⁓ herramientas de usabilidad

 

⁓ Navflow ⁓

Es un test de usabilidad para comprobar cómo los visitantes de una página web navegan por el contenido del sitio. Determina exactamente dónde el usuario hace clic y qué caminos sigue al navegar por el contenido, en unos minutos.
Puedes probar lo que quieras, desde sitios web a aplicaciones de escritorio, maquetas…
Sólo hay que subir los diseños de las diferentes páginas que componen una sesión típica de navegación en la web y decidir si queremos usar la comunidad de testeadores de navflow o mantener el proyecto privado para que podamos elegir nuestros propios usuarios.
Podemos participar de cualquier test existente en navflow.
Los resultados se muestran en forma de gráficos, de forma intuitiva y sencilla de entender, perfecto para que podamos tomar decisiones sobre alteraciones en la estructura del contenido.

⁓ UserPlus ⁓

Esta aplicación es una buena herramienta de usabilidad: permite registrar nuestros diseños y responder a una multitud de preguntas relacionadas con la usabilidad, obteniendo a cambio una puntuación que nos será de gran utilidad al presentar nuestro trabajo..
Muy útil como plataforma para tener tener bajo control los elementos clave de un buen diseño.
Hay que pedir una invitación para probarlo.

⁓ 20 herramientas para evaluar la usabilidad ⁓

En User Effect, Dr. Pete recoge 20 herramientas para evaluar la usabilidad, en un documento disponible en PDF.

Están clasificadas en 4 Tipos de herramientas de usabilidad:
I. Mapas de calor - Heat Mapping
Asignación de calor- Simples y accesibles herramientas de mapeo de calor que le permiten comprender visualmente el comportamiento del usuario: miden los clics de los visitantes y crean mapas visuales de la actividad del usuario por zonas..
Simuladores de rastreo ocular-
II. Pantalla de grabación – Screen Recording
Grabadores de pantalla – seguimiento de los visitantes a su sitio web para crear un video simulado de cada una de las sesiones de usuario.
III. Pruebas de usuarios -User Testing
Herramientas de pruebas de usuario – simula las pruebas tradicionales de usabilidad, basadas en tareas.
IV. Comentarios del usuario -User Feedback
Comentarios de los visitantes.

⁓ A destacar ClickHeat, ClickDensity o CrazyEgg ⁓

Con las que podemos obtener un buen informe de anlítica web, el Site Overlay (superposición de sitio): ver sobre la propia página el número de clicks que se han hecho en cada enlace.

Con estas herramientas también puedes segmentar los datos y saber qué hace un segmento de usuarios con respecto a otro. Por ejemplo, los clientes contra los que no lo son. O los que vienen por Adwords contra los que vienen por tráfico directo o por los buscadores.

Gemma Muñoz nos ofrece un interesante artículo sobre la relación directa de la usabilidad con la analítica web.

⁓ Protofluid ⁓

Una herramienta interesante para probar tu web en distintos tamaños y navegadores: Sólo tenemos que indicar la url, el dispositivo y el tamaño, mostrando un popup con el resultado.

Con Media queries para CSS3, trucos y consejos para su correcto uso. Una aplicación que se presenta como una aplicación web en HTML5 y CSS3 para prototipado.

Una buena herramienta para quien trabaja con diseño web.

 

⁓ Conclusiones ⁓

Una vez probadas estas herramientas de usabilidad en tu tienda o sitio web y entendidas las razones por las que los usuarios salen escopetados al primer intento, deberás pasar a la acción.

No hay problema, para ello te he preparado una lista de control de usabilidad con la que tu trabajo será pan comido.

Y en los resultados lo verás.

Venga! Anímate… todo se arrreglará. ;-))

Mejora las conversiones optimizando tus formularios.

Mejorar la usabilidad de los formularios en un sitio web puede tener un fuerte impacto positivo en el aumento de las tasas de conversión y maximizar el retorno de la inversión asociada a los programas de marketing.

Mi consejo fundamental para la optimización de los formularios es simple pero contundente: Adáptate al usuario en vez de esperar que sea él quien se adapte.
Los formularios son la parte más desagradable de la web. Aunque a algunos programadores parece que les encanta encandilar a sus clientes con sus conocimientos creando complicados y largos formularios que nos amargan el día a los usuarios y, hasta le hacen perder dinero y visitas a sus fascinados (o no) clientes.

A la hora de crear los formularios para un sitio web hay que tener mucha seriedad, minimalismo, claridad. Hay que facilitar al máximo las cosas al usuario y hacérselo agradable: mejorar la usabilidad de los formularios.

Una buena experiencia de usuario: A menudo se olvida que la interacción con el usuario es el paso que determinará en mayor medida el éxito o fracaso final.

La mejora de la usabilidad de los formularios incidirá positivamente en la tasa de conversión de tu sitio web.

Aquí te dejo unas buenas técnicas para mejorar la usabilidad de los formularios:

• Flexibilidad en los requisitos: Mantén los requerimientos de cómo se escribe la información lo más flexible posible. Por ejemplo, no obligues a poner los números de teléfono con un guión. Y, por favor siempre que haya algún tipo de restricción en los cuadros de entrada, añade la aclaración necesaria lo más cerca posible del cuadro.
• Establece confianza: Indica claramente qué es lo que vas hacer con la información personal del visitante. Declaraciones tranquilizadoras, como no hacer spam… Si es aplicable, puedes incluir iconos de confianza.
• Etiquetas claras: Las etiquetas de los campos de entrada deben ser claras en cuanto a cuál es la información real que se requiere.
• Etiquetas de texto sobre el cuadro de campo: Coloca cada etiqueta de texto encima del campo que presenta, en lugar de al lado.
• Longitud adecuada de los cuadros de entrada: Adapta la longitud de los cuadros de entrada a la longitud de los datos a introducir.
• Pide sólo la información necesaria: No requieras que los visitantes introduzcan información que no es absolutamente necesaria.
• Permitir la tabulación entre los campos: Permite a los visitantes reducir al mínimo el uso del ratón.
• Orden de tabulación apropiada: Haz que el orden de tabulación coincida con el orden en que los campos aparecen en la página.
• Instrucciones necesarias: Minimiza el uso de instrucciones. Utilízalas solamente cuando sea necesario. Cuanto más instrucciones, menos probabilidades de que sean leídas.
• Instrucciones sobre el campo: Cuando las instrucciones son necesarias, colócalas sobre el campo, no debajo.
• Establece expectativas claras: Es buena idea decir claramente a los visitantes que van a recibir, ya que hay más probabilidades de que proporcionen información adicional, si valoran lo que reciben a cambio de su información personal.
• Mensajes de error amigables: El mensaje de error debe ser amable y educado.
• Mensajes de error inmediatos y visibles: Que los mensajes de error aparezcan inmediatamente y se puedan reconocer fácilmente. Lo ideal es que aparezcan en rojo.
• Descripción clara del error: El mensaje de error debe describir exactamente cómo el visitante puede solucionar el problema.
• Cursor sobre el cuadro: El cursor debe aparecer, a ser posible, en el cuadro de entrada que hay que corregir.
• Conservar los datos con errores: Cuando se cometen errores, todos los datos introducidos se deberían preservar para que el usuario no tenga que llenar el formulario de nuevo.
• Proporciona un contacto o ayuda: Es útil para los mensajes de error proporcionar medios para que los usuarios se pongan en contacto con alguien si el error persiste.
• Elimina contenidos: Puedes eliminar los elementos estándar del sitio, incluida la navegación, y dejar sólo lo imprescindible en las páginas de formulario y un en lace para volver. Todo ello también mejora la usabilidad.
• Enlaza con la información de protección de datos: Enlaza a las páginas de política de privacidad.
• Página de verificación: Proporciona una pantalla para confirmar todos los datos introducidos antes de finalizar el proceso. Los datos introducidos incorrectamente y que no se pueden modificar, suelen originar costes en la empresa, fácilmente evitables con esta opción.
• Página de agradecimiento: Una vez que el formulario está completo, devuelve al usuario una página que indica que el proceso esté completo. Esto puede ir junto con lo anterior ,en la misma página.
• Alinea los campos verticalmente: Es una buena idea apilar los campos del formulario en sentido vertical en vez de horizontalmente. Más claridad.
• Menús desplegables, los justos: Si utilizas menús desplegables en tus formularios recuerda: adáptalos al usuario y no al revés. Por ejemplo, para España, en la selección de país ofrece dos opciones: España y Spain.
• Usa correctamente los botones de opción: No uses los botones de radio cuando hay más de una opción aceptable.
• Campos con valores preestablecidos: Ofrece a los usuarios campos con valores preestablecidos para reducir al mínimo el riesgo de recepción de datos en un formato incorrecto.
• Suficientes opciones: Las opciones deben ser lo suficientemente amplias como para que los visitantes no se quedan fuera de la gama ofrecida.
• Señala los campos obligatorios: Indica qué campos del formulario es obligatorio rellenar frente a aquéllos que son opcionales. Por ejemplo con un asterisco.

• Mantén el botón "enviar" cerca de los campos: El botón de envío debe mantenerse en las proximidades de los campos de entrada. Aunque parezca evidente, a veces ¡no hay quién lo encuentre!.
• Elimina ya el botón de "reset" o "cancelar": Sólo sirve para conseguir un cabreo si el usuario lo pulsa por error, (sobre todo si no has seguido estos consejos y el formulario es largo y tedioso)
• Botones que denoten acción: El botón debe contener la acción explícita: enviar, ir a, continuar,
• EL BOTÓN: Evita la confusión. Los usuarios somos felices cuando, acabado de rellenar un formulario podemos pulsar El Botón. No pongas otros botones que dificulten esa acción con indecisiones y dudas innecesarias.
• Incluye navegación de progreso: Los visitantes deben poder navegar de vuelta a las páginas previas para modificar la información introducida.
• Página de contacto fácil de encontrar: Pon el enlace bien visible, en el menú de navegación.
• Página de contacto con múltiples opciones de contacto: Formulario, Teléfono, Fax, Correo electrónico, Chat, y hasta Wave, Buzz, Skype…
• Formulario de contacto – Pide sólo la información esencial
• Información necesaria en página de contacto: – Atención al cliente, Consultas, Soporte técnico, Solicitudes de empleo.

La optimización de los formularios es realmente una piedra angular en la mejora de la conversión. Ahora podrás comprobarlo.

Espero que os hayan sido útiles estas recomendaciones y… ¡a mejorar las conversiones!

Google ha dejado de dar soporte a IE6 en Google Docs y Google Sites.

Los desarrolladores web están de enhorabuena. Por fin hay indicios de jubilación del odiado IE 6. El navegador de Microsoft empieza a caer, después de 8 años y medio de amarguras para codificar.

En agosto, Google ya dijo que frenaría el apoyo a IE 6 en su red social, Orkut. Y Digg dijo que abandonaría el apoyo pronto.

IE 6, es muy impopular entre los desarrolladores web y muchas compañías de tecnología, que se quejan de la baja seguridad, (que se lo digan a Google en china), falta de características y rendimiento lento para programas web basados en JavaScript.
Estas desventajas se unen a la utilización generalizada del sistema operativo Windows XP que incluye, (cosas de Microsoft).

En diciembre se produjeron los ataques cibernéticos a las cuentas de Gmail en China, al dejar google de censurar los resultados de búsqueda. Cuando se supo que una vulnerabilidad en IE 6, pudo provocar los ataques, Microsoft dijo que los usuarios debían actualizar a IE 8.

La semana pasada, Google anunció la interrupción de soporte para IE 6 en Google Docs, las aplicaciones Web que utilizan ampliamente JavaScript.

El gobierno inglés y francés apoyan a Google, y están animando a los usuarios a dejar de usar el navegador IE 6 por su vulnerabilidad:
El lunes, un desarrollador Web lanzó una petición instando al gobierno británico que deje de usar el IE 6 en la administración pública, -el primer ministro del Reino Unido tiene una página web oficial: number10.org.uk, donde se reciben peticiones-. Dicha petición iba firmada por más de 2.000 ciudadanos.

En respuesta, Microsoft ha dicho que no puede dejar de apoyar a IE 6 mientras se mantenga el apoyo a Windows XP, ya que el navegador viene con el sistema operativo.

Primeros indicios de la caída de IE 6:

En las estadísticas de uso de navegadores, Firefox y Chrome de Google, continúan por delante de Safari de Apple, pero el cambio más notable en el porcentaje de uso de navegador en enero, es que el tan vilipendaiado Internet Explorer 6 ya no es el más común.
Según las cifras de Net Applications sobre la cuota de consumo mensual de los navegadores, IE Firefox cayó un poco en comparación con diciembre – IE pasa desde 62.7 hasta 62.2 por ciento, y Firefox de 24.6 a 24.4 por ciento. Chrome aumentó 4,6 a 5,2 por ciento, y Safari permaneció al mismo nivel en un 4,5 por ciento.

IE 8 ya sobrepasa a IE 6 en el uso .
(Net Applications)

Al profundizar en las estadísticas por la versión, sin embargo, se observa que el IE 6 y IE 8 han cambiado de lugar. IE 6 se adelantó en diciembre, pero en enero, el IE 8 ha mantenido un sólido liderazgo en el 22,3 por ciento frente a un 20,1 para el IE 6. Firefox 3.5, está en 17,1 por ciento.

Cómo encontrar imágenes buenas y gratis para tu blog

Un problema frecuente es la dificultad de encontrar imágenes de alta calidad, con licencia para incluírlas en nuestros blogs. Por ello, Google ha llegado a un acuerdo con PicApp para añadir 10 millones de imágenes de archivo de alta calidad en el nuevo selector de imágenes de Knol. Este permite buscar las imágenes creativas y editoriales de PicApp en general, repositorios de archivo de alta calidad de imágenes, como de Getty images. El servicio y el uso de las imágenes es gratuito. En la versión española PicApp aún no está integrado en el buscador de imágenes del editor de Knols. Pero las puedes isertar de forma manual.

También puedes utilizar, en las mismas condiciones, las imágenes para tus publicaciones en un blog o sitio web.

PicApp

PicApp es un banco de imágenes de libre uso para los blogs y otras publicaciones online, donde simplemente introduciremos el término de búsqueda y obtendremos las imágenes deseadas para ser publicadas sin tener que pensar en temas de derechos de autor, ni copyright.
En PicApp encontrarás fotos editoriales o creativas de reconocidas agencias como Corbis o Getty Images y las puedes colocar en tu sitio web de manera gratuita y sin miedo a que te demanden por infringir algún copyright. Además, el material se actualiza contínuamente.

La imagen incluirá la descripción de la imagen, enlace la página y enlace a la galería de imágenes relacionadas de PicApp. Sí queremos podemos eliminar el enlace a la galería de PicApp, quitando del código HTML, correspondiente.

PicApp no requiere registro.

Photo Dropper

La calidad de algunas imágenes de Photo Dropper es impresionante.

Estas imágenes están bajo licencia Creative Commons, lo que significa que cualquier persona puede utilizarlo en su propio sitio web, siempre y cuando el fotógrafo se diga el autor y un enlace.

Flickr, tiene millones de esas fotos que puedes buscar y usar.

Si tienes un blog de WordPress se puede descargar el plugin Photo Dropper, que te permite buscar imágenes de calidad de forma rápida y sencilla para enviar a tu propio sitio, con enlaces de atribución. Se han unido la potencia de WordPress, Flickr y Creative Commons…

Recientemente Google introdujo mejoras en la búsqueda de imágenes:

Estas mejoras nos hacen más fácil la tarea de encontrar las imágenes que necesitamos:

Podemos introducir el término de búsqueda y filtrar los resultados por tamaños, por tipos de contenidos o incluso por colores dominantes, utilizando dos buscadores de imágenes similares. Google Image Swirl y Google Similar Images.

Google Image Swirl

Agrupa los resultados de la búsqueda en grupos de imágenes similares, relacionadas tanto por su apariencia como por la semántica de sus etiquetas, usando la tecnología de Picasa.

Al pulsar sobre una imagen, todas las imágenes de ese grupo se despliegan en forma de mapa conceptual acercándose más a las características de la imagen seleccionada.

El resultado es visualmente muy atractivo y elimina la ambigüedad en los resultados anteriores. Si no lo has probado te lo recomiendo.

Google Similar Images

Este buscador de imágenes similares, debajo de cada resultado, nos permite ver imágenes muy parecidas a la mostrada. Las imágenes se parecen mucho, cumpliendo casi los mismos patrones, e incluso en algunas de estas imágenes nos permitirán volver a buscar imágenes similares.

Aquí te dejo unos buenos enlaces a sitios relacionados con la búsqueda de imágenes gratis para tu blog:

Imágenes gratis para tu blog

Banco de Imágenes Gratis

32 sitios para descargar imágenes gratis

Consejos para hacer el contenido más adecuado para el SEO.

Estos pasos forman parte de una Lista de control SEO que utilizo de repaso para comprobar que no he olvidado nada importante sobre la optimización del posicionamiento en buscadores:

1. 7 básicos para la optimización en buscadores: SEO.
2. Contenido adecuado para el SEO
3. Uso adecuado de las palabras clave.
4. Enlaces óptimos para SEO.
5. Conseguir enlaces de calidad.
6. Herramientas SEO.
7. Bibliografía.

Espero que te sea de utilidad.