Web 2.0: los nuevos desafíos de la interfaz de usuario

En los últimos meses, en los medios impresos y en internet se habla cada vez más de weblogs (los ya conocidos diarios personales online, con comentarios y citas cruzadas a otros weblogs), se comparten juegos, vídeos o fotografías con familiares o amigos en sitios como Flickr o MySpace, se difunden noticias mediante podcasting (archivos de sonido que se descargan y se pueden escuchar y reproducir en cualquier momento), se coeditan de forma participativa enciclopedias online, como Wikipedia, se consultan o cuelgan anuncios clasificados en Craigslist o Loquo, se añaden textos o tags (la llamada folksonomia) a las fotografías, música, etc., que se cuelgan en la red, para que otros las puedan buscar en sitios web como del.icio.us, se suscriben los usuarios a agregadores de contenido, permitido por RSS, mediante el que los sitios comunican automáticamente sus actualizaciones a sus suscriptores, se utilizan procesadores de texto que recurren a internet como plataforma (Writely), etc.

Esta enorme actividad, esta marea de nuevos anglicismos, está cambiando el mundo de las telecomunicaciones, de los medios de comunicación, del marketing, del software, del entretenimiento,etc. Todo este nuevo conjunto de medios forma lo que algunos llaman la Web 2.0, la nueva etapa de la cambiante internet, la nueva versión en la evolución de internet.

Sin embargo, algunas de las nuevas tecnologías o desarrollos que posibilitan la web 2.0, las Rich Internet Application (RIA) como AJAX, plantean desafíos de usabilidad en sus interfaces y formas de interacción. A. Bosworth ha recogido de forma breve una lista con algunos de los problemas o errores que provoca AJAX (cancelación del botón volver atrás del navegador, dificultad para guardar en favoritos las páginas o de pasarlas a amigos, parpadeos inesperados en algunaspartes de las páginas, etc.).

Hay dos aspectos que son fundamentales en el diseño de las interfaces, que deberían tenerse en cuenta especialmente:

* diseñar sistemas intuitivos de interacción
* informar a los usuarios la respuesta que tienen sus acciones en la pantalla

Hacer interfaces intuitivos y sistemas claros de interacción.

Hasta ahora, al llegar a una página la mayoría de los usuarios saben cómo interactuar: si ven un enlace saben que es para ir a otra página, conocen que deben pulsar un botón para realizar una acción o, en un formulario, saben cómo seleccionar elementos mediante botones de opción, casillas de verificación, etc. En las nuevas aplicaciones, la interacción es mucho mayor, pero los usuarios no tienen un modelo mental claro de su funcionamiento. Se introducen novedades que les pueden generar problemas. No son intuitivas y no siguen las convenciones actuales, por lo que no está claro qué deben hacer los usuarios para interactuar, lo que les exige un proceso de aprendizaje, que puede ser difícil para algunos.

Delante de uno de los mapas interactivos de Google el usuario puede no saber cómo interactuar, no darse cuenta que pulsando el ratón y manteniéndolo pulsado sobre un punto del mapa y arrastrándolo puede desplazarse por el mapa.

En los mapas de Yahoo el cursor tiene un aspecto un poco más descriptivo, con el dedo índice de la mano apuntando, lo que ayuda un poco, y la mano cerrada, como cogiendo algo, cuando se desplaza.

Esta falta de affordance, es decir, de elementos o características del diseño que indiquen las acciones posibles o cómo algo puede utilizarse, es clara en muchas de las aplicaciones realizadas con Ajax. Los usuarios que las conozcan pueden no tener problemas, pero para los usuarios no expertos supondrá un tiempo de aprendizaje, con los consiguientes perjuicios. Por ejemplo, en la imagen siguiente no es intuitivo que los módulos rectangulares se pueden arrastrar y cambiar de lugar, según lo desee el usuario. No hay ningún elemento que lo indique.

Una vez que el cursor se sitúa en la zona azul superior del módulo, cambia de aspecto, pasando a un formato en cruz, y, además, aparecen varios iconos en la parte de la derecha y de la izquierda y la etiqueta â??Editarâ? subrayada.Pero puede ser demasiado tarde para muchos usuarios, que pueden abandonar la página sin conocer esta posibilidad.

En otras aplicaciones, como el de la imagen inferior, no existen elementos de interacción o controles claros, por lo que se ha optado por ofrecer textos explicativos sobre cómo interactuar en la parte de la derecha.

Sin embargo, este recurso no es el más apropiado, puede ser una solución provisional. Los diseños deben ser autoexplicativos, sin necesidad de descripciones de cómo interactuar. En una interfaz las pistas visuales deben explicar su funcionamiento sin descripciones.

En las imágenes siguientes, extraídas de Flickr, no se utilizan controles intuitivos que comuniquen al usuario que los pies de página de las fotografías son editables. Debe pulsar en el texto para que aparezcan los campos de texto para su edición.

Estamos en un momento en el que es necesario inventar o rediseñar nuevos controles o convenciones de interfaces de usuario. Un ejemplo de esto es lo que se hace con el desplazador o indicador de progreso utilizado en las imágenes siguientes.

Amazon

Etrade

Google

Yahoo

Comunicar visualmente los cambios de la pantalla al usuario

El usuario de internet está acostumbrado que al realizar una acción, por ejemplo, pulsando un botón, aparezca durante unos instantes una pantalla oscura y luego, se descargue una nueva página en respuesta a su acción. Este modelo de interacción de petición-respuesta desaparece en algunas de las aplicaciones desarrolladas con RIA o Ajax.

Estas aplicaciones operan con otro modelo de interacción. Por ejemplo, en Ajax el usuario no tiene que esperar la respuesta del servidor a su acción, no interactúa, se detiene y espera. Ajax funciona como un intermediario entre el usuario y el servidor que trabaja en un segundo plano en el intercambio de datos, actualizando sólo partes o elementos de la página. Esto hace más rápida la interacción y evita esperas, pero puede crear problemas a los usuarios al poderles pasar desapercibidos los cambios, dudando si su acción a llegado al sitio.

Uno los principios de usabilidad es tener siempre informados a los usuarios sobre el estado del sistema, dando pistas visuales sobre qué esta ocurriendo, por ejemplo,ofreciendo feedback al usuario de su acción sin dejar dudas sobre si funciona o no.

Algunas RIA no desencadenan la respuesta esperada en los interfaces web y su forma de cambiar su contenido no capta suficientemente la atención del usuario, y no lo percibe.

Se han intentado algunas alternativas para destacar los cambios, utilizando principalmente el color y la animación. El correo electrónico Gmail de Google ofrece en la parte superior derecha una caja roja que indica que la página se está recargando.

Otra técnica utilizada es la de colorear el fondo de la parte que cambia, como en la imagen inferior.

Posibles aplicaciones a entidades financieras

Ofrecemos a continuación algunos de los usos posibles de los nuevos desarrollos, algunos de los cuales ya han sido implementados o son fáciles de deducir. El verdadero potencial está en la creatividad que permiten estas aplicaciones, relativamente fáciles y económicas de desarrollar. Veamos algunos ejemplos de uso:

• Escritorio gráfico de la banca electrónica. El potencial de interacción de las nuevas aplicaciones permitiría crear entornos sofisticados mediante la utilización de elementos visuales, para crear sistemas más fáciles de entender por la mayoría de usuarios. Podría implementarse de una manera más actual y usable, lo que pretendía el banco australiano St.George, con su escritorio con iconos, tal como comentamos en nuestro weblog. En él, en lugar de textos se ofrecían pantallas con iconos, con una descripción debajo con el nombre del producto y las principales características, en el que el usuario interactuaba pulsando sobre ellos. Por ejemplo, para realizar una transferencia primero seleccionaba la cuenta de origen pinchando en un icono de la parte superior, luego selecciona en otro icono la cuenta de destino y a continuación introducía los datos de la transferencia. Se podrían incorporar, por ejemplo, el sistema de arrastre tan utilizado por muchos usuarios en aplicaciones informáticas.
• Demostraciones, comparadores y simuladores. La gran interactividad e inmediatez que, por ejemplo, permiten tanto Ajax, como las RIA de Macromedia o las aplicaciones Laszlo, los hace candidatos ideales para los simuladores o asesores personalizados y eficaces, con â??pasos siguientesâ? y llamadas a la acción.
  Chase
• Operativas en pantallas únicas. En algunas operaciones de banca por internet puede ser conveniente realizar todo el proceso en una única pantalla, sin tener que cumplimentar varias páginas sucesivas. Esto elimina el tiempo de refresco de la página, haciendo más rápida la interacción del usuario, pero, además, el permite al usuario tener una visión completa de toda la operación, sabiendo de un vistazo los pasos necesarios para completarla, lo que se le solicita durante la misma. También la corrección puede ser más fácil, sin tener que reiniciar el proceso.
• Creación de un sistema de organización de la información alternativo, permitiendo que los usuarios introduzcan etiquetas en los servicios o productos. Esta clasificación, ya realizada en muchas aplicaciones de la Web 2.0, llamada Folksonomia [ver ciberpais], aunque puede ser más imprecisa, puede ser más clara para los usuarios y serles más atractiva. Además de usar su mismo lenguaje.
• Utilización de las etiquetas generadas por los usuarios para crear rankings de productos o servicios de más interés, con finalidades de venta cruzada. Este sistema, visualizado mediante diferentes tamaños de fuente y colores, se utiliza actualmente en varios sitios web, como Technorati o Flickr, para transmitir y medir el interés de las diferentes etiquetas o tags puestas por los usuarios.

  Las personas toman más en consideración las sugerencias de los otros que las de las instituciones. Según algunos estudios, la confianza en los medios de comunicación tradicionales y en las instituciones se ha reducido, y la lealtad continúa cayendo. Sin embargo, las redes sociales en internet, por ejemplo, mediante weblogs, ven crecer su importancia.

  Las entidades que sepan explorar y facilitar estas redes sociales, que favorecen las nuevas tecnologías o aplicaciones, como RSS o weblogs, podrán aprovecharlo comercialmente.

• Localizador de oficinas y cajeros. Las aplicaciones Ajax o Ria permiten combinar la información textual y gráfica de una manera atractiva y práctica, como se hace en los mapas de Google, uno de los éxitos más populares de esta nueva perspectiva de internet. En el mapa inferior se muestran la situación de los bancos en un callejero, con su dirección en el lateral.
  
  La carga de información sin necesidad de esperar la respuesta del servidor, permite a estas aplicaciones mostrar inmediatamente diferentes tipos de información al usuario, como detalles de la oficina, de contacto o localizarla en el mapa, como refleja la imagen inferior.

• Datos en tiempo real de información. Presentar información crítica en tiempo real, sin necesidad de refrescar la página, es interesante para muchos usuarios de banca o bolsa por internet, porque les permite tomar decisiones rápidas. En algunos casos la naturaleza dinámica o cambiante de la información, como titulares de noticias, precios de acciones o bolsa, exige una actualización constante. Las nuevas aplicaciones, por ejemplo, mediante los agregadotes de contenido (RSS), hacen posible la actualización constante sin necesidad de refresco de página ni recarga manual. En el sitio web mostrado en la imagen siguiente, se utiliza Ajax para las noticias, las tablas y la cotización de las acciones.
  

Como en la mayoría de las ocasiones en las que se introducen novedades, se presta demasiada atención a la tecnología y existe muy poco interés por las interfaces que utilizarán los usuarios. Se debe aprender la lección de etapas anteriores y se debe comenzar a tener en cuenta a los usuarios desde el principio para poder generar aplicaciones de internet intuitivas que faciliten la interacción. Ahora puede ser el momento, antes que se establezcan los estándares de hecho inadecuados, de que se generen convenciones de interfaces y sistemas de interacción intuitivos y fáciles para las personas.