RSS
 

Archive for the ‘Usabilidad’ Category

10 buenas ideas para tu blog sacadas de grandes blogs

04 May

Origen del post

Los llamados top blogs o grandes blogs son aquellos que vemos siempre primeros en los principales rankings. Y si bien no podemos llegar a ser como ellos en un día, al menos miremos que ideas nos pueden servir para nuestro blog.

Lo común y lo no común

Además de las características predefinidas por las estructuras de los blogs como colocar los tags al final de los posts, un sencillo buscador y el blogroll en el sidebar o en el footer, la mayoría de blogs seguimos esquemas muy similares. Muchos somos los que tenemos posts relacionados al final de cada post y top comentaristas en el sidebar. Otros ponen posts incompletos en la portada, estadísticas muy variadas en el sidebar, las categorías o páginas como un menú, nubes de tags, paginación numérica, un footer tamaño gigante para poner lo que no pueden o no quieren en el sidebar y un largo etcétera.
En este juego de plugins y widgets donde modificamos posts, sidebar y footer, muchas veces encontramos que la originalidad se ha perdido. No creo que hoy en día alguien se crea único por tener en su sidebar un buscador de Google y un traductor de su blog a otros idiomas. Ahora más que nunca las herramientas están más a la mano y muchos son los blogs que te ayudan a usarlas.
Bajo este contexto, lo común es eso común y lo poco común es lo que debemos buscar para realmente personalizar nuestro blog y hacerlo especial.

<!--more-->

10 ideas sacadas de top blogs

Esta lista está hecha de las cosas menos comunes que he encontrado, lo cual no necesariamente implica que sean los primeros ni los únicos en haberlas aplicado.
Para ver los ejemplos y mayores preguntas sobre su funcionamiento, dirigirse a los blogs enlazados :roll:

  1. Microsiervos. Me gusta la sección que tienen en el pre-footer, llamada Enlaces de otras áreas temáticas microsiervas, donde en un par de categorías: Internet y Ciencia, aparecen enlaces a otros blogs fuentes de sus posts. Esta es una forma interesante de Link Love.
  2. Enrique Dans. Y muchos se preguntarán, que punto es rescatable de este blog?. Bueno, es interesante la forma en que ha logrado fusionar su identidad con la de su blog. Nada más miren la cabecera con su foto, las fotos de flicker, fotos suyas en los posts, sus artículos tan personales, es decir que si bien es un blog de tecnología no lo ha despersonalizado para nada. Al contrario, su sidebar dice mis fotos, mis fuentes diarias, cosas que leo, etc.
    Lo que se logra con esto es que cuando la gente entre a su blog, no vea un blog, sino a su persona misma. Esto le ha válido para tener muchos seguidores, aunque también algunos detractores.
  3. Mangas Verdes. Terminando cada post tiene los posts publicados hace exactamente un año, lo cual despierta la curiosidad de los lectores y reutiliza artículos que podrían quedar en el olvido. Esto es previo y complementario a los post relacionados que pone al final.
  4. Mangas Verdes. Después de los post del año anterior, se encuentra un buscador de posts por fecha, algo que normalmente no encontramos en un blog y que puede resultar muy útil.
  5. Mangas Verdes. Después del buscador de fechas, aparece una lista de las cuentas de Twitter que han twiteado el post actual, dando la posibilidad de enviarlo desde allí mismo. Esta opción es buenísima para obtener promoción en Twitter por parte de nuestros seguidores a cambio de la promoción de su cuenta en nuestro post. Muy buena idea.
  6. Mangas Verdes. En los comentarios, generar un enlace al último post del blogger que comenta. Esto implica que a cambio de un comentario, los demás lectores pueden fisgonear sobre lo último que ha escrito el comentarista y decidir si les interesa. Si bien, he visto esta modalidad en algún otro blog, sigue siendo una práctica muy poco utilizada.
  7. Loogic. Una sección de videos, donde agrega todos los videos que considera de interés para sus lectores y así se ahorra hacer posts sobre videos. Además los lectores al saber que existe dicha sección la visitarán con regularidad. Para esto se usa una lista de reproducción que se puede crear y administrar muy fácilmente en youtube.
  8. Martin Varsavky. Poner en portada y en la parte superior principal, las secciones de los más recientes y los más comentados. Algo muy elemental que siempre se pone en el sidebar y que pocos revisan, pero al ponerlo en el primer lugar visible aumenta las probabilidades de que el lector encuentre algo que le interese e incluso puede que abra varias pestañas. Usado por pocos.
  9. aNieto2K. Atentos a esto: miniposts semianónimos. Esta interesantísima forma de presentar posts, consiste en hacer un post en el que simplemente queremos difundir algún artículo interesante encontrado por ahí, pero que no da para un post entero. Entonces hacemos un minipost que aparentemente no tiene título pero sí lo tiene cuando accedemos a él(#) sólo que no se muestra en la portada. Simplemente genial.
  10. 86400. Un elemento distractor en la parte superior justo debajo de la cabecera. Este mensajito ingenioso no sólo llama la atención :eek: y distingue su blog sino que también explica porque el nombre numérico de su blog.

Fuente: tensaiweb
http://tensaiweb.info/blog/10-buenas-ideas-para-tu-blog-sacadas-de-grandes-blogs/

SocialTwist Tell-a-Friend
 

¿Cómo hacer los textos más fáciles de leer?

22 Feb

Cuando se escribe, en ocasiones podemos tener la falsa creencia que las personas que leen nuestra información tienen conocimientos parecidos a los nuestros, y ésto no siempre es así, y sobre todo si lo que pretendemos es llegar al mayor número posible de lectores o usuarios (objetivo del 99.9% de los sitios web).

Esta claro que si nuestro Web trata de una temática específica es difícil hacer que la lectura sea fácil para cualquier persona. En mi caso concreto, ya no puedo tratar de explicar técnicamente como hacer una imagen accesible a una persona que no tiene conocimientos de html o de lenguajes de programación; pero si podría explicarle los beneficios que supone hacerlo y cual va a ser su resultado, porque quizás ésto si lo entienda todo el mundo.

Por tanto, la regla principal a la hora de redactar textos es que nos abstraigamos y nos pongamos en la piel de un usuario con los conocimientos más básicos posibles.

En nuestro ejemplo de la imagen accesible. Si yo fuera un usuario sin conocimientos de HTML no podría escribir algo así:

“Para hacer una imagen accesible debe usar el atributo alt de la etiqueta html img…”

No podría escribirlo porque sencillamente no tengo esos conocimientos. Pues eso es lo que nos vamos a encontrar si escribimos algo así, que sólo lo van a entender aquellas personas que tengan conocimientos HTML, el resto posiblemente se aburran y no vuelvan a visitar nuestro sitio Web porque se han dado cuenta de que no hay información que a ellos les interesa.

En cambio, si para tratar el tema de las imágenes accesibles escribo algo como ésto:

“Mediante la inserción de una breve descripción (alt) a la imagen conseguimos que cualquier persona pueda comprender la información transmitida por esa imagen…”

Un usuario con conocimientos en html, sabrá que existe una etiqueta img y que si usa su atributo alt para colocar la breve descripción está haciendo la imagen accesible. Por otra parte, otro usuario sin conocimientos html, sólo se va a quedar que es posible hacer una imagen accesible para cualquier persona, la forma de hacerlo no sabe cuál es, pero da igual si tampoco tiene conocimientos html, pero lo importante es que se le puede pasar una breve descripción a la imagen y de esta forma cualquier persona comprendería la información de esa imagen.

Según mi opinión, esta regla fundamental puede agrupar el conjunto de aspectos que hay que tener en cuenta a la hora de redactar textos. Algunos de esos aspectos pueden ser:

  1. Usar un lenguaje claro y conciso.
  2. Transmitir en cada párrafo una sola idea.
  3. No abusar de las sentencias en mayúscula.
  4. Usar un lenguaje familiar y cercano.
  5. No abusar de  palabras pertenecientes a una determinada jerga.
  6. Hay que usar listas cuando sea necesario.
  7. Y por supuesto, utilizar una ortografía y gramática correcta.

Además, no se nos puede olvidar, que las Guías de Accesibilidad del Contenido Web nos exigen que los textos de los sitios Web sean legibles.

¿Pero esto de la legibilidad de los textos puede resultar un tanto subjetivo?Pues puede ser, pero existen diferentes algoritmos que nos miden la legibilidad de nuestros textos. Por ejemplo, uno de los que más me gustan y es más conocido (para textos en español) es el de Huerta Reading Ease. Para usarlo existe una herramienta llamada TxReadability que nos calcula la legibilidad de nuestros textos. Su puntuación va de 0 a 100, y se estima que se necesitan valores por encima de 60 para considerar que un texto es suficientemente legible.

Por cierto, este texto completo tiene una puntuación de 80.39 (Fácil de leer)

fuente: http://www.mqaccesibilidad.com

SocialTwist Tell-a-Friend
 

Escribir para la web

02 Jul

La primera recomendación es hacer el texto tan claro y conciso como sea posible; es decir, reduzca la cantidad de texto eliminando las palabras que no se necesitan.

Una segunda recomendación debe ser convertir la disposición del texto a un formato que sea más “agradable”.

Por ejemplo, las listas y las tablas con “bulleted” o numeradas se pueden hojear mucho más rápidamente que si alineamos el texto tradicional.

Listas de formato, texto del bloque, y tablas

Los títulos de los menúes y los artículos de menú se deben ajustar a lformato, usando las letras mayusculas y minusculas. Los sustantivos, los pronombres, los verbos, los adjetivos, y los adverbios deben comenzar con una mayúscula, mientras que las conjunciones y los artículos deben ser todo minúsculas.

Las listas tienen la ventaja de atraer el ojo del usuario. El único problema significativo de la utilidad de listas es la dificultad de interpretar las listas que se jerarquizan dentro de otras listas, evite hacer esto en la medida que sea posible.

Las tablas son una manera extremadamente útil de transportar el material en espacio muy pequeño, y de una manera que atraiga la atención del usuario.

Incluya cualidades que mejoren el funcionamiento y utilidad de la tabla. Las cualidades explícitas del tamaño aceleran las tablas dramáticamente, puesto que el browser no tiene que analizar el texto para determinarse cómo deben ser las columnas de anchas.

Utilice la ANCHURA y la ALTURA, en las especificaciones en ambos aspectos de la TABLA, y para todas las especificaciones del TD, en porcentajes.

También recuerde que las tablas complejas pueden tardar más tiempo en descargarse. Para mejorar funcionamiento y descarga, parta el contenido en tablas múltiples, más simples.

Mejorar la accesibilidad del web

Lo más importante que usted puede hacer para mejorar la accesibilidad del texto es utilizar etiquetas del estilo del HTML para identificar títulos.

Los “navegadores de Voz” exploran el Web buscando títulos y referencias para ayudar al usuario a orientarse y a ganar una sinopsis del contenido de la página.

Otra ayuda a la accesibilidad es utilizar texto en vez de imagenes donde sea posible. Los textos tienen la ventaja agregada de cargar más rápidamente que las imágenes.

Autor: Emilio Cercas (entraenlared.com)
fuente: http://www.webtaller.com

SocialTwist Tell-a-Friend
 

Usabilidad y analítica Web

26 May

Qué es la analítica web? La analítica web consiste en grabar y analizar los datos de navegación de los usuarios en un sitio web. En un primer momento, se utilizaban los datos grabados en los logs de los servidores. Actualmente, la mayoría de las herramientas de analítica web funcionan mediante un código javascript que se inserta en el pie de página, y que recoge los datos que nos interesen para enviarlos a una base de datos que posteriormente podremos consultar.
Las herramientas profesionales más conocidas son:

  • Google Analytics
  • Omniture SiteCatalyst
  • XiTi
  • Nedstat
  • Visual Sciences
  • WebTrends
  • ClickTracks
  • Clickdensity

¿Qué mide la analítica web? Las principales medidas (métricas) de cualquier herramienta de analítica web son:

  • Páginas vistas
  • Usuarios Únicos
  • Visitas
  • Tiempo de navegación

Otros datos que manejan algunas herramientas de analítica web son:

  • datos de clicks (“clickstream”) que permiten reconstruir las rutas de navegación de los usuarios así como dibujar “mapas de calor” sobre una página, mostrando los elementos con más clicks
  • euros (por ejemplo, en un sitio de comercio electrónico, el importe de una compra; en un sitio de contenido, el valor de un click en un anuncio o de la impresión de un banner)
  • orígenes del tráfico: es decir, los sitios web que nos envían visitas, así como las palabras clave que los usuarios utilizan en los buscadores para llegar a nuestra web
  • páginas de entrada: es decir, la página por la que un usuario entra en nuestro sitio
  • páginas de salida: es decir, la página desde la cual un usuario abandona nuestro sitio
  • eventos del sitio web: por ejemplo, número de usuarios que se registran para recibir un newsletter, número de usuarios que hacen una búsqueda, número de formularios enviados, etc.
  • abandono de formularios: número de veces que un formulario se empieza a rellenar y se abandona, así como el campo en el que se abandona el formulario

Analítica web y Usabilidad Existen muchas técnicas y procedimientos que nos permiten aprovechar los datos recolectados por una herramienta de analítica web a fin de mejorar la usabilidad de un sitio web. Nos centraremos en los siguientes puntos:

  • ClickMap
  • A/B Testing
  • Análisis de formularios
  • Rutas de navegación
  • ClickMap El “clickmap” (mapa de clics) es aparentemente parecido a los mapas de calor del 2eye tracking”, pero en lugar de mostrarnos dónde miran los usuarios, nos muestra dónde hacen clic los usuarios.
    Algunas versiones del “clickmap” sólo muestran datos de clics en las zonas clicables (links, botones), como es al caso de la funcionalidad llamada “site overlay” de Google Analytics.
    Otras herramientas como Clickdensity, sin embargo, son capaces de mostrar datos de clic en cualquier zona de la pantalla, independientemente de si tiene un link o no (os recomiendo que probéis la demo de Clickdensity, vale la pena)

    Finalmente, herramientas como Omniture SiteCatalyst pueden mostrar los ingresos que genera cada clic en cada elemento de la página. Además, es capaz de mostrar datos en tiempo real.
    La utilidad del mapa de clics es evidente: de un vistazo, podemos ver dónde clican los usuarios en una pantalla determinada, y rápidamente actuar para mejorarla en tres aspectos principales:

    • Visibilidad y posicionamiento de links y botones de la página
    • Elementos de la página que confunden al usuario: aquellas zonas de la página en donde hay muchos clics, a pesar de que no son clicables
    • Elementos de la página más “rentables”: no está directamente relacionado con la usabilidad, pero normalmente querremos dar más visibilidad a aquellos elementos más rentables, así como investigar por qué ciertos elementos de la página no son tan rentables como esperaríamos

    A/B Testing El A/B Testing es de utilidad cuando dudamos entre dos diseños para una misma página. Lo que haremos es colocar ambas versiones de la página en el servidor, y utilizar una herramienta de analítica como Omniture SiteCatalyst o Google Optimizer para comparar los resultados de ambas páginas. Por ejemplo, podremos comparar:

    • Ratios de conversión del objetivo de la página: por ejemplo, si el objetivo de la página es que el usuario rellene un formulario, compararemos el número de usuarios que rellenan el formulario en cada versión de la página
    • Ratio de abandono: si el objetivo de la página es invitar al usuario a moverse por el sitio web, podremos comparar los ratios de abandono de las dos versiones de la página

    Así mismo, el A/B Testing lo podemos utilizar para comparar el resultado de una misma página en periodos de tiempo distintos, por ejemplo:

    • antes de aplicar un rediseño a la página
    • el día después de subir la página rediseñada
    • una semana después
    • un mes después

    Podremos así sacar conclusiones acerca de:

    • El éxito o fracaso del rediseño, según si se cumplen mejor o peor los objetivos de la página
    • El tiempo de aprendizaje de los usuarios: ¿cuánto tiempo tardan los usuarios en adaptarse a un nuevo diseño de página?

    Análisis de formularios El análisis de formularios consiste en analizar el número de veces que los usuarios dejan de rellenar un formulario en un campo concreto.
    Por ejemplo, una web para la que trabajé descubrió que, en el formulario de introducción de los datos de la tarjeta de crédito, un 0,2% de los usuarios dejaban de rellenar el formulario en el momento en que se les pedía marcar la casilla para suscribirse al newsletter de la empresa. No era obligatorio, pero lo parecía, y lo más grave es que los usuarios ya habían introducido los datos de su tarjeta de crédito (es decir, habíamos logrado convencerlos para comprar), y sin embargo abandonaban.
    Es muy difícil detectar este tipo de cosas en un test de usuarios, puesto que afectan a un porcentaje de usuarios muy pequeño (a pesar de que en el ejemplo anterior, un 0.2% significaba una media de 3 compras menos por día, es decir unos 6000 euros al mes, cantidad nada despreciable!)
    Así mismo, el análisis de formularios permite detectar fallos en:

    • el vocabulario que utilizamos para definir ciertos campos
    • las validaciones automáticas de los campos (que a veces no son válidas para todos los países, por ejemplo el formato del NIF o la longitud de un número de teléfono)
    • los campos innecesarios o que incomodan al usuario, etc.

    Rutas de navegación Los reportes de “clickstream” son quizás el elemento más potente de herramientas de analítica web avanzada como Omniture SiteCatalyst o Visual Sciences. Permite responder a preguntas como por ejemplo:

    • ¿Por qué páginas navegan los usuarios, y en qué orden?
    • ¿Qué páginas visitan los usuarios dadas una página inicial y una página final determinadas?
    • ¿En cada paso de un proceso de compra o de registro, cuántos usuarios pasan al siguiente paso, cuántos vuelven al paso anterior o cuántos abandonan? ¿Los que abandonan, a dónde van?
    • ¿Qué rutas llevan a una página determinada?
    • ¿Cuáles son las 5 rutas que realizan el 90% de los usuarios de mi sitio web?

    Ejemplo de reporte de rutas de navegación de Omniture SiteCatalyst
    Estos reportes son muy útiles para analizar qué realizan los usuarios en nuestro sitio web y, quizás más importante todavía, qué no son capaces de realizar (seguramente debido a que la página no es usable).
    Así mismo, nos ayudan a definir la arquitectura de la información y el esquema de navegación del sitio web basándonos en la experiencia y preferencias de navegación de los usuarios.

    Otras técnicas de analítica web Existen muchas otras técnicas de analítica web que nos permiten mejorar la usabilidad de un sitio web. A continuación menciono algunas, que en otros artículos comentaré en detalle:

    • Análisis de “bounce rate”
    • Análisis de resultados de búsqueda
    • Segmentación de tascas y usuarios
    • Satisfacción de los usuarios

    Especialmente importante es la segmentación de tascas y usuarios , que permite agrupar a los usuarios según las tascas que realizan en el sitio web, para después ofrecer contenidos e interfaces adaptados a cada perfil.

    fuente: Boletin Webtaller.com
    Autor:
    Rovira Samblancat

    SocialTwist Tell-a-Friend
     

    Los 7 habitos de los Usuarios Web

    18 May

    En el sitio: Createdebate.com se publico la siguiente gráfica sobre los 7 usos mas habituales de los usuarios web.
    En la gráfica se describen los distintos nodos y su relación  con las distintas herramientas  y sitios web mas destacados dentro de cada uno.

    los 7 habitos de usuarios web

    SocialTwist Tell-a-Friend
     

    Definiendo la “utilidad” de un proyecto nuevo (sitio web)

    10 May

    Reproduzco un post publicado en  http://www.kabytes.com donde el autor expone como piensa definir la utilidad de un nuevo proyecto web…

    “Muchas veces tengo mis dilemas sobre como definir si un sitio es o no útil al usuario final, por ejemplo para mí una aplicación puede ser muy útil pero tendría que considerar que paso mas de 10 horas diarias metido en Internet cosa que un usuario común no hace. Eso conlleva a que yo no sea un usuario “normal” ya sea por tener conocimientos mas avanzados, mas práctica, etc.

    ¿Entonces cómo defino la utilidad?

    Según el Grupo Santander la utilidad es la: “Satisfacción que se obtiene a consecuencia del consumo de una determinada cantidad de un bien o servicio”

    Por mas sentido común que tengamos sigue siendo difícil ponerse en los zapatos del visitante común, tampoco existen herramienta de validación de la utilidad (Algo que realmente sería fantástico) entonces algunas cosas que podemos hacer para saber si estamos cumpliendo con lo que el usuario promedio necesita. Siempre evaluando el proyecto en dos etapas posibles.

    Prelanzamiento

    Foros de discusión a fines a la temática de nuestro proyecto: En ellos podemos seguir discusiones sobre posibles problemas a los que se enfrentan los visitantes a diario. Solamente leyendo varios hilos pueden surgir muchísimas ideas para solventar dichos problemas.

    Grupos cerrados de prueba: Es algo que pienso poner en práctica dentro de pocos meses, creo que lo interesante de esto es combinar a los usuarios mas experimentados de la red con los que menos conocimientos tienen, luego con los aportes recibidos poder realizar un escrutinio de mejoras.

    Estudio de la competencia: De aquí se puede aprender mucho, podemos ver como se mueven los usuarios y la respuesta que se obtiene en base a cada propuesta, es una buena forma de conocer nuestro target.

    Post Lanzamiento

    Encuestas: Realización de encuestas sobre el grado de satisfacción en el uso de cierta herramienta, interfase.

    Formulario de contacto: Siempre es interesante recibir correos con sugerencias, creo que si alguien se molesta en enviar alguna es por que el proyecto le interesa y es un buen indicador de que vamos por buen camino.

    Seguimiento mediante sistemas: Las estadísticas son mas que poderosas, con solo saber el tiempo de estadía podemos entender si el sitio resulto interesante o no, mejor aún si podemos monitorear la actividad dentro de nuestro sitio, consultar las páginas vistas, las páginas de salidas, etc.

    Estos son algunos puntos que se me ocurren, de seguro hay muchos más, pero al menos es un inicio para tener varias perspectivas sobre si nuestro proyecto va a ser útil o no.”

    SocialTwist Tell-a-Friend
     

    La importancia de los estándares web

    02 Apr

    La imagen corresponde a Internet Explorer 8 visualizando Google Maps. Quizás te preguntes porque se ve tan mal si IE8 iba a respetar por defecto todos los estándares web. El problema no es realmente con IE8 si no con sus versiones anteriores como IE6 e IE7.

    Muchos desarrolladores web se vieron obligados a implementar hacks para que sus páginas se vieran correctamente en IE6 e IE7 por los problemas que estos navegadores daban con su propia interpretación de parte del código sin tener en cuenta los estándares establecidos por la W3C. El problema es que esos hacks ahora no sirven con IE8 ya que este respetará los estándares (aunque viniendo de Microsoft, hasta que no lo vea no lo creo) produciéndose esos errores de visualización que vemos.

    ¿La solución? En mi opinión, ahora toca a los desarrolladores adaptar (de nuevo) sus páginas para el futuro navegador, quizás de una manera más escalonada, pero es algo necesario que a la larga beneficiará a todos los desarrolladores web. Decirlo es fácil y llevarlo a la práctica es costoso y molesto pero no queda otra.

    Esperemos que un futuro no muy lejano, desarrollar para un navegador sea igual que desarrollarlo para el resto. ¿es una utopía?

    fuente: Bitelia.com

    SocialTwist Tell-a-Friend
     

    Consejos para estructuras CSS

    31 Mar

    Buenos consejos para realizar tus estilos CSS bien estructurados.

    • Se sencillo: usa solo que sea estrictamente necesario. No uses muchas capas div y puedes obtener el mismo resultado con una o dos. Si ves que la estructura se complica, quizás estés haciendo algo mal, intenta buscar otra forma muy sencilla.
    • Escrible claro: usa tabulaciones, comentarios para diferenciar partes y nombres que sean claros y explicativos.
    • Se metódico: usa los mismos nombres en tus proyectos. Agrupa por tipología y ordena alfabéticamente para una lectura más sencilla.
    • Organízate: diferencia y define las distintas partes para poder plasmarlas en tus estilos.
    • Resetea los estilos por defecto: debido a las diferencias entre los navegadores es conveniente dar estilos a algunas etiquetas HTML (ul, a, …)
    • Tabula los elementos: no solo uses el tabulador para los distintos estilos de un elemento, sino para crear una estructura de estilos, si un estilo depende de otro, deberá estar por debajo de este y con mayor tabulación.

    Fuente: sentidoweb.com desde http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html
    Imagen : http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html

    SocialTwist Tell-a-Friend