tentándote.com

Estos días ando entretenido con un proyecto bastante interesante. El caso es que en el mismo se ha planteado la necesidad de hacer un buscador que permita acotar las búsquedas en distintos universos. Por ejemplo, en Flickr, el buscador de la derecha permite acotar las consultas a los siguientes ámbitos:

• Las fotos y vídeos de todos
• De tus contactos
• De tus amigos
• Tu galería
• Grupos
• Miembros de Flickr
• Un lugar
• Aplicaciones

Haciendo un pequeño estudio de los box de búsqueda de algunos de los sitios más conocidos me ha llamado la atención la forma en que están diseñados:

Usabilidad de buscadores. Construyendo jerarquías funcionales

El diseño impone la jerarquía de funcionalidades del componente y por ende, definirá la forma en la que el usuario interactuará con el mismo. En los presentes ejemplos se observa que:

• En Flickr la jerarquía funcional es: a) introducir cadena de búsqueda, b) ejecutar búsqueda c) seleccionar universo de búsqueda. Este último se intuye como opcional debido a la línea vertical discontinua que separa el botón/enlace de “Buscar” de la flecha, y que despliega el menú de los ámbitos de búsqueda. Si la línea fuera contínua el carácter de opcional desaparecería indicando un paso más a llevar a cabo en la ejecución de la búsqueda. La línea discontinua vertical parece indicar permeabilidad, elección.
• En el box de búsqueda de Microsoft Office Online se observa el mismo patrón con la excepción de que la línea que separa el botón de búsqueda de la flecha que despliega el menú con los universos de búsqueda es continua. Se percibe como una llamada a la acción más fuerte y no tanto como algo opcional.
• En el sitio de los Addons de Mozilla el buscador tiene gran predominancia. La jerarquía funcional existente es: a) introducir cadena de búsqueda, b) seleccionar universo de búsqueda, c) seleccionar opciones avanzadas, d) ejecutar búsqueda. En este buscador se ordenan lógicamente el flujo de acciones que el usuario debería llevar a cabo para ejecutar con éxito una consulta. Se define claramente el acceso a los universos de búsqueda a través del menú desplegable y las letras “dentro de”, que conectan el box y el menú desplegable de los universos. Las opciones avanzadas se perciben como opcionales al estar ocultas detrás de una capa desplegable que se abre cuando el usuario pulsa en la pestaña. La adición de este componente al buscador añade complejidad extra al mismo. Lo correcto es, como se hace, que dichas opciones estén ocultas por defecto y mostrarlas tan sólo a demanda del usuario, o si no son verdaderamente necesarias, no añadirlas.
• En Zoho Invoice la jerarquía funcional es: a) seleccionar universo de búsqueda, b) introducir cadena de búsqueda y c) ejecutar búsqueda. A priori choca con el modelo mental del usuario y con la finalidad para la que está diseñado el buscador. Cuando el usuario escanea la página para localizar un buscador espera encontrarlo y realizar inmediatamente una consulta. Con el diseño de Zoho Invoice estamos forzando en primer lugar al usuario a pensar qué universo de búsqueda debe seleccionar y luego a escribir la cadena y pulsar el botón de búsqueda. Rompe su locus de atención. Después de haberse distraido pensando qué universo de búsqueda es el adecuado tiene que volver a recordar la cadena de búsqueda que quería introducir. No es un diseño óptimo.

De las opciones y en función de lo que se quiera potenciar, las más correctas me parecen las de Mozilla Addons, Office Online y Flickr:

• La de Mozilla Addons porque los universos o ámbitos de búsqueda están explícitamente definidos mediante las palabras “dentro de” y el menú desplegable con la opción por defecto de “todos los complementos”. La interpretación del elemento es inmediata y directa. El usuario no tiene que hacer click en una flecha para desplegar un menú y descubrir para qué sirve el elemento. El problema que tiene es el gran espacio que ocupa. No siempre disponemos de tanto. Por otro lado, la pestaña de “Avanzado” añade complejidad al buscador.
• La de Office Online porque ordena de manera lógica la cadena de acciones a llevar a cabo. No obstante y por ello mismo es un poco más complejo que el componente de Flickr ya que al estar la elección de los universos de búsqueda antes que el botón de buscar se condiciona al usuario para que elija uno y luego ejecute la consulta.
• El buscador de Flickr me parece el más correcto a pesar de que para descubrir los universos de búsqueda el usuario debe desplegarlos antes mediante la flecha. Creo que es la opción más correcta ya que posicionándolos en último lugar después del botón de buscar aparecen como opcionales. La existencia de los universos de búsqueda está explícitamente definida mediante la leyenda en gris dentro del propio box de búsqueda “Buscar en tu galería”. En este buscador el usuario escribe directamente la cadena y pulsa el botón de buscar ejecutando la consulta, que es la opción que mayor número de veces se llevará a cabo.  Sólo si el usuario quiere modificar el universo de búsqueda actuará desplegando el menú. Creo que es lo más óptimo.

Llaman la atención asimismo dos pequeñas microinteracciones que tienen lugar en el botón de buscar en Flickr. Cuando el usuario posiciona el cursor en el área del botón éste presenta una pequeña animación que lo muestra como un botón en 3d que “emerge” lo que refuerza la llamada a la acción -a realizar click- por parte del usuario, además, la palabra buscar en azul, se subraya presentando una apariencia directa de enlace:

Microinteracciones del botón de buscar de Flickr. La palabra buscar se subraya centrando la atención y el botón toma una apariencia de 3d lo que refuerza la llamada a la acción -a realizar click- por parte del usuario

Por otro lado, como me comentaba el otro día un compañero -Fernando-, a partir de distintos estudios de tiendas de comercio electrónico se desprendía el hecho de que los botones de color naranja tienen mayor número de clicks que los de otros colores. Pensando a qué podría deberse, se me ocurre que las razones pudieran ser:

• Es un color cálido. Su longitud de onda es menor y su frecuencia mayor lo que hace que, desde un punto de vista psicofísico se perciba como más cercano -en primer plano, frente a otros en planos secundarios- y por tanto, mejor que otros colores.
• En occidente puede asociarse a los 3 estados que se dan en un semáforo: rojo: stop, parar, naranja: atención, transición, verde: acción, adelante. Aunque el color verde es asumible para el botón, el naranja es mejor al reflejar ese estado de transición entre dos momentos.

De acuerdo a esto, un diseño óptimo del buscador cuando se tiene poco espacio podría ser como cualquiera de las dos siguientes opciones (quizá la última sea la más sutil y adecuada):

Buscadores. Microinteracciones (estados) del botón buscar

Por cierto, acabo de fijarme en el botón de “Guardar” del cuadro de diálogo de Microsoft Visio. Fijaros en los tres estados y el diseño del botón:

• Cuando se abre el cuadro de diálogo el botón gris aparece resaltado con un borde azulado para centrar la atención y constituir el foco de acción.
• Cuando el cursor se posiciona sobre el mismo el color cambia sutilmente volviéndose azul y el bordeado disminuye su grosor y se oscurece.
• Cuando se despliegan las opciones (que funcionan análogamente a los ámbitos de búsqueda en el buscador) el azulado del botón se torna más fuerte para dar retroalimentación de que se está actuando sobre el botón.

Aspecto del botón "Guardar" del cuadro de diálogo "Guardar cómo" de Microsoft Visio cuando el cursor no está encima del botón

Aspecto del botón cuando el cursor se posiciona sobre el mismo

Aspecto del botón cuando el usuario está interactuando con el mismo

Las microinteracciones son todo un mundo. Bill Scot y Theresa Neil les dedican todo un capítulo al hablar del “Drag & drop” en su estupendo y recomendable libro Designing Web Interfaces.