Consejos para Desarrollar Sitios Webs Usables..

1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.

2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.

3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).

4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.

5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.

6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas

7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más fácilidad para usar un mecanismo de interacción.

8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.

9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.

10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.

11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.

12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.

13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.

14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.

Otros principios para el diseño de sitios web son:

a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos.

b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario.

c) En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo no deben existir enlaces rotos.

d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término peligroso, cuanto mayor sea el número de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web.

e) Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de información.

f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio.

g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.

fuente.desarrolloweb

Las tipografías en las páginas web

La misión principal de una composición gráfica es transmitir un mensaje determinado a los espectadores que la visualizan. Para ello, el diseñador dispone de dos herramientas principales: las imágenes y los contenidos textuales.

Las imágenes o contenidos gráficos aportan sin duda un aspecto visual muy importante a toda composición, siendo capaces de transmitir por sí solos un mensaje de forma adecuada. Ahora bien, el mejor medio de transmisión de ideas a un gran número de personas es por excelencia la palabra escrita, lo que hace que los contenidos textuales en una composición sean tanto más importantes cuanta más información se desea transmitir.

La esencia del buen diseño gráfico consiste pues en comunicar ideas por medio de la palabra escrita, combinada a menudo con dibujos o con fotografías.

Las representaciones visuales de los contenidos textuales son básicamente las letras, elementos formadores de los abecedarios de los diferentes idiomas. Con las letras se forman palabras, con las palabras frases, y con las frases se representan ideas y conceptos.

Además de su componente significativo, cada letra de una palabra es por sí misma un elemento gráfico, que aporta riqueza a la composición final. Por este motivo, el aspecto visual de cada una de las letras que forman los textos de una composición gráfica o una página web es muy importante, interviniendo en los mismos conceptos similares a los que caracterizan cualquier otro componente gráfico: forma, tamaño, color, escala, etc.

De este planteamiento se deriva que el diseñador gráfico debe emplear las letras en una composición tanto para comunicar ideas como para configurar el aspecto visual de la misma, siendo necesario para ello conocer a fondo los diferentes tipos existentes y sus propiedades, conocimientos que se agrupan en la ciencia o arte de la Tipografía.

Se denomina Tipografía al estudio, diseño y clasificación de los tipos (letras) y las fuentes (familias de letras con características comunes), así como al diseño de caracteres unificados por propiedades visuales uniformes, mientras que las técnicas destinadas al tratamiento tipográfico y a medir los diferentes textos son conocidas con el nombre de Tipometría.

Tradicionalmente el estudio de las letras, sus familias y sus tipos ha sido desarrollado por los impresores y, más modernamente, por diseñadores gráficos que realizan trabajos para ser luego impresos. Pero con la aparición de los ordenadores y de Internet ha sido necesario un replanteamiento de la Tipografía clásica, puesto que las fuentes que trabajan bien en imprenta no se adaptan correctamente al trabajo en un monitor de ordenador.

fuente.

Usabilidad y Analítica Web

¿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.

¿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.

Si le interesa profundizar en el tema de la analítica Web en general, como por ejemplo un interesante glosario de términos de analítica Web (en inglés) elaborado por la Web Analytics Association, cuya página Web es por supuesto de consulta indispensable.

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.

Conclusiones:

Espero haber contribuido a convenceros de que la analítica Web puede y debe jugar un papel muy importante en la mejora de la usabilidad de los sitios Web. Destacaría tres ventajas principales:

•Trabajar directamente con gran cantidad de datos de todos los usuarios del sitio Web nos permite detectar problemas de usabilidad muy específicos.

•Es muy fácil testear una mejora de usabilidad, así como demostrar el éxito o fracaso de un cambio de diseño (factor muy a tener en cuenta a la hora de convencer a quien toma las decisiones de que es necesario invertir en diseño o estudios de usabilidad).

•En un mercado en donde las aplicaciones Web cada vez disponen de menos tiempo en pre-producción, la analítica Web es indispensable para optimizar y mejorar todo sitio Web.

fuente.desarrolloweb

Que Fuentes Usar para Mejorar la Lectura y Usabilidad Web

Hay muchos factores que afectan a la usabilidad de un sitio Web. Uno de ellos son las fuentesde lectura. Continúe leyendo y averígüe lo que puede hacer mediante las fuentes para atraer usuarios…

Para hacer los sitios notables para los usuarios, los propietarios de los sitios deben hacer un uso atractivo de diseño y contenido funcional. El uso de fuentes es uno de los factores que pueden atraer o alejar a los visitantes a un sitio Web. Buenas fuentes son importantes porque tiene un efecto en los usuarios de lo rápido que pueden leer todo el contenido que está presente en la pantalla del ordenador.

Las Fuentes se utilizan para hacer la mayoría de los elementos de la página Web, tales como barras de navegación, botones, links, y los menús. Es el texto el que expresa la mayoría de los contenidos del sitio Web.

En la actualidad, las fuentes que se utilizan comúnmente en la Internet son Times New Roman, un tipo serif, y la Arial, una fuente sans serif. El borde principal de serif es que es más cómodo para leerlo en papel, ya que las serifas ayudan a la individualización de cada letra. Sin embargo, esta ventaja puede ser inutilizada cuando las fuentes se ven en las pantallas del ordenador, ya que factores como la resolución de la pantalla pueden afectar a la claridad de los textos.

Entonces, ¿cómo influyen las fuentes de usabilidad y legibilidad global de un sitio Web?

Hay dos categorías principales de los rostros de fuente:

1. Serif

Estas son fuentes que contienen pequeños apéndices en la parte superior e inferior de una carta. Ejemplos de ello son Times New Roman, Century, Bookman y Courier. Estas son las que se deben utilizar cuando la pagina lleva grandes cantidades de texto.

2. Sans-serif

Estas fuentes tienen sólo trazos de línea primaria, y poseen una forma más simple. Ejemplos de estas fuentes son Futura, Helvética, y Arial. Suelen ser utilizada para frases cortas.

Estilo de fuente se refiere a la utilización de elementos tales como cursiva, subrayado, negrita para dar mejor atención a los contenidos de una página. No se recomienda utilizar subrayado en las páginas Web, ya que la mayoría de los usuarios están acostumbrados a asociar el subrayado con los enlaces. Negrita se debe utilizar en forma estratégica. También mucho uso de negrita puede ser una distracción de los contenidos, puesto que son muy visibles. La cursiva no es muy legible en la pantalla, deben ser utilizadas con poca frecuencia, únicamente para dar énfasis y definiciones.

Evite el uso de tamaños de fuente absolutos. Si lo hace, puede dificultar a los usuarios la posibilidad de ajustar el tamaño del texto para ir junto con los detalles de los dispositivos de visualización que están utilizando. Se recomienda que los usuarios puedan manipular el tamaño de los textos, sobre todo si se planea mantener las páginas Web con poco contenido.

Elegir colores de la fuente debe hacerse con cuidado, se debe maximizar la legibilidad del texto en contraste con el fondo de la página, mientras que lo distingue de los colores utilizados para los enlaces. Para los fondos claros, se deben utilizar tipos de letra en negro, azul oscuro, verde, marrón oscuro. Si el fondo está oscuro, las fuentes en naranja blanco, verde pálido, debe ser utilizado. Si es posible, utilice sólo uno o dos colores en una página, con exclusión de los colores de las páginas de enlace.

Hay imágenes que se parecen a las fuentes. Evite el uso de ellos. Hay varias razones por las que no se debe utilizar. Jpg o. Imágenes GIF para adquirir los efectos especiales. En primer lugar, las imágenes toman mucho tiempo para descargar, y cuando aparece, la calidad no es la misma que la de un texto elaborado por los navegadores. En segundo lugar, por lo general hay un problema al cambiar el tamaño de las imágenes. Se dice que las fuentes Sans Serif se deben utilizar para el estándar y superior-de-los diseño del sitio Web en línea, específicamente la Arial y la Verdana. Se recomienda utilizar la misma fuente a través de una página, pero los tamaños de titulares pueden ser agregadas y los subtítulos se pueden escribir en forma enérgica para prevenir la monotonía. Una vez más, es preferible dar a los usuarios la capacidad de controlar el tamaño de los textos, ya que algunos de los usuarios pueden tener algún tipo de problema visual.

Algunos estudios muestran que las fuentes que son más pequeñas de 10 puntos se hacen más lenta la reacción de los usuarios. Es recomendable utilizar fuentes de por lo menos 12 o 14 puntos de tamaño cuando se trata de personas mayores de 65 años de edad.

fuente.articulosinformativos

Tabla de Colores para las Webs en Hexadecimal

Tabla de Colores para las Webs en Hexadecimal