Toda gran aventura empieza con una pregunta muy pequeña: ¿Me podrías hacer un icono para una app?. Me volví horrorizado porque hace muchos años que abandoné mi carrera como diseñador y siempre he sentido mucho respeto por aquellas personas que diseñan interfaces. Los de verdad, no los que hacen bocetos con Photoshop y se los tiran en la cara a Jony Ive diciendo “mira que bueno soy, tío”.
Al final logré zafarme de tan titánica tarea justificando mis múltiples ocupaciones, pero después de ese “no”, he estado meditando mucho sobre este asunto y no sólo sobre, específicamente, los iconos de iOS 7 sino sobre en general el interfaz de iOS. Pero esa es otra historia.
Si uno analiza la historia de los iconos en Apple, en general, vemos como hubo un punto de inflexión entre la salida de Mac OS y la entrada de Mac OS X (luego, OS X a secas). Ese punto de inflexión no solo es gráfico, sino también conceptual y sobre todo metafórico.
Este cambio está perfectamente descrito en Icon Design Guidelines, uno de los capítulos de las OS X Human Interface Guidelines en el que Apple explica como crear un icono para OS X y todos los detalles, conceptos y metáforas que debe incluir el icono para una aplicación. Es muy, muy interesante este documento porque establece una serie de pautas creativas que, sin embargo, no se aplican a iOS 7.
En iOS 7 también hay una sección para el desarrollo de iconos para aplicaciones en sus correspondientes iOS Human Interface Guidelines. Las explicaciones técnicas se mezclan con las conceptuales y metafóricas y es un buen punto de partida tanto para diseñar iconos… como para disentir con la propia Apple.
Índice
La elección del concepto
Dice Apple:
Usa imaginería universal que la gente reconozca con facilidad: en general, evita enfocarte en aspectos secundarios u oscuros de un elemento. Por ejemplo, el icono de la aplicación Mail usa un sobre, no un buzón rural, una bolsa de cartero o un símbolo de oficina de correos.
Empezamos por el gran problema del concepto. Mientras que el OS X podemos expresar el concepto de múltiples formas ya que gráficamente es factible hacerlo (colores, formas, perspectivas, fotorealismo, etc…) en iOS 7 esto simplemente ya no es así. Así, en OS X definir el concepto es muy fácil según estas directrices de Apple y lo que más tiempo lleva es el desarrollo gráfico de ese concepto. En iOS 7 ocurre al revés: el desarrollo gráfico es relativamente sencillo, pero el trabajo de conceptualizar el diseño pasa a ser titánico: hay que pensar. Y hay que pensar porque si vas a hacer una aplicación “de correo” tienes que, de alguna forma, diferenciarte de la propia aplicación de Apple (por ejemplo) y cuando el concepto se expresa de forma tan minimalista y dispones de apenas un elemento sin detalles gráficos y pocos colores para representarlo, el obtener un resultado que roce la excelencia (que es lo que buscamos con nuestro icono) es ahora mucho más difícil.
El segundo problema es en sí el concepto. Apple recomienda el uso de de elementos de imaginería universal y este es uno de los grandes problemas que nadie en el diseño de interfaces consigue abordar con éxito: la imaginería universal es analógica, pero nuestra realidad es digital. EL ejemplo más dramático de este asunto son los iconos en las aplicaciones que implican la acción de guardar representados por un disquete, una tecnología en desuso y que por ejemplo, nuestros hijos ya no reconocen porque ni la han visto ni la usarán. Nunca.
Lo mismo empieza a pasar con esta imaginería analógica en un mundo que deriva inexorablemente a lo digital: un sobre empieza a ser un elemento del pasado en el mundo del email y creo que ya no los utilizan nada más que los bancos (y el PP). ¿Hace cuanto que no recibes una carta tradicional? ¿años?. ¿Por qué entonces no estamos trabajando en una imaginería que represente correctamente el mundo digital en vez de apoyarnos en elementos analógicos que lentamente van desapareciendo y que pronto dejarán de ser entendidos por nuestros hijos y los hijos de nuestros hijos?.
Este debe ser un problema insoluble, porque todos y cada uno de los desarrolladores de software, desde sistemas operativos a aplicaciones, han sido incapaces de encontrar esa iconografía que represente correctamente una acción en el mundo digital sin usar elementos analógicos y sobre todo, si en alguna ocasión alguien consigue esa epifanía en la que el icono de Pages deje de llevar papel y lápiz para representar la creación de textos, ese concepto sea usado de forma universal para representar esa acción.
Haz que el concepto sea sencillo
Dice Apple:
Abraza la simplicidad: en particular, evita abarrotar con un montón de imágenes diferentes tu icono. Encuentra un solo elemento que capture la esencia de la aplicación y expresa ese elemento en una forma simple, única. Agrega detalles con cautela. Si el contenido o la forma de un icono es demasiado complejo, los detalles se vuelven confusos y pueden aparecer emborronados en tamaños más pequeños.
Ya no solo tenemos un problema, que es tratar de encontrar un concepto que se diferencia del típico elemento de la vida real, sino trasladarlo de forma visual a un elemento muy sencillo. Tengo un par de teorías al respecto de por qué a muchos desarrolladores o diseñadores gráficos les cuesta tanto este paso. Bajo el estándar de los iconos de OS X (o los de iOS 6) el proceso de creación de un icono pasaba por hacer una investigación ligera sobre elementos gráficos (imágenes de Google) y un largo trabajo gráfico de creación fotorealista de ese elemento. Ahora, que se requiere pensar mucho más que dibujar, para muchos se hace muy difícil este paso. Mi segunda teoría es que mientras Photoshop “es fácil”, Illustrator (o cualquier otro programa vectorial) “es difícil” y el arte de crear una curva perfecta es mucho más complejo que jugar con algunas texturas y unas sombras.
¡Ah, los colores!
Si hay una queja de los usuarios, diseñadores y pseudo-diseñadores acerca de los iconos de iOS 7 es sobre los colores. Las quejas son de todo tipo y formato. De nuevo nos encontramos con un problema de simplicidad en la representación de los iconos especialmente por el uso de los mismos y las formas de utilizar los diferentes degradados. En iOS 7, aunque Apple no lo cita específicamente en su documentación, se mantiene el concepto de familias de iconos basadas en el color. Así, Mensajes y FaceTime son verdes, mientras que en Notas, recordatorios o Calendarios el color es el blanco. El asunto de las familias de aplicaciones definidas por color busca que los usuarios inconscientemente agrupen las aplicaciones con utilidad parecida en grupos para que en un vistazo rápido identifiquen un grupo de aplicaciones y a continuación, seleccionen la aplicación que están buscando de forma específica.
El problema de los colores saca de quicio de nuevo a muchos diseñadores de nuevo porque es necesario conceptualizar el icono con un gran trabajo “meditativo” y después la realización es, en si, cosa de poco tiempo. Adicionalmente, el tema de selección de colores es un problema de reconocimiento visual, más que un derroche creativo: nos hemos empeñado en pensar que nuestro icono debe diferenciarse notablemente del resto de iconos gracias a su diseño, cuando la realidad es que nuestro icono vive integrado entre otros múltiples iconos y su diferenciación no solo parte de la ubicación aproximada en la que un usuario sitúa su icono en la pantalla, sino también en la propia diferenciación frente a los iconos que le rodean. Piensa que la acción “pulsar un icono” no siempre está relacionada con la identificación de su aspecto al detalle, sino con una acción en la que la visión periférica y la noción de ubicación aproximada cuentan mucho más a la hora de iniciar una aplicación. No te paras a observar un icono, simplemente buscas una serie de elementos visuales reconocibles rápidamente mientras buscas en una zona de la pantalla en la que además el fondo de la misma juega en tu contra siempre. No pienses que los usuarios van a elegir un precioso fondo de escritorio que juegue a tu favor: la mayoría son las fotos del niño, de la novia o el novio, del perro, del gato o vaya usted a saber.
Para los que piensan que crear un icono para iOS 7 es fácil y poco satisfactorio, y que su simplicidad es un paso atrás deberían reevaluar sus opiniones. Crear un icono para iOS 7 es más difícil que nunca y obtener una respuesta satisfactoria por parte de los usuarios requiere ahora una importante labor de investigación y conceptualización previa antes de sentarnos a dar palos de ciego delante del programa de diseño de turno. Y esto a muchos les rompe los esquemas.
Siento disentir en varias de tus afirmaciones:
-Usar el Photoshop es fácil e Illustrator es difícil: Esto es rotundamente falso. Lo que ocurre es que, en tu caso, estás más acostumbrado al uso del Photoshop. Nada más. De todas formas, siempre puedes usarlo para hacer “curvas” del mismo modo que el Illustrator.
-“Nuestra realidad es digital”: ahí te equivocas de nuevo. Nuestra realidad es analógica. Por mucho tiempo que pases delante de un aparato digital, sea ordenador, sea móvil, sea lo que sea, el 90% del tiempo lo vas a pasar contemplando el mundo analógico, esto es, el mundo real. Es normal que las referencias sean analógicas y esto no va a cambiar. Es posible que un niño nacido en los próximos 10 años no llegue a ver un sobre en su buzón, pero la realidad es que en lo esencial, el correo electrónico no se diferencia en absoluto de, por ejemplo, un procesador de textos, o de este formulario en el que estoy escribiendo. No hay ninguna referencia que se pueda utilizar para representar un programa informático, a no ser que pases de referencias y utilices un constructo artificial, como es el caso de muchas aplicaciones. Pero eso, amigo mío, no funciona. Dicho esto, es perfectamente factible que una representación del mundo analógico se perpetúe como referente digital: la imagen del sobre es suficientemente icónica y, aunque nadie vea un sobre en años, puede funcionar igual de bien que cualquier otro símbolo.
– Con respecto a la facilidad/dificultad de realizar un icono para iOS 7, aquí hay que abordar varios aspectos: aunque a ti te cueste usar un programa vectorial (lo que, como he comentado, no es estrictamente necesario), la parte técnica es mucho más sencilla, dado que no hay muchos elementos con los que jugar: no hay sombras, no hay relieves, no hay texturas y los gradientes están muy limitados. Sin embargo, como bien apuntas, estas restricciones generan también dificultades a la hora de la diferenciación. En eso, el tema de los colores por “familias de aplicaciones” no creo que ayude demasiado. En una primera visual, el ojo detecta el color de un icono, dado que la forma es bastante más compleja y requiere un análisis de lo que se está viendo. Lo ideal sería que cada aplicación de uso frecuente tuviese un color diferenciador.Si Apple ha optado por usar el verde en la aplicación de teléfono y en la de mensajes es por concepto, no por utilidad. Si a alguien se le ocurriese poner ambos iconos juntos, tendría dificultades a la hora de distinguirlos.
Es cierto que diseñar un icono brillante es, en su concepción, que no en su realización, más complejo en iOS7 que en iOS6, pero eso no es un acierto por parte de Apple, ya que lo que se consigue forzando a los diseñadores a adoptar este nuevo diseño es incrementar el número de aplicaciones con iconos mediocres, como ocurre en otras plataformas (no quiero dar nombres) y los iconos son la parte que más se ve de este sistema operativo, su carta de presentación.
Vamos a ir por pasos que aquí hay mucho tajo que cortar:
[quote]“Usar el Photoshop es fácil e Illustrator es difícil: Esto es rotundamente falso. Lo que ocurre es que, en tu caso, estás más acostumbrado al uso del Photoshop. Nada más. De todas formas, siempre puedes usarlo para hacer “curvas” del mismo modo que el Illustrator.”[/quote]
Asunción incorrecta (tanto en este primer párrafo como más adelante), empezando por pensar que estoy más acostumbrado al uso de Photoshop. Durante más de una década he trabajado en el sector de las Artes Gráficas + Diseño (pero primero, artes gráficas) y domino sin ningún rubor el uso de editores bitmap y vectoriales. Esa década de trabajar en Artes Gráficas me permitió ver desde una perspectiva privilegiada como trabajan muchos diseñadores de todos los niveles y mientras hay principiantes, niveles medios y avanzados de usuarios de Photoshop, los ilustradores que sacan partido a los programas vectoriales son, con diferencia, muchos menos. El hecho de crear una curva “elegante” que refleje la realidad de un concepto es un arte MUY DIFICIL que requiere muchas horas de intensivo entrenamiento y de práctica.
[quote]“”Nuestra realidad es digital”: ahí te equivocas de nuevo. Nuestra realidad es analógica.”[/quote]
Tu realidad es tu realidad pero la “realidad” para todo el mundo es otra cosa, y para ello me remito a una conversación no muy reciente con mi hija:
– Papá ¿Qué es esto?
– Es un icono para indicar que puedes guardar
– ¿Y qué es?
– Un disquette
– ¿Y eso qué es?
– (explicación)
– ¿Y por qué lo ponen si yo no tengo de eso en mi ordenador? ¿Lo hacen para confundir?
Una cosa es que por comodidad, te/nos hayamos rendido a la evidencia de que tratar de encontrar una metáfora para indicar una/la funcionalidad o acción en una programa informático es muy difícil, pero al final es algo que tarde o temprano habrá que hacer porque los elementos analógicos acaban siendo superados por la vida real. El ejemplo del disquette es claro, pero… ¿para indicar comunicación ponemos un interfaz RS232? ¿Y qué pasará con nuestros nietos cuando vean una bombilla de filamento incandescente como icono? ¿Vamos a seguir usando elementos analógicos que no existen para indicar acciones?. Al final esos elementos analógicos pierden todo el valor de su metáfora y su concepto para convertirse en un icono del que aprendemos para que sirve, pero no conocemos su significado.
Te remito a este excelente artículo sobre la iconografía de Alien de Dave Brasgalla en la que se bosqueja, sin entrar directamente al grano, sobre este asunto.
http://design.iconfactory.com/ios-7-and-alien/
[quote]“En eso, el tema de los colores por “familias de aplicaciones” no creo que ayude demasiado.”[/quote]
Es una de las bases de las Guidelines de Apple para el uso de iconos. Aunque no esté explícitamente reflejado en la versión para iOS, si está claramente explicado para OS X y es evidente que se ha utilizado “lo mismo” para los iconos de iOS 7. El uso de colores similares, con una diferenciación iconográfica evidente está pensado para incitar al usuario a agrupar de forma inconsciente iconos parecidos (en familias de conceptos relacionados) lo que implica una organización mejor y a la larga, una percepción de una mayor fluidez al respecto del uso del interfaz.
En cuanto al resto, no puedes acusar a Apple de ponerlo difícil a la hora de crear un icono brillante. Si bien el nivel se ha elevado, la responsabilidad de crear un icono mediocre o directamente malo es culpa única y exclusivamente de los desarrolladores o de los diseñadores que no han hecho el esfuerzo necesario para conseguir un resultado de calidad y se justifican diciendo que ahora no pueden hacer un icono en dos patadas supliendo el trabajo metafórico y de conceptualización con brillos, sombras, texturas y relieves “fashion” que eso sí que es fácil.
Ahora hay que currárselo, Ian, y eso le molesta a mucha gente.
Chapeau a la mayoría de las contestaciones.
Que la mayor parte de los ilustradores (me incluyo) tengan más afinidad con el Photoshop no implica que usarlo (bien) sea más sencillo. Pese a las ventajas obvias de lo vectorial, lo cierto es que los mejores diseñadores de iconos usan Photoshop, más que nada porque no se dedican el 100% de su tiempo a este menester (Brasgalla, al que citas muy acertadamente, es un ejemplo, al igual que Louie Mantia o David Lanham), pero en facilidad de uso no difieren demasiado.
Crear una curva (o lo que sea) elegante y que comunique es igual de complicado usando Illustrator que Photoshop (o un lápiz y un papel), dado que el problema no es el programa, sino qué se hace con él.
La realidad es, obviamente, analógica. Lo digital no deja de ser un constructo para solucionar tareas que, finalmente, son analógicas. La principal función de los iconos en el mundo digital, al igual que en el mundo real, es comunicar sin la necesidad de texto. Si necesitas añadir una explicación, ya no es un icono, sino una imagen explicativa. Sin embargo, ello no implica que esa comunicación no deba ser adquirida y deba realizarse de forma innata (esto es lo que se busca al usar metáforas). Por ejemplo: las señales. La mayor parte de ellas son icónicas, pero su significado debe ser aprendido. Otro ejemplo menos obvio: el icono de mensaje. Se trata de un bocadillo como los utilizados en los cómics, que funciona en tanto en cuanto hayas visto alguna vez un cómic.
El asunto del disquete, es una verdad como un templo, pero es aplicable a miles de metáforas tecnológicamente superadas, desde la lupa del Spotlight hasta el icono de Safari, pasando por la claqueta de todos los programas de vídeo. Tampoco pasa nada porque una metáfora pierda su referencia y se convierta en un icono que hay que aprender… pasa constantemente.
Con respecto a las Apple Design Guidelines, he de decir que concuerdo con la opinión de muchos que opinan que Apple se ha saltado demasiadas veces esas directrices.
Por supuesto que la responsabilidad de crear un buen icono recae sobre el diseñador y no sobre la plataforma, sin embargo es un hecho que de un plumazo se han cargado muchas de las posibilidades disponibles a la hora de hacerlo y eso va a redundar en el incremento de
a) iconos muy similares o redundantes
b) iconos mediocres
Da igual de quién sea la culpa, el hecho es que la abundancia de malos iconos enturbia la imagen que se tiene de la plataforma. No hay más que ver lo que ocurre en Android.