Capítulo 3: Introducción - Diseo de Interfaces e Interaccin

Experiencia de usuario

Se entiende por "Experiencia de usuario" a lo que siente y experimenta un usuario que ingresa a cada pgina web. Si bien no es fcil de medir y adquiere un tono subjetivo al hablar de sensacin, s es un elemento que se puede modelar gracias al uso de diferentes elementos que son empleados por el usuario que visita el Sitio Web.

Adems de ser un campo de estudio muy abordado desde diferentes disciplinas, el rea de Experiencia de usuario ha recibido aportes muy notables en el ltimo tiempo gracias a la introduccin de tecnologas de seguimiento de las acciones del usuario en un Sitio Web, tales como las de "eyetracking" mencionada antes que han permitido entender de manera real y concreta la manera en que los usuarios emplean los espacios digitales.

En este sentido, se ha observado que los usuarios necesitan confirmaciones visuales de las percepciones que tienen de los contenidos que revisan. Por ejemplo, la utilizacin de un lenguaje claro genera una tasa de respuesta ms alta que cuando el lenguaje utiliza palabras que no son tan conocidas para el usuario. Lo mismo ocurre cuando los elementos interactivos como enlaces, botones y zonas de ingreso de informacin no se diagraman con las formas a las que el usuario est acostumbrado.

Debido a lo anterior, a continuacin se entregarn recomendaciones acerca de tres elementos que son claves en la experiencia que tiene el usuario y que se utilizan con gran frecuencia: nos referimos a los enlaces, botones y formularios.

Uso de botones

Los botones son los elementos que permiten que el usuario realice o confirme acciones solicitadas en las pantallas del Sitio Web. Por lo mismo, su forma debe ser estndar, similar en todo el sitio y no ofrecer dudas acerca de su presencia o de la accin a la que invita.

Para ello es necesario que se cuide tanto su aspecto fsico como la palabra que contiene, ya que ambos permitirn que el usuario entienda, sin lugar a dudas, qu ocurrir si lo presiona.

El buscador siempre debe tener una forma estndar.

[D] Figura 11. ñ El buscador siempre debe tener una forma estndar para que el usuario sepa claramente cul es la accin que debe desarrollar.

En el ejemplo que se muestra en la Figura 11, queda claro que hay un espacio para escribir y luego el botn Buscar; adems se ofrece un breve ttulo explicativo de lo que permite hacer el formulario. De esa manera se facilita la comprensin del funcionamiento del mismo y el usuario tiene claro cul ser el efecto de la accin que emprender.

En este ejemplo, el formulario de bsqueda carece de ttulo explicativo y el botn de bsqueda es poco convencional, lo que afecta la comprensin de la accin ofrecida.

[D] Figura 12. ñ En este ejemplo, el formulario de bsqueda carece de ttulo explicativo y el botn de bsqueda es poco convencional, lo que afecta la comprensin de la accin ofrecida.

En el ejemplo de la Figura 12, hay dos cambios importantes: el formulario no tiene un ttulo que explique para qu es el formulario de manera breve, sino que se enfoca a lo que el usuario ya sabe, que es que debe ingresar una palabra o frase para buscar; adems el botn al no decir slo Buscar tambin genera un problema de comprensin ya que obliga al usuario a pensar si efectivamente eso es un botn o es una etiqueta descriptiva.

Otro elemento importante es la palabra que acompaa al botn. Esta necesariamente debe estar relacionada con la accin a realizar y dicha accin debe ser coherente con lo que se ofrece en la pantalla en la que se est trabajando. Adems, debe ser una sola palabra y corresponder a un verbo que defina adecuadamente la accin ofrecida.

Finalmente el ltimo elemento relevante es que el botn debe cambiar de estado cuando el mouse est sobre l, utilizando alguna tecnologa que haga evidente su comportamiento como botn activo.

En conclusin, para que un formulario sea efectivo y apoye la experiencia que tendr el usuario que visite el Sitio Web, los botones deben parecer tales (en tamao, forma, accin y contenido) y debern estar ubicados de manera que el usuario sepa qu ocurrir cuando los presione. Asimismo, deben ser parte integrante de formularios que logren indicar en una frase breve y explicativa, qu ocurrir al utilizarlos.

Uso de enlaces

Los enlaces son una de las caractersticas esenciales de los Sitios Web, ya que permiten al usuario visitar otros documentos del mismo o externos, slo haciendo clic sobre una zona demarcada. En este sentido, si bien el estndar indica que el enlace debe ser subrayado y de color azul, los cambios tecnolgicos han permitir que haya otras formas de hacerlos evidentes.

No obstante, hay ciertos elementos que siguen siendo esenciales respecto de los enlaces y son los siguientes:

  1. Deben ser diferentes al texto: los enlaces se deben diferenciar del texto que los rodea para explicar visualmente al usuario que se ofrece una accin a partir de su contenido. La forma de diferenciarlo puede variar pero al menos se debe procurar que est subrayado y de color diferente o bien, si no est subrayado, s se debe mostrar en otro color.
  2. <
  3. Su estado debe ser visual: los enlaces tienen cuatro estados posibles los que deben visualizarse de manera simple y directa.
    1. Enlace sin visitar: es el color que tiene antes de que se le haga clic encima; su color debe ser diferente del texto que lo rodea.
    2. Enlace destacado: es el color que puede adoptar cuando se le pasa el mouse sobre el enlace y permite ayudar al usuario a descubrir su existencia.
    3. Enlace activo: es el color que tiene cuando se le da clic encima; normalmente es un color fuerte que permite notar que se le ha activado.
    4. Enlace visitado: es el color que tiene el enlace cuando ya ha sido activado y la pgina a la que conduce ya ha sido visitada.
    En la imagen se ve la diferencia visual entre los cuatro tipos de enlaces.

    [D] Figura 13. ñ En la imagen se ve la diferencia visual entre los cuatro tipos de enlaces.

  4. Su contenido debe ser explicativo: los enlaces deben contener palabras que expliquen hacia dnde se dirige la accin, de tal manera de evitar que lo enlazado sean frases como "clic aqu" y otras similares. Adicionalmente y para efectos de aumentar su accesibilidad, la sintaxis HTML de los enlaces debe contener el modificador "title" de tal manera que se despliegue un recuadro explicativo acerca del efecto que tendr hacer clic sobre el enlace elegido.
  5. En la imagen se ve cmo el texto explicativo ofrece ms informacin al poner el mouse sobre el enlace.

    [D] Figura 14. ñ En la imagen se ve cmo el texto explicativo ofrece ms informacin al poner el mouse sobre el enlace.

Uso de elementos especficos

Los restantes elementos interactivos que requieren ser revisados son los que permiten definir el tipo de interaccin que se desea ofrecer a los usuarios del Sitio Web.

El primero de ellos es el llamado "Text Area" que es el que permite que el usuario pueda ingresar informacin en los formularios. Respecto de ste, se define como buena prctica ofrecer un espacio adecuado para escritura (por ejemplo, 500 caracteres que equivalen a seis lneas de texto). Sin embargo, una prctica ms adecuada consiste en emplear un contador reverso que informe el total de caracteres que se puede escribir y que los vaya restando a medida que el usuario va ingresando la informacin; de esa manera se le ofrece una retroalimentacin adecuada.

El segundo elemento es el "check button" que permite marcar las opciones que sean las ms adecuadas para la accin que se est realizando dentro de un formulario. Hay que tener en cuenta que un campo de este tipo siempre permite la seleccin mltiple de opciones.

El tercer elemento es el "radio button" que permite marcar la opcin ms adecuada para la accin que se est realizando dentro de un formulario; normalmente se trata de opciones excluyentes entre ellas.

En la imagen se ve el uso del radio button para marcar el campo Sexo.

[D] Figura 15. ñ En la imagen se ve el uso del radio button para marcar el campo Sexo.

Para efectos de que el usuario tenga una experiencia adecuada al usar el Sitio Web, es imprescindible que los elementos citados slo se empleen de la forma sealada.