Tentándole (interacción)

Automatic translation of the text to english

Inauguro sección nueva en el blog -“Controles y componentes de interfaz”- dedicada a aquellos controles que me voy encontrando día a día y que me llaman la atención por considerarlos buenas prácticas de diseño, soluciones innovadoras o ingeniosas o simplemente llamativas por cualquier razón.

Como siempre, a quien tenga curiosidad por aprender diseño de interacción y de interfaces le recomiendo que se dé una vuelta por mi cuenta de Flickr donde puede encontrar los que postee, más o menos categorizados, y alguno que otro comentado.

En concreto, acabo de ver el pequeño buscador de la derecha, arriba, de Yahoo News y me ha llamado la atención la solución que ha dado el diseñador de interacción y la solución gráfica propuesta toda vez que el componente en cuestión tenía que ajustarse al tamaño de la columna derecha con la limitación de espacio que ello supone (el espacio, esa extraña materia… cuando no hay con qué llenarlo, porque no hay con qué llenarlo, y cuando hay demasiado con qué llenarlo, porqué hay demasiado, el ABC de Diseño de Información de nuestro día a día vamos).

Para no hacer más pequeño el botón de “News search” mete el combo desplegable para restringir la consulta a los distintos universos de búsqueda (All News, Yahoo News Only, News Photos, Video/Audio) debajo del box, alineado a la esquina derecha. El diseñador gráfico, además, redondea su esquina para conseguir un efecto estético más agradable y de unidad. Y es que, no es lo mismo una esquina o un trayecto redondeado que uno recto. Psicológicamente percibimos mejor los trayectos continuos y curvos a los rectos, y el resultado, además, es mucho más vistoso.

En cuanto al enlace de búsqueda avanzada, “Advance” pues no es que haya mucho espacio para ponerlo, pero puesto ahí, tiene el problema que al estar situado a la derecha del todo y justo debajo del botón de buscar puede suceder que el usuario, sin querer, pulse sobre el mismo en lugar de sobre el botón y termine en la página de búsqueda avanzada.

¿Soluciones?

Pues no es que haya muchas, una de ellas es mover el combo con los filtros y posicionarlo ligeramente después del inicio de la esquina inferior izquierda del box de búsqueda. Podríamos alinearlo exactamente con el comienzo respetando la intención del diseñador de interacción que haya hecho esto, o la interpretación del diseñador gráfico en aras de la estética, pero perderíamos algo valioso. Esa sutil diferencia, o la mínima diferencia perceptible, (que diría Tufte y Eduardo Manchón) hace que, si separamos un poco del borde el combo de los filtros, en lugar de percibirse como una forma continua con un comienzo irregular, recto por arriba y redondeado por abajo, se perciba como una pestaña y por ende, como un control con el que el usuario está mucho más familiarizado y cuyo modelo de interacción es mucho más fácil de entender, ergo con una usabilidad mayor, que es precisamente lo buscado.

Por último, podemos estrechar un poco el combo de los universos de búsqueda sin que se vea muy afectada la usabilidad cuando lo desplegamos ya que tenemos una buena cantidad de aire a la derecha de las palabras (sí, lo perdemos un poco y a mí también me gusta que las cosas respiren, cuanto más mejor) pero a cambio, aumentaríamos la distancia entre la pestaña y el enlace de búsqueda avanzada (Advanced) que situaríamos alineado con la esquina inferior derecha del box de búsqueda.

Buscador de Yahoo rediseñado con eje visual en el centro

Tomando como referencia el eje vertical del componente vemos que la imagen parece pivotar sobre el enlace de “Advance” ligeramente hacia la parte delantera ya que hay mayor cantidad de tinta en la parte inferior de la imagen respecto a su eje horizontal, que en la parte superior (me recuerda un poco a una escopeta, no puedo evitarlo) pero bueno, se puede aceptar como solución de diseño, dado que ganamos algo muy importante, que es liberar la zona en torno al botón que ejecuta la búsqueda “News Search” que es un punto de interacción crítico de este componente en particular.

Curioso el control y las implicaciones de su diseño.