Diseño del asistente de tareas de Linkedin

El caso es que acabo de verlo y me ha encantado. Son estos pequeños detalles que poco a poco se empiezan a ver por todas las webs, los que ponen de manifiesto que detrás de los sitios hay personas que ponen algo de cariño a la cosa, y que poco a poco tendemos a humanizar la tecnología.

Fijaros en cómo han diseñado el asistente de Linkedin para completar las tareas pendientes:

Diseño del asistente de Linkedin - Nota tipo post-itPodéis verlo en grande en Flickr

En lugar de utilizar el clásico asistente por pasos (típico de los procesos de compra) presentan una nota post-it en la que ponen un encabezado destacado -Lista de tareas- y debajo, la primera tarea que acabamos de hacer tachada, la siguiente resaltada para enfatizarla y llamar a la acción, y las restantes hasta completar el proceso.

Me gusta por:

  • Se apoyan en el Skeuomorfismo y utilizan la metáfora del post-it. Una forma de representar el proceso que refleja directamente un modelo mental al que estamos muy acostumbrados: la acción de preparar una lista en un trozo de papel cuando vamos a hacer la compra, o en un post-it que ponemos en la pantalla de nuestro monitor, a modo de recordatorio de que tenemos una serie de tareas que hacer (lo cual refuerza a su vez la idea de que tenemos que volver más tarde para completarlas).
  • Introduce una faceta emocional. Ya no es un asistente frío y aburrido, lineal y hecho con líneas y pasos…  1 — 2 — 3 …   No es ni más ni menos que papel, cálido al tacto y agradable a la vista (amarillo, beige) que rompe con un entorno frío, artificial y/o de cristal (la pantalla del monitor, la superficie del iPad…).
  • Convierte la ejecución de las tareas en un juego. ¿A quién no le hace ilusión ir tachando una a una las tareas que tiene pendientes hasta dejarlas a cero? El hecho de poder tachar una tarea empuja a completarla.
  • Aprovecha para ofrecer un servicio premiun destacado en un lugar visualmente relevante (“Aparece en búsquedas de palabras clave”).

Un buen diseño y un detalle muy majo que se puede aplicar a cualquier otra web.

¿Cómo podríamos hacer algo similar en una web de venta de billetes de avión cuando estás buscando dónde volar para tus vacaciones? ¿Y en una de una empresa de telefonía móvil al contratar una tarifa? ¿?

--

 

Diseño orgánico en el iPhone

El iPhone nos gusta. Quizá no sepamos exactamente definir por qué pero nos sentimos más cómodos al usarlo que cuando utilizamos otros aparatos tecnológicos.

Y es que tiene detalles de interacción y diseño que evocan la anatomía humana y nuestra vida, con los que nos identificamos.

El diseño del logotipo de Apple del iPhone es un buen caso de estudio en el que se hace uso de la elipsis para establecer su significado, cuya interpretación cambia en función de cómo se gire el móvil:

 

Logotipo de Apple - Mutabilidad: Su interpretación cambia en función del giro que se le aplique

De arriba a abajo:

  • Manzana mordida, el pecado original, hombre y mujer.
  • Mujer
  • Bebé
  • Hombre

Y a partir de ahí todos los significados asociados que queráis sacar.

Tanto por las hechuras del hombre que se aprecian como las de la mujer, los productos de Apple no están precisamente dirigidos a un público adolescente sino más bien a uno maduro.

Al encender el iPhone aparece la manzana.

 

Logotipo de Apple en la pantalla de inicio del iPhone

 

Pequeña en relación al espacio negro, vacío que la rodea. Blanco sobre negro. Vitalidad frente a la vejez. Lo diurno y la luz, frente a lo nocturno y la noche. La juventud y su empuje frente a la madurez y su quietud (o inmovilismo). La luminosidad frente a la oscuridad. La vida que late y fluye con energía, frente a la muerte.

Los productos de Apple tienen algo de orgánico, de humano…

“En un trabajo de 2005 sobre el diseño y las percepciones, Luke Williams cuenta cómo otro diseñador descubrió por qué tanta gente piensa que el iPod es un dispositivo “limpio”. Aparentemente, este diseñador había estado sentado en el baño (¡donde tienen lugar todas las grande ideas!) cuando se le ocurrió que el iPod hace referencia a los mismos materiales que se utilizan en el baño: “La brillante porcelana blanca de la bañera y el cromo reflectante del grifo de la pileta”. Puede que le parezca gracioso, hasta que sepa que Jonathan Ives, el vicepresidente de diseño de Apple, trabajó anterioremente para una empresa que diseñaba… (a que lo adivina): accesorios para baños.”

Stephen P. Anderson. Diseño que seduce: Cómo crear webs y aplicaciones atractivas al usuario, p. 65

Williams hablaba de la asociación del uso del aluminio y de superficies cromadas para denotar tecnología punta, frialdad, estilización, perfección (el material con el que están construidos los Terminators, las formas perfectamente rectas y el negro del monolito de 2001…) limpieza, orden y bienestar.

A la hora de diseñar el producto se utiliza la disonancia para crear experiencias, como un medio de expresión y para realzar la marca.

“Estamos hablando de la percepción humana y del sistema de convenciones que las condiciona. La percepción es esencial para el proceso de diseño.

Estas asociaciones estéticas son evidentes en otros productos de Apple. Si posee un ordenador portátil Apple, puede que se haya fijado en la relajante luz que indica que el ordenador está hibernando.

La velocidad con la que se apaga la luz y se vuelve a encender es comparable a la velocidad de respiración media de los adultos, entre 12 y 20 respiraciones por minuto. ¿Coincidencia? Apple posee la patente de un indicador LED del estado de respiración (US 6,658,577 B2) que “emula el ritmo de la respiración, lo que es psicologicamente atrayente”.

Stephen P. Anderson. Diseño que seduce: Cómo crear webs y aplicaciones atractivas al usuario, p. 65-66

 

y es que el iPhone late…



Nos atrae y late en nuestras manos cuando lo encendemos y emerge el cuadro de diálogo en el que nos pide el PIN para desbloquearlo con una animación que evoca un latido del corazón (podéis ver la animación del mismo apagándolo y encendiéndolo)

 

iPhone - Pantalla de desbloqueo del móvil introduciendo el PIN

 

Al abrir una aplicación la animación de los elementos de la interfaz emula el movimiento de las aurículas y ventrículos del corazón al contraerse y eyectar la sangre -sístole- (pulsad alguna de las aplicaciones que tengáis instaladas y fijaros en la animación).

 

Animación en iOS al abrir una aplicación que emula el movimiento de la sístole del corazón

 

Mientras que al pulsar el botón de cierre se emula el movimiento de las aurículas y ventrículos relajándose -diástole-, la sangre refluye al corazón (y la aplicación se cierra).

 

Aun cuando no somos conscientes de ello, al usar el iPhone, en el diseño de su cinestesia -sus animaciones y las transiciones de sus elementos- percibimos un componente orgánico que nos resulta atrayente y nos gusta.

--

 

Festo y el diseño orgánico

Creo que viendo los vídeos sobran las palabras. Festo, una compañía alemana que se dedica al diseño de autómatas. Impresionante:

Imaginad las aplicaciones de un robot con una interfaz configurable en función del espacio físico en el que actúe… pues es éste:

Más, mucho más

--

 

Switch to our mobile site