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 a los que nos enfrentamos cada vez más. Pero, ¿qué es en realidad? ¿Por qué debería interesarte la usabilidad y la experiencia del usuario en particular como diseñador web? ¿Y cómo puedes conseguir un valor añadido a través de la UX incluso si no tienes un diseñador de UX en tu 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:

¿Por qué molestarse con 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 los medios impresos. Aquí crean composiciones sofisticadas que presentan un mensaje preciso.

En el diseño impreso, la vía de comunicación está 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, entonces 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.

Sin embargo, me gustaría limitarme a la subárea que está directamente relacionada con un sitio web: la usabilidad. Por tanto, el camino a través de nuestro producto debe ser lo más agradable y fluido posible. Sin embargo, no debes ignorar 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 motiva 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". Como sería ocioso y frustrante tener que hacer clic al azar en todas las partes 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 el botón. Delimita la zona de interacción. Sabemos que si hacemos clic aquí, ocurrirá algo. 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.

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 tu sea más fácil de usar desde el principio.

1. ¿Qué interacciones son generalmente posibles?
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: Deslizar y tocar no es posible en un ordenador de sobremesa (estándar), mientras que en los dispositivos móviles no hay efecto hover.

Esto es precisamente lo que hay que tener en cuenta al 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 . tu Los visitantes pueden verse influidos por circunstancias externas o utilizar ciertas interacciones de forma diferente a la prevista originalmente. 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 tus sitio en la que no encuentra lo que busca, es probable que navegue utilizando el botón de retroceso, en lugar de 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 cuyo sitio no 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 una vez a través de la aplicación, 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 pulsar con frustración en un móvil sitio .

Sin embargo, también debes ser consciente de que no puedes "reeducar" a los usuarios de tu . No puedes evitar que hagan las cosas "malas", 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 generalizado- 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 sitio a 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 sitio genera demasiada frustración o porque hay muy pocas alternativas para la gestión de errores.

¿Por qué las pruebas de usabilidad?

Por cierto, la mejor manera de conocer ese 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 sitio despué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 anotar los posibles obstáculos y complicaciones para que el sitio web tu sea más fácil de usar. Cuanto menos le digas al encuestado, más imparcial será el resultado.

Los 4 indicadores diferentes

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

1. significante explícito

Los significantes explícitos consisten en una indicación de texto, como "haz clic aquí". A menudo se encuentran junto con otros indicadores, como los formularios de contacto o los botones. Deben ser lo más claros y concisos 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 puede esperar de una interacción.

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

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 del índice. O que el texto azul subrayado representa un enlace. La barra de navegación de un sitio web -tal 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 como indicación del contenido y nos guía 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 en un idioma que no hablas. Por lo tanto, vale la pena no reinventar la rueda aquí. En cambio, para una mejor usabilidad tus sitio es aconsejable fijarse en los patrones establecidos. 

Esto queda bien ilustrado con el ejemplo de 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 sitio . Puedo ver en qué punto de navegación me encuentro 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.

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 tanto, pueden 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 ahí 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.

Cuando utilices significantes ocultos, también debes tener en cuenta que puede ser necesario encontrar una solución distinta para cada dispositivo final.

Pinterest es un buen ejemplo:

En la versión de escritorio, aparecen nuevas llamadas a la acción al pasar el ratón por encima. Como el usuario hace clic intuitivamente en 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 haces clic en la imagen, obtienes una vista ampliada en la que se ven 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.

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 -al igual que en la versión de escritorio- sólo está disponible cuando has 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 puedes pulsarlo. 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, tienes que tener cuidado con esto: Si utilizas un indicador metafórico con un símbolo modificado, podría confundir a los usuarios de tu .

Por ejemplo, si utilizas un buzón en lugar del consabido sobre, esto podría perjudicar la usabilidad de tus . ¿Por qué? El usuario tiene que detenerse y pensar en el siguiente paso. Tienen que preguntarse si este símbolo se corresponde con lo que quieren conseguir.

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

La usabilidad no sólo significa que los visitantes de tu encuentren de algún modo el camino a través de sitio . Más bien, la usabilidad significa que el enfoque aquí es holístico para 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 detenerse y preguntarse "¿Qué se ofrece realmente aquí? ¿Qué ocurre cuando hago clic en él? ¿Volveré de nuevo? ¿Dónde estoy? ¿Cómo he llegado hasta aquí?" - es contraproducente.

¿Es posible construir un sitio de 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 tu tu propio proyecto.

Lecturas recomendadas

Uno de los libros más conocidos sobre usabilidad es "No me hagas pensar", 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": Un enfoque de sentido común para la usabilidad de la web" por Steve Krug
• "El diseño de las cosas cotidianas" de Donald A. Norman
• UX Pin ofrece interesantes libros electrónicos para su descarga gratuita