Una buena jerarquía visual se utiliza para separar los elementos de un interfaz y distinguir los más importantes de los menos.

Para plasmar la jerarquía visual se utilizan distintas propiedades y características del lenguaje visual como la alineación, la proximidad, el color, el tono, la sangría, el tamaño de fuente, el relleno, el espaciado, etc. Jugando correctamente con estas características podemos dirigir y detener la atención de los usuarios dentro de la pantalla de una aplicación o una página web.

Además, la jerarquía visual rompe la monotonía de una pantalla sin elementos de descanso y facilita enormemente la legibilidad de los textos.

Image for post
Image for post

Originally published at www.aunitz.net.


En cualquier interfaz de usuario, a menudo mostramos elementos que puede tener diferentes estados. Los correos electrónicos puedes estar leídos o no, las facturas pueden estar pagadas o no, etc.

Tal y como nos lo sugieren varios principios de usabilidad (como el de anticipación o el de feedback), debemos informar al usuario del estado particular en el que se encuentra cada elemento.

Los estados ayudarán a los usuarios a comprender si sus acciones pasadas se han llevado a cabo con éxito o no, y si deben tomar medidas o no.

Image for post
Image for post

Originally published at www.aunitz.net.


Una de las decisiones importantes que debes tomar al diseñar un formulario es dónde ubicar las etiquetas (labels) con respecto a los campos del formulario.

Esta no es una decisión trivial, ya que afecta a la legibilidad, a la tasa de finalización, la velocidad de finalización y, en última instancia, el nivel de satisfacción de los usuarios que intentan completar tu formulario.

Básicamente existen tres alternativas:

  • Etiquetas por encima.
  • Etiquetas alineadas a la izquierda.
  • Etiquetas alineadas a la derecha.

Como de costumbre en usabilidad, no hay una respuesta única, todo depende del contexto de uso concreto. …


Los carruseles de contenidos (también conocidos como slideshow, sliders, carousel) están siendo profusamente utilizados en todo tipo de páginas web. Sin embargo, existente muchas dudas sobre su utilidad real.

Numerosos estudios de usabilidad los han puesto en entredicho. Por ejemplo, el de Erik Runyon, que mostraba que solo el 1% de los usuarios interactúan con el carrusel. O los estudios de Nielsen Norman Group que demuestran cierta ceguera a los carruseles por parte de los usuarios.

Algunos estudios que abundan en sus desventajas:

Por contra, hay otros estudios relevantes, que demuestran su efectividad. …


Agrupar juntos los elementos relacionados es una forma básica de aumentar la usabilidad de un interfaz. La mayoría de nosotros tiende a esperar que funcionalidades relacionadas, como abrir o guardar, probablemente se encontrarán más o menos juntas. Perder el tiempo buscando cosas, generalmente no resultará de nuestro agrado.

Este consejo de usabilidad se deriva del principio de consistencia; del que ya he hablado en anteriores ocasiones.

Image for post
Image for post

Originally published at www.aunitz.net.


Las convenciones son consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo. Utilizar estándares comúnmente aceptados facilita el uso de una aplicación.

Gracias a las convenciones, los usuarios hemos aprendido que el icono de cerrar estará (habitualmente) en la esquina superior derecha, o esperamos que el icono de configuración tenga un determinado aspecto.

Por supuesto, habrá momentos en que una convención ya no sirva para su propósito y dé paso a un nuevo patrón. Pero, antes de alejarte de una convención, asegúrate de que haya un buen motivo para ello.

Image for post
Image for post

Originally published at www.aunitz.net.


Los menús desplegables (elemento select de HTML) deben utilizarse con mucha precaución. De acuerdo con el principio de interfaz visible, se debe evitar ocultar información relevante al usuario. Es preferible que el usuario tenga a la vista las opciones importantes a que las tenga que descubrir desplegando un select.

Los select deben limitarse a ser utilizados en aquellas ocasiones en las que el usuario pueda predecir fácilmente su contenido. Como por ejemplo un desplegable de días de la semana o un listado de provincias.

Ocasionalmente, también pueden resultar útiles en aquellos elementos del interfaz que el usuario utilizará repetidamente a lo largo del tiempo (por ejemplo, menús de acción).

En ningún caso los utilices como elementos de navegación principales o como parte de un recorrido orientado hacia la conversión.

Image for post
Image for post

Originally published at www.aunitz.net.


La llamada a la acción de la página debe destacar, de manera clara, sobre el resto de elementos. El objetivo es que sea fácil de distinguir, reconocer y accionar.

Hay varias maneras de destacar un CTA (call to action). Por ejemplo:

  • Utilizando el tono. Haciendo que el CTA sea más oscuro que el resto.
  • Mediante el efecto de profundidad. Utilizando sombras y gradientes, podemos conseguir que un elemento parezca más próximo en el espacio que los demás.
  • Utilizando colores complementarios de la rueda de color. Por ejemplo, el amarillo y el violeta.
Image for post
Image for post

Originally published at www.aunitz.net.


Una aplicación ha de permitir deshacer las acciones realizadas. Si las acciones son reversibles, los usuarios pueden experimentar o equivocarse sin problemas. Se trata de un principio general de usabilidad llamado de Reseversibilidad.

Una aplicación que nos esté pidiendo continuamente confirmación de nuestras acciones, nos resultará molesta y poco productiva.

Es lógico pensar que la mayoría de los clics que realizamos en una aplicación son intencionados. Por tanto, la solicitud de confirmación realentizará la consecución de nuestra tarea.

De modo que en aquellas ocasiones en las que realmente nos hemos equivocado, recurriremos a la acción que nos permita deshacer nuestro error.

Image for post
Image for post

Originally published at www.aunitz.net.


Los seres humanos somos reacios a realizar trabajo de más. Esta idea se aplica también a rellenar campos de un formulario.

Cada campo que añadamos a un formulario es una posibilidad más de que el usuario abandone la tarea. Especialmente en dispositivos móviles.

Cuantos menos campos tengan nuestros formularios, más usables resultarán. Añade sólo aquellos campos que sean estrictamente imprescindibles.

Image for post
Image for post

Originally published at www.aunitz.net.

About

Aunitz Giménez

Dirección de proyectos digitales y consultoría tecnológica. Especialista en usabilidad, accesibilidad y desarrollo web. www.aunitz.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store