tentándote.com

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:

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.

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)

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).

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.

Echarle un vistazo a Yandex.

Es un buscador ruso que está haciendo las cosas muy bien.

Os paso la versión traducida al castellano de una búsqueda cualquiera. Cuando hagáis clic en el enlace fijaros abajo, en el diseño de la paginación. Probad a navegar página adelante, página atrás.

Cómodo, muy cómodo.

Las ventajas de presentarlo así:

• Existe una jerarquía de información marcada frente a la disposición que se hace normalmente de la paginación en los buscadores más conocidos y en gran parte de los sitios web. Primero aparecen los enlaces de < anterior  -  siguiente >  y debajo de ellos las páginas con los números.
• Al separar los distintos elementos del componente paginación diferencian funcionalidades. Aunque son similares no son equivalentes. Los enlaces de < anterior  – siguiente > permiten avanzar o retroceder de página en página. Los números posibilitan seguir un orden no lineal, vamos directamente a la página de resultados que queramos.
• La funcionalidad más utilizada en la paginación es la de  < anterior  -  siguiente >    Lo más normal suele ser que examinemos los resultados en el orden de aparición que nos ofrece el buscador (o lo que es lo mismo, de mayor a menor relevancia según su algoritmo) y de ahí, el acierto de que se encuentre separada de los números de páginas.

Este diseño de la paginación incrementa la usabilidad.

Estaba haciendo prueba con distintos diseños y la verdad es que salen cosas interesantes.

Alineación de los componentes de la paginación y box de búsqueda a la izquierda:

Alineación de los componentes mixta. Enlace de < anterior  continuar > y números de páginas de resultados alineados a la derecha y box de búsqueda a la izquierda:

Alineación a la derecha de los componentes de la paginación y del box de búsqueda:

Ventajas de la alineación a la izquierda:

• Componentes alineados con borde izquierdo de la pantalla y por ende, fácilmente alcanzables con el cursor del ratón. El borde sirve de “tope” parando el cursor, en su caso cuando se desplaza a la izquierda completamente.
• El comienzo de todos los elementos coincide con el comienzo de los bloques textuales de cada resultado. El borde izquierdo de la pantalla sirve como guía al escaneo haciendo más fácil encontrar el comienzo de los elementos.
• Más fácil posicionar el cursor al principio del box de búsqueda o en un punto intermedio de la cadena de búsqueda.
• Más fácil alcanzar el enlace de < anterior.
• Más fácil alcanzar el primer número de las páginas de resultados mostradas (en este caso 1).

Desventajas de la la alineación a la izquierda:

• Es más difícil alcanzar el enlace de siguiente > frente al de < anterior por hallarse más lejano del borde izquierdo y requerir mayor destreza para alcanzarlo. Normalmente hacemos clic en el enlace de siguiente > si estamos examinando resultados de una búsqueda. Navegamos hacia delante y en un número reducido de ocasiones volvemos atrás a revisar nuevamente los resultados.

Ventajas de la alineación mixta:

• Los componentes de la paginación son más fáciles de alcanzar y la distancia teórica con el cursor (asumiendo que está a la derecha la mayor parte del tiempo) es menor.
• Es más fácil alcanzar el enlace de siguiente > lo cual es lo mejor funcionalmente para continuar la navegación.
• Se separan claramente componentes funcionales distintos del pie: por un lado la paginación y por otro, el box de búsqueda.

Desventajas de la alineación mixta:

• Rompe fuertemente el patrón de escaneo izquierdo para ir primero a la derecha y luego volver a la izquierda hacia el box de búsqueda.

Ventajas de la alineación a la derecha:

• Los componentes de la paginación son más fáciles de alcanzar y la distancia teórica con el cursor (asumiendo que está a la derecha la mayor parte del tiempo) es menor.
• Es más fácil alcanzar el enlace de continuar > lo cual es lo mejor funcionalmente para continuar la navegación.
• Es más fácil y más rápido posicionar el cursor en el box de búsqueda y al final de la cadena de búsqueda introducida en él.
• Es más fácil presionar el botón de buscar.

Desventajas de la alineación mixta:

• Rompe el patrón de escaneo izquierdo impuesto por la alineación en este margen de los bloques textuales de los resultados.
• No se separan espacialmente componentes distintos de la paginación: enlaces de navegación < anterior  continuar > del box de búsqueda.
• Leemos de izquierda a derecha. Se crea un escalón entre los enlaces de < anterior continuar >, los números de las páginas de resultados y el comienzo del box de búsqueda estéticamente feo.
• Es complicado encontrar el comienzo de los componentes frente al caso de la alineación a la izquierda de todos ellos.

Visto lo visto casi me quedo con la alineación a la derecha de los componentes. El principal “pero” es que no es un patrón estándar y los usuarios no están acostumbrados a él con lo cual, de momento, no queda otra que ir a la alineación izquierda o al centro (qué se le va ha hacer).

Google llega a un compromiso intermedio centrando todos los elementos pero separando los enlaces de < anterior continuar > por los números lo cual empeora, pienso, la usabilidad de la paginación pero… la marca es la marca y el logotipo con las ooooooooooo y su funcionalidad de enlaces han de figurar.

Me gusta más la paginación de Yandex.

¿Opiniones?