Tamaño
La atención de los usuarios va primero a los elementos más grandes, tanto textuales como visuales. Usar el tamaño para jerarquizar elementos nos permite crear un camino para el usuario a la hora de procesar el contenido, pasando de los elementos más grandes, como encabezados, a los más pequeños.
Color
Los colores más luminosos y vivos atraen más la atención de los usuarios. El tono, la saturación y la luminosidad son tres características del color que podemos utilizar para priorizar unos elementos sobre otros. Con el color también podemos destacar los elementos interactivos y ofrecer información al usuario sobre el estado de la interfaz. Por ejemplo, oscureciendo elementos inactivos.
Alineamiento
Los elementos que están desalineados con el resto destacan más. Alineando unos elementos con otros creamos un orden en la interfaz. Es importante para diseñar interfaces limpias y coherentes, facilitando su comprensión. La forma de procesar la información de nuestro cerebro, a través del reconocimiento de patrones, favorece la comprensión a través del orden.
Pero también podemos romper esta norma de forma estratégica en ciertos momentos, sacando elementos de la alineación con el resto, para llamar la atención del usuario sobre ellos.
Repetición
Los elementos que están diseñados de forma similar se perciben como relacionados o al mismo nivel jerárquico. Por ejemplo, los encabezados del mismo nivel siempre tendrán el mismo tamaño, color y estilo, lo que permite al usuario identificarlos fácilmente. Esta consistencia favorece la comprensión y la navegación por la interfaz.
Proximidad
La atención del usuario tiende a ir de un elemento al siguiente más próximo. Por eso, para crear un orden de lectura, tendremos que agrupar los elementos según el orden de atención que queremos conseguir.
Relacionando elementos a través de la proximidad de unos con otros podemos organizar y crear una jerarquía en la información de la interfaz.
Espacio vacío
El espacio vacío alrededor de un elemento hace que ese elemento llame más la atención del usuario. También permite que la interfaz respire mejor, sin abrumar al usuario.
Aislar elementos del resto de la interfaz ayuda a situarlos jerárquicamente por encima del resto de elementos. También ayuda al diseñador a crear una estructura en la que el usuario puede navegar para pasar de un elemento a otro.
Textura
Las texturas más elaboradas o complejas destacan sobre las más sencillas. Es un recurso que hay que utilizar en dosis pequeñas, por el riesgo de saturar o distraer al usuario.
Contraste y equilibrio
Un diseñador de interfaz de usuario puede aprovechar estas características que hemos descrito para crear contraste entre los diferentes elementos de la interfaz y jerarquizar la información. Pero es importante mantener consistencia y equilibrio para no distraer la atención del usuario y ayudarle a centrarse primero en los elementos más importantes.
Tenemos como ejemplos la siguientes imágenes.
Ejemplo 1:
Ejemplo 2:
