jueves, 1 de octubre de 2020

Líneas: separar y unir - Excelencia en UX

 
Concreta Capacitación

 

Líneas: separar y unir

Las lineas, los fondos, las sombras y otros elementos gráficos muy sutiles juegan un rol sustantivo para agrupar, separar y relacionar los elementos que se despliegan en la pantalla.

Una linea bien ubicada hace la diferencia

Parece tan básico que todos lo damos por hecho, pero el uso de elementos gráficos muy sencillos para agrupar, separar, unir o relacionar muchas veces presenta más dificultades de las que debería, al menos por las inconsistencias y errores que se aprecian en numerosas interfaces.

Se trata de uno de los fundamentos del diseño y por tanto los diseñadores deberían dominarlo con fluidez total si aspiran al diseño de excelencia. El ojo es muy eficaz en la percepción de pequeños detalles y la utilización de esos detalles a nuestro favor es uno de los ingredientes sustanciales del diseño de calidad.

Agrupar

Como explicamos en el artículo Frente y Fondo, nuestro cerebro separa lo que percibe en lo que le va a prestar atención (frente) y lo que descartará (fondo) en base a la creación de grupos, la menor cantidad posible y nunca más de 4.

El diseño debe estar pensado específicamente para este proceso de separación en frente y fondo, y una herramienta fundamental es la utilización de líneas que separen lo que va separado y agrupen lo que va junto.

El ojo humano tiene una enorme sensibilidad y por tanto este proceso supone la utilización de pistas muy sutiles: ir agregando elementos pequeños, apenas visibles, e ir aumentando lentamente su destaque, para generar los grupos que permitan separar frente y fondo a nivel miro y entiendo.

En el ejemplo que sigue, se ve un conjunto de tarjetas a las que se les van agregando detalles para separarlas:

1 - Sin separadores

2 - Líneas

3 - Cuadros (esta es la original)

4 - Cuadros y sombra

5 - Cuadros y fondo

6 - Cuadros, sombra y fondo

Lo importante del ejemplo no es definir cuál es la mejor sino apreciar que pequeñísimos detalles resuelven el problema sin prácticamente modificar la composición gráfica general.

Líneas de color

Las líneas no necesariamente tienen que ser grises, se puede utilizar color, y aquí vale aún más el tema de la sutileza: pequeñísimos detalles de un color vivo son notados por nuestra percepción con total precisión y con muy poco se puede conseguir mucho.

Sumado a ello, las lineas de colores permiten trabajar sobre la estética y la agrupación simultáneamente. En el ejemplo se puede ver como un toque de color bien utilizado puede corregir el problema de agrupación, a la vez que decora.

En resumen, todos los pixeles que se muestran en la pantalla contribuyen a la agrupación visual, y dentro de ellos las líneas juegan un rol central. Tanto cuando se utilizan específicamente como separadores como cuando se incorpora color para decorar, el manejo sutil de los detalles hace la diferencia.

___

 


 

Imagen 

Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy