03.07.08 / Diseño Gráfico

El espacio en blanco y la visibilidad relativa »

Espacio en blanco

Un tema recurrente en las relaciones entre diseñadores y clientes y ya que ha sido comentado, entre otros sitios, aquí y aquí, es el empleo del espacio en blanco. En este post intento explorar un poco más la cuestión, pero además aportar también una manera fácil y objetiva de explicar al cliente la importancia del espacio en blanco y su papel en cualquier diseño, y así intentar evitar atiborrar cada píxel del diseño que realizamos.

El uso (y el no uso) del espacio en blanco (que por cierto, no tiene por qué ser blanco) es uno de los motivos típicos de discusión entre diseñadores y clientes. Para los diseñadores, es un espacio necesario para mantener el equilibrio y el orden del diseño. Para los clientes, es un espacio vacío y desaprovechado que podría aprovechar para introducir nuevos elementos.

En la mayoría de los casos, a grandes rasgos son los diseñadores los que tienen razón, aunque ello está exento de mérito teniendo en cuenta que se trata de una cuestión técnica de diseño. Es un hecho que el uso inteligente del espacio en blanco es un elemento esencial del buen diseño. El espacio en blanco es como la respiración en poesía, algo necesario.

Pero el problema es otro. No es tanto que el cliente quiera rellenar cualquier espacio en blanco que encuentre, como que nosotros, los diseñadores, no somos capaces de justificar su uso, y por tanto no acabamos de convencer al cliente sobre por qué debería dejarl ese espacio en blanco. Solemos defender el uso de espacio en blanco aduciendo que “queda mejor” o que “queda más bonito”. Con estas justificaciones, es normal que no se logre convencer a ningún cliente. Sin embargo, bien argumentado y explicado, es incluso posible obrar el milagro de que el cliente acabe apoyando el uso del espacio en blanco. Sí, es posible.

Cuando defendemos el uso del espacio en blanco alegando que “queda bien” o que “así respira más”, nos estamos equivocando. Son argumentos muy débiles. Debemos justificarlo de otra manera: deberíamos defender su uso explicando que cada elemento nuevo que se añade al diseño le resta importancia a los demás elementos. Eso sí lo entiende un cliente. En otras palabras, cuanto más elementos añadas, menos importancia obtienen todos y más diluido (y menos impactante) será el resultado. El diseño pierde efectividad entre el ruido que se genera. Eso sí lo entiende un cliente. El diseño de impacto necesita el uso prolijo del espacio en blanco para que el mensaje principal aparezca en soledad, esté libre de distracciones, sea único y por tanto atraiga magnéticamente toda la atención. El espacio en blanco, más que espacio desaprovechado, es la luz que ilumina un elemento del diseño. Cuanto más espacio en blanco tenga a su alrededor, más visibilidad obtendrá. Eso sí lo entiende un cliente.

He hecho mención al término “visibilidad”. En cualquier diseño, rápidamente se puede comprobar que cuantos más elementos se añaden a un tapiz, más probable es que los elementos más importantes se pierdan entre la multitud. Eso va en detrimento de lo que suelen querer muchos clientes: atención e impacto. En cambio, con la utilización de espacio en blanco, la supuesta oportunidad perdida de no aprovecharlo se compensa con la obtención de una mayor atención a los elementos restantes, que obtienen una visibilidad aún mayor. Eso es lo que se llama técnicamente “visibilidad relativa”.

Hay una manera muy clara de explicar el concepto de visibilidad relativa, y este concepto nos puede ayudar mucho a explicar a nuestros clientes la necesidad del espacio en blanco de un modo convincente. Hay un hecho incontestable y es que la atención de la audiencia es limitada, y que por tanto no por añadir más elementos a un diseño se obtiene más atención por parte del lector. Digamos por ejemplo que un lector dispone de 10 puntos de atención sobre un anuncio. Si en el anuncio sólo hay un mensaje, ese mensaje obtiene 10 puntos de atención. Si hay dos mensajes expresados gráficamente en igualdad, cada uno de ellos obtiene 5 puntos de atención. Si hay un slogan, una foto, un texto y un logo, el reparto de la atención del lector se hará acorde con la importancia visual que el diseñador haya asignado a cada elemento. En un caso típico, el slogan se llevaría 3 puntos, la foto 4 puntos, el copy 1 y el logo 2 puntos.

Por tanto, dado que la atención es limitada, utilizar espacio en blanco en un diseño no es desaprovechar territorio, sino dar más puntos de atención al resto de elementos, concentrar la atención en otros elementos. Es una manera de dar importancia a algo y de guiar el ojo del usuario hacia lo que queremos destacar.

El sistema de puntos de atención no sólo nos permite explicar muy bien el rol que juega el espacio en blanco en un diseño, sino que también es muy práctico para poder definir conjuntamente con el cliente la importancia que tienen varios elementos dentro de una composición. Asignándoles puntos hasta llegar al tope de 10 puntos (algo así como el “saldod e atención” del lector), el cliente puede priorizar los elementos de un modo más objetivo y comprensible para nosotros, y nosotros repartir consecuentemente la atención del lector a los diferentes elementos según la importancia que les ha sido atribuida. Por supuesto, ello lo conseguiremos otorgando más o menos relevancia visual a los elemento mediante colores, distribuciones, contrastes, gruesos, formas, tipografías… y sí, también con espacios en blanco.

Tags: ,

02.07.08 / SEO (Search Engine Optimization)

El rapero SEO »

Con todos vosotros The SEO Rapper, el rapero que canta sobre optimización para buscadores. Todas sus letras van de utilizar HTML en vez de Flash, utilizar <strong> en vez de <bold>, poner links de texto descriptivos, etc.

Si alguien quiere saber más hay una interesante entrevista con el rapero SEO en la revista de diseño web .net Magazine.

Tags:

02.07.08 / Marketing Online

Soporte de CSS en el e-mail »

CSS y e-mail

Alguna vez me he referido a las dificultades que presenta el diferente soporte de HTML/CSS por parte de las diferentes aplicaciones de e-mail (tanto standalone como basadas en web) y a la ausencia de un estándar. Por ello va muy bien contar con recursos como la impagable y valiosísima tabla de compatibilidades entre propiedades de CSS y gestores de correo de Campaign Monitor, que ha sido recientemente actualizada. Un recurso fundamental para todos los que realizan e-mailings dentro de sus campañas de marketing online.

Tags: ,

28.06.08 / Diseño de Interfaces

Interfaces Naturales »

Interfaz natural

En general, las interfaces que emulan los principios físicos de la naturaleza son más intuitivas, porque aprovechan nuestro conocimientos previos sobre el comportamiento físico de las cosas y sobre los principios que las rigen: gravedad, aceleración, peso, roce, empuje, choque, luz…

Un ejemplo de este tipo de interfaces son aquellas que emulan fenómenos normales, como aquellas que contienen botones que al ser presionados se hunden, aquellas en las que puedes mover los elementos arrastrando con la mano (tipo drag’n'drop), aquellas en las que los elementos giran al darles la vuelta (spinning como en Google Earth), en que algunos elementos se solapan unas con otros al juntarlos (tipo CoverFlow del iTunes), en que se comprimen al apretarlos o que se apartan al darles un golpe (tipo videojuegos de golf), o en que puedes comparar varios ítems arrastrándolos al tablero y poniéndolos, físicamente, uno al lado del otro (tipo web de Nike).

Estas interfaces naturales responden de un modo natural a los gestos del usuario según los principios de la física. Por tanto no hay apenas curva de aprendizaje, puesto que las habilidades necesarias para utilizarlas están ya preadquiridas y no requieren de una práctica para habituarse a ellas. En este tipo de interfaces naturales la interacción no se basa en hacer click aquí y allí, sino que sus principios de interacción son los mismos principios de interacción que rigen el universo físico que nos rodea.

Por supuesto, en el diseño de interfaces estamos en la Edad de Piedra. El ratón es un pobre y torpe imitador de un dedo; el teclado es un pobrísimo y frustrante imitador de la voz. La interacción no es ni natural ni ergonómica; es una interacción que pasa obligatoriamente por el uso de artefactos tan aparatosos como ratones y teclados. Sólo la llegada de gadgets como el iPhone o el Surface de Microsoft han logrado poner de relieve cómo de tortuosas y endiabladamente aparatosas son algunas de las interfaces con las que operamos. A veces parece que aún no seamos plenamente conscientes de ello porque estamos acostumbrados a ellas y no hemos visto nada mejor, pero seguramente en el futuro nos sorprenderemos de cómo éramos capaces de trabajar con ellas. Será como comparar la interfaz de MS-DOS con la del Mac OS X…

Tags: , ,

21.06.08 / Diseño Gráfico

Nuevos logotipos en las televisiones públicas griega y española »

Casualidades de la vida, casi a la vez la corporación griega de televisión (Ελληνική Ραδιοφωνία Τηλεόραση, más conocida por sus siglas ERT), y la corporación española de televisión, RTVE, han coincidido en hacer un re-styling de su imagen corporativa - y nunca mejor dicho, por lo de imagen y por lo de corporativa ;-)

Este es el resultado:

Logos de la ERT y de la RTVE

A mi personalmente me gusta más la nueva familia de logos de la ERT; el estilo “Yoigo” de la RTVE no me convence…

Por cierto, en Grecia la gente ha puesto el grito en el cielo al saberse que los nuevos logotipos han costado más de un millón de euros (1.200.000 euros para ser exactos). Obviamente no son sólo los logos sino también su aplicación en infinitas aplicaciones, pero bueno sigue siendo mucho dinero… Por curiosidad y por querer comparar, ¿alguien sabe cuánto han costado los de RTVE?

Tags: ,

21.06.08 / Diseño Web

¿Migas de pan o señalética? »

En su blog, este diseñador publicó ayer una entrada sobre las migas de pan, más conocidas como breadcrumbs. En ella, escribe que:

“Las migas de pan no son exactamente las migas de pan sobre las que Pulgarcito podía desandar el camino recorrido, para ello están ya el botón de atrás o adelante del navegador, son más bien el “Usted está aquí” de un mapa, donde se muestra la situación exacta dentro de la estructura del sitio.”

Bueno, yo no estoy de acuerdo. Para mi las migas de pan sí deben ser migas de pan, es decir el rastro de páginas por las que has pasado. Lo otro, que es ubicarte dentro de la estructura del site, no son auténticas migas de pan sino un recurso de señalética.

No es la primera vez que oigo que los menús del tipo “Estás aquí: Inicio > Productos > Relojes para regalar > Rolex Quasar 2″ son “menús de migas de pan”. No, para nada; eso es señalética en diseño web o, si lo prefieres, rotulación en web. Es como el típico mapa que nos encontramos en las ciudades turísticas de “Usted está aquí”.

Lo que sería un menú de migas de pan sería “Su rastro: Búsqueda en Google > Relojes para regalar > Rolex Quasar 2″. Eso sí es un menú de migas de pan, porque son las huellas que ha dejado el navegante en el sendero que ha recorrido, no el sitio donde se encuentra ahora.

Esto es señalética, no un migas de pan

Lo que más me sorprende es que incluso en el reconocido sitio especializado en usabilidad, Usalo.es, cometen el mismo error de confundir una cosa con la otra, como puede verse en esta entrada, de la que he sacado la imagen anterior.

La programación, ya sea en PHP o ASP, es diferente según sea un migas de pan o una rotulación de dónde estás. Es más, si se trata de ésto último, incluso se puede hacer directamente con marcado HTML, porque no es dinámico.

Tags: , ,

18.06.08 / Otros

Bye bye Hellas »

Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Aficionados de Grecia en la Eurocopa 2008
Un aficionado español besa a una aficionada griega

12.05.08 / Experiencia de Usuario (UX)

Captcha jeroglífico »

La verdad es que los captchas son cada día más difíciles de rellenar. Más de una vez he tenido que refrescar la imagen del captcha o incluso toda la página (perdiendo por tanto los datos introducidos hasta ese momento), por ser incapaz de ver entre los números y letras entre el maremágnum de rayas, carácteres deformes y dibujos de animales.

A veces no sabes si un bot de spam o de dar de alta podrá loguearse, pero lo que parece claro es que para que un humano pueda hacerlo tiene que resolver auténticos jeroglíficos como éste de Shozu con el que me he encontrado al querer darme de alta en su servicio:

Captcha jeroglífico

Parece que no soy el único

Tags:

09.05.08 / SEO (Search Engine Optimization)

Niveles de Page Rank »

El Page Rank es uno de los factores que más afecta al posicionamiento en Google. Depende únicamente del número de enlaces que apuntan a una web y de la calidad (del peso que transmiten) de ellos. Hay niveles del 1 al 10, pero la dificultad de pasar de nivel en nivel sube a medida que se sube el nivel, tal y como muestra esta buena infografía:

Niveles de Page Rank

Tags: ,

03.05.08 / Infografía

La peor infografía de la historia »

Esta es la que probablemente la peor infografía de la historia:

La peor infografía de la historia

Parece una broma hecha ex professo para burlarse de todos los principios de la buena infografía, pero no: es auténtica (aunque la he traducido del inglés). Lo dicho: un auténtico atentado a la razón, al buen diseño, a la lógica, a las matemáticas, a la psicología, a la claridad, a la proporcionalidad…

Tags:
« Entradas anteriores