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.

A propósito de la propuesta de Jennifer Boriss para rediseñar/suprimir la barra de estado del navegador en Firefox 4 se está montando una de esas bonitas discusiones antológicas que me hacen morir de envidia y en la que se aprende lo que no está escrito sobre usabilidad.

Abajo os pongo unas capturas de cómo lucen las interfaces de los navegadores principales hoy día para que veáis cómo aparece (o no) la barra de estado:

• Minefield de Mozilla (la alpha de Firefox 4) muestra la barra de estado como siempre en la parte inferior.
• Opera también la tiene aunque presenta un curioso diseño visual, cuando el cursor del ratón se pone encima de un enlace, se muestra la URL en la parte inferior pero en una capa gráficamente integrada y al mismo nivel jerárquico desde un punto de vista de Diseño de Información que el resto de las utilidades en la esquina inferior izquierda.
• Chrome no muestra la barra de estado pero cuando el cursor se pone sobre un enlace, se enseña su URL en la parte inferior, en una capa emergente de color azul, en la esquina inferior izquierda . De la URL sólo se muestran los 59 primeros caracteres incluidos el http:// seguidos de puntos suspensivos.
• Safari opta por la solución más radical (y en mi opinión la peor) no muestra ninguna barra de estado.

Me gustaría conocer vuestros puntos de vista y opiniones:

• ¿Barra de estado sí / barra de estado no? ¿por qué?
• Estos días estoy trabajando sobre SEO y URLs amigables en el trabajo y me estoy dando cuenta de que todavía hay que hacer mucho, mucho trabajo desde un punto de vista de los usuarios para mejorar las actuales URLs. Seguimos con un sistema de nombres y direcciones artificioso, extraño y ajeno para una persona normal, con una nomenclatura durísima (http, : , // , ftp …  -¿pero qué demonios es eso?-) heredada ni más ni menos que de hace 16 años. La pregunta es ¿Qué se puede hacer para mejorar las URLs y ayudar a los usuarios a formarse un constructo mental del espacio de información (sitio web) por el que están navegando? ¿Qué deberíamos hacer con el http:// ftp:// y otras “rarezas tecnológicas” del pleistoceno carentes de significado para las personas?

Fijaros además en las capturas de abajo en como se construye la jerarquía informativa de la interfaz del navegador en base a la jerarquía semántica del documento que, a la postre, es lo que le importa al usuario dado que la interfaz del browser realmente es cuando menos, secundaria:

• En el área de las pestañas o tabs, se muestra sólo parte del título del documento (página web) que está visualizando el usuario con el problema evidente asociado: se está sacrificando espacio en aras a ganar píxeles verticales para representar una mayor cantidad de contenido. ¿Cómo resolvemos este problema de no poder visualizar el título completo del documento cuando es la entidad semántica de mayor nivel que sumariza idealmente el mismo?
• Dado que el título no se visualiza por completo por el pequeño espacio horizontal disponible en cada pestaña, en el box de la barra de navegación que puede (y que debería) funcionar como línea de comando e interfaz adaptativa se muestra la URL del documento que no transmite de manera satisfactoria en un gran número de ocasiones (todas aquellas en las que no es amigable y aun con URLs amigables tenemos problemas):
  • De qué trata el documento.
  • La estructura del espacio de información o sitio web (muestra tan sólo una rama jerárquica en la que está clasificado, categorizado o facetado el documento, pero nada más). Llegados a este punto una mejora importante que se podría implementar en futuras evoluciones de la interfaces de los navegadores para ayudar a los usuarios a navegar, es deplegar de alguna manera un mapa o representación visual del sitio que idealmente… ¿se podría construir en base a los sitemaps.xml?
  • Una semántica comprensible para una persona. Las URLs no están codificadas en un lenguaje amigable al utilizar signos y nomenclaturas ajenas al código lingüístico que hablamos, escribimos y utilizamos, nuestra lengua madre, castellano o la que sea. En las URLs no se habla el lenguaje de los humanos, se habla usualmente el lenguaje de las máquinas :-( lo cual es un gran fallo desde el punto de vista de la usabilidad y un área en la que hay trabajar para subsanar este problema.
• Al estar situada la barra de estado en la parte inferior del navegador se está separando espacialmente y rompiendo la relación semántica que existe entre el enlace inserto en el documento y sobre el que se posiciona en un momento dado el cursor del ratón, y su URL que se muestra en la barra de estado en la parte inferior.

Firefox Minefield- Tooltip que se muestra cuando el cursor se posiciona sobre un enlace. Nótese como se visualiza el título especificado en el atributo title del enlace y cómo está espacialmente separado el tooltip de la URL que aparece en la barra de estado en la parte inferior rompiéndose la relación semántica entre ambos.

• Como propuesta de posible mejora para los navegadores se podría testear si la URL debería enseñarse como un tooltip. Si existe un title como atributo en el enlace entonces deberían mostrarse ambos, título y URL para ofrecer toda la información posible al usuario sobre el documento que se encuentra detrás del enlace y ayudarle a decidir si desea o le interesa hacer clic para visualizarlo o no. En cuanto al problema de la longitud de la URL podría considerarse si en lugar de enseñar toda se podría poner algún límite en el número de caracteres que se visualizarían a priori mostrando tan sólo parte más relevante (¿el nombre de la página junto al último directorio – subdirectorio de la misma?) o plantear algún tipo de capa que se desplegase a demanda del usuario de manera más o menos similar a como sucede con la barra de utilidades contextual de Word 2007:

Word 2007. Aspecto del cursor cuando está sobre una palabra

Word 2007. Aspecto de la barra de utilidades cuando se ha seleccionado una palabra. Nótese como se muestra de manera sútil y prácticamente transparente la barra contextual de utilidades con las que el usuario puede formatear el texto como mejor le parezca.

Word 2007. Barra de utilidades contextual que aparece cuando el usuario mueve el cursor hacia el contorno semitransparente (ver captura anterior) que la representa. De la misma forma para no mostrar toda la URL en el tooltip junto al title que se visualizaría cuando el usuario posicionase el cursor del ratón sobre un enlace, se podría considerar la posibilidad de mostrar tan sólo parte de la URL inicialmente y, a demanda del usuario con algún gesto sobre un área del tooltip, desplegar la URL completa si fuera necesario.

Hay mucho campo de investigación aquí y mucho espacio para las mejoras.

La pregunta es relevante ¿mostramos la barra de estado? ¿Sí? ¿No? ¿Que os parece la propuesta de Jennifer Boriss?

Os dejo con las capturas de los navegadores para que veáis como muestran actualmente las barras de estado (y las URLs):

Barra de estado en la parte inferior de la Minefield (Alpha) de Firefox 3.7

Barra de estado en la parte inferior en Chrome. Aparece sobre una pequeña capa azul cuando el usuario posiciona el cursor sobre un enlace y muestra hasta 59 caracteres de la URL incluidos el http://

Opera. Barra de estado en la parte inferior. Cuando el usuario posiciona el cursor sobre un enlace se amplia la pequeña capa con las utilidades de la esquina inferior izquierda permitiendo visualizar la URL