Diseño UX y Usabilidad Web: ¿Qué hay detrás de la Experiencia de Usuario?

Sonja Hoffmann Última actualización 21.10.2020
8 min.
Diseño UX Usabilidad
Última actualización 21.10.2020

Diseño de la experiencia del usuario (UX), usabilidad, diseño de la interfaz humana y diseño centrado en el ser humano: son sólo algunos de los términos a los que nos enfrentamos cada vez más. Pero, ¿qué es en realidad? ¿Por qué debería interesarse por la usabilidad y la experiencia del usuario como diseñador web? ¿Y cómo puede conseguir valor añadido a través de la UX incluso si no tiene un diseñador de UX en su equipo?

En mi último artículo sobre el diseño web armonioso, te mostré cómo crear tus propias directrices de diseño. Sin embargo, un diseño web armonioso depende de varios factores, así que hoy te presentaré la experiencia del usuario:

Diseño UX y Usabilidad Web: ¿Qué hay detrás de la Experiencia de Usuario?

¿Por qué debería preocuparme por la UX?

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

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

El diseño web, en cambio, es interactivo: no se trata sólo de enviar un mensaje, sino de crear una conversación. 

Experiencia del usuario: la experiencia del usuario

Desde los primeros días de Internet, las empresas se han fijado en los aspectos psicológicos de estas interacciones. Sin embargo, por aquel entonces no se hablaba de diseñadores de UX, sino de diseñadores de interacción humana, y la profesión era, en general, mucho menos común que hoy.

¿Qué es la experiencia del usuario?

La experiencia del usuario, según los estándares actuales, no empieza cuando se visita un sitio web y no termina cuando se abandona. 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 sólo a la subárea que está directamente relacionada con un sitio web: la usabilidad. Por tanto, el recorrido por nuestro producto debe ser lo más agradable y fluido posible. Sin embargo, no hay que dejar de lado el presupuesto y las especificaciones internas de la empresa.

Una buena usabilidad puede tener un impacto no despreciable en las cifras de ventas de tu . Lo que me motiva personalmente es el deber, como operador de un sitio web, de no frustrar al usuario.

Afordancias, significantes y retroalimentación

En pocas palabras, la asequibilidad describe lo que es generalmente posible. Utilizando una pantalla de escritorio como ejemplo, esto sería la capacidad de "hacer clic". Dado que sería ocioso y frustrante tener que hacer clic al azar en cualquier lugar del sitio web, incorporamos significantes (indicadores). Éstas muestran al usuario dónde es posible hacer algo y qué. 

Uno de los significantes más conocidos es un botón. Delimita la zona de interacción. Sabemos que si hacemos clic aquí, algo sucederá. Esto suele reforzarse con los efectos hover, o cuando el cursor se convierte en un dedo índice cuando paso el ratón por encima. Estos también son significantes.

¿Qué son los atributos, los significantes y la retroalimentación?

La asequibilidad describe qué interacción es generalmente posible. Los significantes señalan que una interacción es posible. La retroalimentación, en cambio, garantiza que el usuario sepa que su interacción ha provocado algo.

El estado activo del botón me indica que ha ocurrido algo al hacer clic en él. Los tres procesos se complementan entre sí y pueden ayudar como cuestiones básicas a que el sitio web tu sea más fácil de usar en primer lugar.

  1. ¿Qué interacciones son posibles en general?
  2. ¿Cómo puedo mostrar a mis usuarios que son posibles?
  3. ¿Cómo saben que han hecho lo "correcto"?

La posibilidad de interacción suele estar definida por el dispositivo utilizado para acceder al sitio web: El deslizamiento y el toque no son posibles en un ordenador de sobremesa (estándar), mientras que en los dispositivos móviles no existe el efecto hover.

Esto es precisamente lo que hay que tener en cuenta a la hora de elegir los significantes. Por ejemplo, ¿los enlaces sólo se ven cuando paso el ratón por encima de ellos? Entonces un visitante móvil no reconoce que una interacción es posible en absoluto. 

Los usuarios interactúan física y digitalmente

Los atributos y significantes también pueden ir más allá de la interfaz del sitio web tu . tu los visitantes pueden verse influidos por circunstancias externas o utilizar ciertas interacciones de forma diferente a la prevista inicialmente. Por ejemplo, el botón de retroceso del navegador es una circunstancia externa a la página web tus . 

Si el visitante ha navegado accidentalmente a una parte de tus sitio en la que no encuentra lo que busca, hay una alta probabilidad de que navegue utilizando el botón de retroceso - en lugar de utilizar los enlaces de tus sitio . 

Cómo se utilizan deliberadamente las interacciones de forma "incorrecta" - un ejemplo

A menudo reservo vuelos a través de un proveedor de servicios extranjero cuya página web sitio no aparece por defecto ni en alemán ni en inglés. Usando la versión móvil, de repente no pude encontrar los ajustes de idioma. Sin embargo, recordé que ya había accedido a la web a través de la app, donde entonces todo se mostraba en inglés por defecto. Desde entonces, sólo accedo al sitio web para móviles a través del desvío de la "app", porque puedo recordarlo y porque prefiero hacer dos clics más que hacer clic con frustración en un móvil sitio .

Sin embargo, también hay que tener en cuenta que no se puede "reeducar" a los usuarios de tu . No puedes evitar que hagan las cosas mal, pero puedes planificar este comportamiento y asegurarte de que hay suficientes alternativas.

Otro buen ejemplo que nos ha causado dolores de cabeza a todos es el uso, desgraciadamente todavía muy extendido, de navegadores anticuados o de Internet Explorer. Algunos diseños no se muestran tan creativamente valiosos como en Firefox o Chrome, por ejemplo. Aunque esto sea molesto, tenemos que diseñar y programar igualmente para estos usuarios.

Porque peor que acceder a sitio a través de la aplicación, por ejemplo, o utilizar el botón de retroceso, es cuando el visitante del sitio abandona por completo, ya sea porque el uso de nuestro sitio genera demasiada frustración o porque hay muy pocas alternativas de gestión de errores.

¿Por qué las pruebas de usabilidad?

Por cierto, la mejor manera de conocer estos comportamientos es mediante la observación. Quién prueba el sitio web es relativamente poco importante. No es necesario encontrar personas que utilicen realmente el sitio después. Porque los errores de usabilidad realmente groseros se producen con casi todos los usuarios. 

Lo más importante es que usted no puede decirle al probador lo que tiene que hacer o cómo llegar a su destino. La clave es identificar y anotar los posibles obstáculos y complicaciones para que el sitio web tu sea más fácil de usar. Cuanto menos se le diga al sujeto, más imparcial será el resultado.

Los 4 indicadores diferentes

¿Qué señales puede utilizar en tus sitio para destacar las interacciones? Distinguimos cuatro categorías diferentes, que les presentaré brevemente.

1. significante explícito

Los significantes explícitos consisten en una indicación en forma de texto, como "haga clic aquí". A menudo los encontrará junto con otros indicadores, como formularios de contacto o botones. Éstas deben ser lo más claras y concisas posible. Además, en aras de la simplicidad, debe recurrir a frases conocidas y evitar las formulaciones supuestamente creativas. 

El valor de reconocimiento permite al usuario saber con bastante certeza qué resultado esperar de una interacción.

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

Diseño UX y Usabilidad Web: ¿Qué hay detrás de la Experiencia de 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 ni mayor referencia. Son relativamente numerosos. 

Todo el mundo debería saber, por ejemplo, que al hacer clic en el logotipo se vuelve a la página de inicio. O que el texto azul subrayado representa un enlace. La barra de navegación de un sitio web -tal y como la utilizamos hoy- también es un fenómeno de este tipo. Los esperamos en ciertos lugares en un sitio. Sabemos que la barra de navegación nos sirve de guía de contenidos, conduciéndonos por el sitio web. Una barra de menú que se convierte en un icono de hamburguesa en los dispositivos móviles tampoco necesita más explicación. 

Patrones comunes que hemos aprendido en los últimos años

Lo sorprendente es que estos patrones suelen tener validez internacional. Esto se ve especialmente bien si quieres orientarte en sitio , cuyo idioma no hablas. Así que vale la pena no reinventar la rueda aquí. En cambio, se recomienda para una mejor usabilidad tus sitio si se trata de los patrones establecidos. 

Esto queda bien ilustrado con el ejemplo de un sitio de un restaurante (seleccionado al azar) en Moscú. Aunque no hablo ruso ni sé leer el cirílico, puedo ver inmediatamente cómo navegar por la página sitio . Puedo ver en qué punto de navegación me encuentro y soy capaz de filtrar la información más importante (contacto) enseguida. Puedo ver en qué punto de navegación me encuentro y puedo filtrar enseguida la información más importante (contacto).

Diseño UX y Usabilidad Web: ¿Qué hay detrás de la Experiencia de Usuario?
https://bulka.cafe/

3. significante oculto

Sólo se pueden ver realizando una determinada acción, como pasar el ratón y desplazarse. 

Los significantes ocultos tienen la ventaja de que hacen que el diseño parezca limpio y ordenado. Así puede hacer que el diseño de tu sea más ágil. 

Sin embargo, también tienen algunas desventajas. El usuario sólo los 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 las llamadas a la acción importantes, sino como mucho para las secundarias (Call-To-Actions).

Además, cuando se utilicen significantes ocultos, hay que tener en cuenta que puede ser necesario encontrar una solución distinta para cada dispositivo final.

Pinterest es un buen ejemplo:

pinterest

En la versión de escritorio, aparecen nuevos Call-To-Actions al pasar el ratón por encima. Dado que el usuario pulsa intuitivamente sobre la imagen para añadirla a su colección, lo más probable es que la función no pase desapercibida.No obstante, los diseñadores han desarrollado un plan B: Al hacer clic en la imagen, aparece una vista amplia en la que se pueden ver todas las interacciones posibles.

Es interesante cómo se resuelve todo en la variante con pantalla táctil. Aquí también hay interacciones ocultas, pero con otros fines.

Diseño UX y Usabilidad Web: ¿Qué hay detrás de la Experiencia de Usuario?

La imagen de la izquierda muestra la visión general de sitio. El menú de la parte inferior sólo se repliega cuando el usuario se desplaza hacia arriba, lo que parece inusual al principio, pero también es muy intuitivo. Cuando buscamos la navegación, solemos desplazarnos hacia arriba. 

Sin embargo, los Call-To-Actions adicionales -como en la versión de escritorio- sólo están disponibles cuando se ha hecho clic en la imagen. Por lo tanto, ya no son significantes ocultos. 

Sin embargo, me ha sorprendido que Pinterest utilice 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 aconsejable. Si el usuario pasa de la versión móvil a la de escritorio, o viceversa, el uso de los mismos iconos permitiría una orientación más rápida. Esto hace que el uso sea más suave. De este modo, la usabilidad mejora positivamente.

4. significante metafórico

Una lupa, que señala que el campo de búsqueda se encuentra aquí. El sobre que representa el envío de mensajes. El botón que señala que se puede pulsar. Todos los principios tienen en común que los conocemos por el mundo real. 

Su utilidad en el mundo digital se ha convertido en un patrón de diseño. Sin embargo, hay que tener cuidado con esto: Si utiliza un indicador metafórico con un símbolo modificado, podría confundir a los usuarios de tu .

Si utiliza un buzón en lugar del conocido sobre, por ejemplo, esto podría perjudicar la usabilidad del sitio web tus . ¿Por qué? El usuario tiene que detenerse y pensar en el siguiente paso. Debe preguntarse si este símbolo se corresponde con lo que quiere conseguir.

Diseño UX y Usabilidad Web: ¿Qué hay detrás de la Experiencia de 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 los visitantes de tu encuentren de alguna manera su camino a través de sitio . La usabilidad significa que la atención se centra en el visitante: el "viaje" a través de tu sitio debe ser lo más fluido posible. 

Cada interrupción, es decir, cada vez que el usuario tiene que hacer una pausa y preguntarse "¿Qué se ofrece realmente aquí? ¿Qué ocurre si hago clic en él? ¿Volveré otra vez? ¿Dónde me encuentro? ¿Cómo he llegado hasta aquí?" - es contraproducente en este sentido.

¿Es posible construir un sitio de manera que no haya interrupciones? Lo más probable es que no. En función de la información presentada, pueden ser incluso deseables algunas interrupciones, una reflexión dirigida y una leve frustración.

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

Lecturas recomendadas

Uno de los libros más famosos sobre usabilidad es "¡Nome hagas pensar!", de Steve Krug. El título lo dice todo y es, en definitiva, de lo que trata todo enfoque de usabilidad.

  • "Don't Make Me Think, 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 tienes sobre la usabilidad de la web y el diseño de la experiencia del usuario? ¿Qué procesos puedes recomendar? No dudes en utilizar la función de comentarios. ¿Quieres más consejos sobre diseño y desarrollo web? Entonces síguenos en Twitter, Facebook o a través de nuestra newsletter.

Después de estudiar Diseño para Juegos y Escritura Creativa en Auckland, Sonja Hoffmann se ha especializado en el diseño y desarrollo web. Su labor profesional se enfoca en la gamificación y exploración de la motivación y la experiencia del usuario, junto con su pasión y curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

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