Google insiste con el diseño emocional: Doodle de Comecocos

Para conmemorar el 30 aniversario del lanzamiento de esa popular máquina que se llevaba nuestra paga semanal religiosamente, Google ha decidido sustituir su logo por una versión jugable del videojuego del comecocos (o Pac-Man).

Pac-Man. Vídeojuego del Comecocos como logo (Doodle) de Google

Una vez más, tiran de puro y duro Diseño Emocional para humanizar una fría interfaz.

No se puede decir más que una cosa:

Excelente

Como por aquí también tenemos empresas muy sensibilizadas con el tema del Diseño Emocional, a ver si alguna nos sorprende algún día con una versión jugable del Donkey Kong (por ejemplo ;-)

Por cierto, ¿qué os gustaría ver a vosotros como logo de Google? ¿Alguna sugerencia?

--

 

Autosugerencias de Google: Centrar el foco de atención en la cadena adecuada, estímulos psicofísicos y un breve apunte sobre la psicología del color

Quién le haya tocado rediseñar alguna vez un buscador y haya hecho un benchmarking de diferentes buscadores en un período relativamente dilatado de tiempo se habrá dado cuenta de que, debajo de su apariencia estática, sus interfaces son extremadamente mutables.

Las experimentaciones son continuas.

De las características que se han añadido a la home de Google en el último año y medio me gustan especialmente las autosugerencias. Son un gran avance y dan un juego extraordinario en tanto que permiten disponer de un área de interacción líquida cuyos elementos pueden ser redefinidos en función de la acción que se invoque desde el box de búsqueda.

En los últimos día me ha llamado la atención algunas novedades que se pueden ver en la versión internacional y que se pueden comparar (no sé durante cuanto tiempo estarán disponibles o si serán una característica permanente) con la española:

Autosugerencias en Google España. No se resalta la cadena de búsqueda complementaria a la introducida

Autosugerencias en Google España. No se resalta la cadena de búsqueda complementaria a la introducida

Autosugerencias de Google. La negrita se utiliza para dar enfásis y centrar la atención en la cadena de búsqueda que desambigua la consulta

Autosugerencias en Google.com La negrita se utiliza para dar enfásis y centrar la atención en la cadena de búsqueda que desambigua la consulta

El nuevo rediseño tiene algunas diferencias importantes frente al anterior:

  • Se descarga cognitivamente la interfaz suprimiendo todos aquellos elementos no estrictamente informativos. Desaparecen los resultados de búsqueda alienados a la derecha, en color verde, que al usuario no le aportan objetivamente nada.
  • Se suprime el enlace de cerrar. Ahora, las autosugerencias se cierran haciendo clic sobre cualquier parte de la interfaz que no esté dentro de su área.
  • El color azul cuando el cursor se posiciona encima de una de las sugerencias o a su altura, es mucho más claro y menos saturado que anteriormente.
  • Se incorporan los botones de buscar rotulados como “Google Search” su producto, el buscador, y el botón de “Voy a tener suerte” su marca. En Mac y en el contexto de este rediseño, cobra pleno sentido la nueva apariencia de los botones abandonando la propia del sistema operativo (con los bordes redondeados). Adquieren bordes rectos en línea con los de la caja que los envuelve.

No obstante, quizá, de todos los cambios que introducen me llama especialmente la atención uno último:

Hasta ahora en las autosugerencias normalmente se resaltaba la raíz introducida por el usuario en el box de búsqueda.

Autosugerencias de Amazon. Hasta ahora se resaltaba la cadena introducida por el usuario en el box

Autosugerencias de Amazon. Hasta ahora se resaltaba la cadena introducida por el usuario en el box

En Google, en el presente rediseño, por el contrario, se resalta la cadena complementaria a la introducida.


Autosugerencias de Google. La negrita se utiliza para dar enfásis y centrar la atención en la cadena de búsqueda que desambigua la consulta

Autosugerencias en Google.com La negrita se utiliza para dar enfásis y centrar la atención en la cadena de búsqueda que desambigua la consulta

Resaltando en negrita la cadena textual complementaria, se persigue centrar la atención en la parte que desambigua y que es la que le interesa al usuario.

Significativo y más usable.

Por otro lado hay que tener en cuenta otros dos aspectos:

  1. Los colores definen capas informativas que se encuentran en distintos niveles.
  2. Los tamaños y los cuerpos de las fuentes también.

En el presente rediseño y centrándonos en el área de las autosugerencias, la parte de las cadenas que no está en negrita constituye una capa informativa y la parte en negrita otra. Observad arriba las capturas de pantalla de Google España y Google.com. En este último, el texto en negrita parece “flotar” en un nivel inferior. Parece que hay un escalón lo que da además sensación de movimiento ¡¡!!

¿Por qué?

Cuando no hay diferenciación de colores sino de pesos en la fuente, la negrita otorga una mayor cantidad de color, en este caso de negro, a las letras y por tanto aparecen como más lejanas. En la escala cromática los colores cálidos son los que percibimos como más próximos o cercanos. Los colores fríos como más lejanos.

Es interesante señalar un curioso efecto psicológico que se está dando. Mientras que el cuerpo de la fuente en negrita es mayor y por ende lo percibimos como más cercano (percibimos como más próximo lo de mayor tamaño) el código de color transmite justo lo contrario, mayor lejanía. Se está produciendo un efecto disruptivo a nivel cognitivo.

Colores y cuerpos de fuentes. Efecto psicológico de cómo se acercan y alejan

Curioso.

Yahoo Search utiliza los colores y tamaños de fuente de una manera mucho más radical para separar la información por capas:

Yahoo Search. Autosugerencias

Yahoo Search. Autosugerencias

  • En Yahoo Search el fondo de los autosugerencias es lo más lejano, luego percibimos como más cercano la parte de la cadena que se corresponde con la escrita en el box de búsqueda, que es un poco más clara que el fondo de las mismas, y por último, percibimos como más próxima la parte de la cadena textual que se encuentra en blanco (la complementaria a la introducida en el box).
  • La fuente que utiliza dentro del box de búsqueda es de mayor tamaño que la fuente del texto en las autosugerencias.
  • Ambos textos, tanto del box como de las autosugerencias están en negrita.
  • En el texto dentro de las autosugerencias el escalón y la percepción de lejanía y cercanía de las capas informativas se produce por el color, no por el cuerpo ya que son de igual tamaño.
  • Desde un punto de vista cognitivo es más compleja de establecer la conexión entre la cadena introducida en el box de búsqueda y la de las autosugerencias por:
    1. la utilización de diferentes colores para ambas (una en negro, y la otra, en azul navy) y
    2. la alineación de cadenas textuales no es directa en todos los casos. Puede haber sugerencias de búsqueda que comiencen con una cadena distinta a la introducida en el box de búsqueda por el usuario (en la imagen de la captura, la cuarta sugerencia por ejemplo).

Creo que es mejor el diseño de Google a pesar del efecto apuntado ya que:

  • Conecta mejor la información del box y del área de las autosugerencias utilizando un único color análogo, el negro, frente a los tres de Yahoo Search.
  • Utiliza menos colores lo cual significa que el usuario tiene que hacer un menor esfuerzo cognitivo para interpretar la información que está visualizando.

Por último, un experimento interesante en línea con el nuevo rediseño de Google. Aun cuando la conexión entre la cadena introducida en el box de búsqueda por el usuario y las inferiores es directa por tener la misma alineación y el mismo fin y comienzo:

Google. Alineación de las cadenas complementarias en el área de las autosugerencias con el fin de la introducida en el box de búsqueda

Google. Alineación de las cadenas complementarias en el área de las autosugerencias con el fin de la introducida en el box de búsqueda

aplicando la misma filosofía que la que se ha seguido para poner en negrita la cadena de búsqueda complementaria a la introducida en el box –> centrar la atención en ella, creo que sería interesante testar qué efecto podría producir poner en negrita la cadena dentro de box de búsqueda:

Con ello se lograría que ambas cadenas se percibiesen como un todo estableciéndose una conexión aun más fuerte y mejorando la usabilidad desde un punto de vista cognitivo ya que se percibirían exactamente igual que dos piezas de un puzle que encajan la una en la otra. Ello empujaría al usuario a llevar a cabo la siguiente acción lógica para completar con éxito la búsqueda, hacer clic en una sugerencia para “juntar” ambas cadenas:

Google. Experimento. Cadenas en el box de búsqueda y en las autosugerencias en negrita

Google. Experimento. Cadenas en el box de búsqueda y en las autosugerencias en negrita

El único “pero” de esta propuesta es que al poner en negrita la cadena del box búsqueda habría que otorgar un tracking negativo a las palabras de la misma (habría que disminuir el espaciado entre letras) para que ocupasen igual espacio que el texto sin negrita de las cadenas en el área de las autosugerencias. Una auténtica lástima porque asignar un tracking negativo supone juntar artificialmente las letras y por ende disminuir su escaneabilidad y legibilidad.

--

 

Switch to our mobile site