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

Sonja Hoffmann Actualizado el 21.10.2020
8 Min.
Usabilidad del diseño de UX
Actualizado por última vez el 21.10.2020

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.

La buena usabilidad puede tener un impacto significativo en tu las 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 se fusionan entre sí y, como cuestiones fundamentales, pueden ayudar a que un tu 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"?

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 del sitio tu web. tu Los visitantes pueden verse influidos por circunstancias externas o pueden 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 tus de la página web. 

Si el visitante ha navegado accidentalmente a una parte tus sitio donde no puede encontrar lo que está buscando, es probable que navegue usando el botón de regreso en lugar de usar los enlaces en tus sitio. 

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

A menudo reservo los vuelos a través de un proveedor de servicios extranjeros cuya sitio pantalla estándar no está ni en alemán ni en inglés. 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 websitio a través de la aplicación, donde todo se mostraba en inglés por defecto. Desde entonces,sitio sólo accedo a la web móvil a través del desvío de la "aplicación" porque puedo recordarlo y porque prefiero hacer dos clics más que hacer sitio un clic frustrado en un móvil.

Pero también debe ser consciente de que no puede "reeducar" tu a los usuarios. No se puede impedir que tomen esas acciones "equivocadas", pero se puede planificar este comportamiento y también asegurarse de que hay suficientes alternativas.

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.

Es peor que usar la aplicación para acceder a ellossitio , o usar el botón de regreso, si el visitante del sitio se da por vencido completamente - ya sea porque usar el nuestro sitio causa 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. Los quesitio prueban la web son relativamente insignificantes. No es necesario encontrar personas que lo usen 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. La clave es identificar y anotar los posibles obstáculos y complicaciones para que el tu 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 puedes usar tus 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 al índicesitio . 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 aparezcan en ciertos lugares en unsitio... Sabemos que la Barra de Navegación sirve como tabla de contenidos y nos guía a través de la websitio . 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 sitio orientarte en uno cuyo idioma no hablas. Así que vale la pena no reinventar la rueda aquí. En su lugar, para una mejor utilizacióntus sitio , se recomienda que se ocupe de los patrones establecidos. 

Esto es claramente visible en el ejemplo de un restaurante sitio (seleccionado al azar) en Moscú. Aunque no hablo ruso ni leo cirílico, inmediatamente veo cómo puedo sitio navegar a través de ellos. 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. Así que puedes hacer tu el diseño 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 peticiones de acción importantes, pero a lo sumo secundarias (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, el nuevo Call-To-Actions. 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: Si hace clic en la imagen, obtendrá una vista más grande en la que todas las interacciones posibles son visibles.

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 sitio. 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. 

Los adicionales Call-To-Actions - como 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 al tu usuario.

Por ejemplo, si utiliza un buzón en lugar del sobre habitual, esto podría dañar el tus sitio web de usabilidad. ¿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 utilidad no sólo significa que los visitantes se encuentran de alguna tu manera a través de ellossitio . La usabilidad significa más bien que el enfoque está puesto en el visitante de una manera holística - el "viaje" a tu sitio través de él debe ser lo más fluido 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 uno sitio para que no haya interrupción? 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 tu 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
tu 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 nuestro Boletín de noticias.

Después de estudiar Diseño de Juegos y Escritura Creativa en la verde Auckland, se ha especializado Sonja Hoffmann en 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.

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

tu La dirección de correo electrónico no se publicará. Los campos obligatorios están marcados con * marcado.