Diseño UX Usabilidad

Diseño UX y usabilidad web: ¿Qué hay detrás de la experiencia de usuario?

Diseño de la experiencia del usuario (UX), usabilidad, diseño de la interfaz humana y diseño centrado en el ser humano son algunos de los términos con los que nos enfrentamos cada vez más. Pero, ¿qué es en realidad? ¿Por qué deberían interesarle la usabilidad y la experiencia del usuario en particular 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 se caracteriza por varios factores: por eso hoy te presento la experiencia del usuario:

Diseño UX y usabilidad web: ¿Qué hay detrás de la experiencia de usuario?

¿Por qué preocuparse por el diseño UX?

Muchos de los diseñadores alemanes 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: aquí no sólo se envía un mensaje, sino que se provoca una conversación. 

Experiencia del usuario: la experiencia del usuario

Desde los primeros días de Internet, las empresas se han ocupado de los aspectos psicológicos de estas interacciones. Sin embargo, en aquella época no se hablaba de diseñadores de UX, sino de diseñadores de interacción humana, y la profesión estaba en general mucho menos extendida que hoy.

¿Qué es la experiencia del usuario?

La experiencia del usuario, según los estándares actuales, no comienza cuando un usuario visita un sitio web y no termina cuando lo 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 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 directrices internas de la empresa.

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

Asequibles, significantes y retroalimentación

En pocas palabras, la asequibilidad describe lo que es generalmente posible. Utilizando el ejemplo de una pantalla de escritorio, sería la posibilidad 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 fusionan entre sí y, como cuestiones fundamentales, pueden ayudar a que el sitio web tusea más fácil de usar desde el principio.

  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: En un ordenador de sobremesa (estándar) no es posible deslizar ni tocar, 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 son visibles cuando paso el ratón por encima de ellos? Entonces un visitante móvil no reconocerá que la 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. tuLos 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 al sitio web tus. 

Si el visitante ha navegado accidentalmente a una parte de tussitio en la que no encuentra lo que busca, es probable que navegue utilizando el botón de retroceso, en lugar de los enlaces de tussitio . 

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 sitiono aparece por defecto ni en alemán ni en inglés. De repente, no pude encontrar la configuración del idioma a través de la versión móvil. Sin embargo, recordé que ya había accedido al sitio web a través de la aplicación una vez, donde todo se mostraba entonces en inglés por defecto. Desde entonces, sólo accedo al sitio web para móviles a través de los desvíos 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 "incorrectas", 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 en Chrome, por ejemplo. Aunque esto sea molesto, tenemos que diseñar y programar igualmente para estos usuarios.

Porque peor que acceder a sitioa través de la aplicación, por ejemplo, o utilizar el botón de retroceso, es cuando el visitante del sitio se da por vencido del todo, ya sea porque el uso de nuestro sitiogenera 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 conocer este tipo de comportamiento es mediante la observación. Quién prueba el sitio web es relativamente poco importante. No es necesario encontrar personas que utilicen realmente el sitiodespués. Porque los errores de usabilidad realmente groseros se producen con casi todos los usuarios. 

Es importante que no le digas al probador lo que tiene que hacer o cómo llegar a dónde. La clave es reconocer y tomar nota de los posibles obstáculos y complicaciones para que el sitio web tusea más fácil de usar. Cuanto menos se le diga al encuestado, más imparcial será el resultado.

Los 4 indicadores diferentes

¿Qué señales puede utilizar en tussitio 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 de texto, como "haga clic aquí". A menudo se encuentran junto con otros indicadores, como los formularios de contacto o los botones. Estas deben ser lo más claras y concisas posible. Además, en aras de la simplicidad, hay que recurrir a formulaciones conocidas y evitar las 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 ninguna explicación o referencia adicional. 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 índice. 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 para indicar el contenido y guiarnos 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 sitioen un idioma que no hablas. Por lo tanto, vale la pena no reinventar la rueda aquí. En cambio, es aconsejable para una mejor usabilidad tussitio si se trata de los patrones establecidos. 

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

Diseño UX y usabilidad web: ¿Qué hay detrás de la experiencia de usuario?
https://bulka.cafe/

3. significantes ocultos

Sólo se pueden ver si se realiza 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. Por ello, pueden agilizar el diseño de tu. 

Sin embargo, también tienen algunas desventajas. El usuario sólo los encuentra si sabe que están ahí o si lleva a cabo 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.

Cuando se utilizan significantes ocultos, también 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 nuevas llamadas a la acción 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. Sin embargo, los diseñadores han desarrollado un plan B: Si hace clic en la imagen, obtendrá una vista ampliada en la que se podrán ver todas las interacciones posibles.

Es interesante ver 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, la llamada a la acción adicional -como en la versión de escritorio- sólo está disponible cuando se ha hecho clic en la imagen. Esto significa que 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 facilitaría la orientación. Esto hace que el uso sea más suave. De este modo, la facilidad de uso mejora positivamente.

4. significantes metafóricos

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 consabido sobre, por ejemplo, podría perjudicar la usabilidad de tus. ¿Por qué? El usuario tiene que detenerse y pensar en el siguiente paso. Deben preguntarse si este símbolo se corresponde con lo que quieren conseguir.

Diseño UX y usabilidad web: ¿Qué hay detrás de la experiencia de usuario?

Conclusión sobre el diseño UX y la usabilidad web

La usabilidad no sólo significa que los visitantes de tuencuentren 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 tusitio debe ser lo más fluido posible. 

Cada interrupción, es decir, cada vez que el usuario tiene que detenerse y preguntarse "¿Qué se ofrece realmente aquí? ¿Qué sucede cuando hago clic en él? ¿Volveré otra vez? ¿Dónde estoy? ¿Cómo he llegado hasta aquí?" - es contraproducente.

¿Es posible construir un sitiode forma que no haya interrupciones? Muy probablemente no. En función de la información presentada, pueden ser incluso deseables algunas interrupciones, una reflexión centrada y una leve frustración.

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

Lecturas recomendadas

Uno de los libros más conocidos sobre usabilidad es "Don't make methink", de Steve Krug. El título lo dice todo y es, en efecto, de lo que trata todo enfoque de usabilidad.

  • "No me hagas pensar: A Common Sense Approach to Web Usability", de Steve Krug
  • "El diseño de las cosas cotidianas" de Donald A. Norman
  • UX Pin ofrece interesantes libros electrónicos para su descarga gratuita

tuPreguntas sobre la experiencia del usuario

¿Qué preguntas tiene sobre la usabilidad de la web y el diseño de la experiencia del usuario? ¿Qué procesos puede recomendar? No dude en utilizar la función de comentarios. ¿Quiere más consejos sobre diseño y desarrollo web? Entonces síganos en Twitter, Facebook o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.