UX Design & Web Usability: ¿Qué hay detrás de la experiencia del usuario?

9 Min.
Usabilidad del diseño de UX

Diseño de Experiencia de Usuario (UX), Usabilidad, Diseño de la Interfaz Humana y Diseño Centrado en el Ser Humano - estos son sólo algunos de los términos con los que nos enfrentamos cada vez más. ¿Pero qué es eso en realidad? ¿Por qué la usabilidad y la experiencia de usuario en particular le interesan como diseñador web? ¿Y cómo puedes conseguir valor añadido a través de UX aunque no tengas un diseñador de UX en tu equipo?

En mi último artículo sobre diseño armonioso de la web Te mostré cómo crear tus propias pautas de diseño. Sin embargo, el diseño armonioso de la web está influenciado por varios factores - por eso voy a presentarles hoy la Experiencia de Usuario:

UX Design & Web Usability: ¿Qué hay detrás de la experiencia del usuario?

¿Por qué debo tratar con UX?

Muchos españoles diseñadores que conozco tienen una sólida formación en diseño de comunicación - por lo que vienen de la dirección de los medios de comunicación impresos. Crean composiciones sofisticadas que presentan un mensaje preciso.

En el diseño impreso, la vía de comunicación es clara: hay un emisor (por ejemplo, un cartel o un folleto) y un receptor (al que se dirige el medio). El destinatario no tiene nada más que hacer aquí que recibir el mensaje, entenderlo y luego tomar una decisión (de compra).

El diseño de la web, por otro lado, es interactivo: no sólo se envía un mensaje, sino que se crea una conversación. 

Experiencia del usuario: la experiencia del usuario

Desde los primeros días de la Internet, las empresas se han ocupado de los aspectos psicológicos de estas interacciones. Sin embargo, en ese momento no se hablaba de diseñadores de UX sino de Diseñadores de Interacción Humana - y la profesión era generalmente mucho menos común de lo que es hoy en día.

¿Qué es la experiencia de usuario?

La experiencia del usuario, según los estándares actuales, no comienza cuando se visita un sitio web y no se detiene al salir de él. Más bien, describe toda la experiencia que un usuario tiene con la marca o el producto, desde el primer hasta el último contacto.

Sin embargo, me gustaría limitarme a la parte del sitio web que está directamente relacionada con un sitio web: la usabilidad. Por lo tanto, el camino a través de nuestro producto debe ser tan agradable y sin fisuras como sea posible. Sin embargo, no debe ignorar el presupuesto y las directrices internas de la empresa.

Una buena usabilidad puede tener un impacto significativo en sus cifras de ventas. Lo que me impulsa personalmente es el deber como operador de un sitio web de no frustrar al usuario.

Asequibilidades, significantes y retroalimentación

En pocas palabras, la asequibilidad describe lo que es generalmente posible. Usando el ejemplo de una pantalla de escritorio, esta sería la posibilidad de "hacer clic". Como sería inútil y frustrante hacer clic al azar en cualquier parte del sitio web, incluimos significantes. Estos muestran al usuario donde algo es posible y qué. 

Uno de los significantes más famosos es un botón. Reduce el área de interacción. Sabemos que cuando hacemos clic aquí, algo sucede. Esto suele intensificarse por los efectos de "hover" - o cuando el cursor se convierte en un dedo índice cuando me muevo sobre él (hovere). Estos también son significantes.

¿Qué son las prestaciones, los significados y la retroalimentación?

La asequibilidad describe qué interacción es generalmente posible. Los significantes (indicadores) señalan que una interacción es posible. La retroalimentación, por otro lado, asegura que el usuario sepa que su interacción ha desencadenado algo.

El estado activo del botón me muestra como una retroalimentación de que algo sucedió cuando hice clic en él. Los tres procesos están entrelazados y pueden ayudar a que su sitio web sea más fácil de usar desde el principio.

  1. ¿Qué interacciones son generalmente posibles?
  2. ¿Cómo muestro a mis usuarios que son posibles?
  3. ¿Cómo saben que hicieron lo "correcto"?
free_dev_blog_orange

La posibilidad de interacción suele estar definida por el dispositivo utilizado para acceder al sitio web: En una computadora de escritorio (estándar), no es posible deslizar y tocar, mientras que no hay un efecto de desplazamiento en los dispositivos móviles.

Esto es exactamente lo que debe tenerse en cuenta al elegir los significantes. Por ejemplo, ¿los enlaces sólo se aclaran cuando paso el ratón por encima de ellos? Entonces un visitante móvil no reconoce que una interacción es siquiera posible. 

Los usuarios interactúan física y digitalmente

Las asequibles y significativas también pueden ir más allá de la interfaz de su sitio web. Su visitante puede estar influenciado por circunstancias externas, o utilizar ciertas interacciones de manera diferente a la prevista originalmente. Por ejemplo, el botón de regreso del navegador es una función que se encuentra fuera de su sitio web. 

Si el visitante ha navegado accidentalmente a una parte de su página en la que no puede encontrar lo que busca, es probable que navegue utilizando el botón de regreso en lugar de los enlaces de su página. 

Cómo las interacciones se usan deliberadamente "incorrectamente" - un ejemplo

A menudo reservo los vuelos a través de un proveedor de servicios extranjeros cuyo sitio no se muestra en alemán o inglés por defecto. Usando la versión móvil, de repente no pude encontrar la configuración del idioma. Sin embargo, recordé que ya había accedido a la página web a través de la aplicación, donde todo se mostraba en inglés por defecto. Desde entonces, sólo accedo a la página web móvil a través del desvío "app" porque puedo recordarlo y porque prefiero hacer dos clics más que hacer un clic frustrado en una página móvil.

Pero también debe ser consciente de que no puede "reeducar" a sus usuarios. No se puede "disuadirlos" de tal comportamiento "equivocado", pero se puede planificar este comportamiento y también asegurarse de que hay suficientes alternativas.

UX Design & Web Usability: ¿Qué hay detrás de la experiencia del usuario?

Otro buen ejemplo, que ya nos ha causado dolores de cabeza a todos nosotros, es el uso - lamentablemente todavía generalizado - de navegadores anticuados o del Internet Explorer. Algunos diseños no se muestran con tanto valor creativo como en Firefox o Chrome, por ejemplo. Aunque esto es molesto, tenemos que diseñar y programar para estos usuarios de la misma manera.

Peor que usar la aplicación para acceder a la página o el botón de regreso, por ejemplo, es cuando el visitante de la página se da por vencido completamente, ya sea porque usar nuestro sitio crea demasiada frustración o porque hay muy pocas alternativas para el manejo de errores.

¿Por qué las pruebas de usabilidad?

Por cierto, la mejor manera de averiguar sobre tal comportamiento es observarlo. Quienquiera que pruebe el sitio web es relativamente insignificante. No es necesario encontrar a las personas que realmente usarán el sitio después. Porque los errores de uso realmente graves se producen con casi todos los usuarios. 

Lo importante es que no debes decirle al probador qué hacer o cómo llegar a dónde. Lo más importante es identificar y anotar los posibles obstáculos y complicaciones para que su sitio web sea más fácil de usar. Cuanto menos le digas a la persona de la prueba, más imparcial será el resultado.

Los 4 indicadores diferentes

¿Qué tipo de señales puede establecer en su sitio para resaltar las interacciones? Distinguimos cuatro categorías diferentes, que les presentaré brevemente.

1. significante explícito

Los significantes explícitos consisten en un aviso en forma de texto, como "Haga clic aquí". A menudo se pueden encontrar junto con otros indicadores, como formularios de contacto o botones. Estos deben ser tan claros y concisos como sea posible. Además, en aras de la simplicidad, se debe recurrir a formulaciones familiares y evitar las formulaciones supuestamente creativas. 

El valor de reconocimiento permite al usuario saber con un alto grado de certeza qué resultado puede esperar de una interacción.

"VER MÁS" es un ejemplo de un simple significante explícito.

UX Design & Web Usability: ¿Qué hay detrás de la experiencia del usuario?
https://www.lonelyplanet.com/portugal/lisbon

2. patrones de diseño: patrones y convenciones

Los patrones de diseño se refieren a diseños recurrentes a los que nos hemos acostumbrado tanto que ya no requieren explicación o referencia adicional. Hay relativamente muchos de estos. 

Todo el mundo debería saber, por ejemplo, que al hacer clic en el logo se vuelve a la página de índice. O ese texto subrayado en azul representa un enlace. La barra de navegación de un sitio web, tal como la usamos hoy en día, es otro de esos fenómenos. Esperamos que aparezca en ciertos lugares de una página. Sabemos que la Barra de Navegación nos sirve como tabla de contenidos y nos guía a través del sitio web. Una barra de menú que se convierte en un icono de Hamburgo en los dispositivos móviles tampoco necesita más explicaciones. 

Los patrones comunes que hemos aprendido en los últimos años

Lo sorprendente es que estos diseños a menudo tienen validez internacional. Puedes ver esto particularmente bien si quieres orientarte en un sitio cuyo idioma no hablas. Así que vale la pena no reinventar la rueda aquí. En cambio, para una mejor usabilidad de su sitio, se recomienda tratar con los patrones establecidos. 

Esto es claramente visible en el ejemplo de un lado de un restaurante (seleccionado al azar) en Moscú. Aunque no hablo ruso ni puedo leer cirílico, inmediatamente veo cómo puedo navegar por la página. Puedo ver en qué punto de navegación me encuentro y puedo filtrar la información más importante (contacto) al principio.

UX Design & Web Usability: ¿Qué hay detrás de la experiencia del usuario?
https://bulka.cafe/

3. significantes ocultos

Sólo puedes verlas realizando una determinada acción, como el vuelo y el desplazamiento. 

Los significantes ocultos tienen la ventaja de que hacen que el diseño parezca limpio y ordenado. Para que puedan hacer que tu diseño se vea más delgado. 

Sin embargo, también tienen algunas desventajas. El usuario sólo las encuentra si sabe que están presentes o si realiza accidentalmente la interacción desencadenante. Por lo tanto, estas señales no son adecuadas para llamadas importantes, sino como mucho para llamadas secundarias de acción (call to actions).

Cuando se utilizan significantes ocultos, también hay que tener en cuenta que puede ser necesario encontrar una solución separada para cada dispositivo final.

Un buen ejemplo es Pinterest:

pinterest

En la versión de escritorio, las nuevas llamadas a las acciones aparecen cuando se cierne. Dado que el usuario hace clic intuitivamente en la imagen para añadirla a su colección, lo más probable es que la característica no pase desapercibida, pero los diseñadores han desarrollado un plan B: Al hacer clic en la imagen se obtiene una gran vista en la que se pueden ver todas las interacciones posibles.

Es interesante ver cómo se resuelve todo el asunto en la versión de pantalla táctil. Aquí también hay interacciones ocultas, pero con diferentes propósitos.

UX Design & Web Usability: ¿Qué hay detrás de la experiencia del usuario?

En la imagen de la izquierda se puede ver la visión general de la página. El menú de la parte inferior sólo se retrae cuando el usuario se desplaza hacia arriba, lo que parece inusual al principio, pero también es muy intuitivo. Cuando buscamos la navegación, normalmente nos desplazamos hacia arriba. 

Las llamadas a la acción adicionales, como en la versión de escritorio, sólo están disponibles después de haber hecho clic en la imagen. Así que ya no son significantes ocultos. 

Lo que me sorprendió, sin embargo, fue que Pinterest utiliza dos iconos diferentes para la misma interacción en las dos versiones. Desde el punto de vista de la usabilidad, no creo que esto sea recomendable. Si el usuario pasa de la versión móvil a la de escritorio, o viceversa, el uso de los mismos iconos le facilitaría la búsqueda de su camino. Esto hace que el uso sea más suave. La facilidad de uso se ha mejorado positivamente.

4. significantes metafóricos

Una lupa, que indica que el campo de búsqueda se encuentra aquí. El sobre que representa el envío de mensajes. El botón que indica que puedes apretarlo. Todos los principios tienen en común que los conocemos del mundo real. 

Su uso en el mundo digital se ha convertido en un patrón de diseño. Sin embargo, tienes que tener cuidado aquí: El uso de un indicador metafórico con un símbolo modificado podría confundir a sus usuarios.

Por ejemplo, si utiliza un buzón de correo en lugar del sobre habitual, esto podría dañar la usabilidad de su sitio web. ¿Por qué? El usuario debe hacer una pausa y considerar el siguiente paso. Tiene que cuestionar si este símbolo corresponde a lo que quiere lograr.

UX Design & Web Usability: ¿Qué hay detrás de la experiencia del usuario?
Derechos de autor: https://www.iconfinder.com/icons/2296974/email_inbox_letter_mail_mailbox_icon_icon

Conclusión

La usabilidad no sólo significa que sus visitantes encontrarán de alguna manera su camino a través del sitio. La usabilidad significa que el foco está en el visitante en su conjunto - el "viaje" a través de su sitio debe ser tan perfecto como sea posible. 

Cada interrupción, es decir, cada vez que el usuario tiene que detenerse y preguntarse "¿Qué es lo que realmente se ofrece aquí? ¿Qué pasa cuando hago clic en él? ¿Vuelvo entonces? ¿Dónde me encuentro? ¿Cómo llegué aquí?" - es contraproducente.

¿Es posible construir una página para que no haya interrupciones? Muy probablemente no. Dependiendo de la información que se muestre, pueden ser incluso deseables ciertas interrupciones, un pensamiento específico y una ligera frustración.

Es importante conocer las diferentes herramientas para poder utilizarlas adecuadamente para su propio proyecto.

Lecturas recomendadas

Uno de los libros más famosos sobre la usabilidad es "¡No me hagas pensar!" por Steve Krug. El título es el programa aquí y al final eso es de lo que se trata cada enfoque de usabilidad.

  • "No me hagas pensar, Revisited: A Common Sense Approach to Web Usability", Steve Krug
  • "El diseño de las cosas cotidianas", Donald A. Norman
  • https://www.uxpin.com/ ofrece algunos libros electrónicos muy interesantes para su descarga gratuita
Sus preguntas sobre la experiencia del usuario

¿Qué preguntas sobre la usabilidad de la web y el diseño de la experiencia de usuario tienes? ¿Qué procesos puede recomendar? Por favor, use la función de comentarios. ¿Quieres más consejos sobre diseño y desarrollo web? Entonces síguenos en TwitterFacebook o sobre nuestra Boletín de noticias.

Después de estudiar Diseño de Juegos y Escritura Creativa en la verde región de Auckland, se ha especializado Sonja Hoffmannen el diseño de web y aplicaciones y su desarrollo. Su enfoque está en la gamificación y la exploración de la motivación y la experiencia del usuario, junto con la pasión y la curiosidad por las tendencias tecnológicas.

Comentarios sobre este artículo

Escriba un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con * marcado.