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.

Me gusta Visio. Me encanta. Disfruto prototipando con él aunque eso sí, tiene cosas que habría que mejorar.

En la versión de Office 2003, en la gestión del “Explorador de dibujos” (desconozco si varía en Office 2007, si es así comentádmelo por favor) una de las cosas que echo de menos es un funcionamiento más similar a la parte derecha del “Explorador de Archivos” de Windows XP (que no a la parte izquierda donde el funcionamiento del árbol de contenidos es similar al de Visio).

Explorador de dibujos de Microsoft Visio 2003

Explorador de archivos de Windows XP

Entre otras cosas, me gustaría poder hacer selecciones múltiples de varias hojas con la tecla mayúsculas pulsada si son adyacentes, o control si son discontinuas, y poder arrastrarlas a otro punto del árbol para ordenarlas según mi criterio. En el caso de una selección discontinua de hojas el cursor mostraría una pequeña miniatura de hojas apiladas que el usuario podría arrastrar por el árbol hasta el punto que desease.

El cuadro de “Reordenar páginas” es muy incómodo tanto por el tamaño de la ventana que permite leer un número limitado de hojas (prototipando se trabaja con muchas hojas y el área de visualización de los cuadros de diálogo es bastante limitada lo que implica tener que hacer un uso intensivo del scroll horizontal en este tipo de ventanas con la consiguiente incomodidad y pérdida de productividad) como por el hecho de que para reordenarlas tienes que ir pinchando de una en una y no puedes mover un conjunto de páginas a la vez (el patrón de interacción es clic en primer nombre de hoja, clic en el botón de “Subir” o “Bajar” para colocarla en el orden deseado, clic en “Aceptar” para terminar el proceso y sucesivamente con las restantes hojas). Por otro lado, cada vez que se añade una hoja nueva se incorpora automáticamente al final y no inmediatamente después de la hoja activa con la necesidad de tener que reubicarla en la posición deseada a continuación.

Cuadro de “Reordenar paginas” de Microsoft Visio 2003

Ofrecer el modelo de interacción propuesto para el “Explorador de dibujos” sería una buena mejora de usabilidad. No he trabajado habitualmente de momento con Windows Vista (mi portátil tiene XP) pero creo recordar que han añadido checkbox para poder hacer operaciones de grupo sobre elementos discontinuos del árbol.

Amazon me quiere.

Y es que no puedo llegar a otra conclusión después de un par de minutos mirando el rediseño que han hecho de la cabecera.

Hasta 6 veces aparece mi nombre en la misma:

• 2 veces para darme la bienvenida (Welcome y Hello)
• 2 para preguntarme si soy un intruso que estoy suplantando mi identidad (not Francisco?).
• Y otras dos para renombrarme ya que parece que o eran demasiadas las veces que aparecía completo mi nombre en la cabecera, o querían tutearme, o no les gustaba mucho el mismo y decidieron cambiarlo, o al diseñador gráfico no le cabía el nombre completo en ese espacio que todo puede ser.

En fin, que después de esta declaración de amor incondicional no puedo dejar de serles fiel hasta que otra tienda de comercio electrónico con una interfaz más agradable y con un proceso de compra más maravilloso que el que implementa la web de Jeff Bezos nos separe. Aun así estoy un poco mosca, me temo que Amazon me es infiel y tanto me quiere a mi como al resto de usuarios, amén que lo de renombrarme…

Franci…’s

¿A quién se le habrá ocurrido la idea?