Percepción psicológica del color

Uno de los mejores post, más claro, sencillo y explicativo que he leído hasta la fecha sobre cómo percibimos los colores a través del ojo humano. No dejéis de leerlo –>

Qué sucede con el amarillo. Paul Van Slembrouck

 

Si os interesa el tema y queréis profundizar sobre ello otras dos lecturas imprescindibles son:

  • Information Visualization: Perception for design. Colin Ware (el libro entero es una delicia, uno de los libros para tener como cabecera, merece la pena comprarlo)
  • Biopsicología. John P. J. Pinel (igualmente, Pinel explica de manera sintética, brillante y deliciosa parte del funcionamiento del sistema visual humano en el capítulo 7)

--

 

Un par de efectos ópticos interesantes

Mira la imagen al centro. Al cabo de un rato verás como entre las líneas blancas interiores de separación entre los cuadrados comienzan a aparecer o crecer líneas azules que se extienden a lo largo de los bordes de los mismos coloreando el espacio interior excepto en las esquinas donde “intersectan” los cuadrados.

Cuadrado de bordes negros - Efecto óptico

 

De cara a usabilidad, tiene implicaciones a tener en cuenta.

A continuación mirad fíjamente la imagen de un poco más abajo durante un minuto. Luego desplazad ligeramente la vista a la parte inferior, a la superior, a izquierda y a derecha, parándoos en cada zona unos 30 segundos. Veréis aparecer correspondientemente bandas horizontales completas de color verde, azul, y verticales de color naranja. El color se define en función de la longitud de onda y de la intensidad de la luz que se refleja sobre los objetos. El ojo humano tiene diferentes sensibilidades a la hora de captar unos u otros colores. En esa imagen se puede ver una demostración práctica de cómo la mezcla de diferentes longitudes de onda y su interpretación por el cerebro generan unas u otras percepciones. Una espectacular demostración de cómo percibe el sistema visual humano nuestra realidad y de cómo se pueden crear capas de información, y por ende jerarquizar información, basándose en el uso de colores, cuyo uso meditado impacta en la usabilidad de una interfaz.Rejilla de colores

--

 

Controles de interfaz y estados de interacción (febrero 2010)

Estos son dos de los controles de interfaz que me han llamado la atención últimamente. Ambos pertenecen a la suite de Google Docs.

El primero se encuentra en el gestor de archivos que aparece nada más acceder a Docs. Es un control que permite seleccionar los elementos del listado de elementos que se está viendo. A continuación se muestra tal cual aparece nada más acceder a Google Docs, sin haber hecho clic en el control:

En lugar de utilizar el clásico checkbox incluido en la cabecera de tabla alineado con los checkbox inferiores que permite, activándolo o desactivándolo, seleccionar todos los elementos de una sola vez en lugar de hacerlo uno por uno (ver estados de interacción a continuación en AOL Mail y el Explorador de Windows Vista):

en Google Docs, al hacer clic sobre el mismo aparece un menú desplegable con dos opciones:

  • Seleccionar todos los elementos (nº elementos)
  • No seleccionar ninguno

que permiten realizar las mismas opciones pero explicitándolas haciendo que sea más predecible el funcionamiento del componente.

Control de checkbox para seleccionar todos los elementos de un  listado y menú desplegable con las opciones de los estados explícitas

Una cosa que no termina de convencerme es que, en el diseño del control, estén o no estén los elementos inferiores seleccionados, el checkbox aparece siempe como seleccionado.

También me llama mucho la atención el uso del color que se hace en el gestor de Google Docs. Tal ycomo está ahora mismo, por defecto, todos los elementos del listado aparecen con un color de fondo que es un azul muy claro que indica un estado inactivo:

Cuando se seleccionan uno o varios elementos el color de fondo cambia a uno más claro indicando el estado activo:

Es justo el patrón contrario que se ha seguido hasta ahora en todos los sistemas operativos Windows, Mac, Linux y aplicaciones web (ver por ejemplo la captura del explorador de Windows Vista más arriba para observarlo), color claro para estado sin seleccionar, color más oscuro para elementos seleccionados.

El otro control de interfaz que me ha llamado la atención es el que aparece en la paleta de colores de Spreadsheet de Google Docs. Concretamente el diseño del recuadro de color cuando se ha seleccionado en la paleta. A continuación el aspecto que tiene en Spreadsheet de Google Docs:

Además de resaltar sutilmente con un borde que da aspecto de botón hundido el color seleccionado, le ponen una marca de check al mismo para distinguirlo claramente.

El mismo control en Excel con un color seleccionado (recuadro sombreado en rojo):

¿Qué os parecen los controles? ¿Opiniones sobre los distintos estados de interacción / diseños gráficos?

--

 

Switch to our mobile site