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.
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?
- Compartir para hacer un navegador social (y más humano)
- Logotipo de Spanair: Sonría por favor (o el círculo como elemento de diseño semiótico)
- Two ideas to humanize and improve the URL's information visualization on Firefox 4.5
- Sobre la usabilidad de la barra de estado de los navegadores
- Jerarquizar capas de la interfaz mediante sombras: Laterales de la barra de tabs de Firefox 4










