Usabilidad en la Web.

Caso práctico

Ilustración de Carlos, posible trabajador de la empresa BK programación. Tiene conocimientos de diseño web y le gustaría trabajar en el mantenimiento de páginas web. Está estudiando el Ciclo de Desarrollo de Aplicaciones Web. Como todas las semanas, se reúnen los miembros del equipo de trabajo de la empresa BK programación, para comentar las incidencias de la semana anterior.

Carlos se ha pasado parte de la semana anterior observando la interfaz de multitud de páginas relacionadas con el mundo de la alimentación.

–¿Cuál es tu veredicto? –le pregunta Ada.

–¡Buff! Hay de todo. Hay sitios, sobre todo los de franquicias, que tienen un diseño bastante estándar y que cualquier usuario puede comprender qué enlace tiene que pulsar para llegar a un determinado contenido pero, hay otros en los que no fui capaz de imaginar qué era lo que me iba a encontrar hasta que pulsé el enlace y lo vi –explica Carlos, mientras los demás lo miran atentamente.

–¿Puedes ponernos un ejemplo? –le pregunta María.

–Claro que sí –le responde Carlos, que continúa diciendo –es más, os he traído una de las páginas que más me ha sorprendido. Mirad estos iconos –dice Carlos enseñándoles una página encargada de mostrar un catálogo de productos– ¿Veis qué es lo que pasa cuando paso el ratón por encima? –les pregunta.

Todos están mirando atentamente el movimiento del ratón por la pantalla, buscando alguna reacción de la interfaz, pero es Ana la que decide romper el silencio diciendo: –¿Qué es lo que pasa? Yo no veo nada.

–Pues es eso precisamente lo que pasa, que no pasa nada, que hay que ser adivino para saber para qué sirve cada icono –le responde Carlos.

–Bueno, esos de la raya y la flecha a la izquierda y a la derecha deben ser los de cambio de página ¿no? –dice Ana, rápidamente, a lo que Juan añade: –y la lupa ¿qué tiene en el centro?, ¿un símbolo de suma?, sí, es un símbolo de suma por lo que debe ser para aumentar ¿no es así?

–Si, claro, éstos eran los fáciles, pero ¿qué me decís de este círculo de la derecha?, ¿se os ocurre cuál es su función? –les vuelve a preguntar, no sin esbozar una pequeña sonrisa.

Nadie se atreve a decir nada. Después de cinco segundos larguísimos, Ada decide intervenir diciendo: –Vamos Carlos, sácanos de dudas.

–Pues éste icono con forma de círculo vale para ver el catálogo en modo de pantalla completa –les dice a la vez que pulsa el botón para que todos puedan verlo.

–Nunca me lo hubiera imaginado. Es más, nunca se me habría ocurrido escoger ese icono para darle ese uso. Aún si fuera un rectángulo, o dos rectángulos superpuestos de distinto tamaño. Un rectángulo te puede recordar a una pantalla pero ¿un círculo? –dice Ana.

–Como veis –dice Ada– es muy importante la elección que hagamos de todos los elementos de la interfaz ya que los usuarios se sentirán desconcertados si se encuentran con algo que desconocen. Hay que tratar de que los elementos empleados les sean familiares consiguiendo, de esta forma, que el sitio sea más usable. Tened siempre en cuenta esto cuando estéis diseñando una interfaz para un sitio web: Lo novedoso no siempre es lo más adecuado.

Ada da por terminada la reunión diciendo: –Pues a trabajar todos.

1. Usabilidad en la Web.

Caso práctico

Ilustración de Antonio, trabajador de la empresa BK programación. Tiene conocimientos de informática a nivel de usuario, maneja paquetes ofimáticos y le gusta jugar con el ordenador.Antonio ha decidido sumergirse de lleno en el mundo de la usabilidad. Ha estado leyendo mucha información publicada por Jabob Nielsen que está considerado como el padre de la usabilidad en la Web y se ha comprado el libro de Steve Krug  "No me hagas pensar" para profundizar más en el tema.

Se ha dado cuenta que los beneficios que se pueden obtener de diseñar una interfaz Web teniendo en cuenta la usabilidad de la misma pueden ser muy grandes.

Danés de nacimiento, es una de las personas más respetadas en el ámbito mundial sobre usabilidad en la Web. Es autor de los libros: "Usabilidad: Diseños de sitios Web", "Priorizando la usabilidad web" y "Usabilidad de páginas de inicio" entre otros.

Es un experto reconocido en el campo de la usabilidad Web, autor de los libros "No me hagas pensar: Una aproximación a la usabilidad en la Web", "Haz fácil lo imposible. La guía para detectar y determinar los problemas de usabilidad".

En la primera unidad estudiamos los elementos del diseño como parte fundamental de una buena planificación de interfaces gráficas y decíamos que diseñar requiere, principalmente, consideraciones funcionales y estéticas, y que es la integración de un conjunto de requisitos técnicos, sociales y económicos, de necesidades biológicas con efectos psicológicos y de materiales, forma, color, volumen y espacio, todo ello pensado e interrelacionado con el entorno.

También decíamos que toda percepción es un acto de búsqueda de significado y que percibir no es recibir pasivamente información visual, sino que implica buscar, seleccionar, relacionar, organizar, establecer conexiones, recordar, identificar, jerarquizar, evaluar, aprender e interpretar y que, por tanto, las personas dedicadas al diseño debían conocer al público, sus necesidades e inquietudes para poder lograr que su mensaje visual llegara de manera correcta a sus receptores.

En su momento hablamos de la IPO y decíamos que cuando hay una buena comunicación entre el usuario y el ordenador, el intercambio de información es más eficiente, se reducen los errores y aumenta la satisfacción del usuario, y que debíamos tener en cuenta que las personas se enfrentan a la interacción con el ordenador con diferentes grados de preparación y con distintas expectativas.

No debemos olvidarnos, tampoco, de lo que en su momento aprendimos sobre las características que debía tener una interfaz: ser usable, visual, educativa y actualizada, razón por la cual las personas que diseñan interfaces Web debían realizar unos diseños centrados en la usabilidad, la eficiencia, la eficacia y la satisfacción del usuario, lo cual podían lograr apoyándose en los principios de la Gestalt aplicándolos en la creación de los patrones de Diseño.

(Interacción Persona Ordenador) Disciplina que estudia el intercambio de información entre las personas y los ordenadores.

El objetivo principal en el diseño de una interfaz Web es que sus potenciales usuarios pueden acceder a todos su contenidos de la forma más rápida y sencilla posible.
Todo esto, que vimos en su momento, está muy relacionado con la Usabilidad.

Si tuviese que elegir entre todas las definiciones de Usabilidad que he leído en diferentes artículos me quedaría con:

"Usabilidad es una cualidad de un sitio web de la que sólo se percibe su falta. Cuando está presente, el usuario interactúa con facilidad y rapidez y sólo se detecta cuando el usuario se queja."

1.1.- Conceptos generales.

Reflexiona

Te han invitado a un cumpleaños en una casa a las afueras de tu ciudad. Nunca has estado allí y no conoces el lugar por lo que han quedado contigo en una plaza céntrica con el objetivo de guiarte hasta allí. El camino es largo y, aunque la velocidad máxima es de 90 kilómetros por hora, estáis yendo más despacio ya que es una travesía muy agradable, con muchas cosas que ver por el camino. Además, aunque tiene bastantes desviaciones, está bien señalizado. Tu te vas fijando en todos los detalles porque sabes que después tendrás que regresar.

Cuando te despides, la persona que te invitó te dice que dentro de dos meses celebra sus bodas de plata con una gran fiesta y que le encantaría que fueras. ¿Qué le respondes? ¿Sabrías volver sin su ayuda?

El diseño de interfaces Web es un caso concreto de diseño de interfaz gráfica de usuario y, es por ello, que se basa en sus mismos principios:

  • Dar el control al usuario.
  • Reducir la carga de memoria.
  • Mantener una interfaz consistente.
    Ilustración con el texto ¡Qué horror! ¿Cómo puedo arreglar lo que acabo de hacer?,  y una fotografía de un señor con cara de preocupación con las manos estrujando su cabeza.
    Beatriz Buyo Pérez (CC BY-NC-SA)

Al realizar un diseño de una interfaz hay que hacer un análisis de los posibles usuarios de la misma. En el caso de diseñar un software de aplicación para una empresa podemos conocer cuáles son sus usuarios potenciales pero, en el caso de una interfaz web, los usuarios potenciales son todos aquellos que tengan una conexión a Internet. Es por eso que, si queremos llegar al mayor número posible de personas, debemos esmerarnos en el diseño de nuestra interfaz web.

La ISO define la usabilidad como: "El grado en que un producto puede ser utilizado, en un contexto de uso específico, por determinados usuarios, para conseguir objetivos específicos, con efectividad, eficiencia y satisfacción".

La usabilidad es un atributo cualitativo que evalúa cuán fáciles son de usar las interfaces de usuario.

La palabra "usabilidad" se refiere también a los métodos empleados para incrementar la facilidad de uso durante el proceso de diseño.

Autoevaluación

Pregunta

Una interfaz web debe ser visual, es decir, su objetivo principal es conseguir que llame la atención. ¿Verdadero o falso?

Respuestas

Verdadero.

Falso.

Retroalimentación

1.2.- La Web: Objetivos y uso de estándares.

Ya hemos hablado anteriormente de los objetivos principales del diseño de interfaces Web, pero en este caso lo haremos centrándonos en el tema que nos ocupa: La usabilidad.

La Web es un medio de comunicación global que permite a las personas intercambiar información y experiencias independientemente de su sexo, edad, ideología, religión, nivel cultural y capacidades físicas o psíquicas.

La Web se ha convertido en una forma ventajosa de dar a conocer una empresa y de obtener una cuota de mercado. Hoy por hoy, una empresa puede decidir no invertir en anunciarse en la prensa o en la radio, o en contratar personal para introducir propaganda en los buzones. La forma de propagar la información está cambiando. La Web implica rapidez en la obtención de la información y libertad de elección:

  • Cada vez hay más personas que consultan las noticias en la prensa digital y ya no compran el periódico en el quiosco.
  • La juventud de hoy prefieren ver las series en su ordenador que en la televisión ya que no están sujetos a ningún horario.
  • Si estás buscando un viaje puedes ver fotografías de los lugares, de los hoteles, información sobre los vuelos, los precios y además opiniones de otras personas que ya han estado allí. Mientras que si vas a una agencia de viajes, verás uno o dos folletos de distintos tour-operadores y, con suerte, podrás recibir una opinión de la persona que te esté atendiendo.
  • Con el ritmo de vida actual, resulta muy cómodo y muy rápido hacer la compra a través de Internet y recibirla en tu casa.
    Ilustración con dos columnas de cuatro rectángulos de color azulón que leídos de arriba a abajo y de izquierda a derecha son: Embutidos, Conservas, Aceites, Bebidas, Congelados, Desayunos, Aseo personal, Limpieza. En la esquina superior derecha un círculo rojo con el texto Usted está aquí y en la esquina inferior derecha, ocupando casi todo el lateral derecho, un rectángulo de color naranja con el texto Cajas orientado de abajo a arriba.
    Beatriz Buyo Pérez (CC BY-NC-SA)

Reflexiona

¿Sueles realizar la compra mensual en un hipermercado? ¿No te molesta enormemente que, cuando ya has memorizado la ubicación de cada producto, te cambien todo de lugar?

Es por todo lo expuesto anteriormente que, a la hora de diseñar una interfaz Web, debemos tener en cuenta algunos de los objetivos de la Web relacionados con la usabilidad:

  • Permitir una búsqueda rápida, cómoda y eficiente de la información por parte de los usuarios.
  • Facilitar la navegación de los usuarios en el sitio web.
  • Facilitar la interactividad de los usuarios con el sitio web.
  • Tener en cuenta las necesidades de los usuarios.

También debemos tener en cuenta el uso de estándares en la implementación del sitio. Los lenguajes de marcas HTML, XML y XHTML ya los mencionamos en unidades anteriores. El uso de estos estándares es muy importante si pretendemos asegurar la continuidad de nuestro sitio web.

Si empleamos lenguajes estándar tenemos la garantía de que nuestro sitio se adaptará mejor ante futuros cambios en la tecnología, nuevas versiones de navegadores, dispositivos móviles, etcétera. Nuestros sitios Web podrán crecer sin problema.

Si además usamos las hojas de estilo, que veremos en otra unidad, separando el aspecto visual de la página de su contenido, las páginas serán mucho más fáciles de mantener y adaptar a las diferentes necesidades de los usuarios.

Si los usuarios de tu sitio web ven cubiertas sus necesidades durante su visita, estarás más cerca de cumplir todos tus objetivos.

Debes conocer

En el siguiente enlace podrás acceder a la información sobre los estándares relacionados con la usabilidad en la Web.

Normas ISO relacionadas con la usabilidad.

1.3.- Los usuarios: Tipos, necesidades y barreras.

Cada usuario es un mundo y, si quieres tener alguna ventaja sobre la competencia, tendrás que conocerlos mejor. Deberás hacer un perfil de los posibles usuarios de tu sitio web e identificar qué es lo que pueden tener en común y aquellas cosas que los diferencian.

Conjunto de personas colocadas formando el símbolo de interrogación.
Stockbye (CC BY-NC-SA)

Podemos hacer una distinción de los usuarios por su comportamiento o sus reacciones cuando usan la Web y tenerlo en cuenta a la hora de hacer un diseño:

  • Hay usuarios a los que no les gusta que una página principal tenga inicialmente un elemento de Flash que tarda en descargarse más de tres segundos y, si no pueden saltar este proceso, abandonan la página.
  • Hay usuarios que abandonan las páginas con demasiados elementos decorativos porque tardan demasiado en descargarse.
  • Hay usuarios a los que las continuas interrupciones en la lectura de la página causadas por ventanas que se abren tapando el texto les desagrada en exceso y abandonan la página.
  • Hay usuarios que cuando se encuentran con páginas repletas de párrafos con más de cinco líneas de texto que ocupan toda la ventana del navegador las abandonan y buscan otras más fáciles de leer.

Debes conocer

En el enlace siguiente puedes ver diferentes clasificaciones de usuarios. Debes consultar la clasificación de los usuarios en función de su experiencia.

Si queremos hacer un diseño pensando en el usuario, tendremos que tener en cuenta sus características, sus expectativas, sus capacidades y aptitudes, qué información necesitan, cómo acceden a la Web, qué experiencia previa tienen en el uso de la Web, qué conocimientos tienen o si tienen algún tipo de discapacidad. También es importante las limitaciones técnicas que pueden tener los usuarios potenciales de un sitio web, qué plataforma utilizan y qué tipo de conexión tienen.

Citas para pensar

"En realidad, usabilidad es que algo funciona bien: significa, que una persona de capacidad y aptitudes medias (o incluso, por debajo de la media) pueda usar algo, tanto si es un sitio web, un mando a distancia o una puerta giratoria, para lo que se supone que sirve, sin frustrarse desesperadamente mientras lo hace."Steve Krug
Es posible que el sitio que estés diseñando esté orientado a ser usado por diferentes perfiles de usuario: visitante o invitado, usuario registrado o colaborador, usuario experto o administrador. En este caso, a cada usuario se le suele presuponer una experiencia determinada en el uso de la Web. En cualquier caso, deberemos garantizar la usabilidad en todos los perfiles.

Autoevaluación

Pregunta

En la implementación de un diseño Web el uso de lenguajes que cumplan con los estándares es importante porque garantiza...

Respuestas

La usabilidad.

La accesibilidad.

La continuidad.

La navegabilidad.

Retroalimentación

1.4.- Lenguaje y vocabulario.

En la unidad de accesibilidad estudiaste los tipos de discapacidad y la importancia de tenerlos en cuenta a la hora de hacer una web más accesible.

En aquel momento dijimos que la audición era la vía principal a través de la cual se desarrollaba el lenguaje y el habla y que un trastorno en la percepción auditiva, en una edad temprana, conllevaba un desarrollo lingüístico y comunicativo problemático, con dificultades para la comprensión lectora y la comprensión de determinadas construcciones sintácticas.

También hablábamos de que las personas con discapacidad cognitiva presentaban dificultades en el desarrollo de la inteligencia verbal y matemática y que podían tener un menor rendimiento en la lectura, en la precisión, en la comprensión o en la velocidad, lo que ocasionaba trastornos del aprendizaje.

Debemos emplear un lenguaje cercano al usuario. El lenguaje debe ser sencillo y comprensible.

El mayor problema radica en saber cuál es ese lenguaje cercano al usuario, ya que, como se dijo anteriormente, cada usuario es un mundo. También hay que tener en cuenta el tipo de sitio web que estés construyendo. Está claro que si estás construyendo un portal de noticias de jurisprudencia, el lenguaje cercano a los usuarios potenciales de ese portal no va a ser tan cercano a otros tipos de usuarios. Pero ¿y si el portal es para comentar fallos judiciales para la ciudadanía en general? Habrá que buscar un vocabulario sencillo que, diciendo lo mismo, lo pueda entender todo el mundo.

Imagen que muestra una tijera sobre la que aparecen escritas dos frases: El genus humile o estilo llano tiene por objeto la enseñanza. Se caracteriza por la puritas y la perspicuitas y un ornatus poco desarrollado.
Beatriz Buyo Pérez (CC BY-NC-SA)

Interpretación jurídica que realizan órganos jurisdiccionales competentes con la finalidad de aclarar posibles dudas en relación con las leyes, o conjunto de fallos firmes y uniformes dictados por los órganos jurisdiccionales del Estado.

Como dice Fabio Guzmán Ariza en su artículo “Brevísima historia del estilo llano”:

"La tarea de escribir de manera clara y natural no es fácil. Al contrario, es algo complejo que va más allá de una buena ortografía, de un buen conocimiento de la gramática o de un amplio vocabulario: requiere una buena selección de la palabra o frase adecuada, un ordenamiento lógico del tema a tratar, y una exigente labor de revisión que elimine sin piedad toda palabra superflua, frase ambigua o estructura complicada."
La frase escrita en la imagen, “El genus humile o estilo llano tiene por objeto la enseñanza. Se caracteriza por la puritas y la perspicuitas y un ornatus poco desarrollado.”, es una definición del estilo llano de escritura sacada de la wikipedia que, por emplear términos en latín (humile, puritas, perspicuitas y ornatus), deja de ser sencillo y entendible para todo el mundo. Si se hubiera escrito, “El lenguaje llano tiene por objeto la enseñanza. Se caracteriza por la construcción de frases fáciles de comprender empleando para ello palabras correctas sin adornos literarios de ningún tipo.”, sería más fácil de entender y estaríamos diciendo lo mismo.

Debes conocer

En el siguiente enlace se muestra una presentación elaborada a partir de un trabajo realizado por Antonio Rodríguez Ruiz titulado “Evaluación de usabilidad en sitios web de universidades de Galicia (2007)”. En esta presentación se resumen las características que debes tener en cuenta a la hora de redactar el contenido de las páginas web.

Consejos sobre cómo redactar el contenido.

1.5.- Principios de la usabilidad.

Las personas que se dedican al diseño deberían tratar de reducir la carga de trabajo de las personas que van a usar aquello que han diseñado, ya sea un cepillo de dientes o un sitio web. Los sitios Web deberían diseñarse tratando de facilitar la interacción con la máquina, sea un ordenador o un dispositivo móvil. Los usuarios podrán hacer un uso más adecuado de un sitio web cuando la información se muestra de manera organizada.

Reflexiona

¿Cuántas veces has entrado en alguna oficina y has visto que la persona tenía una serie de post-it (pósit) adheridas a su monitor o a su teclado? A veces contienen mensajes tan sencillos como: pasar por el tinte, imprimir la factura número 250, enviar el catálogo al cliente Rupérez. No son permanentes, recuerdan tareas a realizar y una vez realizadas se eliminan. Pero, a estos usuarios les resulta más cómodo ese trocito de papel que abrir un procesador de textos, escribir el texto, archivar el documento con un nombre y tener que recordar dónde y con qué nombre lo han guardado.

Afortunadamente para estos usuarios acostumbrados a esta forma de trabajar, el Windows 7 y, antes Vista, ha incorporado un widget que sigue la misma filosofía de los post-it: las Notas rápidas.

Pequeñas hojas de papel autoadhesivo de varias dimensiones, formas y colores que se usan para escribir notas recordatorias, se pegan en cualquier tipo de superficie y se despegan fácilmente.

Es una pequeña aplicación o programa cuyo objetivo es dar fácil acceso a funciones frecuentemente usadas y proveer de información visual. Son ejemplos de Widget: Reloj en pantalla, Calendario, Agenda, Notas rápidas, etcétera.

Ilstración con la captura de pantalla del escritorio donde se muestran 3 Gadgets: A la izquierda el calendario.,En el centro en la parte superior, una nota rápida.,En el centro en la parte inferior, un reloj analógico.También se muestra la ventana de aplicación de la calculadora  a la derecha de la imagen.
Beatriz Buyo Pérez (CC BY-NC-SA)

Los usuarios no quieren tener sobrecarga de información, no quieren tener que recordar la información durante más de unos segundos, prefieren el uso de una terminología sencilla. Les gusta las analogías visuales que les recuerdan cosas reales: el icono de la carpeta de Windows, el de la calculadora. Las buenas metáforas crean figuras mentales fáciles de recordar.

Al principio de este apartado, en el caso práctico, mencionamos dos expertos en usabilidad: Jacob Nielsen considerado como el padre de la usabilidad y Steve Krug, que trabaja como consultor de usabilidad para muchos equipos de diseño. Ambos han escrito libros, fáciles de leer, en los cuales analizan los problemas más habituales relacionados con la usabilidad y aportan una serie de soluciones.

Hay otras personas y empresas que enunciaron en su día una serie de principios a la hora de realizar interfaces gráficas de usuario que han sido aplicadas al diseño de interfaces Web: Simpson, Preece, Mandel, Dix, IBM llegándose a concretar una serie de directrices algunas de las cuáles se han convertido en un estándar cuyo objetivo es hacer las cosas más fáciles, definiendo características de objetos y sistemas que se utilizan cotidianamente. Como ejemplo tenemos: los teclados QWERTY, el teclado de un teléfono móvil, los conectores de un sistema informático.

En lo que respecta al desarrollo de interfaces, veremos algunos ejemplos de algunas directrices a tener en cuenta si queremos desarrollar una interfaz usable:

  • Ponerse en el lugar de los usuarios.
  • Dar respuesta inmediata a las acciones de los usuarios.
  • Que el usuario sienta que tiene el control del sistema.
  • Que sea consistente en el uso de los elementos gráficos aprovechando el conocimiento previo de los usuarios.
  • Tratar los errores pero evitando que se produzcan.

El teclado qwerty es la distribución de teclado más común. Su nombre viene dado por las seis primeras letras de la primera fila de teclas que contienen caracteres alfabéticos.

Podemos decir que una interfaz es usable si los usuarios pueden contestar a las preguntas: ¿Dónde estoy? ¿Cómo llegué aquí? ¿A dónde puedo ir después? ¿Qué puedo hacer en este momento? ¿Cómo puedo regresar al punto anterior?

Autoevaluación

Pregunta

Para llegar a todo el mundo y hacer una interfaz más usable hay que tratar de:

Respuestas

Simplificar las frases.

Suprimir palabras inútiles.

Utilizar adornos literarios.

Utilizar un lenguaje de culto con estructuras complejas.

Retroalimentación

2.- Navegación en la Web.

Caso práctico

Ilustración de Antonio, trabajador de la empresa BK programación. Tiene conocimientos de informática a nivel de usuario, maneja paquetes ofimáticos y le gusta jugar con el ordenador.Antonio está colaborando mucho en el diseño de la interfaz para la panadería "Migas amigas". Se ha planteado como reto personal realizar un sistema de navegación que cumpla con todos los requisitos de usabilidad.

A la hora de diseñar una interfaz para una web es importante que sea atractiva pero, es más importante, que el formato del sitio web cumpla con las expectativas de los usuarios, en especial aquellos relacionados con la navegación, el contenido y la organización.

El sistema de navegación de un sitio web requiere de una interacción del usuario con el sitio, por lo que hay que tener especial cuidado a la hora de diseñarlo.

En el apartado anterior decíamos que una interfaz es usable si los usuarios pueden contestar a las preguntas: ¿Dónde estoy? ¿Cómo llegué aquí? ¿A dónde puedo ir después? ¿Qué puedo hacer en este momento? y ¿Cómo puedo regresar al punto anterior?

La mayoría de estas preguntas serán de fácil respuesta para el usuario si se tienen presentes las características deseables de un sistema de navegación cuando diseñamos un sitio web.

2.1.- Información accesible.

Reflexiona

¿Cómo organizas la información que almacenas en tu ordenador? ¿Creas accesos directos en el escritorio de tus carpetas o de algún documento? ¿No serás de esas personas que almacenan todo en el escritorio con la idea de tenerlo más a mano y luego no encuentran nada?

Para lograr un acceso más eficiente y sencillo a la información de un sitio web por parte de todos los usuarios del mismo, con independencia de sus conocimientos técnico,s es importante:

  1. Una buena organización de los contenidos del sitio.
  2. Un buen diseño del sistema de navegación.

Tanto si el sitio web es complejo, con multitud de páginas, como si es sencillo, el usuario debe poder acceder a la información que busca de una forma cómoda y sencilla. Si el sistema de navegación es engorroso, el usuario terminará por abandonar la página. Si el sitio tiene un sistema de búsqueda que no es eficiente y el usuario no encuentra la información que busca a pesar de saber que existe porque no sabe cómo buscarla, terminará por abandonar la página.

El menú de navegación de una página es aquel que permite acceder a los lugares relevantes de un sitio web. Pero, además del menú, en una página podemos encontrar enlaces a otras páginas ya sean del mismo sitio o de otros.

Es importante comprobar que:

  • Todos los contenidos son accesibles ya sea desde el menú de navegación principal o desde alguno de los enlaces.
  • No existen enlaces que no conducen a ninguna parte.
  • Todos los enlaces muestran el contenido que se esperaba.

Los enlaces rotos o los que acceden a un contenido inesperado dan una mala imagen de un sitio web. Evita siempre poner enlaces a páginas "En construcción". Ya pondrás el enlace cuando tengas la página terminada.

Autoevaluación

Pregunta

En lo que respecta al desarrollo de interfaces, una de las directrices a tener en cuenta si queremos desarrollar una interfaz usable es:

Respuestas

Formar al usuario en el uso de la interfaz mediante un tutorial que se puede descargar de la página.

Dar respuesta inmediata a las acciones de los usuarios.

Informar al usuario de los errores cometidos.

Retroalimentación

2.2.- Consistencia.

Este tema ya se mencionó en alguna de las unidades anteriores, cuando hablábamos de la maquetación web. Hablábamos entonces de coherencia en el uso de los elementos gráficos y vimos algunos ejemplos de páginas que usaban un código de colores en las secciones del menú de navegación que se empleaban después en las páginas de estas secciones.

Cuando hablamos de consistencia en un sistema de navegación hacemos referencia a que sus elementos son coherentes en todas las páginas que componen un sitio web.

La navegación en un sitio Web debe de ser predecible para los usuarios. Las barras de navegación deben ser coherentes en su diseño manteniendo el mismo tema visual en las diferentes páginas de un sitio.

Ilustración que está dividida en 3 bandas horizontales, cada una con una captura parcial de una página Web. La superior es del blog Librosweb. La central de Jamendo. La inferior del Ministrario de Educación.
Beatriz Buyo Pérez (CC BY-NC-SA)

En la imagen que ilustra este apartado se muestran tres ejemplos de barras de navegación consistentes en su diseño que mantienen su aspecto y comportamiento en todas sus páginas:

  • El primer ejemplo (apuntado por una flecha con el número 1) pertenece al sitio de Libros Web. En las páginas de este sitio, el sistema de navegación está formado por unos enlaces (Home, Consejos, Contactos, Noticias, Redes Sociales, Usabilidad, etcétera) con la letra de color blanco sobre un fondo de color negro. Los enlaces se ponen de color rojo cuando el ratón pasa por encima. En la imagen aparece en rojo el enlace Usabilidad.
  • El segundo ejemplo (apuntado por una flecha con el número 2) pertenece al sitio de Jamendo. En las páginas de este sitio, el sistema de navegación está formado por unos enlaces (Música, Selección, Jamendo Pro, etcétera) con letra de color blanco sobre un fondo de color morado que actúan como un menú desplegable cuando el ratón pasa por encima. En la imagen el ratón está situado sobre el enlace Música cuyas letras pasan a ser de color anaranjado con una sombra añadida y con un fondo de color blanco que se repite en todas las opciones del menú desplegado.
  • El tercer ejemplo (apuntado por una flecha con el número 3) pertenece al sitio del Ministerio de Educación y Ciencia. En las páginas de este sitio, el sistema de navegación está formado por unos enlaces (Ministerio, Prensa, Iniciativas, etcétera) con la letra de color blanco con un fondo con dos tonos de color azul. Cuando el ratón se sitúa sobre el enlace el texto aparece subrayado y cuando se visita un enlace éste cambia su color de fondo por dos tonos de grises.

Además, si vas a incorporar a tu página un sistema de búsqueda para que el usuario pueda encontrar la información que busca, este sistema debe ser igualmente consistente con su diseño. Se suele emplear la palabra "Buscar" dentro de un recuadro de color blanco, el cual puede ir acompañado, o no, de otros elementos adicionales:

  • En el primer ejemplo no existe una herramienta buscar como tal. En su lugar, emplea un diseño en dos columnas en el que una parte de la segunda columna contiene un conjunto de palabras de distinto tamaño, ordenadas alfabéticamente y agrupadas bajo el título "Términos" que actúa como filtro de los contenidos que muestra en la primera columna. Estas palabras cambian de color cuando el ratón pasa por encima.
  • En el segundo ejemplo el sistema de búsqueda consta de un único rectángulo de color blanco que contiene la palabra "Buscar" seguido de tres puntos. En este rectángulo el usuario tendrá que escribir y pulsar la tecla de entrada (intro, return o enter).
  • En el tercer ejemplo el sistema de búsqueda está formado por una palabra "Buscar" seguida del carácter de dos puntos, un rectángulo blanco con el icono de una lupa seguido de la palabra buscar y tres puntos, y la palabra "Buscar" en negrita sobre un fondo de color azul que al pulsarse con el ratón inicia la búsqueda.

A la vista de los tres ejemplos anteriores, podemos decir que el sistema de búsqueda es una parte del diseño Web que todavía no está muy estandarizado y que puede presentar problemas a los usuarios con un nivel de experiencia bajo:

  • Los términos del primer ejemplo no forman parte de un sistema de búsqueda sino que se emplean como una forma de estructurar los contenidos y enlazarlos entre sí.
  • En el segundo ejemplo un usuario acostumbrado a realizar búsquedas en Google, con la predicción de palabras activado, en el que se le van mostrando automáticamente enlaces que concuerdan con lo tecleado hasta el momento, puede llegar a pensar que la herramienta de búsqueda de Jamendo no funciona.
  • Es, quizás, el tercer ejemplo el que no deja lugar a dudas sobre su funcionamiento y con el que los usuarios tendrán menos problemas.

2.3.- Persistencia.

Cuando hablamos de persistencia en un sistema de navegación hacemos referencia a que sus elementos se colocan siempre en el mismo sitio en todas las páginas que componen un sitio web.

La navegación en un sitio web debe de ser predecible para los usuarios. Las barras de navegación deben mantener su posición en las diferentes páginas de un sitio.

Por regla general, las barras de navegación se colocan a lo ancho de la página, en su parte superior, por debajo del encabezado o formando parte de él.

Ilustración que está dividida en 3 bandas horizontales, cada una con una captura parcial de una página Web. La superior es del blog Librosweb. La central de Jamendo. La inferior del Ministrario de Educación.
Beatriz Buyo Pérez (CC BY-NC-SA)

Haciendo uso de la misma imagen del apartado anterior, mostramos en este caso tres ejemplos de barras de navegación persistentes en su ubicación:

  • En el primer ejemplo (apuntado por una flecha con el número 1), el sistema de navegación se encuentra ubicado formando parte del encabezado de la página (parte con fondo de color negro) en su tercera línea.
  • En el segundo ejemplo (apuntado por una flecha con el número 2), el sistema de navegación se encuentra ubicado formando parte del encabezado de la página, en su primera línea, a la derecha del logotipo de la empresa (palabra "jamendo" con un triángulo dentro de la letra o).
  • En el tercer ejemplo (apuntado por una flecha con el número 3), el sistema de navegación se encuentra ubicado formando parte del encabezado de la página, en su segunda línea alineado por la derecha.

Las barras de navegación deben permitir al usuario encontrar las secciones o áreas de interés de un sitio web sin dificultad. De ahí que siempre se suelan ubicar en los mismos lugares. Un usuario, no puede perder su tiempo tratando de imaginar qué información puede encontrar en la página porque el sistema de navegación no es evidente.

En el siguiente enlace puedes comprobar el funcionamiento del sistema de navegación de la página web de Burning Pixel Productions, aunque para comprobarlo primero tendrás que encontrarlo porque está en el pie de la página (algo común en páginas muy antiguas pero muy poco usual en páginas actuales). Además, el primero de sus enlaces Home que debía ir a la página principal está roto y es el segundo enlace Info el que, aparentemente, realiza esta acción. Todo un ejemplo de lo que no debes hacer.

También es importante que el sistema de búsqueda permanezca siempre en el mismo sitio. Se suele utilizar también el encabezado y se alinea, normalmente, a la derecha.

Autoevaluación

Pregunta

En lo que respecta al sistema de navegación y al sistema de búsqueda de una interfaz, son deseables las características:

Respuestas

Permanencia.

Constancia.

Persistencia y consistencia.

Retroalimentación

2.4.- Sencillez de navegación.

Reflexiona

¿Recuerdas la Cita de Bruno Munari que leíste en la unidad de Planificación de Interfaces Gráficas?

Esta cita tiene mucho que ver con este apartado, ya que, si al usuario se le presenta un sistema de navegación que le recuerde otro tipo de situaciones a las que ya está acostumbrado, tendrá mucha menos dificultad en adaptarse a él.

Cuando diseñas el sistema de navegación de un sitio debes recordar que este sistema sirve para que los usuarios sepan dónde pueden ir y, más importante aún, saber dónde están y cómo pueden regresar a la página donde estaban antes. Ten en cuenta que un sistema de navegación correctamente diseñado debe suministrar al usuario un acceso a la página principal del sitio web, en cualquier momento de la navegación.

Ilustración con una imagen que muestra la salida de puerto de un conjunto de veleros de pequeño tamaño que son manejados por  niños.
Beatriz Buyo Pérez (CC BY-NC-SA)

En la unidad mencionada al principio de este apartado, se tratan algunos elementos del sistema de navegación que suelen encargarse de asumir estas funciones. Estos elementos son los que permiten al usuario contestar a las preguntas: ¿Dónde estoy? ¿Cómo llegué aquí? ¿A dónde puedo ir después? ¿Qué puedo hacer en este momento? ¿Cómo puedo regresar al punto anterior?

  • El logotipo de la empresa u organismo del sitio web que suele ir colocado en el encabezamiento de todas las páginas del sitio y que sirve de enlace de regreso a la página principal.
  • El enlace al mapa del sitio que suele ir colocado en el encabezado y/o en el pie de todas las páginas y que permite averiguar dónde se puede ir.
  • El sistema de navegación que informa del camino recorrido desde la página principal hasta el lugar donde se encuentra el usuario, colocado normalmente por debajo del encabezado y por encima del contenido y que, con el uso de enlaces, permite al usuario regresar a alguna de las páginas previas en las que ha estado.
  • El sistema de navegación principal ubicado, normalmente, en el encabezado de todas las páginas del sitio e informa de las principales secciones del mismo.

Citas para pensar

Reconocer es mejor que recordar.

Si la ubicación de los elementos de navegación es consistente y persistente y, si además el lenguaje empleado en los enlaces es claro y sencillo, el usuario no tendrá que recordar dónde estaba la información que buscaba o el camino a seguir para encontrarla, lo reconocerá en cuanto lo vea.

Cuando el usuario se encuentra en medio de un proceso que implique un conjunto de pasos, es conveniente mantenerle en todo momento informado del progreso de dicho proceso.

Ejemplo

Una página en la que se solicita al usuario la realización de una encuesta. En dicha página se explica el por qué de la encuesta, en qué consiste y cuánto tiempo aproximadamente le llevará todo el proceso. A continuación de la explicación hay un botón que dice "Realizar encuesta".

¿Quién pulsaría ese botón si no se explica previamente el proceso? ¿Qué se encuentra el usuario al pulsar el botón?

Es conveniente que el proceso de realización de la encuesta sea sencillo para el usuario. En estos casos resulta más útil una navegación guiada paso a paso, confirmando al usuario la realización de cada uno de los pasos, permitiéndole regresar al paso anterior para hacer una corrección e informando de los pasos que le quedan.

Si esto no fuera así: ¿Quién seguiría contestando preguntas después de confundirse en una y no poder corregirla? ¿Quién seguiría contestando preguntas si no sabes cuántas has contestado y cuántas son en total?

Recuerda: El usuario debe tener el control.

2.5.- Herramientas: ¿Ratón o teclado?

Cuando hablamos de las herramientas que se pueden usar en un sistema de navegación, pensamos únicamente en el ratón. Esto es porque el mundo de la web es el mundo de los hiperenlaces. Y... ¿hay algo más cómodo que un clic de ratón para visitar un nuevo enlace? Si te paras a observar a las personas que usan Internet visitando páginas y páginas, te darás cuenta de que hacen muy poco uso del teclado. Pero esto no tiene por qué ser así y no debería ser así, de hecho, hay que procurar que no sea así.

Hoy en día, casi todo el software está preparado tanto para el uso del ratón como del teclado. ¿Por qué habría de ser la web diferente?

Ilustración que muestra un rectángulo de esquinas redondeadas de color rosa fuerte en la parte superior con el texto: Acceso con el método abreviado del teclado a las opciones del menú.
Beatriz Buyo Pérez (CC BY-NC-SA)

En los navegadores actuales se puede usar el teclado para poder acceder a las opciones del menú, el cual dispone de un conjunto de teclas aceleradoras. La imagen que ilustra este apartado muestra un ejemplo del uso del teclado para acceder a algunas de la opciones del menú del navegador. En el ejemplo mostrado, si quisiéramos aumentar el zoom en el navegador, podríamos hacerlo de dos formas:

  • Usando el método abreviado de teclado que consiste en combinar la pulsación de las teclas Control y el carácter de suma (Ctrl+[+]) que en la imagen se muestra dentro de un rectángulo con fondo rosado.
  • Acceder al menú Ver pulsando las teclas ALT+[V] (puesto que "V" es la letra que está subrayada), después la tecla "m" (que es la que está subrayada en la palabra Tamaño) y por último, la letra "A" (que es la que está subrayada en la palabra Aumentar). Este método no hace distinción entre mayúsculas y minúsculas.

Este ejemplo muestra también cómo hay una opción "Detener" que aparece en color gris oscuro. Eso quiere decir que la opción no está operativa por el momento. Ocultar opciones que no se pueden usar en la situación actual, o mantenerlas visibles pero desactivadas, es algo usual en el diseño de interfaces.

Los atajos de teclado ahorran gran cantidad de tiempo pero hay que recordarlos. Sólo los usuarios más avanzados acostumbran a hacerlo. También son usados por las personas que no puedan manejar el ratón por tener una discapacidad visual y por aquellas que utilizan teclados virtuales programables.

Firefox permite habilitar el uso del teclado dentro de una web como si estuviéramos manejando un procesador de textos. Para hacerlo, basta con pulsar F7 en cualquier momento para activar o desactivar esta característica. Al pulsar F7, Firefox te preguntará si realmente quieres activar esta característica. Puedes desactivar esta pregunta si marcas la casilla de verificación No volver a mostrar este diálogo. Así, la próxima vez que lo actives o desactives no te lo volverá a preguntar.

¿Cómo podemos usar el teclado para navegar por la web? La siguiente tabla muestra algunas de las combinaciones de teclado que se usan para navegar por la web.

Atajos de teclado para su uso en la navegación web.
Combinaciones de teclado Efecto que produce
ALT + D Ir a la barra de las direcciones.
ALT + FLECHA A LA IZQUIERDA Ir a la página anterior.
CTRL + TAB Avanzar entre marcos.
ENTRAR, INTRO, ENTER o RETURN Activa el vínculo seleccionado.
ESC Detiene la descarga de una página.
F5 Actualiza la página actual.
MAYÚSCULA + F10 Mostrar un menú contextual para un vínculo.
MAYÚSCULA + TAB Retrocede entre los elementos de una página Web.
TAB Avanza entre los distintos enlaces de una página Web.

3.- Análisis y verificación de la usabilidad.

Caso práctico

Ilustración de Juan, Técnico Superior en Desarrollo de Aplicaciones Informáticas y necesita actualizarseAntonio se ha esforzado mucho al realizar el diseño del sistema de navegación de la interfaz de la panadería "Migas amigas" y ha tratado de cumplir con todos los requisitos de usabilidad.

Ahora es Juan el que se encargará de verificar si su esfuerzo ha dado los frutos esperados.

A la hora de diseñar una interfaz para una Web es importante que sea atractiva pero, es más importante, que el formato del sitio web cumpla con las expectativas de los usuarios, en especial aquellos relacionados con la navegación, el contenido y la organización.

Una parte importante que todo diseño debería tener en cuenta es hacer una prueba de usabilidad antes de ponerla a disposición del público en general. Esta prueba de usabilidad debería realizarse con un grupo heterógeneo de usuarios incluyendo usuarios con distintos tipos de discapacidad ya que, de esta forma, se localizarán problemas de usabilidad generales que afectan a todos los usuarios.

Autoevaluación

Pregunta

Una página web usable es, además, siempre accesible. ¿Verdadero o falso?

Respuestas

Verdadero.

Falso.

Retroalimentación

Recomendación

En el enlace siguiente puedes descargar el trabajo completo de Antonio Rodríguez Ruiz titulado “Evaluación de usabilidad en sitios web de universidades de Galicia (2007)”. Es un trabajo muy completo que te servirá de guía del proceso que se debe seguir para analizar la usabilidad de un sitio web.

3.1.- Tecnologías.

Reflexiona

Es la última noche del año y vas a una fiesta. Te han pedido que vayas de etiqueta. Te duchas, te vistes, te peinas. Procuras cuidar todos los detalles y crees tener todo lo necesario para poder salir. Cuando ya has abierto la puerta ¿qué es lo último que haces antes de irte?

Cuando queremos lanzar un sitio web para que todo el mundo pueda verlo, debemos tener el mismo cuidado que cuando vamos a una fiesta y no cometer el error de dejar a la vista de los demás algo que desentona o algo que no funciona como debería. De ahí la importancia de evaluar la usabilidad de nuestro sitio.

Ten en cuenta que el éxito de un sitio web dependerá de su contenido, de los servicios que ofrezca y de lo bien posicionado que esté, pero su usabilidad será la garantía de que será elegido entre los muchos sitios web de características similares.

Haciendo una evaluación a tiempo de la usabilidad del sitio podremos descubrir los errores de diseño que hayan quedado en nuestra web. Sólo así podremos corregirlos antes de causar un impacto negativo en nuestra audiencia.

Existen varios métodos para analizar la usabilidad de una interfaz:

  • Contratar una empresa o experto para que realice una evaluación heurística.
  • Realizar una prueba (o test) de usabilidad antes de divulgar la página.
  • Realizar encuestas una vez divulgada la página.
  • Utilizar la técnica eye tracking.

Los dos primeros métodos se complementan entre sí. Los tests de usabilidad muestran dónde están los problemas mientras que el análisis heurístico es más eficiente si lo que se quiere es proponer soluciones alternativas. Ambos se verán en los siguientes apartados.

El tercer método propuesto no es muy recomendable ya que obliga a divulgar la página (con todos sus fallos posibles) y se pide a los usuarios habituales que realicen la encuesta con el objetivo de medir su nivel de satisfacción, centrándose en el idioma que suelen seleccionar, con qué tipo de conexión y navegador acceden o aquellas secciones que les resultan más interesantes. En general, cualquier opinión que pueda ayudar a mejorar la página aumentando la satisfacción del usuario. Es especialmente interesante el saber la velocidad de conexión de los usuarios habituales del sitio porque nos ayudará a tomar decisiones sobre qué elementos incorporar a nuestra página y cuáles sería mejor suprimir. Pero este tipo de encuestas no deberían servir para solucionar problemas de usabilidad.

La técnica Eye tracking se emplea para evaluar cómo usan los usuarios la web. Aplicando esta técnica, los expertos en comercio y marketing colocan los productos en los lineales de los supermercados para conseguir un mayor número de ventas o promocionar algún producto.

La palabra heurística proviene de la palabra griega heuriskein que significa descubrir, encontrar. Por heurística entendemos una estrategia, método, criterio o truco usado para hacer más sencilla la solución de problemas difíciles. El conocimiento heurístico es un tipo especial de conocimiento usado por los humanos para resolver problemas complejos. En este caso el adjetivo heurístico significa medio para descubrir. (Definición obtenida de Epistemowikia).

(traducido "seguimiento de los ojos") es un término en inglés que hace referencia al proceso de evaluar, bien el punto donde se fija la mirada (donde estamos mirando), o el movimiento del ojo en relación con la cabeza. Este proceso es utilizado en la investigación de los sistemas visuales y en diseño de productos. Existen diversos sistemas para determinar el movimiento de los ojos. La variante más popular utiliza imágenes de vídeo a partir de la cuales se extrae la posición del ojo.

Reflexiona

Te acaban de regalar una mascota y estás buscando en Internet páginas de empresas que suministran alimentos con el fin de comparar sus precios con los que te ofrece la tienda que tienes más cerca de casa. Introduces en el buscador el texto "Comida mascotas" y automáticamente se te presenta una lista con una serie de direcciones.

¿En cuáles te fijas primero? ¿Las que están al principio de la lista en los enlaces patrocinados? ¿Los que están en la columna de la derecha? ¿Aquellos cuyo título del enlace está la mayoría en negrita por coincidir con lo que has escrito? Seguro que no empiezas a leer de izquierda a derecha y de arriba a abajo uno por uno todos los enlaces antes de decidir en cuál hacer clic.

Según Nielsen, lo habitual es que un usuario no lea con detalle ni siquiera una mínima parte de los textos de una página web. En su lugar, y por economía de tiempo, el usuario se limita a hojear la página por encima. Es decir, el usuario realiza un rápido barrido visual de cada página buscando elementos que llamen su atención.

Recomendación

En el siguiente enlace podrás acceder al artículo: “Eye-Tracking en Interacción Persona-Ordenador” de Yusef Hassan Montero y Víctor Herrero Solana en el que realizan: “Una aproximación al concepto, funcionamiento y ventajas del eye-tracking como herramienta de evaluación objetiva de usabilidad. Se analizan también las problemáticas que surgen en la interpretación de los resultados, así como la evolución de su uso en la práctica profesional y la investigación científica en la Interacción Persona-Ordenador.”

También es interesante el artículo titulado “La aportación del eyetracking en el sector de usabilidad” de la Consultoría Usolab.

3.2.- Análisis heurístico.

La evaluación heurística corre a cargo de una persona con experiencia en usabilidad, o en diseño de interfaces de usuario, que observa un conjunto de parámetros, normalmente siguiendo las directrices marcadas por Nielsen. Estos parámetros observados son:

  • El lenguaje de las páginas: ¿es cercano al usuario? ¿está presentado en un orden lógico para el usuario?
  • La consistencia: ¿la representación gráfica es la misma en conceptos similares? ¿se emplean los mismo términos para el mismo tipo de elementos?
  • La memoria del usuario: ¿hay enlaces directos a la información relevante? ¿debe el usuario recordar demasiadas cosas?
  • Eficiencia y flexibilidad: ¿el usuario encuentra siempre lo que busca? ¿y el usuario novato, dispone de alguna ayuda adicional?
  • Diseño: ¿es ergonómico y visual o está todo junto sin espacios?
  • Información: ¿está ordenada y correctamente agrupada? ¿el nivel de detalle de la información se suministra bajo demanda o se presenta todo de una sola vez?
  • Ubicación y navegación: ¿sabe el usuario dónde está en todo momento? ¿sabe a dónde puede ir? ¿puede regresar a la página principal de la sección o del sitio? ¿son los enlaces intuitivos? ¿hay enlaces rotos? ¿hay enlaces con contenido impropio según el nombre del enlace?

La imagen que ilustra este apartado es una muestra de una fallo de usabilidad muy común: dar mensajes de error al usuario que no informan correctamente. En el ejemplo de la imagen se le indica al usuario que, para confirmar los cambios realizados, debe hacer clic en Aceptar (que está bien visible y es fácil de encontrar) y que, para omitirlos, debe hacer clic en Cancelar informándole de que se encuentra en el lado izquierdo de su pantalla. A la vista de tal mensaje, el usuarios se puede llegar a preguntar si se referirá al icono de la brújula.

Ilustración con una imagen que muestra un mensaje dado al usuario por una aplicación. A la izquierda, en la parte superior se muestra el icono de una brújula. A la derecha del icono el texto en negrita http://book.aires.aereo.Debajo de este texto un  párrafo que dice:Para confirmar sus cambios deberá hacer clic en 'Aceptar', y para omitirlos deberá hacer clic en 'Cancelar' en la parte izquierda de su pantalla. Si hace clic en Cancelar sus cambios no serán tenidos en cuenta.Debajo del párrafo hay un botón con el texto Aceptar.
Apple (Elaboraión propia)

Esta imagen es el fruto de una queja de un usuario sobre la usabilidad del sitio y el relato final del autor de la imagen es que este Aceptar era sólo para confirmar que el mensaje había sido leído y que era después cuando realmente aparecían los dos botones mencionados. Un poco rebuscado ¿no crees? Y si el usuario hubiera querido omitir los cambios, ¿se habría atrevido a pulsar el botón Aceptar?

El profesional que realiza el análisis heurístico deberá responder de forma afirmativa o negativa a un conjunto de preguntas. Aquellas contestadas de forma negativa son las que detectan los problemas de usabilidad.

Debes conocer

En el siguiente enlace podrás acceder al artículo: "Guía de Evaluación Heurística de sitios Web" de Yusef Hassan Montero y Francisco J. Martín Fernández, en la que realizan un resumen de la guía que suelen utilizar en su actividad profesional.

Autoevaluación

Pregunta

El análisis heurístico debe ser realizado por un experto en accesibilidad. ¿Verdadero o falso?

Respuestas

Verdadero.

Falso.

Retroalimentación

3.3.- Test de usabilidad.

Un test de usabilidad es una medida concreta y objetiva de la usabilidad de una herramienta, un sistema, un sitio web, etc. tomada a partir de usuarios verdaderos que realizan tareas reales.

Un test de usabilidad permite verificar si existen problemas de usabilidad y encontrar, en su caso, una posible solución a ellos.

Hay que tener varios elementos en cuenta:

  • El momento: Cuanto antes mejor. Si es posible debe realizarse antes de publicar el sitio. Debe realizarse después de un análisis heurístico.
  • Las personas: ¿Cuántas personas lo van a realizar y qué características tendrán que tener estas personas? Se puede realizar un test con un grupo pequeño de usuarios o emplear un gran grupo. Se pueden incluir personas con distintos grados de discapacidad y con distinto nivel de experiencia.
  • La duración: El tiempo dedicado a la realización de los test suele estar relacionado con el número de personas que lo van a realizar.
  • El lugar: Debe escogerse cuidadosamente, de forma que los usuarios que participan en la prueba se sientan a gusto y no puedan interactuar entre sí.
  • El material: Para realizar el test se debe disponer de toda la tecnología necesaria, incluida la tecnología asistiva en el caso de que haya personas con discapacidad en el grupo de usuarios. También se deberían hacer pruebas en equipos con conexiones lentas y dispositivos portátiles.
  • El test: Debe estar bien planificado: ¿Qué tareas se le van a pedir a los usuarios? ¿En qué momento realizarán cada una de esas tareas? ¿Cuánto tiempo se considera correcto para realizar dicha tarea?
    Ilustración que muestra dos personas ante un ordenador: Una mujer sentada con una mano en el teclado y la otra en el ratón observando la pantalla. De pie en un segundo lugar se encuentra un hombre inclinado apoyando una mano en la mesa y la otra en la silla observando también el monitor.
    Stockbye (CC BY-NC-SA)

Durante la realización del test, se debe observar la interacción de cada usuario con la máquina en la realización de cada una de las tareas, ver sus reacciones mientras maneja la interfaz, anotar el tiempo que le lleva realizar una determinada tarea, etcétera.

Debes conocer

En el siguiente enlace podrás acceder al artículo: “Método de test con usuarios” de Yusef Hassan Montero y Francisco J. Martín Fernández, en la que dan una explicación de qué son los tests de usuarios, e indicaciones acerca de por qué, cuándo y cómo llevarlos a cabo.

Mientras que para una página sencilla podríamos hacer un test de usabilidad con un grupo de familiares o amigos, cuando el proyecto es de gran envergadura y con fines comerciales, se suele invertir una gran cantidad de dinero en realizar este tipo de test que se efectúa con un grupo numeroso de usuarios que pueden ser seleccionados tras completar un formulario.

 

Recomendación

En el siguiente enlace podrás acceder al artículo: “Formulario de selección de participantes” de Shawn Lawton Henry en el que se presenta un formulario de selección de participantes en una prueba de usabilidad que sirve para determinar si un participante potencial encaja con las características de usuario definidas en el protocolo de la prueba de usabilidad.