Portada-cabecera-usabilidad-web-diseno-ux

Consejos PRO para el Diseño UX y la Usabilidad de tu web

Hacer una página web no es solo cuestión de que sea bonita y atractiva a la vista. Dentro del mundo del diseño Web existe muchos otros factores que hay que tomar en cuenta para que nuestro sitio, o el de nuestros clientes, pueda generar conversiones. En este artículo te hablaré sobre un factor muy importante: La usabilidad web.

Antes, hace muchos años, el marketing no era cuestión de generar valor hacia el cliente, sino sencillamente venderle un producto. Hoy en día, cada cosa que hacemos tiene que estar pensada por y para el cliente. He allí el secreto entre el éxito y el fracaso de nuestros proyectos.

En un mundo tan competitivo como el que estamos viviendo hoy en día, si el cliente/usuario siente que el servicio que ofrecemos no es bueno, sencillamente se busca a alguien más que le resuelva de mejor manera. En el mundo online es tan sencillo como salirse de nuestra página y buscar en otra. Así de fácil.

Es por eso que cada vez los términos de usabilidad web y experiencia de usuario van cogiendo más valor ya que si el usuario consigue lo que busca y lo hace cómoda e intuitivamente, estaremos más cerca de nuestros objetivos.

 

¿Qué es la experiencia de usuario?

Es esa sensación, emoción y satisfacción que sentimos respecto a un producto resultado de interactuar con ese producto y su proveedor, en este caso, la marca.

Dicho de otra forma: Es el conjunto de percepciones y sensaciones que desarrollamos durante nuestra relación e interacción con una interfaz de cualquier tipo. En nuestro caso, con los elementos de nuestro sitio web y su presencia en el mundo digital.

Es por lo dicho anteriormente que muchas personas, por ejemplo, prefieren consultar los precios de un producto en Amazon, ya que su usabilidad es un ejemplo a seguir. Su interfaz es fantástica, el proceso de compra muy sencillo, básicamente obtienes lo que necesitas en unos cuantos clics.

Nuestro sitio web es el reflejo de nuestra marca en el mundo online, es nuestro más grande escaparate, son nuestras oficinas principales en internet.

Todo lo que te comento en este punto depende de numerosos factores:

  • El valor y la utilidad del producto o servicio ofrecido.
  • Que de respuesta a las necesidades y experiencias del usuario.
  • Los contenidos y servicios ofrecidos.
  • La transmisión de los valores de la marca.
  • Creatividad y diseño visual. Mientras más atractivo, mejor.
  • Facilidad de aprendizaje y que sea fácilmente memorizable.
  • Que la usabilidad y la navegación sean eficientes (menos de 3 clics por acción)

Dicho lo anterior, ahora si podemos entrar en profundidad con la Usabilidad Web:

 

¿Qué es la Usabilidad Web (UX)?

Es la medida por la que un producto o, en nuestro caso, la web, se puede usar por los usuarios con el fin de conseguir objetivos específicos con efectividad, eficiencia y satisfacción.

Dicho en otras palabras: es la facilidad con la que los visitantes navegan por el sitio, entendienden su estructura y realizando con satisfacción aquello que pretendía realizar desde cualquier dispositivo (Comprar, conseguir información, registrarse, etc)

Es un atributo cualitativo que nos permite conocer si los usuarios entienden los contenidos y si son capaces de completar con satisfacción y con el menor esfuerzo posible las tareas que han venido a realizar a nuestro site.

 

¿Por qué es tan importante que tu web sea usable?

Porque sin duda alguna, una buena experiencia de usuario ayuda a mejorar la conversión de tu sitio web. Las conversiones dependen de nuestros intereses y pueden ser para obtener leads/registros o aumentar las ventas.

¿No te ha pasado que muchas veces buscas información en ciertas páginas web y navegar en ellas se hace particularmente tedioso? Yo particularmente, cada vez que visito alguna página de algún organismo público ¡La paso fatal! porque, en su mayoría y no digo que todos, su usabilidad es muy complicada.

Manteniendo el ejemplo de Amazon ¿Por qué es la empresa número 1 en ventas online? ¡Porque su servicio es sencillamente maravilloso! Pero en el caso que nos ocupa, su web es fantástica, toda la información la obtienes a pocos clics, el proceso de compra es rápido y sencillo. En resumen: la usabilidad de la web de Amazon es excelente.

Una página web usable ayudará a una empresa o persona a lograr más facilmente sus objetivos.

Al momento de diseñar una web, siempre debes pensar en como te sentirías si tu tuvieras que usarla. Debes hacerte estas preguntas:

  • ¿Me gusta lo que veo?
  • ¿Consigo rápidamente lo que quiero?
  • ¿Si quiero volver a una sección que visité anteriormente la conseguiré rápidamente?
  • ¿Los servicios que se ofrecen resuelven los problemas de los usuarios?
  • ¿Cómo me sentí luego de navegar en ella?
  • ¿Fue estresante?
  • ¿La navegación fue intuitiva o tengo que recordar constantemente donde están las cosas?

 

Elementos que determinan la usabilidad de tu sitio web

Efectividad de la web:

Esta relacionado con el número de errores que comente el usuario en la consecución de una tarea, es decir, una web se considera eficaz cuando un usuario logra conseguir lo que necesita sin cometer errores.

Algunos consejos para lograrlo son:

  • Un diseño sencillo y minimalista (soy fan de este estilo)
  • Textos claros y que sean fáciles de leer: No confundas a tu lector con muchos tecnicismos y palabras redundantes.
  • Buena organización de los contenidos: Así como una tienda física distribuye bien su espacio para enamorar al posible cliente, una web debe distribuir bien sus contenidos para generar generar el mismo efecto y se produzcan las conversiones.
  • Ayudas en la navegación: Orienta a tu usuario para que sepa que sucede en cada paso que dé dentro de tu web.

usabilidad web con diseño minimalista

 

Eficiencia de la web:

Está relacionado con el tiempo empleado por el usuario para conseguir lo que buscaba. En otras palabras: Es el esfuerzo en número de pasos, clics o tiempo que el usuario necesita para lograrlo.

Algunos consejos para aumentar la eficiencia:

  • Trata que la mayoría de transacciones se puedan lograr en una media de 3 clics.
  • Que el tiempo que el cliente dedique a comprender la web sea el menor posible.
  • En este mundo donde estamos acostumbrados a tenerlo todo rápidamente, trata de que el usuario no tenga que hacer mucho esfuerzo para conseguir lo que estaba buscando en tu página.

 

Satisfacción de uso:

Es la percepción del usuario respecto a la dificultad de llevar a cabo una tarea, que el sitio web sea subjetivamente agradable, que no sienta incomodidad y, sobre todo, que la actitud sea positiva en el uso del producto.

satisfaccion-usabilidad-web-ux

En este punto no solo influye el diseño y contenido, sino la velocidad de carga que influyen decisivamente en los puntos del párrafo anterior.

Los usuarios que ingresan a alguna página web y que esta tenga una velocidad de carga muy lenta, inmediatamente abandona y entrarán a otra que cargue mejor. Es por ello que te recomiendo tomar en cuenta los siguientes aspectos para mejorar la velocidad de tu sitio web:

  • Usa imágenes de calidad pero que sean ligeras en cuenta al peso: Herramientas como Tinypng y Befunky te van a ayudar a comprimirlas sin quitarles calidad.
  • No subas vídeos directamente al servidor: Siempre es mejor subirlas a algunas plataformas como Youtube o Vimeo y colocar el enlace en tu web.
  • Trata de tener un código HTML y CSS lo más limpio posible: Si eres programador, debes estructurar bien el código y si usas un CMS para hacer tus páginas web, te recomiendo WordPress (Le gusta mucho a Google)
  • Usa un hosting de calidad: Algunos hosting low cost producen velocidades de carga muy lentas, es por ello que te recomiendo servicios de hospedaje como el Raiola y Webempresa.

 

Estos tres elementos deben tenerse en cuenta independientemente del dispositivo que el usuario utilice para ingresar a nuestra web (Móvil, Tableta u Ordenador).

 

La importancia del diseño Responsive o Responsive Design

Es un concepto fundamental dentro del diseño de páginas web y consiste en la adaptación del diseño de nuestras páginas y su cotenido en función del tamaño del dispositivo que las visualiza, manteniendo siempre su usabilidad a pesar de las limitaciones del tamaño.

El objetivo es lograr que el usuario pueda conseguir realizar cualquier tarea de manera cómoda y rápida sin importar si lo hace desde un ordenador o desde su móvil.

La navegación web desde equipos móviles ha superador a la de ordenadores de escritorio en un gran porcentaje de países y supone actualmente un 44% a nivel global.

Esto es un dato muy importante debido a que provado el nacimiento y consolidación de nuevo concepto: Mobile First.

¿Que es el término Mobile First?

Consiste en concebir y diseñar el contenido de nuestra sitio web para móviles en primer lugar y luego adaptarlo a dispositivos con pantallas más grandes.

Un error en el que caemos (y caigo) muchas veces, es sentarnos frente al ordenador, empezar a escribir código, o en su defecto, a maquetar en nuestro CMS y lo hacemos pensando en como se ve en nuestra pantalla descuidando totalmente cual es el comportamiento en móviles.

Es un paradigma que tenemos que ir cambiando y que tenemos que adaptar a los tiempos actuales donde existen más móviles que seres humanos.

 

Principios de la Usabilidad Web que no pueden faltar en tu sitio web

1- Fácil acceso a los contenidos

Esto se logra a través de un diseño minimalista y una buena organización de los contenidos y menús dentro del sitio.

2- Utilización de referencias visuales

Debemos destacar las acciones relevantes por encima de las irrelevantes. Por ejemplo: Destacar el botón de confirmación de compra sobre el de cancelación.

3- Visualización en tiempo real de posibles errores

Se debe indicar al usuario a medida que teclea o navega por nuestro sitio de los posibles errores que pueda comentar. Por ejemplo: Que la contraseña que está registrando es muy débil.

4- Implementación de ayudas contextuales

Esto es con el fin de mantener al usuario informado de lo que esta pasando en situaciones que le puedan desorientar. Por ejemplo: Indicarle que su sesión se ha desconectado luego de un periodo de inactividad.

 

Pero… ¿Y que conseguimos entonces creando un sitio web usable?

!MEJORAR NUESTROS RATIOS DE CONVERSIÓN!

Un usuario que no encuentra un producto es imposible que lo compre.

También mejora los procesos de conversión en nuestro sitio web en cuanto a registros, descargas, etc.

¿Qué es la tasa de conversión?

Es el porcentaje de visitantes que ejecuta una acción, por ejemplo: Rellenar un formulario, se suscriben a nuestras newslettes, descargan una demo, etc.

 

En resumen ¿Qué debo hacer para mejorar la usabilidad de mi web?

A lo largo del artículo te he ido indicando algunos aspectos que debe tener tu web para que sea usable de cara al usuario, sin embargo, en este apartado enumeraré a modo de resumen, todo aquello que debe tener tu web para que aumentes tus conversiones de cara al logro de los objetivos que te hayas planteado:

1- Define claramente cual es el propósito del sitio: Cuando el usuario ingresa a tu web debe tener claro desde el primer momento de que trata: Un blog de cocina, una tienda online de productos de casa, un magazine, etc.

2- Usa un diseño claro y minimalista: Las web saturadas con elementos gráficos y con poco aire entre casa uno de los elementos ya han pasado de moda. Hoy en día se uso mucho el llamado “estilo mnimalista” que emplean las grandes empresas como Apple y Google. Este tipo de diseño facilita mucho la navegación por el sitio y no da sensación de agobio.

3- Usa una tipografía agradable y clara: Los textos deben ser claros al momento de la lectura. Evita el uso de tecnicismos y usa un lenguaje cercano que sea comprensible para la mayoría de tus lectores. No uses más de dos tipos de tipografía.

4-  Distribuye correctamente los contenidos: Así como una tienda física distribuye la mercancía estratégicamente para aumentar sus ventas (Como lo hace Ikea. Nadie sale de su tienda sin haber comprado algo 😆), lo mismo debe hacer una página web: La distribución de los elementos visuales y llamadas a la acción deben hacerse de tal forma que facilite la navegación y que lleven al usuario a realizar las acciones que queremos que hagan dentro de nuestra página web.

5- Introduce llamadas a la acción: La mayoría de los usuarios NO LEEN todo el contenido, sino que escanean la página en búsqueda de lo que necesitan. Es por eso que debemos colocar ayudas visuales que destaquen sobre el resto, por ejemplo: resaltar los botones de descarga, los formularios de registro, el botón de contacto. etc.

6- No más de tres clics: Trata de que el usuario no haga más de tres clics para encontrar lo que quiere. Ejemplo: Para llegar al blog, agregar el producto al carrito, registrarse en nuestra newsletter, etc. Esta técnica se aplica especialmente en E-commerce, ya que mientras menos pasos haga el cliente para comprar, menos posibilidad existe de que abandone la transacción.

7- Cuida el tiempo de carga de tu web: En un mundo donde existen millones de páginas web, si nuestra página tarda en cargar lo más seguro es que el usuario salga y busque otra que tarde menos. Es por ello que debemos cuidar el peso de las imágenes, vídeos, hosting y demás elementos que puedan aumentar el tiempo de carga el cual no debe ser superior a 5 segundos.

8- Tu web si o si, debe ser responsive: Este es un punto escencial y que no puede faltar. Los elementos de tu web deben adaptarse al tamaño de los diferentes dispositivos y pantallas. Hoy en día, la mayoría de las visitas se hacen desde un móvil y si tu página se ve igual en ordenador como en el móvil, lamento decirte que lo más seguro es que el usuario se vaya.

9- El menú de navegación debe ser claro y sencillo: Dentro del menú deben estar todos las páginas importantes para ti o para tu negocio. No debe ser muy extenso. Puedes agrupar algunos elementos en submenús.

10- Indícale al usuario en tiempo real de posibles errores: Por ejemplo, cuando el usuario intenta registrarse al área privada de una página y su contraseña es demasiado débil. Es mejor avisarle mientras la está tecleando que esperar a que le haya dado al botón Aceptar para indicárselo.

 

Resumen de los beneficios de la usabilidad (UX)

  • Aumento de las tasas de conversión según nuestros objetivos.
  • Refuerza nuestra imagen de marca.
  • Reduce los costos de desarrollo.
  • Fideliza a nuestros clientes.

 

¿Te gustaría agregar algún otro elemento para mejorar la usabilidad web de cara al usuario? ¿Tienes alguna duda sobre como implementar estos consejos en tu web?

Déjame tu comentario y con gusto aclararé cualquier duda que se te pueda presentar, y si consideras que es necesario modificar algún elemento dentro del artículo, házmelo saber igualmente.

 

¡Espero tus comentarios! Nos leemos en una próxima entrada 😉

Consejos PRO para el Diseño UX y la Usabilidad de tu web
4.9 (97.5%) 8 votes

4 Comentarios
  • Diego Gutiérrez
    Publicado a las 09:39h, 19 septiembre Responder

    Gran artículo! Muchas veces nos liamos intentando ponerle plugins e historias y no nos percatamos de que al final la usabilidad web es uno de los grandes objetivos de una página.

    • manuxgb
      Publicado a las 10:10h, 19 septiembre Responder

      Es así, Diego. Hay que tener presente siempre que el usuario es lo más importante para una web. Nada hacemos con tenerla muy chula si al final no es para nada usable.

  • Rafa Arjonilla
    Publicado a las 05:37h, 20 septiembre Responder

    Totalmente de acuerdo Manu. En mi caso siempre he puesto el contenido por encima del diseño. Lo ideal es ir encontrando ese equilibrio para que el diseño empuje con la usabilidad web y conviertan la experiencia de usuario en algo atractivo, natural y dinámico. Por cierto, te ha quedad0 un artículo de 10! Me ha gustado mucho y en tu web queda reflejado que predicas con el ejemplo. Lo comparto!

    • manuxgb
      Publicado a las 07:06h, 21 septiembre Responder

      ¡Muchas gracias, Rafa! Me alegra saber que te guste el artículo. En relación a tu web, te digo que a mi me encanta por lo práctica que es y porque la información está servida sin mucho esfuerzo ¡Nos seguimos leyendo en otros post! 🙂

Publica un comentario

Pin It on Pinterest

Shares
Share This

Si continuas navegando por este sitio, estás aceptando nuestra política de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar