Principios de diseño web

Decir que el diseño de cualquier producto ya sea físico o digital se debe realizar pensando en como lo van a utilizar los usuarios parece algo muy obvio, pero en determinadas ocasiones nos encontramos que el diseño se ha planteado sin tener en cuenta como lo va utilizar el usuario.

El diseño de la interacción que tendrá el usuario con el objeto o una interfaz se puede realizar desde diversos puntos de vista:

Diseño creativo. El diseñador crea sin tener en cuenta como los usuarios van a interacturar con el objeto, diseña en base a su propia experiencia, se busca más la parte estética, que sea algo original y con un diseño nunca visto antes.

Diseño centrado en tareas.El diseñador se centra en las tareas o acciones que deberá realizar el usuario para que estas puedan ser realizadas. Este diseño se basa en la aparición de una necesidad hasta que esta cubierta. El diseño centrado en tareas resulta es muy utilizado para lograr que el producto sea útil pero a veces se olvida que sea original o tenga un diseño atractivo.

Diseño centrado en implicaciones técnicas. Este tipo de diseño se lleva a cabo por un equipo que es el encargado de realizar un desarrollo técnico. Su principal objetivo es que el producto o interfaz funcione de forma óptima con el uso mínimo de recursos. Este diseño tiene un inconveniente, al no conocer el nivel tecnológico de los usuarios nos podemos encontrar con usuarios expertos que se sabrán manejar bien por la interfaz y otros usuarios que no sabrán que acciones o movimientos deberán realizar. Este es el punto más importante del diseño centrado en implicaciones técnicas, que todos los usuarios independientemente de su nivel tecnológico deben poder manejar la interfaz sin ningún tipo de problema.

Diseño centrado en el usuario. El diseño centrado en usuarios se centra en que deben ser los productos los que se deben adaptar al usuario y no al revés.

Los diseñadores en la mayoría de ocasiones utilizan distintos elementos de los cuatro modelos citados pero centrarse en el usuario parece ser la mejor opción pero también se deben analizar las tareas, ser consciente de los recursos técnicos que se van a necesitar y que el producto o interfaz sea algo nuevo o nunca visto hasta la fecha.

Pero… ¿Cómo quedaría el diseño si lo adaptamos al diseño de interfaces o de páginas web?

Para el diseño de interfaces o de páginas web debemos centrarnos en 4 pilares para que nuestra interfaz tenga éxito: la interfaz debe ser fácil de usar, debe ser coherente, el usuario debe tener el control sobre la plataforma y no la plataforma sobre el usuario y esta debe no debe estar sobrecargada de elementos que no sean necesarios para su funcionamiento.

Facilidad y simplicidad

Una definición rápida y sencilla de que una interfaz deber ser usable es que sea “fácil”. No es la mejorar de las definiciones pero sí que ayuda a explicar la esencia de que es la sensación que debe tener el usuario al usar la interfaz o página web.

Existen distintas formas de conseguir que una página web sea simple y es utilizar modelos ya testeados y directrices y pautas de diseño web. En el mundo Online todos asignamos el color rojo a la prohibición de una acción y el color verde a la aprobación de una acción. Existen elementos que no necesitan explicación de como se usan porque siguen convenciones y estándares. En las interfaces web sucede lo mismo, basándonos en nuestra experiencia previa podemos reconocer como funciona una interfaz: los hipervínculos se subrayan, el logotipo situado en la parte superior izquierda redirige a la página principal, etc… Por este motivo es importante seguir patrones de diseño y convecciones que ayuden a los usuarios.

Coherencia

La coherencia en el diseño de interfaces es un concepto clave donde debe tener en cuenta que los conocimientos aprendidos en el manejo de sistemas o interfaces deben ser transferibles a otros, minimizando y reduciendo al máximo el tiempo de aprendizaje. Por ejemplo, el paquete de Google Drive guarda muchas similitudes con el paquete Office de Microsoft en sus principales programas de escritura, cálculo y presentaciones. Existen varios aspectos que se refieren a la coherencia del diseño:

Coherencia visual. El usuario debe ver siempre la misma información y los objetos en el mismo aspecto, siguiendo una lógica y ubicados en el mismo sitio. Los colores, la situación de determinados elementos, el uso de las mayúsculas o la tipografía también deben guardar el mismo aspecto y coherencia en toda la interfaz o web.

Coherencia terminológica. La terminología deberá ser siempre la misma en toda la interfaz, menús, categorías, headings, footers, etc…

Coherencia en el comportamiento de los elementos de interacción. Los objetos deben actuar siempre de una misma forma ya que es más difícil olvidar un hábito aprendido que aprender uno de nuevo. Si una misma acción produce diferentes resultados el usuario puede confundirse y desconfiar sobre la interfaz o web.

Control del usuario

Este principio hace referencia a que el usuario debe tener el control absoluto durante la interacción con la interfaz y que en el momento que el usuario cometa algun error, la interfaz se lo comunique y este pueda tomar una decisión en el mismo momento.

Algunas pautas para conseguir que el usuario tenga el control absoluto sobre la interfaz son las siguientes

  • Informar al usuario del estado en el que se encuentra una tarea en curso. Por ejemplo: la gran mayoría de eCommerce en el proceso de compra o Checkout informan a los usuarios los pasos realizados y los restantes para realizar una compra.
  • En el caso de tratarse de aplicaciones, la creación de atajos para ahorrar tiempo. Por ejemplo: la aplicación Notion en su versión de escritorio y aplicación permite al usuario realizar atajos mediante el uso de combinaciones de teclas.
  • Informar al usuario de errores en caso de que estos aparezcan. Por ejemplo: el usuario ha rellenado de forma equivoca un campo en un formulario de más de 10 campos. Se debe indicar en que campo se ha producido el error y porqué.

Reducción de la carga cognitiva

El diseño de una interfaz deber estar pensada para reducir la carga cognitiva del usuario, ya que no se debe sobrecargar al usuario de información, para ello se recomienda las siguientes acciones:

  • Reconocer siempre es mejor que recordar. A los usuarios les resulta más fácil reconocer un elemento o item que tener que recordarlo. Por ejemplo, en muchos eCommerce en las fichas de producto cerca del botón de COMPRAR o AÑADIR AL CARRITO vamos a encontrar elementos de decisión que puede hacer que nos decantemos para comprar ese producto: Envíos gratuitos, Envíos en 24 horas, etc…
  • Proporcionar elementos visuales a los usuarios. Es importante disponer de elementos en formato texto e imágenes para facilitar las tareas que tenga que realizar el usuario.
  • Divulgación progresiva. No es recomendable mostrar al usuario mucha información, esta debe ofrecerse en bloques de temática o contenido para no sobrecargar al usuario. Un claro ejemplo son los procesos de compra o Checkout de eCommerce, la gran mayoría separa los datos personales, datos de envío y pasarela de pago en páginas diferenciadas para que el usuario no vea en una misma página varios campos de solicitud de información.
Autor

Consultor de Marketing

Escribir un comentario