Mejorar fácilmente tu sitio Web

Tanto si eres un administrador, un desarrollador Web, un miembro de un equipo de Marketing o de Comunicaciones, o quizá un Web Master Freelance, habrás leído de diversas fuentes sobre el interés en los estándares Web. Habrás comprendido que los estándares son beneficiosos para tu sitio Web en términos de ahorro de costes, facilidad de gestión y aprovechamiento, y por lo tanto has decidido cambiar y emplear estándares en tu sitio Web. Y así validar y mejorar tu sitio Web.

Desde Grupo de Trabajo de Aseguramiento de la Calidad del W3C. Dónde nos enseña un método que es válido para sitios Web de cualquier dimensión; satisfará tus necesidades tanto si gestionas un sitio Web personal, de un pequeño negocio o de una gran corporación.

W3C

Este documento nos guíará a través de pasos individuales, cada uno de los cuales serás capaz de completar individualmente, desde el análisis de tu sitio Web actual hasta la organización de tu nuevo sitio Web. Cada uno de estos pasos ha sido diseñado de forma separada, y puede ser emprendido en diferentes ocasiones, diferentes niveles o por diferentes personas, con independencia de su nivel de conocimientos, pero de acuerdo a un flujo de trabajo Ordenados en los siguientes pasos:

  • Decide qué es lo que probarás
  • Analiza tu sitio Web
  • Organiza el trabajo
  • ¿Cómo puedes mejorar tu sitio?
  • Revisa
  • Mantén el nivel de calidad

Este documento o artículo seguramente muchos sepan de estas cosas, pero aquí también nos explica como hacerlo de forma organizada y con detalle, os dejo con un enlace para leer el artículo completo:

Leer artículo completo W3C

Persuabilidad Web: convierte usuarios en clientes

Antes de presentar el artículo quiero daros una breve introducción sobre la persuabilidad y su uso en la Web

¿Qué es la persuabilidad?

Persuabilidad es el término usado para designar la capacidad de una presencia online de llevar a la acción al usuario y convertirlo en suscriptor, lead o cliente.

Persuablidad Web

Aquí van 12 primeras ideas que nos hablan de que, más allá del testing multivariante debemos empezar a plantearnos para hacer nuestras webs más inteligentes:

  • Palabras claves con textos dinámicos que utilizan las palabras claves de nuestras campañas o las búsquedas naturales de nuestros usuarios para contextualizar los mensajes?
  • Contextualización de nuestra información según los datos geográficos del usuario. Por reconocimiento de IP podemos saber el país, región, ciudad, latitud y longitud desde la que navega el usuario. Deberíamos utilizar este recurso para adaptar nuestro discurso localmente.
  • Proactividad comercial en nuestros buscadores internos. Los buscadores internos son cada vez más utilizados por nuestros impacientes usuarios. Estos buscadores deberían permitirnos introducir promociones y campañas que nos permitieran maximizar nuestras posibilidades de cerrar un trato con nuestros clientes.
  • Reglas de negocio en función de criterios concretos (momento del día o del mes, situación del cliente, páginas visitadas,…). La tecnología ya nos permite hacer una microsegmentación en la que nadie del mundo del marketing nunca hubiera ni soñado.
  • Capas y niveles de contenidos distintos en función del tiempo de visita o las páginas visitas por nuestros usuarios. El comportamiento mismo del usuario nos permite condicionar los contenidos que mostramos y cómo debemos mostrarlos.
  • Creación de precios dinámicos en función de los niveles de venta, los ratios de conversión o las promociones que estemos desarrollando.
  • Customización de mensajes en función del comportamiento actual o histórico de nuestros usuarios. El behavioral targeting se está aplicando en redes publicitarias con muy buenos resultados y en muy poco tiempo será nuestro pan de cada día ya que las posibilidades de customizar mensajes en función de criterios de comportamiento son infinitas (al mismo tiempo que sumamente efectivas).
  • Ofertas de última hora para aquellos usuarios que estén abandonando nuestro site. Puede sonar un tanto agresivo, pero en determinados casos sumamente efectivo para darnos una última oportunidad para enganchar con el usuario que no está abandonando.
  • Envíos automatizados de mails según comportamiento en el site (p.e. abandono del site con producto en el carrito de compra). Hasta la fecha, hemos pensando demasiado en términos de página web y poco en el encaje inteligente y automatizado que debe tener el correo electrónico para desarrollar una relación más cercanas con nuestros usuarios. No nos referimos al tipíco newsletter con informaciones que el usuario no quiere leer con periodicidad establecida y ofertas que no siempre generan el interés que nos gustaría. Nos referimos a ponerle inteligencia push en determinados momentos: por ejemplo, enviando un recordatorio o promoción cuando nos hemos materializado una compra a pesar de haber introducido productos en nuestro carrito de la compra o cuando hemos realizado una búsqueda (de un vuelo o de un producto) y no hemos acabado realizando la compra y pasados unos días tenemos mejores condiciones o producto que al usuario podrían interesarle.
  • Personalización y configuración a medida de nuestros productos deseados. La creación de propuestas dinámicas (venta cruzada, condiciones especiales,…) en función de la personalización que el usuario esté realizando de nuestro producto puede también tener mucho sentido.
  • Relleno de campos automatizados para clientes reincidentes. La simplificación de pasos o trabajo parece ya de obligado cumplimiento para evitar abandonos por el camino.
  • Activación de chats proactivos en determinados momentos. La integración de una atención personalizada de manera proactiva cuando todo apunta que el usuario se ha quedado atascado podría ser sumamente rentable en determinadas páginas de nuestra presencia online.

Por último quiero dejaros con una ponencia de Ester Pallarès, experta en persuablidad Web. En la que nos muestra como funciona esto de la persuabilidad y como convertir a nuestros usuarios en clientes.

Ver ponencia Persuabilidad: convierte usuarios en clientes

Güeb 2.0, la guía definitiva.

Simpático artículo de Fuckowski en el que nos resume a su manera en que consiste la mil veces nombrada web 2.0

Esta es la defición de los servicios más usados actualmente:

Blogger: Es como Geocities pero para incompetentes tecnológicos; basta escribir un texto y pulsar un botón para darle la brasa al mundo. Paradójicamente, muchos de los usuarios que tuvieron que esperar a que la tecnología se hiciese más sencilla para poder tener páginas en internet, ahora se autodenominan expertos tecnólogos.

Gmail: Es básicamente un IRC, pero en modo offline: los usuarios charlan amigablemente en listas de correo y se ponen verdes por la espalda en mensajes privados.

Flickr: Sirve para que los usuarios de Blogger y Gmail publiquen fotos de sus pies y sus platos de comida.

Facebook: Una herramienta que sirve para saber si la persona con la que chateas tiene o no pareja y si está de buen ver.

Menéame: Un agregador de noticias donde, mediante complejos sistemas de votación y cálculo de karma, se seleccionan las noticias más interesantes y los comentarios más gilipollas.

Wikipedia: Un servicio de clasificación y almacenamiento de flame wars.

Twitter: Popular servicio de alarmas en tiempo real que nos avisa cuando se cae Gmail y cuando se levanta Enrique Dans.

Leer todo el artículo

TAW para las WCAG 2.0

Despues de la W3C haya publicado en Diciembre de 2008 las WCAG 2.0 se abren a los desarrolladores y promotores de sitios web la posibildiad de tener Webs tan accesibles como antes y al mismo tiempo más acorde con las nuevas tecnologías.

Logo TAW

Para “alcanzar” el nivel de accesibilidad de los portales sobre la nueva recomendación de W3C, se desarrollado una nueva versión del analizador de accesibilidad TAW. Actualmente es una beta, pero funciona bastante bien

Su uso es mucho más sencillo, ya que el informe que genera la herramienta ofrece cuatro tipos de vistas: Resumen, Vista Marcada, Detalle y Listado. Lo mejor es instalarlo o usarlo a través de su Web para comprobar su funcionamiento y sus características.

Acceder a la herramienta TAW

También podemos descargar el complemento para Firefox que actualmente verifica las pautas WCAG 1.0, hasta que se lance la versión TAW con las 2.0 oficial.

Test heurístico – parte 2: Como hacer un informe

En el primer artículo de esta serie, Test heurístico – parte 1: ¿Qué es y para que sirve?, se explicó de manera general que era un test heurístico, para que servía y las ventajas que tenía respecto a otros test de usabilidad. Debemos recordar que en la heurística, todo gira alrededor de los factores de evaluación, que son una lista de principios de usabilidad comúnmente aceptados que aplicaremos a nuestros análisis.

El resultado de un test heurístico, es un informe emitido por el evaluador en el que describe el problema analizado, las reglas específicas que son afectadas por su comportamiento y cómo podría mejorar el cumplimiento de ellas con un cambio en la interfaz. Hay que añadir que si bien esto último no es posible, sí será importante que los problemas encontrados sean anotados con el fin de intentar hacer las modificaciones posibles para aportar a su solución.

Así pues, en este artículo veremos que aspectos debe incluir un buen informe de evaluación heurística. Dicho informe está dividido en varias secciones:

Descripción del método a seguir:

En esta parte de la evaluación se debe hacer una breve descripción de las características del proceso realizado. Al fin y al cabo, el cliente tiene derecho a saber porque vale tanto el informe que le estamos confeccionando. Entre los elementos que hay que citar incluiremos los siguientes:

  • Fecha y hora de la evaluación.
  • Tipo de conexión a Internet, para descartar problemas de velocidad y optimización.
  • Datos sobre la forma y la puntuación de la evaluación.
  • Justificación de los diferentes factores utilizados en nuestra lista de comprobación

Criterios de evaluación

Es necesario que los analistas que la lleven a cabo el test, tengan un sistema de evaluación que permita interpretar y homologar los comentarios vertidos a cada factor evaluador.

Nuestra escala de evaluación irá a de 1 a 5:

  1. No funciona: Existen graves defectos en la estructura y diseño de la página. No se muestran los contenidos correctamente. El evaluador debe recomendar rehacer todo el sitio.
  2. Funciona pero no sirve: A pesar de que los contenidos del sitio se muestran de manera aceptable, la experiencia general y navegación no son correctas. Se debe recomendar cambiar la mayor parte del sitio.
  3. Funciona pero debe mejorar: El contenido y su distribución es de relativa calidad, pero es susceptible a mejoras. Se deben aportar mejoras al sitio.
  4. Cumple: El contenido evaluado es satisfactorio, a pesar de todo hay detalles que pueden mejorar. Se deben aportar mejoras al sitio.
  5. Es lo que el usuario busca: El contenido cumple o excede la expectativa del usuario.

Dichas notas deben ser puestas, tras analizar los factores de evaluación, que vamos creando alrededor de las diferentes áreas de un sitio web. Los factores se articulan alrededor de estas áreas:

  • Generales
  • Identidad e información
  • Lenguaje y redacción
  • Rotulado
  • Estructura y navegación
  • Lay – out de la página
  • Búsqueda
  • Elementos multimedia
  • Ayuda
  • Accesibilidad
  • Control y retroalimentación

Desarrollo del Informe

Puntuados los factores, el evaluador debe hacer un comentario que explique al usuario el estado real de su sitio, de está manera se podrán sacar conclusiones. Habrá que recopilar los aspectos positivos y negativos de cada factor evaluado. Con estos apuntes se hará más fácil la tarea de mejorar el sitio web.

Conclusión Final

En esta parte se entrega la recomendación final respecto de los problemas encontrados. En función de los resultados obtenidos con este informe, el cliente podrá decidir si es conveniente o no, hacer un análisis más detallado o cualquier otro tipo de inspección de usabilidad.

Número de expertos

Respecto del número de expertos que debe llevar a cabo dicho informe para que éste tenga validez, todo dependerá del costo-beneficio. Más evaluadores deberían ser usados en casos en que la usabilidad de una web sea crítica para la rentabilidad de la misma.

Con estos pequeños apuntes, nos podemos hacer una idea de cómo se hace un informe heurístico. En los siguientes artículos, veremos los principios heurísticos básicos que propuso Jakob Nielsen y confeccionaremos una detallada lista de factores para que podamos aplicarlos a nuestras propias páginas.

70 Tutoriales CSS3 y HTML5 (CSS3 & HTML5 Tutorials)

CSS 3 y HTML 5 son capaces de revolucionar la forma en la que se diseñan los sitios Web. Ambos incluyen nuevas características y tantas funciones que es imposible no empezar a ver como funcionan. La inclusión de soporte nativo para cosas como las esquinas redondeadas y diseño de columnas múltiples son sólo la punta del iceberg.

A continuación se presentan los recursos de 70 tutoriales y artículos para empezar con CSS3 y HTML5. Un listado que nos trae CSS Gallery Muchas de las técnicas analizadas son soportados en cierta medida en algunos algunos navegadores modernos (Safari y Firefox con el apoyo más amplio), para que puedas empezar de inmediato.

Ver 70 Tutoriales CSS3 y HTML5

Listado resumido del contenido del artículo de CSS 3 y HTML 5

  • Tutoriales CSS3 y Recursos
  • CSS3 y HTML 5 Combinación de Recursos
  • HTML 5 Recursos
  • Recursos adicionales

Convierte Internet Explorer en Google Chrome

Desde el blog de anieto2k nos llega una interesantes noticia. Google ha adoptado una estrategia para “acabar con Internet Explorer”, y lo ha echo con Chrome Frame.

Como explica en el vídeo, se trata de un plugin que nos permite convertir nuestro Internet Explorer en Google Chrome (el motor de renderizado). Mediante un tag html añadido en las páginas web activaremos o no el motor de Chrome para renderizar la página que estemos visitando.Con esto conseguiremos visualizar nuestra página exactamente igual que si fuera Google Chrome el que abre dicha página. Mostramos a continuación como implementar este curioso plugin:

HTML

Añadimos simplemente esta línea de código (meta) en el head de nuestro HTML.


Si Internet Explorer tiene instalado el plugin, hará que el motor de renderizado de HTML empleado por Google Chrome se encargue de procesar la página.
Podemos detectar si el plugin está instalado de la siguiente forma:



Este código nos permite comprobar si el plugin está instalado y ofrecer al usuario la posibilidad de instalarlo.

Este tipo de cosas (Chrome Frame) hace que Google Chrome sea cada vez más usado entre los usuarios

Fuente: anieto2k

Formularios Accesibles según WCAG 2.0

Olga Carreras, nos explica como crear y auditar formularios partiendo de las pautas WCAG 2.0 en dónde nos proporciona una serie de documentos que facilitan la a evaluación de la accesibilidad de los formularios de acuerdo con los criterios definidos en las WCAG 2.0:

  • Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles
  • Guía rápida de normas de accesibilidad WCAG 2.0 para formularios
  • Checklist para validar formularios de acuerdo con las WCAG 2.0
  • Ejemplo de formulario usable y accesible
  • Documentación de interés

En las nuevas pautas nos daremos cuenta de que, exiten muchas técnicas (Techniques for WCAG 2.0) referidas a los formularios.

Ver artículo: Formularios Accesibles según las WCAG 2.0

Las páginas que validan no posicionan mejor

Una cosa que practicamente ya se sabía. Según Google las páginas que validan XHTML/HTML no tienen ninguna ventaja sobre las que no. Ya que el 99% de las páginas que hay en la red no validan.

Pero claro, por optimización se supone que será mejor que valide, ya que normalmente el código que valida suele tener mejor marcado semántico y por lo tanto mejor indexación. Os dejo con el vídeo en donde Matt Cutts explica la respuesta a la pregunta ¿Posicionan mejor las páginas que validan?:

Como dice Matt Cutts, de momento solo sirve para el interés de tu propia página. Cuando se sirven millones de páginas por segundo, hasta el más mínimo bit cuenta. De todas maneras no tenemos que pensar tan solo en que posicione mejor o no nuestra Web en Google, sino en la optimización del código que desarrollamos.

Referencia: adseok

Estudio de Usabilidad Móvil de Jacob Nielsen

Jacob Nielsen, experto en estudios de usabilidad, ha realizado un estudio de usabilidad sobre el uso de la Web móvil en general, con 48 participantes en los EE.UU. y Reino Unido. Se realizó una revisión de diseño de 20 sitios Web, con 6 teléfonos: un teléfono móvil de pantalla táctil, tres teléfonos inteligentes (smartphones) diferentes, y dos teléfonos de contacto diferentes.

Usabilidad Web Móvil

El estudio revela que el uso de la Web en un teléfono móvil varía dependiendo de las características del dispositivo que se use. Como era de esperar, se descubrió que los sitios diseñados específicamente para su uso en un teléfono móvil rinde sustancialmente mejor, que los “sitios completos” y no adaptados para ello. Cosa que debemos tener muy en cuenta para nuestros proyectos Web.

Nielsen también en comparación con un estudio del año 2000. Las mismas tareas que llevan más tiempo a hacer hoy, que los que lo hicieron en el año 2000 en un teléfono WAP. Sugiere que la razón principal es que en aquel entonces, la web móvil era un “jardín cercado”, limitado, pero relativamente simple, mientras que hoy la Web es más abierta en los teléfonos móviles. Y la gente lo que necesita es ir a un motor de búsqueda y no perder tiempo en introducir y buscar una palabra, debido a los tiempos de carga para buscar una respuesta.

Como se ha comentado, con respecto al año 2000 la usabilidad Web en móviles no ha progresado, sobre todo en los tiempos de espera para ver los contenidos que buscas y teniendo en cuenta que las conexiones a Internet son mucho más rapidas que hace 9 años. Pero poco a poco se piensa mas en el diseño Web para Móvil, ya que es el futuro de la Web.

Las pantallas grandes y la manipulación directa tiene un gran impacto en la usabilidad.

Como era de esperar, entre más grande sea la pantalla, mejor será la experiencia del usuario al acceder a sitios Web. A continuación os dejo con el promedio de exito en estos dispositivo:

  • Teléfonos móviles de contacto 38%
  • Smartphones 55%
  • Teléfonos de pantalla táctil 75%

Con estos números, el consejo para los consumidores es fácil: comprar un teléfono de contacto si los sitios Web que están utilizando son importantes para ellos.

El consejo para los Desarrolladores Web es más difícil. Los teléfonos de uso tienen una mejor facilidad de uso, pero ¿realmente se usa para navegar, lo suficiente como para tenerlos en cuenta?. Otra posibilidad es centrarse en los usuarios de teléfonos smartphone y teléfonos táctiles que son más propensos a navegar por la Web.

Fuente: Mobile Usability