Lo bueno de esto es que nadie ha hablado sobre esto antes y por tanto soy el primero que entre a explorar este territorio virgen. Con esta idea en mente y dado que tengo un esguince que me tiene impedido y no tengo nada más que hacer, voy a hacer una pequeña serie de artículos con propuestas sencillas y económicas de mejorar la usabilidad de los peajes.

En esta primera parte me centraré en exclusiva en el rotulado, que lógicamente incide en mucho en la usabilidad percibida de un sistema. En otro post intentaré escribir una pequeña crítica sobre la usabilidad de las máquinas de cobro de los peajes, que ese es un tema que merece también su propio post.

El primer problema de los peajes es la rotulación. Cuando nos aproximamos con el coche, nos encontramos con carteles de este tipo, al menos en Cataluña: MANUAL y AUTOMÁTICO.

Como todo buen profesional de la usabilidad sabe, el rotulado debe ser auto-explicativo por un lado y por el otro no llevar a confusión. Sin embargo, tanto las vías señalizadas como “MANUAL” como las de “AUTOMÁTICO” son todas manuales, no automáticas. Pagues con billetes y monedas o con tarjeta, ambos modos de pago son completamente manuales y no tienen nada de automático, en tanto en cuanto requieren que pares, que bajes la ventanilla, que pagues y que una vez se efectúe el pago se suba la barrera. No es pago automático porque no es que la máquina cobre por sí misma, quee s la definición de una máquina de pago automático. Esto viola uno de los principios más elementales de la usabilidad: la correcta rotulación a nivel semántico.

Adicionalmente, “AUTOMÁTICO” puede inducir a error a los usuarios del Teletac, que sí es un sistema de pago realmente automático en tanto en cuanto no requiere ninguna acción del conductor aparte de bajar un poco la velocidad. Un usuario del Teletac con toda la razón del mundo podría pensar que los carriles de “AUTOMÁTICO” son sus carriles, y que los de “MANUAL” son para los que no tienen de un sistema de pago automático porque manualmente, ya sea con billetes y monedas o con tarjeta.

En realidad, lo que distingue unos carriles de los otros no es otra cosa que el modo de pago. A diferencia de un supermercado en el que tanto los que pagan con billetes y monedas como los que pagan con tarjeta pasan por los mismos carriles o cajas, en los peajes se distingue a unos y otros, porque el dispositivo de cobro es diferente. Por tanto el rotulado debería expresar esto sin ambiguedades y los carteles sobre las vías deberían ser “AL CONTADO” y “TARJETA”. De este modo, se comunicaría fielmente e inequivocamente que se distingue a los conductores por cómo van a pagar.

En realidad, ésta tampoco sería buena opción, ya que en los carriles señalizados como “AL CONTADO” siempre hay un operario, y a éste se le puede pagar también con tarjeta. Por tanto, los rótulos deberían ser “AL CONTADO O TARJETA” y “TARJETA”. Lo mejor, por supuesto, es acompañar estos dos rótulos de iconos sencillos que apoyen y confirmen el mensaje para no dejar lugar a dudas. Con un sencillo icono de monedas y billetes, y otro sencillo icono de tarjeta es suficiente para acabar de comunicar que se distingue los carriles por cómo se puede pagar en ellos. Además, estos icono son necesarios para los extranjeros si el rótulo no está traducido, como es el caso aquí.

Por tanto, si antes tenían este aspecto:

Ahora tendremos éste otro:

Hemos eliminado los conceptos de “AUTOMÁTICO” y “MANUAL” porque, como hemos visto, son incorrectos y se prestan a confundir. Por otro lado, al integrar arriba los iconos de pago al contado y de pago con targeta, podemos eliminar los otros rótulos fluorescentes que están más abajo y que sólo añaden ruido visual. Las redundancias, en el caso de un sistema en el que hay pocos segundos para escoger, son negativas. También aprovechamos para quitar el rótulo verde con el icono de tarjetas que hay debajo del rótulo también verde para vehículos pesados, porque ahora es también redundante. Con lo cual la cosa nos queda así:

Pero aún hay muchas cosas que mejorar. Como bien sabe cualquier diseñador, los códigos cromáticos se suelen hacer servir para con diferentes intenciones. Pero lo que está claro es que los códigos cromáticos, si se utilizan, deben utilizarse siempre y bien. De otro modo, no sólo pierden su sentido, sino que confunden en vez de ayudar. En la imagen anterior a ésta última, hay un código cromático que identifica a los mensajes dirigidos a los vehículos pesados, el verde. El verde agrupa a 3 rótulos dirigidos a este tipo de vehículos.

Pero cualquier diseñador algo avezado en psicología humana sabrá que mucha gente, ante estos cuatro rótulos, deducirá con toda lógica que si el fondo verde se utiliza para significar “Vehículos pesados”, entonces por fuerza los fondos azul y blanco de los otros rótulos deben querer significar otros dos tipos de vehículos. Este tipo de razonamiento no es sólo completamente lógico, sino que además es también consecuencia del aprendizaje de las señales de tráfico, que son probablemente el mejor ejemplo de una señalética excelente que se basa, precisamente, en este tipo de códigos cromáticos. En el caso de las señales de tráfico, los fondos se combinan con la forma, con el borde y con iconos para expresar diferentes conceptos combinados. La gente ha aprendido a leer este tipo de códigos al estudiar para el carnet de conducir y los aplica también frente a la rotulación de los peajes.

En este peaje, parece que se ha utilizado el azul y el blanco con la intención de querer distinguir mejor un carril para pago con tarjeta y otro para pago al contado (y con tarjeta), pero es un error. En el código que estamos diseñando, los tipos de pago se comunican a través del icono y sólo a través del icono. Hacerlo de dos modos distintos, con color y con icono, como bien se sabe en usabilidad, es redundante y genera confusiones. “Dínoslo de una manera correcta, y de sólo una manera”, sería la frase.

En cambio, el color de fondo, lo estamos utilizando para identificar tipos de vehículos distintos. Verde para vehículos pesados, y por tanto el blanco o el azul, pero nunca ambos, para vehículos ligeros. En este caso prefiero utilizar el blanco, con lo cual la foto nos quedaría así:

Parece que queda más claro las dos famílias que hay, la blanca para vehículos ligeros y la verde para vehículos pesados. Pero aún queda un pequeño detalle. Dado que la redundancia es negativa como norma general en usabilidad y como norma particular cuando sólo se tienen unos cuantos segundos para tomar una decisión, como cuando uno se aproxima a un peaje, aún queda un pequeño detalle: eliminar el cartel verde con el dibujo del camión.

Finalmente, si lleváramos al extremo los principios del buen diseño y de la usabilidad, corregiríamos una asociación visual que es traicionera: el verde que identifica vehículos pesados es muy parecido al que hay en las balizas de los refugios entre carril y carril. Por supuesto, en este caso sería difícil que alguien entendiera que los vehículos pesados, identificados en verde, deben pasar por los carriles “señalizados” con balizas verdes, pero vamos a pasarnos de rosca e intentar resolver algo que no porque no nunca tendrá mayores consecuencias deja ser un error. Por tanto, cambiaremos el color verde de las balizas por uno que no se relacione en nada con los rótulos, ya que no tienen nada que ver. Hay que romper esta asociación cromática utilizando otro color.

Podríamos pintar las balizas de cualquier color excepto el blanco o el verde (ya que se asociarían con los rótulos), pero para ir a por nota, no escogeremos un color al azar, sinó que ayudaremos a distanciar más las balizas respecto de los rótulos asociando las balizas a las cabinas pintando las balizas de color azul. De este modo, ordenaremos el paisaje visual uniendo las balizas a las cabinas, comunicando por tanto que las balizas no tienen ningún significado, sino que forman parte de la estructura del peaje.

Operando estos dos cambios la cosa queda de la siguiente manera:

OK, ahora queda más claro. Lo que hemos hecho ha sido rediseñar la rotulación de este peaje, de modo que esté más ordenada, más clara, tenga menos ruido visual,  y exija menos esfuerzo para ser comprendida. Para poder comparar este resultado con lo que teníamos al principio del rediseño, recupero la imagen original:

En el caso de un peaje, una buena rotulación no es una cuestión baladí, y de hecho puede tener un impacto notable. Por un lado puede ahorrar un gran número de errores como los que todos hemos visto muchas veces de coches que tiran marcha atrás porque se han equivocado de carril, y por el otro lado puede reducir el número de maniobras de último momento que algunos conductores  hacen cuando por fin localizan el carril por el que tienen que ir. En algunos casos, este tipo de maniobras provocan accidentes.

Hasta aquí el rotulado. En el próximo capítulo, cuando pueda, me centraré en las máquinas de cobro con tarjeta de los peajes.

Dos ideas:

El diseño es esencialmente prescriptivo mientras que la ciencia es predominantemente descriptiva. Los diseñadores no se encargan de cuestiones como qué es, cómo y por qué, sino con lo que podría ser o lo que debería ser. Mientras que los científicos pueden ayudarnos a entender el presente y predecir el futuro, los diseñadores prescriben y crean ese futuro.

Los diseñadores, a diferencia de los científicos, parece que no tienen derecho a equivocarse. Mientras que a menudo se acepta que una teoría científica que ha sido deprecada puede haber contribuido al avance de la ciencia, raramente a los diseñadores se les reconoce una contribución de este tipo.

(inspirado por How Designers Think)

Un tema recurrente en las relaciones entre diseñadores y clientes y que ya 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.

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…

Ser diseñador del iPhone: uno de los trabajos soñados para cualquier diseñador. Según se lee aquí, Apple busca un diseñador visual para el iPhone.

Según el anuncio, básicamente el candidato perfecto debe reunir estas cualidades:

- Grado en Diseño de Medios Interactivos, Diseño Gráfico, Animación o similar
- 2 años de experiencia en diseño visual de software
- Comprensión de los principios que rigen el diseño de interfaces de usuario
- Experiencia en el campo del diseño de interfaces dinámicas
- Pasión por el mejor diseño
- Capaz de comunicar sus ideas

Y se encargará de:

- Concebir, desarrollar y prototipar nuevas interacciones para varios componentes de Mac OS X
- Trabajar conjuntamente tanto con Ingeniería como con Marketing para finalizar diseños, documentar soluciones y monitorizar su implementación

Se puede enviar el CV + portfolio de diseñador a charlene@apple.com o a ljenckes@apple.com.

Otra vez Suunto. Es que Suunto es un ejemplo de una marca que aprovecha las posibilidades de Internet para crear un vínculo más íntimo con los consumidores, un vínculo sincero en el que la marca no tiene miedo al mercado, sino que quiere comunicarse con él todo lo que pueda:

1. Suunto diseña un nuevo producto, el Suunto Lumi (Lumi, según explica la propia Suunto, Lumi significa en finlandés “la luz que brilla en la nieve”)
2. Suunto explica la historia del proceso de fabricación del nuevo producto.
3. Suunto diseña una web en la que explicar el producto: Suunto Lumi.

4. Suunto publica una entrevista con la diseñadora del reloj, Elizabeth Salonen.
5. Suunto publica un vídeo con el reportaje fotográfico que realiza con modelos para obtener las imágenes que ilustrarán el nuevo producto en folletos, cartelería, catálogo, web…
5. Suunto pone ejemplos humanos del target del Suunto Lumi (mujeres deportistas y con estilo), como por ejemplo Aksana Kurola.

En general, Suunto no sólo añade más equidad a sus productos envolviéndolos de estas historias, sino que además se desnuda de tal manera que transmite una confianza y una seguridad en lo que hace brutal. Pocas cosas convencen más.

Siguiendo la estela del post sobre diseño y usabilidad de Suunto, en Sony-Ericsson explican esta filosofía sobre su diseño:

En Sony Ericsson, el diseño es mucho más que un producto con un aspecto atractivo: está integrado en cada paso del proceso: funciones inteligentes, aplicaciones de fácil utilización, materiales innovadores y, evidentemente, aspecto visual atractivo. El diseño es el principal factor de diferenciación al comparar productos de comunicaciones móviles.

(…)

Nuestro Centro de diseño creativo tiene estudios en Lund (Suecia), Londres, Estados Unidos, Asia y Japón, donde los diseñadores industriales trabajan codo a codo con los diseñadores de interfaz humana, los diseñadores de colores y materiales, y los diseñadores gráficos.

Los diseñadores industriales desarrollan el aspecto subyacente del producto, mientras que los diseñadores de interfaz humana eligen temas gráficos, iconos y fondos para las pantallas. Los diseñadores de colores y materiales trabajan con la textura, los materiales y los colores, a la vez que los diseñadores gráficos crean los embalajes y material gráfico. El número de diseñadores implicados en cada proyecto varía, pero todas estas personas forman parte de un equipo que trabaja conjuntamente para abrir nuevos horizontes en el diseño.

Continuamente se supervisan las tendencias de la moda, el mercado y los consumidores, además de las tendencias en los productos y la tecnología, y éstas inspiran, influyen y se reflejan en todos los elementos de nuestro diseño. Desde el nacimiento de una idea hasta el lanzamiento del producto, los diseñadores participan en todo el proceso.

Estudio de diseño del año:
1. Preloaded
2. Fortune Cookie
3. Wefail
4. Less Rain
5. Hi-RES!

Rediseño del año:
1. Apple
2. Manchester United
3. NY Times
4. Waterstones
5. Guardian Unlimited

Campaña de marketing viral del año:
1. Will it Blend?
2. Simpsons Movie
3. Get the Glass
4. Cadbury
5. X Factor

Mención especial al peor diseño (y con razón): MySpace.com