1. 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…!
2. 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. »
4. 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.
5. 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
6. 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.
8. 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:
9. 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.
10. 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.
11. 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.
12. 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
13. 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.
14. 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.
15. 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.
16. 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
17. 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
18. 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.
19. 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.
20. 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.
21. 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.
22. 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 ).
23. 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.
24. 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
25. 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.
26. 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
27. 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.
28. 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
29. 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:
30. 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.
31. 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
32. 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
33. 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
34. 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
35. 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
36. 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.
37. 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.
38. 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.
39. 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.
40. 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.
41. 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.
42. 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.
43. 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.
44. 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.
45. 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.
