La usabilidad es uno de los factores más importantes a la hora de diseñar / utilizar un sitio web, para lograr que nuestro blog sea usable las mejoras diarias y el trabajo son determinantes, según mi experiencia me animo a escribir una lista de consejos para mejorar la Usabilidad de un blog:

1. Coloca a cada entrada la fecha de publicación. Ya lo había comentado en otra ocasión, es importante dejar constancia del día de la publicación, en especial para facilitarle la vida a las personas que llegan desde buscadores. El problema de no colocar la fecha es que cuando estamos leyendo la entrada no sabemos si es algo que ocurrio recientemente o una noticia antigua.

2. Separa los trackbacks de comentarios. Principalmente esta medida sirve para facilitar la lectura de los comentarios, cuando los retroenlaces se intercalan suele resultar bastante difícil seguir una discusión. En mi caso esto todavía no lo hice, principalmente porque todavía estoy buscando un diseño que me agrade para los comentarios, próximamente en Kabytes

3. Coloca de forma visible las opciones de suscripción. Esto es interesante, no les pasa que en ciertas ocasiones encuentran un blog interesante y no ven por ningún lado el botón de suscripción. Es importante destacarlo, no es fácil lograr suscripciones, si la persona se interesa en nuestro blog lo mejor es darle la mayor cantidad de facilidades posibles.

4. Facilita un archivo. El buscador de Wordpress no es justamente de lo mejor, a veces cuando ingreso a un blog a buscar una entrada que me intereso recuerdo el mes en que se publico aproximadamente, tener un archivo ayuda y mucho.

5. Coloca el buscador a la vista. Muchos bloggers optan por eliminar este campo, pero yo lo considero un error, como comentaba en el punto anterior si bien no es de lo mejor, es una herramienta mas para buscar entre todos los post las cosas que nos interesan. Otra opción es integrar la búsqueda de Google, en este blog lo vengo pensando desde hace un tiempo y muy probablemente lo haga.

6. Sal del closet. Un blog esta escrito por al menos una persona, es bueno darse a conocer, al principio este blog no tenia el famoso “acerca” y muchas personas me enviaron correos con la sugerencia de incorporarlo. A todos nos interesa saber más de las personas que leemos a diario.

7. Verifica los tiempos de carga. Nada mas molesto que la carga infinita, entrar a un blog a comentar y tener que esperar para que el sitio cargue es terrible, a veces es culpa del hosting pero otras tantas podemos reducir los tiempos de carga haciendo algunas cosas simples. A considerar: Es bueno que la carga sea completa, pero esto no es obligatorio, lo más importante es que se desplegué el contenido rápidamente, luego “detrás de escena” puede continuar la carga de elementos secundarios.

Manz escribió una muy buena entrada, con varios consejos para reducir el tiempo de carga de una web.

8. Evita llenar tu blog de banners que no sirven para nada. No ayuda para nada tener el footer o sidebar llego de botones de buscadores, mostrando tu pagerank, 30 sistemas de estadísticas distintos (encima muchas veces meten enlaces ocultos). Evita llenar tu blog de mini banners que distraen la atención. Si quieres llamar la atención procura que sea hacia el contenido.

9. Utiliza tu encabezado para remarcar cosas importantes. El header de un blog es una de los sectores “mas calientes”, hay que aprovecharlo, un buen ejemplo de esto es Punto geek que tras el rediseño aprovecho este sector para remarcar algunas secciones.

10. Remarca correctamente los enlaces. Es importante que los enlaces se diferencien del contenido y a simple vista. Nada más incomodo que leer un texto y tener que “escanearlo” con el mouse para ver donde están los enlaces.

11. Coloca un feed para los comentarios. Esto me lo hizo notar hace poco Neri y lo tengo que hacer en este blog. Algunas personas suelen seguir una conversación agregando el feed de comentarios a su lector, es interesante tener esta opción activada y a la vista.

12. Utiliza un tamaño para las tipografías de 10pt al menos. Esto es clásico de Nielsen, y una de las recomendaciones que suelo tener mas en cuenta, las letras tienen que tener un buen tamaño así evitamos forzar la vista de los visitantes.

13. Verifica que el contraste entre el texto y su contexto sea correcto. Los colores 2.0 quedan muy lindos, pero muchas veces usar colores “pasteles” para el texto no es buena idea, hay que verificar que el contraste entre fondo y texto en primer plano sea el correcto. Me encanta la combinación fondo blanco y letras negras, creo que es un clásico, pero no es regla, alcanza y sobra con verificar que el texto no produce cansancio visual.

14. Implementa la suscripción por email. Este punto lo debatimos mucho con varios amigos, en mi caso yo pensaba que las personas que se registran por email en muchas oportunidades lo hacen por impulso y no por un deseo claro de suscripción. Pero con el tiempo comprendí que muchos de los visitantes siguen utilizando el correo como medio para mantenerse actualizados, por lo tanto consejo: Habilita la suscripción por correo. Nikko de Xyberneticos tiene un diseño del formulario muy bueno.

15. Logra que tu blog sea valido W3C. No hay que confundirse, que tu blog sea valido para el W3C no significa que sea usable, significa que es accesible, dos cosas que van de la mano pero no son iguales. No obstante me parece buena practica molestarse por usar los estándares web, muchas veces sin querer terminamos aplicando conceptos usables en la aventura que significa validar nuestro código.

16. Utiliza URLs amigables. Muchas personas guardan las entradas en sus marcadores, o bien recuerdan haber leído algo hace unos días atrás y recurren al historial de su navegador. Tener urls amigables ayuda a identificar estas entradas con mucha facilidad.

17. No anules funciones para evitar que te copien. Algunas personas activan códigos Javascript como por ejemplo, para anular la opción derecha del mouse, pero la realidad es que si nos quieren copiar lo harán de alguna u otra forma, entonces no tiene sentido afectar a las personas que quieren copiar la entrada para guardarla en un borrador personal o para citar un fragmento en su blog.

18. Evita reinventar la rueda con tu diseño. Las personas “arrastran” desde siempre ciertos conocimientos, buenas y malas costumbres. Es por eso que nuestro diseño en la medida de lo posible tiene que tener una estructura clásica. Un encabezado, un sidebar, un footer, etc. Se puede “innovar” en cuestiones graficas, pero ciertos componentes deben existir si o si. Les recomiendo la lectura “Entendiendo el diseño web [ENG]”.

19. Que el logo o nombre de tu blog enlace la pagina principal. Muchas personas tienen la costumbre de volver a la pagina principal realizando clic en el logo o nombre del sitio.

20. Utiliza categorías descriptivas. No hay mucho mas que decir, el nombre de cada categoría debería permitir a las personas saber que tipo de contenido encontraran sin necesidad de ingresar para averiguarlo.

21. Precaución con las nubes de etiquetas. Esto es una opinión muy personal, creo que las nubes de tags suelen ser confusas en muchos casos, son beneficiosas si los enlaces que la componen no son abundantes y existe una clara diferencia entre los distintos tamaños de fuentes.

22. Utilizar iconos puede ser una buena idea. Los iconos, además de ser utilizados a nivel estético, tienen una fuerte influencia para describir o rotular algún componente de un blog o sitio web. Una muy buena implementación es la que hizo Hernan de Código Geek agregando un icono distinto a cada enlace dependiendo de lo que se trate.

23. Facilita las entradas relacionadas. Una buena manera de ofrecer más información a nuestros lectores y de una forma muy sencilla es brindar en cada entrada un apartado de entradas relacionadas. En mi caso intento colocarlas en forma manual dentro de cada post, aunque también tengo instalado el plugin para hacerlo de forma automática.

24. Diferencia cada entrada. La estructura de un blog es muy sencilla, pero en algunos casos el diseño dificulta diferenciar las entradas una de otras, seria una buena practica encontrar la forma de “separar” cada entrada, para esto podemos modificar el tamaño del titulo, el color, inclusive colocar una pequeña línea.

25. Permite navegar por páginas. En algunos blogs veo que los enlaces “Pagina anterior / Pagina siguiente” desaparecieron, pero esto resulta bastante incomodo cuando la persona que nos visita a diario quiere buscar una entrada que recuerda haberla visto el día anterior, etc.

Lectura extendida y recomendada:

• Nielsen y la usabilidad de los blogs
• 5 tips sobre usabilidad para tu blog

Blogs de usabilidad y accesibilidad recomendados:

• Usalo.es
• Estandares y accesibilidad

Recién mientras leía la entrada de mi amigo Milton sobre ¿Por qué no simplificar las cosas? en donde nos comentas de las instrucciones que vienen con la caja de Windows Vista para poder abrir la caja, algo que roza lo ridículo, recordé todos los ejemplos que existen en la web sobre sitios que tienen un gran éxito principalmente por lo simple que son, sin ir mas lejos Google es un exponente claro de esto.

Ahora mis 5 razones por las que simple es mejor:

Lo simple requiere menos aprendizaje por parte del visitante. Uno cuando ingresa a sitios como Google tiene muy claro lo que tiene que hacer, principalmente vemos una caja de búsqueda en donde claramente tendremos que colocar lo que queremos buscar, luego le damos a un botón y listo problema solucionado. No distraemos al visitante con ninguna imagen ni con explicaciones interminables.

Lo simple da la sensación de más velocidad. A mucha gente le ocurre lo mismo que a mi, ver algo simple da un aspecto de rápido, uno cuando ingresa a un sitio cargado de cosas piensa que de seguro tardara en navegarlo, muy probablemente sea verdad, un sitio simple consume menos recursos que uno complejo lleno de imágenes y de animaciones.

Simple no significa poco potente. Los sitios mas visitados del mundo en su mayoría son simples al extremo, eso no significa que se puedan lograr cosas muy buenas. Si un sitio es simple pero aporta todo lo que busca el visitante se transforma automáticamente en una herramienta indispensable.

Lo simple es fácil de recordar. Cuantos menos elementos en la pantalla mas fáciles de recordar, imaginemos nuestro sitio con un logo y solamente la información necesaria, es mucha mas sencillo crear una marca de fácil memorización que cargando infinidad de cosas confundiendo la percepción del usuario.

Ser simple es más flexible. Imaginemos que queremos hacer unas simples pruebas de usabilidad, no les parece mucho más sencilla hacerlas cuando tenemos menos objetos, una estructura sencilla que por el contrario algo abarrotado de cosas y de forma complicada desplegadas a lo largo de la pantalla.

Existen miles de razones para hacer las cosas lo mas simples posibles, son algunas de las que se me ocurrieron de seguro que muchos tendrán sus razones por las que preferir algo simple.

Hoy me estuve divirtiendo leyendo la tabla de compatibilidad CSS de las distintas versiones de Internet Explorer, algo que llamo mi atención y me causo mucha gracia es la proyección que Microsoft tiene con la versión final de IE 8, en donde supuestamente se acabaran los “parcialmente” compatible por un rotundo YES.

Creo que uno de los grandes problemas de IE es cuando es parcialmente compatible con ciertas propiedades CSS ahí es donde entran en juego los famosos hacks, a veces me parece que es preferible que algo no sea compatible por completo que lo sea a modo parcial, uno como desarrollador ¿como sabe que es parcial?

Ahora la tabla de compatibilidades si realmente es asi seria genial, pero sinceramente tengo muchas dudas que resulte, lo mas probable es cuando descarguemos el nuevo IE 8 veremos varios YES reemplazados por los odiados parcialmente.

En muy pocas oportunidades estoy tan de acuerdo con una lista elaborada por otra personas, principalmente por la simple razón que sobre gustos no hay nada escrito.

No obstante esta lista de sitios me parece brillante, simplemente listare los mismos sitios y pondré una pequeña reseña de lo que conozco del mismo. La verdad que de los 20 sitios puedo decir que al menos 15 tienen que ser cita obligatoria. información.

(Imagen bajo licencia CC - Steve Rhodes)

1- Alertbox: Current Issues in Web Usability

Persona que escucho alguna vez la palabra Usabilidad muy probablemente la escucho asociada a Jakob Nielsen’s para muchos un gurí en esta materia. A mi entender es una persona que sabe muchísimo y da excelentes consejos además de compartir estudios muy completos, aunque en su contra y como única pega diría que es un poco “taliban” en algunos aspectos. No obstante si te interesa la usabilidad es lectura obligatoria.

2- TheBestDesigns.com

Una galería de proyectos y diseños CSS si bien no es muy diferente al resto de las que ya conocemos tiene una forma y unos criterios de selección muy pero muy buenos. Como sugerencia les recomiendo también visitar a CSS Rand del que ya hablamos hace poco tiempo.

3- A List Apart

Que mas se puede decir de este sitio, realmente lo considero uno de los 10 mejores, su calidad es envidiable y en cada artículo podemos aprender algo nuevo. Hacen mucho hincapié en la web semántica, estándares web y todos los aspectos que hacen un sitio extraordinario, realmente consejos de elite. Altamente recomendable.

4- Getting Real by 37 Signals

Este sitio es en realidad un libro online que fue escrito por 37 signals, realmente muy buenos y para leer y releer varias veces.

5- Digg / Technology

En el canal tecnología de Digg podemos encontrar muchas veces las ultimas novedades o las ultimas librerías creadas por otras personas del mundo, listos para utilizar, una fuente de información realmente “viva”. En paralelo aquí tenemos el menéame principalmente que si utilizamos los tags podemos encontrar cosas muy buenas.

6- Web Design from Scratch

Este sitio no lo conocía, por lo que estuve mirando tiene muy buen aspecto ya que esta escrito a modo de guía muy pero muy completa, como punto negativo al menos lo que pude observar es la excesiva publicidad que tiene para comprar su ebook, pero bueno de solo aire el hombre no vive

7- Mootools

Mootools es un Framework que su principal razón de existir es simplificar nuestra vida cuando trabajamos con javascript además de estar muy orientado al trabajo con Ajax, algo que tiene muy bueno Mootools es su comunidad, en su foro podemos conversar sobre muchos aspectos que hacen a este framework uno de los mas utilizados. Por aquí ya habíamos comentado sobre una serie de tutoriales de mootools para los que están comenzando.

8- ReadWriteWeb

Otro sitio de cabecera para mi, no hay mucho que decir, es un conglomerado de artículos referentes al desarrollo web, de una calidad impresionante.

9- Zend Developer Zone

Mucha información sobre PHP, artículos muy completos y las últimas novedades respecto a las actualizaciones de este hermoso lenguaje.

10- Css Zen Garden

Una de las mejores ideas que existen para promocionar el uso de hojas de estilos, hace poco comentamos de sus hermanos. Ideal para aprender y buscar inspiración.

11- CSSplay: Experiments with Cascading Style Sheets

Una galería muy importante de trabajos realizados con CSS, realmente muy recomendable, aquí podemos encontrar en muchas oportunidades como realizar un mismo trabajo de distintas formas, algo que es indispensable para mejorar nuestras habilidades.

12- W3Schools Online Web Tutorials

Una de las principales bases de conocimiento para CSS, ideal para recordar conceptos olvidados y hondar en detalles.

13- Books24×7.com - ITPro Collection

Este sitio directamente no sabia que existía, es una especie de librería online, sinceramente no corresponde que este en la lista ya que es de pago, nada que ver con los ejemplos anteriores.

14- Drupal

La comunidad de Drupal es realmente muy importante, en ella podemos encontrar una gran variedad de programadores que pueden ayudarnos. Además una de las mejores formas de aprender es ir analizando el código de otros.

15- Webmonkey: The Web Developer’s Resource

Una gran colección de artículos para desarrolladores, lo mas curioso de este sitio es su aspecto retro que nos trae a la cabeza esos años que pasamos en la web.

16- Meyerweb.com: Eric’s Writing

Un guru del CSS, mucha información, hace poco hablamos de el, es el creador del CSS Reset que se podría decir que es el mas usado por los diseñadores.

17- 456 Berea Street

Otro blog que no conocía y ya esta en mi lector de feeds, mucha información, reviews de libros, css, estándares web y todas esas “cosas” que tanto nos gustan.

18- The Web Standards Project

Un sitio muy popular, promotor al cien por ciento de los estándares web, explican ventajas, desventajas, reducción de costos, muy bueno.

19- Fiftyfoureleven.com

Blog con artículos interesantes, no es muy distinto a otros que ya comentamos, pero siempre son buenos para sumar conocimientos.

20- SitePoint

Legendario, este sitio es ya como de la familia, el que ya tiene varios años en esto lo tiene que conocer, se podría decir que crecimos con el, siempre actualizado y con muy buena información.

Muchas veces uno insiste en la importancia de utilizar los estándares web, inclusive los grandes como Google lo recomiendan, hoy me puse a revisar que sitios populares pasaban el validador W3 y para mi sorpresa los resultados son cuanto menos decepcionantes.

“De los 100 sitios top de Alexa a nivel mundial solamente 11 validan”

Me llamo mucho la atención que justamente Google una empresa PRO accesibilidad tenga absolutamente todos sus productos “fuera de regla”.

En fin por suerte no toda la gente piensa igual que estos sitios en este aspecto y tenemos muy buenos ejemplos como la BBC que hasta tienen un compromiso por escrito sobre la usabilidad de su sitio web.

Hace mucho tiempo leí en Useit sobre la cantidad de personas que se necesitan para hacer una prueba de usabilidad que nos acerque lo máximo posible a solucionar cualquier problema que se presente, para mi sorpresa la respuesta fue de solo 5 personas.

Ahora si bien en la grafica podemos apreciar que el número “ideal” es 15, según Nielsen lo mejor es emplear el presupuesto en 3 pruebas de 5 personas cada una. Otra cosa que me llamo poderosamente la atención es que Nielsen cuenta que luego del primer grupo de 5 personas ya podían detectar más del 85% de los problemas.

Es muy interesante el tema de la usabilidad, al menos en mi caso siempre dio buenos resultados, aunque tengo que confesar que mis pruebas siempre fueron bastante precarias, ya que nunca contrate a un equipo de testers y siempre lo hice con personas cercanas a mi.

Mas información: Why You Only Need to Test With 5 Users

Recién mientras ingresaba a un sitio en el que tarde varios minutos en alcanzar la información que buscaba recordé la famosa regla de los 3 clicks y me pregunte si la misma seguiría vigente en la actualidad.

Para el que no la conoce este regla dice que cualquier persona que visite nuestro sitio debería alcanzar la información mas importante como máximo en tres clicks, obviamente que cuanto menos pasos sean necesarios mejor.

Esta regla fue una de las primeras que conocí (al menos que recuerde) cuando comenzaba a incursionar en la usabilidad web. Yo creo que sigue muy vigente actualmente, lo que habría que diferenciar bien es la buena implementación de la misma. De poco sirve cumplirla a raja tabla si terminamos haciendo la navegación de un sitio web completamente incomprensible, probablemente en ciertos casos sea mejor mas pasos y claros que pocos y confusos.

No obstante lo mas interesante de esta regla es el factor que comenzó a imprimir desde sus comienzos, la idea de hacer las cosas sencillas, practicas y ágiles, algo que cada día vemos mas y mas con la movida 2.0.

La regla de los 3 clics sigue siendo útil, inclusive se aplica mucho para cuestiones de posicionamiento a la hora de diagramar un esquema de rastreo en donde las arañas de los buscadores alcancen los contenidos de manera sencilla.

En todos los blogs que conocemos en su gran mayoría veremos que para llegar a la información no hacen falta más de tres clics.

Es una regla que sigue vigente, y me sigue resultando interesante, probablemente no por el enunciado en si, más bien porque a uno le coloca una presión de tratar de hacer cualquier proceso de manera sencilla, algo que en la actualidad es vital

Siguiendo un poco la línea del post anterior, me pregunto por que ninguna empresa invierte lo necesario para crear un traductor online como corresponde, hoy en día existen varios traductores online, no obstante ninguno es lo suficientemente bueno como para traducir una web y que el resultado sea entendible, ahora me pregunto, en una etapa en que la evolución web esta alcanzando niveles que eran insospechados hace años atrás, por que ninguna empresa invierte es una herramienta tan 1.0, los beneficios podrían ser enormes.

Imaginemos un traductor que cuente con una API que nos permite traducir nuestro sitio en dos o tres idiomas de forma instantánea, no tengo dudas que seria una verdadera bomba. Inclusive el servicio podría ser de pago y mucha gente lo utilizaría sin dudarlo.

Se me ocurren infinidad de formas de hacer redituable una herramienta así, y el potencial de mercado es enorme, y como todo no es dinero en la vida,  también veríamos como se incrementan en internet a velocidad exponencial los buenos contenidos, la web seria mucho mas accesible si eliminamos las barreras del idioma.

Otro punto a favor de una herramienta de traducción online fiable seria la posible adquisición de un grande en pocos meses, últimamente la tendencia o mejor dicho modelo de negocio de muchos es “que nos compre un gigante”.

En fin, no entiendo que tantas limitaciones de implementación puede tener un sistema de traducción confiable, me imagino que alguna empresa que cuenta con varios millones en caja lo puede llevar a la realidad.

Me gusta mucho leer sobre usabilidad, pero sinceramente es la primera vez que leo algo sobre la usabilidad en los videos juegos. Ya en otra oportunidad había comentado sobre la publicidad en video juegos un concepto que si bien se esta explotando de manera significativa en países como Estados Unidos, creo que es algo con mucho futuro para nuestro mercado.

En businessweek realizaron una guía de usabilidad en juegos, que me pareció muy buena y que deberían tener en cuenta todos los desarrolladores de video juegos y no solamente los que preparan sus juegos para plataformas online.

Existen infinidad de métodos para medir la relevancia de un sitio en buscadores, también existen formas de medir la popularidad, pero ¿como se puede medir la calidad?

Entiéndase calidad como un sitio en donde el visitante encuentra lo que busca.

Paginas vistas
Por ejemplo podríamos decir que las páginas vistas sirven para medir la calidad de un sitio, en teoría si un visitante ingresa por buscadores a una sección en especial y luego navega por 5 secciones mas esto quiere decir que captamos su atención. Puede que sea orientativo pero ¿que pasa si el sitio funciona con ajax? ahí ya las páginas vistas no indicarían nada, tampoco si la información que busca es muy precisa.

Tiempo de estadía:
Similar al caso anterior, si tenemos muchas visitas puede ser interesante, pero con un numero de estudio reducido una persona que se va a comer y deja la pagina abierta ya nos “patea” el tablero.

Numero de visitas:
Un buen SEO puede hacer maravillas y lograr muy buenas posiciones en los resultados de búsqueda, si recibimos muchas visitas desde los buscadores esto realmente no indica para nada que el sitio sea de calidad.

Ya analizamos tres medidas de las más populares y realmente no encontramos un punto en donde podemos decir que ese número refleja calidad.

¿Entonces que hacemos para saber si nuestro sitio es de calidad?
La cosa se pone cada vez mas difícil, si bien nosotros mismos podemos analizar fríamente y tratemos de dar nuestro punto de vista imparcial nunca podremos hacerlo, imagino que todo blogger piensa que su blog es de calidad (al menos lo que escribimos a conciencia e intentando hacerlo lo mejor posible).

Algunos factores que pueden indicar calidad:

Numero de suscriptores: Si alguien se suscribe quiere decir que el contenido le parece interesante, y no solamente estoy hablando de los feeds sino también de los viejos mailing, etc. Alguien que se anota libremente pare recibir las novedades de seguro que vio algo de calidad.

Retorno de visitantes: Si una persona vuelve y vuelve, tendrá que ver por que le intereso el sitio o le resulto útil, difícilmente nosotros volvemos a un sitio que nos pareció malo.

Bookmarks: En delicious, suelo guardar todo lo que me parece interesante. Si vemos que un sitio tiene miles de direcciones guardadas de seguro que algo de interés despierta. En Delicious o cualquier otro sistema similar la gente guarda lo que considera su Biblia de información.

Clase de lectores: Esto también es a tener en cuenta, si vemos un blog en donde los lectores opinan correctamente, se expresan de acuerdo al post, probablemente en ese sitio exista calidad, muchas veces los lectores son un reflejo del blog.

Todos estos puntos son altamente discutibles, creo que realmente lo único que puede ser un indicativo de calidad es un sondeo, tipo encuesta totalmente anónima, en donde las personas voten, si te gusto o no un sitio, nada más.

¿Cómo mides la calidad?