viernes, mayo 28, 2010

Usabilidad y como generar un articulo

Este review de usabilidad si bien está basado en el desarrollo de articulos usable para tutorial, es aplicable a textos como articulos en general.
Básicamente se trata de un compacto de recomendaciones las cuales pertenencen a diferentes blogs y textos, donde se extraen las mejores prácticas de estos sitios.



Realmente el texto es muy bueno, y apunta muy concretamente a la cuestión de fondo: "La USABILIDAD".
Quizás como el santo grial de la Web2.0 hacia la Web3.0 hoy en día esta característica no debería ser lo menos al momento de redactar un texto, ya sea el texto de un Blog propio, o de un diario digital.
Las consideraciones que se debe tener en cuenta son:

  1. Introducción sólida
  2. Previsualización Clara
  3. Enlaces para "Demo" y "Videos" visibles
  4. Demostración del Producto final de alta Calidad
  5. Tipografía limpia y clara
  6. Ejemplos de códigos simple y claros
  7. Ayuda visual efectiva

1. Introducción Sólida

Como premisa hay que considerar que los usuarios comienzan a escanear ni bien ellos ingresan al articulo. Esto es crucial al momento de presentar un texto y su información, ya el texto que ellos buscan debe estar claramente visible. Aveces juega un papel importante incluir un recuadro con una breve descripción del texto, la dificultad que presentará y el tiempo estimado que llevara leerlo.
Vector Tuts
El sitio Vector Tuts o Perishable Press hicieron un buen trabajo, generando un


mini indice, donde realizar una rápida previsualización en formato de lista. Además de brindar la posibilidad de saber el contenido del texto en cuestión, es buena la idea de proponer al usuario la posibilidad de saber la cantidad de temas que se abordaran en el mismo, pudiendo calcular de manera global el tiempo y contenido dispuestos.
Perishable Press


2. Previsualización Clara

Web Designer Wall
Tomando como ejemplo Web Designer Wall podemos observar de manera clara el resultado, en este caso, del tutorial. Muestra de manera simple y directa, motivando al usuario a continuar siguiendo el texto de este tutorial, sabiendo que lograra como resultado. Es importante que las imagenes sean de alta calidad, como asi tambien las instrucciones.

3. Enlaes a Demos y Videos visibles

En el caso de disponer de video, audios o demostración de nuestro producto, es importante que el acceso a estas demos, sea clara y estén bien dispuestas. El solo hecho de ocultar el boton, o hacer links que en parte parezcan confusos, harán que el usuario se sienta frustrado al tener que buscar el enlace para llegar a su contenido, logrando el efecto contrario a la permanencia en nuestro sitio.
TutorialzineNet Tuts
Tutorialzine y Net Tuts disponen de botones grandes y muy claros, donde se comprende de manera directa y rápida y facil de encontrar la funcionalidad de cada uno de los botones.

4. Demostración del Producto final de alta Calidad

Como se observó anteriormente, el hecho de dedicar mas tiempo a realizar las demostracion, los videos y demas elementos que se agregaran al sitio, haran que el sitio posea una buena presentacion, y mejorando la calidad de todo el sitio.


TutorialzineWeb Designer WallCSS Tricks

5. Tipografia Limpia

Web Designer Wall
Es muy importante este detalle, sabiendo que las personas pasaran parte de su tiempo leyendo la información que se encuentra posteada en tu articulo. Es necesario evaluar la uniformidad del texto, brindando un buen espaciado, empleando letras claras y evitando recursos como bold o negrita en demasia. Aprovechar los recursos como Subtitulo. Mientras mas simple y despejado se encuentre el texto, esto invita al lector a continuar leyendo, ademas de continuar en el sitio.
Recomiendo leer la siguiente guia, para tener de referencia: Typographic Contrast and Flow.
Break up your tutorial into logical sections, separating each section with a clear heading. The easier it is to scan the page, the more inviting it is to continue reading.

6. Código de Ejemplos Claros


Cuando se debe incrustar ejemplos, textos o codigos, es importante tenes el soporte de comentarios y diferenciarlos del texto standard. Es buena idea implementar cajas de codigo, lo cual a simple vista muestren la difrerencia entre el texto comun y el texto de soporte agregado, ver ejemplos de hover: Simple jQuery Solution To A Simple Problem.

7. Ayuda visual efectiva

Algunos son lectores que aprenden y retienen con la visualizacion y otros no. Por lo tanto es necesario proveer de ilustraciones y ayudas visuales para lograr retener la mayor cantidad de lectores. Este tecnica permitira alcanzar una audiencia mucho mas amplia y mejorar el estilo de navegacion y aprendizaje. Toma tu tiempo para ilustrar el texto, lo cual ayudara en gran manera a tus lectores.

Ejemplo de empleo de ilustraciones:

CSS Tricks
Chris Coyier de CSS Tricks explica cmo calcular valores especificos en CSS. El empleo de colores en la demostracion es una buena manera de mostrar las relaciones.
Web Designer Wall
Nick La's demuestra cada parte de un gráfico en el trabajo de CSS y el modo de generar un botón. Aqui se explica muy puntualmente cada uno de los elementos que forma el mismo.
Smashing Magazine
Louis Lazaris explica el uso de la propiedad z-index empleando una ayuda visual. Para alguien que no comprende, es prácticamente infalible la gráfica de la misma, haciendo que el texto sea comprendido mucho mas facil.

Fuente

No hay comentarios: