lunes, 8 de agosto de 2011

USABILIDAD INTERFASES WEB

Que es la usabilidad?


Técnicas que ayudan a los seres humanos a realizar tareas en entornosgráficos de ordenador.

3 conceptos muy importantes. Trabajamos para seres humanos, que quieren realizar una tarea de una forma sencilla y eficaz y en este caso particular, la deben realizar frente a un ordenador en un entorno grafico, la web. La usabilidad ayuda a que esta tarea se realice de una forma sencilla analizando el comportamiento humano, y los pasos necesarios para ejecutar la tarea de una forma eficaz. Quizás suene un poco a trabajo industrial, pero al hacer referencia al termino "tarea", estamos haciendo referencia a buscar un programa que queremos ver en la tele, a ver información sobre mi equipo de futbol favorito, a comprar un libro sobre artes marciales.

Realmente hace falta la usabilidad para hacer una web?

Si. Sea tu web un portal o una pagina personal, no olvides que la gente que entra en tu web es por que básicamente busca algo. Hacerlo sencillo es decisión tuya, pero seguro que entre todos podemos hacer de internet un sitio mejor donde la gente no se sienta perdida o extraviada o sencillamente defraudada.

Donde puedo encontrar mas información sobre este tema?
Hay miles de direcciones que hablan sobre usabilidad en internet. En la pagina de
enlaces de interes, disponible en este manual, podrás encontrar una selección de paginas que me han ayudado a formarme y a estudiar sobre este tema.

Cuales son las 8 reglas de Oro sobre la usabilidad?

Espero que te sirvan. Quizás mañana sean 10 reglas.
1. En internet el usuario es el que manda.
    • Esto quiere decir que sin usuarios tu pagina muere, así que mas te vale que los cuides y les des lo que te piden, de lo contrario te quedaras solo.
2. En internet la calidad se basa en la rapidez y la fiabilidad.
    • En internet cuenta que tu pagina sea mas rápida que bonita, fiable que moderna, sencilla que compleja, directa.
3. Seguridad.
    • Si en el mundo real a veces nos cuesta fiarnos del banco de la esquina, imagínate como se siente la gente en internet cuando llega a tu site. Procura que todo funcione como un reloj para que la gente pueda fiarse de tu site.
4. La confianza es algo que cuesta mucho ganar y se pierde con un mal enlace.
    • Esto quiere decir que tal y como esta la competencia en internet, no puedes perder ni un solo visitante por tener un enlace mal hecho. Es mejor salir con algo sencillo e irlo complicando poco a poco, que salir con todo y ver "que es lo que pasa". Versiones 1.0 son buenas mientras lo que este puesto este bien asentado y genere confianza. Poco a poco y con el feedback de los usuarios, podras ir complicando la pagina. Pero asegura antes de arriesgar.
5. Si quieres hacer una pagina decente, simplifica, reduce, optimiza.
    • La gente no se va a aprender tu site por mucho que insistas, así que por lo menos hazlo sencillo, reutiliza todos los elementos que puedas, para que de este modo los usuarios se sientan cómodos y no se pierdan cada vez que necesiten encontrar algo en tu site.
6. Pon las conclusiones al principio.
    • El usuario se sentira mas comodo si ve las metas al principio. De esta forma no tendra que buscar lo que necesita y perdera menos tiempo en completar su tarea. Si completa su tarea en menos tiempo se sentira comodo y quizas se dedique a explorar tu site o quizas se lo recomiende a un amigo.
7. No hagas perder el tiempo a la gente con cosas que no necesitan.
    • Cuidado con cruzar promociones, si lo haces por lo menos hazlo con cuidado. Procura que la seleccion de productos a cruzar sea consecuente y no lo quieras "vender todo" en todas las paginas. Según avance el usuario en su navegacion procura dejarle mas espacio libre. Puede ocurrir que cuando este punto de comprar algo vea una oferta que le distraiga y pierdas esa venta.
8. Buenos contenidos.
    • Escribir bien para internet es todo un arte. Pero siguiendo las reglas básicas de (1) poner las conclusiones al principio y (2) escribir como un 25% de lo que pondrías en un papel, se puede llegar muy lejos. Leer en pantalla cuesta mucho, por lo que, en el caso de textos para internet, reduce y simplifica todo lo que pue
  Primero pasos.
  • Disponer de tiempo, tecnología y recursos humanos para llevar a cabo el proyecto.
  • Que todos los departamentos de la compañía se sientan integrados en el proyecto.
  • Qué vas a "vender": entiéndase vender como promocionar, anunciar, o vender directamente productos.
  • A quién se lo vas a "vender": debemos identificar a nuestro núcleo de usuarios extremos que nos ayudaran a posicionar el producto de una forma más definida que si nos dirigimos directamente a la gran audiencia.
  • Cómo se lo vas a "vender": aquí es donde entran los temas de logística, atención al cliente, diseño de producto y web.
  • Una vez vendido, qué hacemos: es importante prever que pasara mañana cuando nuestros clientes nos hayan comprado los productos. Fidelizacion, promociones, seguimiento...

  El primer prototipo.
  • Con todos los requisitos recogidos en los primeros pasos, podremos empezar a pensar en como vamos a construir nuestro site.
  • Se recomienda que el equipo que este en esta fase sea multidisciplinar (como mínimo, programación, diseño, contenidos y un coordinador de equipo).
  • Se recomienda que el coordinador sepa algo de todas las materias, (servidor, web, diseño, contenidos) por que será la persona encargada de crear puentes entre los diferentes departamentos y de llegar a consensos cuando surjan problemas de competencia.
  • Con este equipo se llevara a cabo una maqueta que servirá para aproximarnos a la idea de nuestro site.
  • Esta maqueta será producida a un nivel casi real para que sea probada por los usuarios.

  Test de usuario.
  • Una vez producido el prototipo, se hará nuestro primer test de usuario.
  • El test de usuario nos ayudara a enriquecer el producto observando el comportamiento del usuario, viendo las virtudes de nuestro producto y sobre todo aquellos puntos débiles que pueda presentar.
  • Con el test de usuario se realizara un nuevo prototipo que se debería volver a testear mientras sea posible.

  Lanzamiento.
  • Una vez tenemos un prototipo ajustado queda la parte de realización técnica.
  • Se deberá disponer del tiempo disponible para ajustar el prototipo a la realidad, pero no se deben encontrar nuevos obstáculos en esta fase.
  • Para evitar estos nuevos obstáculos, es necesario la total transparencia de los departamentos a la hora de realizar el prototipo, es decir, conocer toda las posibilidades existentes dentro de la operativa, ver el "peor de los casos existentes", ver como funciona "el primer día", etc...
  • Por ultimo se recomienda pasar una fase de "emision en pruebas", es decir, lanzar el site y probarlo en real (conexiones con modem, operativa real, ver respuesta del correo o del call center en caso de que existan, etc...)
El diseño de sitios web deben seguir los siguientes principios:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

La Interacción Persona-Ordenador, es la disciplina que estudia el intercambio de información entre las personas y los ordenadores. Su objetivo es que este intercambio sea más eficiente: minimiza los errores, incrementa la satisfacción...


La investigación en IPO/HCI lleva a la estandarización de la usabilidad, su mejora y apoyo empírico. El enfoque científico de la IPO/HCI incluye una variedad de herramientas y técnicas que ayudan a desarrollar mejores interfaces de usuario.
Nota: La Interacción Persona Ordenador es más conocida por su nombre en inglés, Human- Computer Interaction y sus siglas HCI (en lo sucesivo utilizaremos las siglas IPO/HCI)

Breve historia

Los orígenes de la IPO/HCI hay que buscarlas en la rama de la Psicología Aplicada que estudia la Interacción Persona-Ordenador. Las dos disciplinas de las que surge la IPO/HCI son las llamadas "Human Factors" y la Ergonomía (en realidad es la misma disciplina, el primer termino se utiliza en EE.UU y el segundo en Europa). Actualmente el uso de estos términos no esta claramente establecido y incluso a veces se utilizan de manera indistinta.

El predominio tradicional en la IPO/HCI ha sido de los ingenieros, aunque la influencia de la psicología es creciente. La Psicología es la disciplina que estudia la percepción, la memoria, la adquisición de habilidades y el aprendizaje, la resolución de problemas, el movimiento, las tareas de juicio, de búsqueda o procesamiento de información y de la comunicación, es decir, procesos todos cuyo conocimiento se requiere para el adecuado diseño de mecanismos de interacción del usuario. Aunque la Psicología Cognitiva es una ciencia muy joven en lo que respecta a investigaciones de carácter básico y sistemático, existen actualmente suficientes hallazgos basados en resultados empíricos que permiten el desarrollo de la IPO/HCI y, por ende, de sitios web adaptados a los usuarios.

La IPO/HCI es también una disciplina joven, pero no tanto como pudiera parecer. Desde el primer ordenador ha sido necesario el diseño de un sistema de comunicación persona-ordenador. Los estudios en esta disciplina han permitido dar una base teórica al diseño y a la evaluación de aplicaciones informáticas. La importancia de esta disciplina se pone sobre relieve al leer artículos sobre el tema escritos hace cuarenta años en los que se predecían elementos de interacción de los que se dispone actualmente. Una de las asociaciones más influyentes en este campo es la ACM SIGCHI (Association for Computing Machinery's Special Interest Group on Computer-Human Interaction) que desde 1982 reune a los mejores especialistas en IPO/HCI.

Los primeros estudios específicos de IPO/HCI aparecieron en los años sesenta y se referían a la simbiosis Persona-Ordenador (Licklider, 1960). Este autor afirmó anticipándose a la problemática posterior que el problema de la interacción hombre-ordenador no es crear ordenadores productores de respuestas, sino ordenadores que sean capaces de anticipar y participar en la formulación de las preguntas.

Licklider y Clark (1962) elaboraron una lista de 10 problemas que deberían ser resueltos para facilitar la interacción personas-ordenador. Según el los cinco primeros problemas deberían ser resueltos de manera inmediata, el sexto en un tiempo intermedio y los cuatro últimos, a largo plazo:

1. Compartir el tiempo de uso de los ordenadores entre muchos usuarios.
2. Un sistema de entrada-salida para la comunicación mediante datos simbólicos y gráficos.
3. Un sistema interactivo de proceso de las operaciones en tiempo real.
4. Sistemas para el almacenamiento masivo de información que permitan su rápida recuperación.
5. Sistemas que faciliten la cooperación entre personas en el diseño y programación de grandes sistemas.
6. Reconocimiento por parte de los ordenadores de la voz, de la escritura manual impresa y de la introducción de datos a partir de escritura manual directa.
7. Comprensión del lenguaje natural, sintáctica y semánticamente.
8. Reconocimiento de la voz de varios usuarios por el ordenador.
9. Descubrimiento, desarrollo y simplificación de una teoría de algoritmos.
10. Programación heurística o a través de principios generales.

El tiempo ha demostrado que Licklider y Clark estaban en lo cierto en la mayoría de sus observaciones, sin embargo, actualmente aún no se han conseguido solucionar algunos de los problemás previstos para su resolución a largo plazo.

Hansen (1971) en su libro "User Engineering Principles for Interactive Systems" hace la primera enumeración de principios para el diseño de sistemas interactivos:

1. Conocer al usuario
2. Minimizar la memorización, sustituyendo la entrada de datos por la selección de ítems, usando nombres en lugar de números, asegurándose un comportamiento predecible y proveyendo acceso rápido a información práctica del sistema.
3. Optimizar las operaciones mediante la rápida ejecución de operaciones comunes, la consistencia de la interfaz y organizando y reorganizando la estructura de la información basándose en la observación del uso del sistema.
4. Facilitar buenos mensajes de error, crear diseños que eviten los errores más comunes, haciendo posible deshacer acciones realizadas y garantizar la integridad del sistema en caso de un fallo de software o hardware.

A pesar de la obviedad y antigüedad de estos principios es fácil encontrar en sitios web de comercio electrónico códigos inmemorizables para identificar productos, mensajes de error ininteligibles y, en general, un maltrato constante al usuario.


En este artículo vamos a comentar como planear y crear un buen buscador interno para un site. Incluye varios ejemplos sobre cómo se hace en los periódicos digitales españoles.
Licencia Copyleft.
Puedes reproducirlo citando al autor y enlazando con DesarrolloWeb.com.
Para tener un buscador debes guardar todo lo que hagas. Procura que cada artículo, fichero, producto tenga una página con entidad propia. Jamas borres una página. Puede ser que alguien la esté enlazando desde otra página, o puede ser que alguien la esté buscando. 2. Indexa todo el site y deja que los usuarios busquen en todo tu archivo. 3. Ofrece resultados ordenados e identifica palabras clave (keywords) para facilitar la búsqueda.

Buscadores gratuitos para tu site sin necesidad de saber programación
Este listado de sites ofrecen código listo para copiar y pegar en tu site de tal forma que los usuarios puedan buscar dentro de las páginas de tu site.

Aspectos específicos de cada site pueden alterar la calidad de los resultados.

En este artículo no se habla de código PHP

En los comentarios todo el mundo se queja de que este artículo no ofrece código para programar un buscador.

Esa no era la idea original del mismo. La idea era hablar sobre como "planear y crear un buen buscador". El código del buscador sin un buen sistema de páginas para indexar no sirve de nada.

Si quieres código para crear un buscador, utiliza estos enlaces.

Este artículo pretende hablar sobre como diseñar, no programar un buscador.

Código PHP para crear un buscador interno
Originalmente publicado en Noviembre de 2000

1. Crea archivos. Guarda todo lo que hagas.

Cuando hagas tu página ten en mente la forma de almacenar los archivos. Procura que cada "elemento" tenga su "entidad".
Definamos "elemento" como cada artículo, ficha de producto, gráfico que tenga interés para los usuarios en tu site.
Cada uno de estos elementos tendrá una página con un nombre, una ubicación y un orden dentro de la jerarquía de tu site.
Este elemento por tanto estará correctamente identificado para acceder a el en cualquier momento.
Nota:Si tu site genera páginas en tiempo real, lo ideal seria guardar el sumario del día. Por ejemplo en un broker, donde la información bursátil genera páginas diferentes a cada refresco de información, seria interesante guardar una ficha por empresa y día, con la información del cierre, máximos, mínimos, generando un archivo interesante para la consulta.
2. Dejemos que el usuario busque todo lo que quiera.

Lo que tiene sentido en un buscador es que se pueda buscar todo. Es decir, si entro en un periódico, y pongo "Aznar", lo que quiero es ver todas las noticias que hay sobre Aznar desde que nació. Eso me da libertad y me muestra la potencia de la página.
Buscar en los archivos y ver que el sistema responde, da al usuario muestras de que esta delante de un sitio donde puede pasar horas y horas mirando información relevante. Si empezamos a limitar la búsqueda (solo este mes, solo este numero, solo en este sitio) empezamos a hacerlo mal y puede ser que el usuario se muestre frustrado. También ocurre que el numero de resultados validos disminuye con lo que perdemos calidad en la búsqueda.

3. Ofrece resultados ordenados

Así como demostrar la potencia de la maquina con un buen buscador esta bien, también es reconfortante demostrar inteligencia. Para ello debemos identificar palabras clave "relevantes" en nuestro site. Esta identificación nos servirá de atajos para evitar mostrar información redundante al usuario. Siguiendo con el ejemplo del periódico. Si entro en el periódico y pongo "Aznar", lo ideal seria mostrar un enlace a la típica ficha oficial y luego todos los resultados relevantes en nuestro site.
Esta "inteligencia" requiere identificar todos los elementos que creamos que son relevantes para el usuario y hacerlo de forma mas o menos humana. Siguiendo con el ejemplo del periódico, palabras como "presidente", "aznar", "jose María aznar", nos llevarían a resultado similares. Donde lo ideal seria ver una serie de "fichas" que concuerdan con el termino buscado, y una serie de resultados provenientes de la base de datos.

Photodisc.com es uno de los sitios mejor organizados. No solo busca por "keywords" si no que una vez encontrada la foto vemos una serie de keywords relacionados con esta. Estos keywords están enlazados de tal forma que puedo seguir buscando por keywords nuevamente hasta afinar los resultados. Básicamente lo que ofrece es una sensación de "control" que muchas veces se hecha de menos.

Mas o menos con este sistema de "palabra clave" y búsqueda "brutal" podremos ofrecer al usuario un arma útil para navegar por nuestro site.

4. Lo que ocurre en el mundo real es mas o menos lo siguiente.

Gente que lo hace muy bien.
Tenemos 3 ejemplos básicos que no son buscadores y uno de ellos es de España:
  • The New York Times. Este periódico ofrece un buscador, quizás algo pequeño pero muy efectivo. Presenta dos opciones de búsqueda, bajo la forma de "radio button", que son buscar en la edición de hoy o buscar en los archivos. Los archivos son de pago con lo que han conseguido que el buscador sea una herramienta de venta. En los archivos básicamente lo puedes encontrar todo. En el buscador del día también. Es impresionante.
  • ESPN.com es un sitio de deportes que tiene un buscador muy bueno. En la parte superior tenemos un combo con 3 opciones muy claras, "keywords", "buscar en todo el site" o buscar en internet. No hay lugar a dudas. Luego tenemos el campo de texto y el botón de buscar. Todo correcto. El caso de buscar por keywords, es clave, si pongo NFL, no quiero ver todos los artículos que contienen la palabra NFL, quiero ver la página que le dedicas a esto. En el caso de sitios de comercio electrónico, si pongo pantalones, no quiero que me saques todas las páginas que pone pantalones, quiero que me lleves a la sección/es donde vendes pantalones.
  • La gente del Marca.es lo hacen muy bien. Quizás el buscador este algo escondido, pero funciona muy bien. Aquí tienes un ejemplo de los resultados que ofrecen.
Lo que hacen en España los periódicos.

En los periódicos puede ser donde un buscador sea la herramienta mas utilizada después de los portales. El archivo que generan y la flexibilidad de internet les proporcionan un valor incalculable. Veamos que es lo que hacen.
Aquí verás comentados el ABC, El Mundo, El País y la Vanguardia. Ninguno lo hace muy bien, pero el que mejor lo hace es el Mundo.

Como se presenta el buscador en la portada:
  • El ABC: Presenta un buscador en la portada, pero se les olvido poner el botón de "buscar".
  • El Mundo: Presenta un buscador interno al final de la página de portada. Demasiado escondido.
  • El País: Presenta la búsqueda como una opción por lo que debemos irnos a otra página para poder buscar.
  • La Vanguardia: Presenta un buscador en portada pero es algo complejo de manejar. También se les olvido poner el botón de buscar.
  • Lo ideal seria el formato del buscador del Mundo pero arriba del todo.
Podemos buscar en "todo" el site:
  • El ABC: Si, pero palabras como "televisión", "tabaco", "perro" dan resultados nulos. Me parece que solo busca en la edición del día. . Esta pantalla salió al buscar fútbol dentro del buscador del ABC.
  • El Mundo: Deja acceso por meses.
  • El País: Deja acceso por días.
  • La Vanguardia: Presenta la opción de "diario de hoy", "6 meses" (por que no 12, o 24?), "resto de la web" (que web?, internet?, tu web?, mi web?, que es el resto?, lo que sobra?).
  • Lo ideal seria poder buscar en "todo" el archivo. Ninguno permite esta opción.
Como vemos los resultados:
  • El ABC: Básicamente falla mucho.
  • El Mundo: Quizás el mejor de los 4. Presenta resultados ordenados por relevancia y disponemos del buscador en la misma página, por lo que no tenemos que volver al buscador para hacer una nueva búsqueda. Esto es básico, pero muchas veces se olvida.
  • El País: Bastante mal. No esta bien hecho ni el tema de titular las páginas por lo que muchas veces los resultados sales vacíos. Luego no tenemos el buscador en esta página por lo que tenemos que volver al buscador para hacer una nueva búsqueda.
  • La Vanguardia: No esta mal, pero el buscador es algo complejo de manejar ya que es el combo el que "lanza" la búsqueda.
  • Lo ideal es lo que hace el Mundo. Los ordena por relevancia, indicando la fecha, peso y el titular del artículo. Excelente.