Your SlideShare is downloading. ×
Principios de Usabilidad para Dominar la Red
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Principios de Usabilidad para Dominar la Red

1,262
views

Published on

Published in: Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,262
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. »
  • 3. Como nos ven nuestros visitantes… Espiemoslos….
  • 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.
  • 7. Definición y conceptos generales
  • 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.

×