Principios de Usabilidad

en la Red 2.0

!...No me haga Pensar, ni

me haga esperar mas de 7

segundos, para encontrar lo

que necesito…!

Principios de Usabilidad

en la Red 2.0

• !...No me haga Pensar, ni

me haga esperar mas de

7 segundos, para

encontrar lo que

necesito…!

« Siempre hemos oído hablar sobre “un mundo sin barreras”, donde

no haya obstáculos y todos tengamos las mismas oportunidades. En el

mundo virtual también existen dificultades y barreras, aun siendo más

moldeable y maleable que la vida real. »

Como nos ven nuestros

visitantes… Espiemoslos….

Definición y conceptos generales La usabilidad es un concepto que se refiere básicamente a la facilidad de uso de una aplicación o producto

interactivo.

Dentro de éste concepto podemos encontrar una serie de variables o características que nos ayudarán a entenderlo

mejor.

La usabilidad es un concepto empírico

En la práctica quiere decir que puede ser medida y evaluada, a través de diferentes componentes o variables que

detallamos a continuación

facilidad de aprendizaje: ( learnability ) ¿cómo de fácil resulta para los usuarios llevar a cabo tareas básicas la

primera vez que se enfrentan a la interfaz?

Eficiencia: Una vez los usuarios han aprendido el funcionamiento básico del diseño, ¿cuánto tardan en realizar las

tareas?

facilidad de ser recordado: ( memorability ) cuando los usuarios vuelven a usar el diseño después de un periodo de

tiempo, ¿ cuánto tardan en volver a adquirir el conocimiento necesario para usarlo eficientemente?

eficacia: durante la realización de una tarea ¿ cuántos errores comete el usuario? ¿ qué consecuencias tienen estos

errores y qué importancia tienen? ¿ cuánto tardaría el usuario en solucionar estos errores?

satisfacción: ¿le ha resultado agradable y sencillo al usuario usar la aplicación? ¿ qué nivel de satisfacción ha

obtenido?

Como podemos observar, todos estos parámetros son medibles y evaluables, tanto mediante un cuestionario como

mediante la observación en la práctica. Una de las mejores formas de evaluar la usabilidad de una aplicación es

poniéndola a prueba con usuarios reales.

De hecho, esta naturaleza empírica de la usabilidad, hace posible comparar estos criterios en un diseño y en el

posterior rediseño, permitiéndonos comprobar si los cambios han sido acertados o no.

Definición y conceptos generales Dependencia

Lo que en un primer momento motiva el uso de un producto no es precisamente su usabilidad. Los usuarios no

buscan usabilidad, buscan utilidad, entendida como el provecho, beneficio e interés que produce su uso.

Por tanto podemos afirmar que la relación entre utilidad y usabilidad es de mutua dependencia. Y hay un concepto que

siempre deberemos tener en mente:

Un producto o aplicación será usable en la medida en que el beneficio que se obtenga de usarlo justifique el esfuerzo

necesario para su uso ( aprendizaje, atención, tiempo... )

Si la facilidad de uso fuera el único criterio válido, las personas se quedarían en los triciclos y nunca en las bicicletas.

Como consecuencia lógica de ésta relación debemos tener en cuenta que

Como diseñadores o desarrolladores de interfaces, nuestro objetivo debe ser el de adaptar el diseño al usuario, a sus

habilidades, conocimientos, usos y costumbres, pero en muchos casos será necesario que los usuarios también se

adapten al producto o herramienta.

Por lo tanto, y a modo de conclusión, no podemos pensar en la usabilidad de forma aislada, sino que siempre

tendremos que analizarla en relación con la utilidad del producto, y el grado en el que éste necesite una adaptación por

parte del usuario.

La motivación y resistencia a la frustración del usuario, está determinada por el beneficio que perciba de completar la

tarea, percepción que será producto tanto de su utilidad real como de la capacidad del diseño para comunicar esta

utilidad.

Usabilidad vs Accesibilidad

La accesibilidad de un producto o sitio web, se refiere a la "posibilidad de que pueda ser accedido y usado por el

mayor número posible de personas, indiferentemente de las limitaciones propias del individuo o de las

derivadas del contexto de su uso"

Por limitaciones propias del individuo nos referimos a las discapacidades ( en sus diferentes grados ) de los usuarios,

o a las impuestas por su nivel de conocimientos, habilidades o experiencia.

Por limitaciones derivadas del contexto de su uso, nos referimos a las condicionadas por el software, hardware o

entorno de uso

Definición y conceptos generales Diferencias y similitudes

Por un lado, no tiene sentido pensar en las usabilidad y accesibilidad como dos atributos o cualidades diferentes. Si un

diseño no es usable, no puede considerarse accesible, y viceversa.

A la hora de pensar en la accesibilidad de un producto, nos debemos plantear las características y sobre todo la

diversidad de la audiencia y de los medios materiales de los que disponen, el resultado tal y como podríamos

corroborar en cualquier estadística es que:

Dentro de nuestro público objetivo, habrá unas pocas características compartidas por un gran porcentaje de la

audiencia, pero una gran cantidad de ellas compartidas por porcentajes mucho menores.

Dificultades en la práctica: proporcionar acceso a personas con cierto tipo de discapacidad puede hacer el producto

sifnificativamente más difícil de usar por personas sin discapacidad, y con frecuencia imposible de usar por personas

con diferente tipo de discapacidad.

De hecho, las pautas WAI normalmente lo que nos proponen es ofrecer soluciones alternativas, puesto que en

muchos casos va a ser la única vía posible. Por lo tanto deberemos plantearnos ofrecer diseños diferentes o adaptables

dinámicamente a diferentes usuarios y contextos de uso

La Arquitectura de la Información

La Arquitectura de la Información (AI) es la disciplina y arte encargada del estudio, análisis, organización,

disposición y estructuración de la información en espacios de información, y de la selección y presentación de

los datos en los sistemas de información interactivos y no interactivos.

Se trata de una disciplina que va ganando fuerza como consecuencia lógica de la "madurez" que va adquiriendo el

desarrollo web, gracias en gran parte a los estudios de Usabilidad y Accesibilidad.

El término "Arquitectura de la Información" (AI) fue utilizado por primera vez por Richard Saul Wurman en 1975,

quién la define como:

El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de

navegación hacia el conocimiento y la comprensión de la información.

Definición y conceptos generales

Reglas de usabilidad para el

diseño de interfaces La usabilidad es un concepto que debemos tener presente a la hora de diseñar nuestra web, y no subestimarlo

nunca. Muchas veces puede ser el factor clave que determine el éxito o el fracaso de nuestro proyecto, y va mucho

más allá de que tengamos un diseño puntero o unas animaciones novedodas.....

Rapidez

Un site sólo capta la atención de un usuario durante los primeros 8 segundos que el usuario esta delante de la

página web, pasado este tiempo, si el usuario no encuentra la información que esta buscando, cancelará y se ira a

otro web.

Las páginas deben cargarse en una media de 4 segundos. Lo más que los usuarios esperarán en ver el contendio

de una página web es de una media de 10 segundos.

Simplicidad

Limitar la navegación de primer nivel de la web a 6 u 8 páginas como mucho. Los estudios demuestran que es el

número máximo que el usuario puede mantener en la memoria a corto plazo.

Navegación constante.

No debemos forzar a los visitantes a aprender diversos caminos o esquemas para la navegación en diversas partes

de la web.

Es recomendable conocer los estándares de navegación web y ajustarse a ellos, como por ejemplo:

Reglas de usabilidad para el

diseño de interfaces el usuario está acostumbrado a usar el botón back del navegador.

el scroll vertical si bien está totalmente incorporado dentro de los hábitos no debemos excedernos en el alto de la

página. Como mucho el alto de 2 o 3 ventanas.

evitar por tanto el scroll horizontal.

el logo de la web o de la empresa siempre linka a home.

los links deben estar identificados y deberá aparecer la mano.

conservar la práctica de marcar los links visitados.

es recomendable utilizar interactividad en los roll-overs, puesto que capta la atención del usuario.

es recomendable ajustarse a una cuadrícula para permitir que el usuario se familiarice rápido con la navegación

del sitio.

los fondos claros facilitan la lectura e invitan a la reflexión.

Respecto a la animación, hay que tener en cuenta que los usuarios han aprendido a ignorar todo aquello que

parezca un anuncio. Por otro lado puede abrumar y cansar la vista.

Cuidado con los pop-ups de JavaScript, ya que muchos navegadores los bloquean, se recomienda si no hay mas

remedio, utilizar capas con CSS o nuevas ventanas con "_blank", aunque en éste último caso rompemos los

hábitos de navegación de muchos usuarios.

Investigable

Los motores de búsqueda buscan el texto real. No prestan ninguna atención a los gráficos (incluso gráficos que

parecen texto) y al código de programación (como el Javascript, usado para los menús y otros efectos especiales).

Si deseamos un buen posicionamiento, debemos tener en cuenta estos aspectos.

Reglas de usabilidad para el

diseño de interfaces Keywords: deberán aparecer reflejadas de una manera o de otra a lo largo del texto de la web. Si nuestra web tiene

links cruzados o hay páginas que acceden a ella, tendrá más posibilidades de posicionamiento.

Título de cada página, más el dominio, fundamental de cara a los buscadores

Descripción: es importante que sea corta, clara, y que las palabras que se utilizan estén también en nuestra web.

Para la mayoría

Los sites necesitan ser compatibles con todos los navegadores y ordenadores. Siempre que sea posible, utilizaremos

html simple y plano, es el más compatible con todos los navegadores.

Actualizado

La manera más rápida para que un web pierda credibilidad es que la información que contenga sea anticuada.

Incluso cosas pequeñas como una fecha del copyright de "2000", etc, pueden dañar la credibilidad del web además

de su contenido.

Reglas y principios de usabilidad

que debes conocer Cuando hablamos de usabilidad podemos contar con una serie de reglas y principios que son comunes a todo sitio

bien diseñado o por decirlo de otra manera las grandes marcas de internet utilizan. A continuación veremos una

explicación de estas reglas que deberíamos tener siempre en cuenta antes de diseñar nuestra aplicación...

El principio del 7 más o menos 2:

El cerebro humano tiene sus límites en la capacidad de procesar la información, y es debido a ésto que maneja

mejor la información compleja dividiéndola en grupos y unidades.

Segun diversos estudios, los humanos sólo pueden retener a la vez entre 5 y 9 cosas en la memoria a corto

plazo.

Esto se ha usado a veces para limitar el número de items de un menú de navegació a 7. Aunque hay un cierto

debate en el número podríamos decir que el número está entre 5 y 9.

Con ésto nos referimos no sólo a los menús, si no a los elementos o bloques de información que puede encontrarse

un usuario en pantalla, y aquí es donde entra el trabajo del arquitecto de la información.

La regla del segundo segundo

Es un principio aproximado que afirma que un usuario no debería tener que esperar más de dos segundos a la

respuesta de ciertos tipos de acciones como un cambio de aplicaciones o una carga de una aplicación.

La elección de 2 segundos es un poco arbitraria, y en éste sentido sería más adecuado afirmar que cuanto menos

tenga que esperar el usuario, mejor será su experiencia. Por otro lado siempre que una aplicación deba tardar un

poco en cargarse deberemos proveer feedback a modo de preloader o splash screen.

Reglas y principios de usabilidad

que debes conocer La regla del tercer Click

Según esta regla, los usuarios abandonan una web si no son capaces de encontrar la información que están

buscando en tres clicks de ratón. Esta regla destaca la importancia de una navegación clara, una estructura

lógica y una jerarquía de la web fácil de seguir.

En la mayoría de situaciones más que el número de clicks en sí, lo que será realmente importante es que los

usuarios siempre sepan donde se encuentran, de donde vienen, y a donde van a ir en el siguiente paso. Incluso

10 cliks estarían bien si los usuarios tienen la sensación de que controlan la interfaz y que conocen cómo funciona

el sistema.

Un ejemplo fácil de seguir son las famosas "bread crumbs" o migas de pan que utiliza por ejemplo apple en su

tienda o en el iTunes Store

8 reglas de oro del diseño de

interfaces Según diversos estudios, hay una serie de reglas que se repiten a menudo y se aplican en muchos sistemas

interactivos. Estos principios son relevantes a todas las interfaces de usuario y por lo tanto también lo son para el

diseño web.

1. Buscar la consistencia a lo largo de toda la aplicación, para ello nos puede ayudar el uso de una cuadrícula o de

elementos repetidos a lo largo del site.

2. Permitir a los visitantes recurrentes que usen atajos ( por ej. con el uso de cookies, o grabando información

personal, guardar carrito, wish list ).

3. Ofrecer feedback en todo momento, ej. procesos de comprar guiados.

4. Diseñar diálogos que avisen cuando se va a cerrar o abandonar algo, o qué tipo de documento van a descargar.

5. Ofrecer una manera fácil de gestionar o arreglar los errores.

6. Permitir también que se puedan deshacer acciones.

7. Dar al usuario un sentido de control ( modificar datos personales, cambiar dirección de envío, una compra se

puede perder porque el usuario se haya mudado recientemente y tenga dudas sobre cual será la dirección guardada ).

8. Reducir los tiempos de carga. Es mejor 10 esperas de un segundo que una espera de 10 segundos.

La ley de Fitts.

Paul Fitts, 1954. Es una ley de comportamiento humano que determina que el tiempo requerido para moverse

rápidamente hacia un destino, es una ecuación entre la distancia al objetivo y el tamaño del objetivo.

La pirámide invertida

En realidad se trata de una práctica periodística que pone un sumario al principio del artículo.

Los escritores dan a sus lectores una instantánea del tema sobre el que van a hablar. El artículo comienza con la

conclusión, seguido de puntos clave y después otros detalles como la información de fondo.

Los usuarios web buscan rapidez y eficiencia, y con ésta práctica se mejora la experiencia de usuario.

En muchos casos, para conseguir este objetivo, deberemos adaptar el lenguaje, como por ejemplo utilizar títulos

descriptivos del contenido.

Los diez errores más comunes

en el diseño web Desde 1996 Jackob Nielsen ha ido recopilando errores comunes en el diseño web, a continuación podemos ver lo que

basándose en los estudios de usabilidad realizados ha categorizado como los diez errores más comunes:

1. Campos de búsqueda que no funcionan bien

En los últimos años, se ha extendido la costumbre de incorporar buscadores en sitios web por diversos motivos. El

problema es que muchos de estos tienen deficiencias y no realizan consultas con la precisión esperada.Un buscador

es la herramienta por excelencia del usuario cuando la navegación falla.

2. archivos pdf para leer on-line

Encontrarse un pdf cuando se está navegando rompe el ritmo de navegación. Muchos de los comandos estándar del

navegador se ven sustituídos por la interfaz integrada de acrobat.

El problema es que muchos pdfs están optimizados para papel y probablemente la persona que los sube, no es

consciente ni de su peso.

El pdf es un archivo ideal para imprimir o enviar documentación. Cuando creamos un link para un pdf lo mínimo que

deberemos hacer es indicarlo.

3. No cambiar el color de los links visitados

Esta práctica que data de los inicios de internet, está muy asumida por los usuarios, les ayuda a situarse y les evita

revisitar una página por descuido, o desorientarse.

4. Texto no escaneable

Párrafos largos, como se ha visto son difíciles de leer. Hay que escribir para la web y no para el papel. Debemos

aprovechar los medios que nos ofrece el hipertexto

- encabezados

- uls

- keywords destacadas

- párrafos cortos

- pirámide invertida

- estilo de escritura simple

Los diez errores más comunes

en el diseño web

5. Tamaño fijo de Fuente

Mediante hojas de estilo podemos deshabilitar la propiedad de cambiar el tamaño de fuente del navegador. Además

los tamaños fijos de fuente, en un 95% son pequeños, reduciendo la legibilidad significativamente para la mayoría de

gente de más de 40 años.

Se deben respetar las preferencias del usuario y dejarles redimensionar el texto a sus gusto. Por lo tanto en las CSS

deberemos poner tamaños relativos y no valores en pixels.

6. Títulos de página no optimizados para motores de búsqueda

La manera más importante de encontrar información en la web es mediante la búsqueda. En muchos casos nos

encontramos con que el título el la herramienta principal que tenemos para atraer a nuevos visitantes que vienen de

páginas de resultados de búsqueda.

Normalmente los motores de búsqueda muestran el título como la zona de acceso clicable, y no pasan de los primeros

66 caracteres.

También será el texto que aparece por defecto cuando añadimos la página a favoritos. Lo ideal, primero el nombre de

la compañía o sitio web seguido de una breve descripción para ubicarse.

7. Cualquier cosa que parezca un anuncio

Hoy en día predomina la atención selectiva. Los usuarios han aprendido a dejar de prestar atención a todo aquello

que parezca un anuncio y se interponga en su camino. ( hay una excepción: los anuncios de texto utilizados en los

motores de búsqueda ).

Esto puede provocar que se ignoren detalles o aspectos de la web que no están ubicados con esa intencionalidad.

Reglas a seguir para la publicidad web serán intentar evitar movimiento y pop-ups

Los diez errores más comunes

en el diseño web

8. Saltarse convenciones de diseño

La consistencia es uno de los principios más importantes de la usabilidad: cuando todo se comporta siempre del

mismo modo, se consigue una sensación de confianza en el usuario, que hasta puede anticipar lo que va a suceder

basándose en la experiencia de navegación, y les dará una sensación de control y por tanto les gustará la web.

Los usuarios segun Jackob emplean la mayoría de su tiempo en otras webs, esto quiere decir que en nuestra web

esperarán encontrarse con los convencionalismos habituales. En caso contrario abandonarán la web.

9. Abrir nuevas ventanas del navegador

Es una práctica habitual de muchos desarrolladores que intentan así que el usario no abandone su web, sin embargo

consiguen lo contrario. Por un lado deshabilitan el botón back del navegador, limitan la libertad de movimientos del

usuario, y le confunden en su navegación. Por lo tanto evitar el atributo "_blank".

10. No responder preguntas del usuario

La conducta del usuario en la web es siempre orientada a objetivos, visitan una página porque quieren conseguir

algo. Otro error común en muchas webs es limitar la información, o no destacarla de la manera adecuada. El ejemplo

más claro lo tendríamos en el precio de los productos, o en una explicación detallada de los servicios

De echo, en los estudios de usabilidad realizados ésta ha sido una de las demandas más habituales.

Patrones de conducta de los

usuarios en dispositivos

digitales Como leen los usuarios en un monitor. Eyetracking

A la hora de diseñar una web es muy importante conocer a nuestro público y sus hábitos de comportamiento. Jackob

Nielsen, conocido gurú de la usabilidad ha realizado numerosos estudios de lo que el denomina "eyetracking".

Los resultados nos pueden ser de gran utilidad.

Según el autor los usuarios presentan un patrón en forma de F a la hora de leer una pantalla. Dos rallas horizontales

seguidas de una raya vertical.

También habla de F por "fast". Así es como los usuarios leen nuestro precioso contenido. En unos pocos segundos

mueven los ojos a lo largo del material de lectura de una manera muy diferente a como aprendimos a leer en la

escuela.

El estudio se realizó con 232 usuarios y miles de páginas web, y pudo confirmar que este comportamiento se repitió

de una manera consistente independientemente del tipo de web.

Este comportamiento ( en términos generales )tiene los siguientes 3 componentes:

Primero se lee en un movimiento horizontal, normalmente a lo largo de la parte superior del contenido

A continuación los usuarios bajan un poco la vista y leen otra vez en horizontal, en un movimiento que cubre un área

más pequeña que al principio.

Por último escanean la parte izquierda del contenido en un movimiento vertical, en un escaneo normalmente a veces

lento y otras no tanto.

Patrones de conducta de los

usuarios en dispositivos

digitales

En éstas imágenes se pueden observar las áreas que suelen escanear los usuarios, y como leen tres tipos

diferentes de web:

1. El típico apartado "about us" de una web corporativa

2. La página de un producto en una tienda on-line

3. Página de resultados de un buscador

Las áreas de color rojo son las más ojeadas, siguiendo el amarillo y el azul.

En la segunda página se modifican un poco los patrones de conducta, debido en parte a la imágen y a la caja que

sale en la parte superior derecha donde se indica el precio y el botón añadir a la cesta.

La tercera página muestra los patrones de lectura en una página como Google donde el interés va descendiendo.

Implicaciones prácticas de éste

comportamiento Según lo que hemos visto podemos sacar una serie de conclusiones:

Los usuarios no leerán a fondo el texto. La lectura exhaustiva es rara, hay algún caso pero es la minoría

Los 2 primeros párrafos deben proporcionar la información más relevante.

Hay algunas esperanzas de que los usuarios lean todo, pero en muchos casos probablemente leerán más el

primero que el segundo.

Los usuarios no leerán más del 50% del texto que leerían en el caso de ser un texto impreso.

Por otro lado diferentes estudios también concluyen que la velocidad de lectura es un 25% menos en pantalla.

Muchos usuarios entrevistados reconocen que no están cómodos cuando leen textos en la web. En conclusión: La

gente no quiere leer mucho en las pantallas de ordenador.

Implicaciones prácticas de éste

comportamiento El escaneo

Si a lo que comentamos anteriormente le unimos el hecho de que la presencia delante de una pantalla suele

provocar cierta impaciencia, podemos constatar que los usuarios no leen bloques de texto completos, si no

que escanean el texto escogiendo algunas palabras clave, frases o párrafos de interés sáltandose el resto

del texto.

Por lo tanto el que tenga que redactar para la web deberá tener en cuenta este patrón de comportamiento:

http://workawesome.com/

Estructurar los artículos con 2 o 3 niveles de cabeceras ( headings ). Esto también dotará a la página de

más accesibilidad ( nested headings )

Utiliza titulares con significado ( el titular debería intentar explicar por sí mismo de que trata el artículo )

Destacar y enfatizar aquellas palabras importantes para atraer la atención del espectador. El texto coloreado

puede ser un buen recurso.

Aprovechar el hipertexto. Dividir la información en múltiples nodos conectados por links. Cada página

puede ser breve y aún así contener mucha más información que un artículos escrito ( ej. la wikipedia ).

Implicaciones prácticas de éste

comportamiento

No confundir el apartado anterior. El hipertexto no se debe uilizar para segmentar un artículo largo y

lineal en diferentes páginas. Una estructura de hipertexto adecuada debería "Dividir la información en

bloques coherentes centrándose cada uno en un tema." El principio sobre el que nos deberíamos guiar es el

de permitir a los lectores seleccionar aquellos temas que les interesan y sólo descargar esas páginas.

Acordarse del principio de la pirámide inversa: empezar el artículo con una breve conclusión para que los

usuarios puedan hacerse una idea y escoger o descartar.

Implicaciones prácticas de éste

comportamiento

Longitud de la línea: debe ser menor que en los textos impresos, normalmente 35 pulsaciones

uso de cursiva: se desaconseja

Longitud del párrafo: también debemos utilizar párrafos cortos. Segmentar mucho la información. Los

párrafos largos producen lo que se llaman "los ríos en los campos de texto, que vienen a ser unas líneas

verticales que distraen la atención del usuario. El problema sólo se da en pantalla por su formato específico

de brillo, que genera más contraste, frente a la tipografía negra

Estos ríos, predisponen la vista del usuario a ir hacia abajo, y

consiguen que al final, en lugar de leer, escanee. En cierto

sentido son inevitables. La solución, segmentar más la

información con párrafos más cortos.

NO UTILIZAR PÁRRAFOS LARGOS EN MAYÚSCULAS

PUES ESTÁ DEMOSTRADO QUE AL IGUAL QUE CON

LA CURSIVA LA VELOCIDAD DE LECTURA SE REDUCE

EN UN TANTO POR CIENTO CONSIDERABLE.

El texto debe "respirar", es decir tener espacios que lo

separen de otros elementos. Esto relaja la vista y facilita la

concentración en la lectura

Los fondos claros facilitan la lectura e invitan a la reflexión

Consejos a la hora de redactar

para la web

La redacción en la web varía mucho a la que estamos acostumbrados, por ejemplo con procesadores de texto, o en

revistas y periódicos. El motivo principal es el medio, no hay que olvidar que leer en pantalla es muy diferente a

leer por ejemplo un periódico...

Los estudios de usabilidad demuestran que el usuario, más que leer escanea las páginas y dedica mucho menos

tiempo, por lo que si queremos mantener la atención deberemos seguir unas pautas...

Longitud de la línea: debe ser menor que en los textos impresos, normalmente 35 pulsaciones

uso de cursiva: se desaconseja

Longitud del párrafo: también debemos utilizar párrafos cortos. Segmentar mucho la información. Los párrafos

largos producen lo que se llaman "los ríos en los campos de texto, que vienen a ser unas líneas verticales que

distraen la atención del usuario. El problema sólo se da en pantalla por su formato específico de brillo, que genera

más contraste, frente a la tipografía negra.

Estos ríos, predisponen la vista del usuario a ir hacia abajo, y consiguen que al final, en lugar de leer, escanee. En

cierto sentido son inevitables. La solución, segmentar más la información con párrafos más cortos.

NO UTILIZAR PÁRRAFOS LARGOS EN MAYÚSCULAS PUES ESTÁ DEMOSTRADO QUE AL IGUAL

QUE CON LA CURSIVA LA VELOCIDAD DE LECTURA SE REDUCE EN UN TANTO POR CIENTO

CONSIDERABLE.

Si queremos destacar algunos elementos informativos, podemos jugar con la negrita, o incluso con colores.

Siempre que queramos mostrar un diseño o layout previo y no dispongamos de los textos, lo mejor es recurrir

allorem ipsum.

Consejos a la hora de redactar

para la web

El texto debe "respirar", es decir tener espacios que lo separen de otros elementos. Esto relaja la vista y facilita la

concentración en la lectura.

Los fondos claros facilitan la lectura e invitan a la reflexión

Ejemplo de web que no se leerá nadie

http://www.hipertext.net/web/pag264.htm

Definición del target. Conocer a

nuestra audiencia

Técnicas para conocer a nuestra audiencia. Web Mining

El web mining es una técnica de análisis para webs que deriva del data mining. Se usa para el estudio de varios

aspectos esenciales de un sitio y ayuda a descubrir tendencias y relaciones en el comportamiento de los

usuarios que sirven como pistas para, por ejemplo, mejorar la usabilidad de un sitio.

El data mining se usa para descubrir información, conocimiento disponible pero no visible en documentos de una

organización. Se asocia con la minería por la idea de excavar en busca de los datos.

Generalmente se analizan grandes volúmenes de información, utilizando algoritmos y luego se los representa en

modelos para que puedan ser analizados. El web mining(minería web) traslada este modelo al análisis de sitios,

procesando los datos disponibles para su posterior examen.

Como funciona el Web Mining

Cuando un sitio es navegado por los usuarios, los logs de los servidores que lo alojan van guardando información

acerca de esa visita:

•Qué día y a qué hora un usuario navega por el sitio,

•Si es la primera vez que visita el sitio o si es reincidente,

•Por qué archivo entra a visitar el sitio y por cual sale,

•Cuánto dura la visita y cuanto tiempo pasa en cada página,

•De qué país es, qué navegador usa, qué sistema operativo,

•Desde donde llega a nuestra página,

•Si llegó a través de un buscador, cuáles fueron las palabras clave usadas,

•etc.

Definición del target. Conocer a

nuestra audiencia

Los datos almacenados en los logs siguen un formato

standard. Una entrada en el log siguiendo este formato

contiene entre otras cosas, lo siguiente: dirección IP del

cliente, identificación del usuario, fecha y hora de acceso,

requerimiento, URL de la página accedida, el protocolo

utilizado para la transmisión de los datos, un código de

error, agente que realizó el requerimiento, y el número de

bytes transmitidos. Esto es almacenado en un archivo de

texto separando cada campo por comas (",") y cada acceso

es un renglón distinto

Esta información puede ser procesada por programas de estadísticas como awstats, logaholic, webtrends o lyris

Definición del target. Conocer a

nuestra audiencia

Estos programas nos brindan pistas para mejorar un sitio, ya que devuelven información estructurada y

significativa acerca de la navegación, por ejemplo:

Cantidad de visitas por hora, por día, por mes, etc.,

horas pico y horas de baja audiencia,

páginas más visitadas,

páginas de entrada y salida más frecuentes del sitio,

uso del buscador, ranking de palabras clave usadas para llegar,

Etc.

Entre las técnicas de data mining que más se utilizan en web mining tenemos:

las reglas de clasificación y agrupamiento,

las de asociación y

los sucesos frecuentes

que nos permiten por ejemplo clasificar y agrupar a nuestros usuarios y asignarles patrones de comportamientos

según la reiteración de acciones que se detecten como clave y así poder ofrecerles productos o servicios acordes a

sus perfiles.

Áreas del Web Mining

El web mining. para mejorar su efectividad, se subdivide en áreas que abarcan el contenido del sitio,

la estructura de navegación y el

comportamiento de los usuarios ante los dos primeros:

Definición del target. Conocer a

nuestra audiencia

Web Content Mining (minería de contenido web). Se centra en el contenido, y podemos obtener datos que acerca de

la forma de escribir que es más atractiva para el usuario, de si la catalogación que usamos sirve para mejorar un

ranking, si los temas que se tratan interesan o no.

Web Structure Mining (minería de estructura web). Obtenemos información acerca de si los usuarios encuentran la

información, si la estructura de sitio es demasiado ancha o demasiado profunda, si los elementos están colocados en

los lugares adecuados dentro de la página, si la navegación se entiende, cuáles son las secciones menos visitadas y

su relación con el lugar que ocupan en la página central.

Web Usage Mining (minería de uso web). Esta extracción se refiere a patrones de navegación que podemos

descubrir en nuestros usuarios y nos pueden servir para mejorar la misma, por ejemplo si el 80 % de nuestros

usuarios recurren al campo de búsqueda cuando entran a nuestro sitio es que deberemos poner énfasis en la mejora

de esa interfaz y que el motor que se encuentre detrás devuelva la información deseada.

El web mining es en definitiva un análisis significativo de los logs (registros que guardan los servidores) cuyo

proceso genera información de valor acerca del sitio y sus usuarios, tales como: patrones de navegación,

comportamiento de los usuarios ante cierta indexación de contenidos o estructuras de texto, preferencias del

usuario, inconsistencias, etc.

Principios del diseño aplicados

al desarrollo web

Teniendo claro es la web es un entorno particular, con un público y

unos hábitos exclusivos, conviene estudiar cómo podemos aplicar el

diseño para conseguir objetivos concretos que vayan más allá de la

pura estética.

Factores que condicionan el diseño

El principal objetivo que debe perseguir el diseñador web es el de

conseguir una buena comunicación, captar la atención del usuario, y

facilitarle el uso de la herramienta que hemos diseñado ( ya sea web,

intranet, etc ). En éste sentido hay que tener en cuenta varios factores

factor técnico: tecnología a utilizar, plug-ins, medio en el que se

mostrará nuestro trabajo, rapidez de descarga...

factor estético: nuestro diseño es capaz de enviar el mensaje que

queremos, transmitirá fuerza, elegancia, nostalgia, modernidad según

el objetivo?

factor comunicativo: seremos capaces de destacar aquellos aspectos

que nos interese, sin alterar la armonía, tendremos que usar

animaciones, los colores entorpecerán la lectura?

factor organizativo: sabremos crear un menú y una jerarquía clara,

una buena estructuración de los contenidos

Como vemos son muchos retos que traspasan lo puramente estético

Principios del diseño aplicados

al desarrollo web

Elementos del diseño

A la hora de diseñar podremos jugar con diferentes

elementos:

línea: como una forma geométrica, una línea es un punto

en movimiento con una sola dimensión. Los puntos crean

las líneas y las líneas crean formas o planos y la ilusión de

volúmen en un formato de dos dimsensiones.

color: en pantalla a diferencia del papel trabajaremos con

el sistema RGB, y en html utilizaremos los valores

hexadecimales. Hoy en día no hay muchas limitaciones,

aunque siguen habiendo variaciones entre máquinas y

plataformas

Principios del diseño aplicados

al desarrollo web

volúmen: en el diseño de dos dimensiones, el volúmen

es una ilusión creada mediante la interconexión de

líneas

movimiento: lleva implícito el acto o proceso de

cambiar de posición dirección, orientación. No está

necesariamente ligado a la animación como podemos

ver en la siguente ilustración

Principios del diseño aplicados

al desarrollo web

espacio: Todas las formas por mas pequeñas que sean

ocupan un espacio, el espacio así mismo puede ser

visible o ilusorio (para dar una sensación de

profundidad)

textura: es otro elemento que comparte

connotaciones ilusorias con el volúmen

Principios del diseño aplicados

al desarrollo web

valor: quedaría definido por la oscuridad y claridad de

un área, medido en relación de un degradado de blanco

a negro

tipografía: elemento muy a tener en cuenta,

tanto por sus limitaciones como por sus

posibilidades

Principios del diseño aplicados

al desarrollo web

balance: los elementos de nuestro diseño convergen

para crear una combinación de elementos que forman

un todo.

contraste: aparecerá siempre que pongamos

un elemento dentro de un formato.

Principios del diseño aplicados

al desarrollo web

dirección: este principio, utiliza cada elemento del

diseño para manipular la vista del usuario. Si fallamos

el usuario quedará confuso.

economía: se utiliza para eliminar todos los

elementos innecesarios.

Principios del diseño aplicados

al desarrollo web

énfasis: conocido también como dominancia del punto

focal. Opera en un sistema jerárquico que podemos

crear para diferenciar los distintos niveles de

información.

Proporción: la percepción de tamaño en un

campo visual. Se puede manipular para atraer

la atención del usuario.

Uso del color en el diseño web Los colores nos provocan diferentes sensaciones de las que no somos conscientes.

De una u otra manera nos afectan, pues vivimos rodeados de ellos, y culturalmente se han ido idenficando con

muchas de las cosas que nos pasan. Por ejemplo en nuestra cultura el matrimonio o el luto se han asociado siempre a

los mismos colores. Desde pequeños los sexos han ido diferenciados por colores.

A continuación veremos una breve explicación de que connotaciones pueden tener los colores en el diseño web.

El Blanco

El blanco es luz, bondad, inocencia, pureza y virginidad. Se le considera el color de la perfección.

En publicidad el blanco es asociado con la frescura y la limpieza. En publicidad se utiliza en la promoción de

productos de alta tecnología. Puede utilizarse también para comunicar simplicidad

El negro

Representa el poder, la elegancia, la formalidad, la muerte o el misterio.

En una página web puede dar imágen de sofisticación y elegancia, y aumenta la sensación de profundidad y

perspectiva.

Sin embargo no es muy recomendable su utilización como fondo de pantalla ya que disminuye la legibilidad.

Uso del color en el diseño web El azul

Es el color del cielo y del mar, con lo que se lo suele asociar con estabilidad y profundidad.

En publicidad es muy adecuado para presentar productos relacionados con la limpieza y todo aquello que tenga que

ver con el cielo, el aire el mar o el agua.

El Rojo

Es el color del fuego y de la sangre, por lo que se asocia al peligro, la guerra, la energía, la fortaleza, la

determinación, así como a la pasión, al deseo y al amor.

En publicidad es apropiado para anunciar coches, motos, bebidas energéticas, juegos, deportes de riesgo, etc.

Uso del color en el diseño web El Naranja

Combina la energía del rojo con la felicidad del amarillo. Es acogedor, cálido, estimulante y muestra una cualidad

dinámica, muy positiva y energética.

El color naranja tiene una visibilidad muy alta, por lo que es adecuado para captar la atención y subrayar los

aspectos más destacables de una página web.

El verde

Es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura.

Ideal para promocionar productos de jardinería, turismo, actividades al aire libre o productos ecológicos.

Uso del color en el diseño web El púrpura

Aporta la estabilidad del azul, y la energía del rojo. En la antigüedad era considerado el color más bello.

Es un color bastante contradictorio. Sugiere abundancia, sofisticación, inteligencia, espiritualidad, religiosidad,

dignidad, pero también puede evocar frivolidad, artificialidad y pomposidad.

El púrpura brillante es ideal para productos dirigidos a la mujer, y también es adecuado para productos infantiles.

Rosa

Utilizado universalmente para el romance y presencia femenina porque sugiere calma y serenidad.

Muy útil para crear una atmósfera relajada, reflejar diversión o mostrar un lado creativo.

Uso del color en el diseño web El marrón

Puede ofrecer una gran variedad de significados, desde la asociación con la naturaleza, parque u hogar, hasta la

vejez.

Tiene connotaciones de calidad, comodidad, es conservador y natural.

En páginas web se utiliza para demostrar formalidad, honradez y experiencia.

Gris

El color gris es un excelente acompañante que ayuda a resaltar los demás colores.

Connotaciones del gris: elegante, fresco, innovador, moderno, futurista, tecnología, espacioso, suave, neutral.

Uso del color en el diseño web El arco iris

Representa la diversidad y la cultura. Muchos sitios lo utilizan para simbolizar amistad y alegría.

Diverso, multicultural, fantástico, ligero, feliz, amistoso alegre. Puede transmitir también fantasía, orgullo, energía y

promesa.

Uso del color en el diseño web La relatividad de las connotaciones del color

Puesto que el color no será el único elemento del diseño web, debemos considerar estas connotaciones relativas a

los demás elementos del diseño, poniendo también especial interés en el significado y la fuerza de las imágenes o de

la tipografía.

Si por ejemplo querermos transmitir seriedad o elegancia, podemos aprovechar también una cuadrícula clásica o

utilizar una "Times New Roman" en las cabeceras.

Las connotaciones culturales e internacionales del color

Es otro aspecto que deberemos tener en cuenta si se da el caso, por ejemplo en nuestra cultura el color negro se

asocia al luto, mientras que en otras se asocia el blanco.

Diferencias por edades

Los niños prefieren colores más brillantes, más sólidos mientras que los adultos prefieren colores más sutiles y

complejos. Si estamos diseñando una pagina para ulna audiencia infantil y usamos pasteles o diferentes escalas de

grises, puede que les guste más a los padres que a los hijos.

Diferencias culturales o de clases

Estudios de marketing en Estados Unidos han mostrado que las clases trabajadores prefieren colores que se puedan

nombrar: azul, rojo, verde. Mientras que clases con un nivel cultural elevado prefieren colores más complejos.

Diferencias de género

En muchas culturas los hombres prefieren colores más fríos ( verdes y azules ) mientras que las mujeres prefieren

colores cálidos ( rojos y naranjas ).

Tendencias y modas

Los colores, como cualquier otro elemento del diseño, suben y bajan en popularidad. Las páginas negras estaban de

moda hace unos pocos años y ahora es raro ver alguna. El color también cambia según las estaciones, en otras

palabras, los diseños reflejan la estación en la que se ha creado el diseño. En invierno negros, blancos y grises, en

primavera verdes y colores brillantes, en verano amarillos y en otoño marrones y dorados.