Tentándole (interacción)

Post actualizado (*)

Desde hace mucho tiempo, 9 años, hago un seguimiento de Idealista.

Me gusta. Y me gusta porque al igual que el blog de Aza Raskin Idealista me parece que es una escuela de diseño. Como ha comentado en alguna ocasión Jesús Encinar los rediseños se hacen analizando pixel a pixel, enlace a enlace y componente a componente de cada página. Y eso significa que, para quien tenga paciencia y sepa mirar un poco, se pueden extraer buenas lecciones de diseño.

En los últimos meses el aluvión de novedades ha sido continuo y por lo que parece, a tenor de la nueva interfaz que presentan algunas pantallas, van a venir más.

De los últimos rediseños hay muchas cosas, pero si tuviera que quedarme con una, por irrelevante que parezca frente a los demás cambios introducidos, me gusta especialmente el rediseño del icono de poner anuncios gratis. El post-it con la chincheta roja que lleva ahí si no recuerdo mal desde los mismos orígenes del portal o casi casi.

Diseño anterior del icono del post-it y chincheta roja de poner anuncio gratis

Diseño actual del icono del post-it y chincheta roja de poner anuncio gratis

Algo como esa imagen se ha convertido en toda una seña de identidad del mismo y es curioso ver qué tipo de valores transmite un icono tan aparentemente simple que poco a poco se hace más fotorealista (lo que lleva a preguntarme si habrán hecho algún test de usuario para evaluar estrictamente los aspectos emocionales del portal). Concretamente yo la relaciono con mi época de estudiante, pre y universitario. Los post-it, los tablones de corchos en los pisos compartidos donde los compañeros de piso se dejan notas con ese tipo de chinchetas o en tu cuarto donde clavabas aquellas notas con las cosas que no querías que se te olvidaran.

En el rediseño actual, el icono aumenta de tamaño reforzando su papel como punto focal de atención natural en la home, en cuanto que es una imagen frente al resto de elementos textuales y componentes de la interfaz. Al mismo tiempo, al aumentar su tamaño, desborda claramente el límite inferior del botón de buscar lo que añade tensión visual al diseño, rompe la simetría de líneas rectas de la interfaz e introduce un efecto sutil de 3d gracias a su casi imperceptible sombra en el lado inferior izquierdo, frente al inferior derecho que ocupaba en el anterior diseño.

Una posible explicación para tal actuación es que de esta forma, se crea una sensación de movimiento de izquierda a derecha al estar situada la fuente de luz que generaría dicha sombra a la derecha de la interfaz.

Antiguo icono de poner anuncio gratis en la barra de navegación

Nuevo icono de poner anuncio gratis en la barra de navegación

Por otra parte, además, en el diseño interior de selección de criterios de búsqueda, al estar situada la sombra en el lado izquierdo remarca el inicio de la barra de navegación y dirige el movimiento a la derecha. Finalmente y al igual que sucede en la portada, desborda el límite superior de la barra de navegación creando una fuerte tensión visual, actuando como atractor, que es precisamente lo que se pretende, aunque eso sí, con una gama de color muy sutil dado que en caso contrario centraría demasiado la atención. A tal fin, el otro elemento gráfico que lo compone, la chincheta roja, disminuye su tamaño y se hace más estilizada, menos gruesa ¿más moderna ya que las nuevas chinchetas son más de ese tipo frente a las antiguas? Quizá ese es el único pero que le encuentro al icono, me parece demasiado pequeña aunque dependiendo del tamaño del post-it quizá esa sea la escala adecuada y hacerla más grande centre demasiado la atención en el elemento. Habría que ver varias pruebas de diseño para observar el efecto que produciría aumentar su tamaño.

El buen diseño trata de eso, de jugar con la mínima diferencia perceptible en palabras de Tufte. De lo sutil (pero perceptible).

Más capturas. Por cierto, los tiradores para refinar el precio del inmueble y su tamaño, el box con el minimapa emergente justo al lado y la visión de los inmuebles a través del mapa, espectaculares.

Tiradores para refinar el precio y el tamaño del inmueble

Pantalla de resultados, minimapa emergente de la zona

Mapa de inmuebles

(*) Acabo de descubrirlo pero asimismo, y aunque todavía está muy beta, espectacular también la implementación del mismo mapa de inmuebles con la API de MSN Virtual Earth que se puede ver en Idealista Labs. La vista isométrica es extraordinaria para hacerse una rápida idea de dónde está situado el inmueble en su entorno espacial y de si potencialmente interesa o no al comprador.

Idealista Labs - API de MSN Virtual Earth, mapa de inmuebles. Vista 1

Idealista Labs - API de MSN Virtual Earth, mapa de inmuebles. Vista 2