Puede parecer raro a primera vista, pero ¡no se asusten! Este CRAP que estoy hablando es formado por las iniciales de Contraste, Repetición, Alineación y Proximidad: los cuatro principios básicos de design descritos por Robin Williams (no el actor sino que la escritora) en el libro Non-Designer’s Design Book. En este libro la autora presenta ejemplos de aplicación para la media impresa. En un segundo libro, The Non-Designer’s Web Book, la autora presenta ejemplos aplicados al design para web.

Voy a hablar un poco acerca de cada principio individualmente, pero vale la pena recordar que éstos deben ser trabajados en conjunto, ya que están interrelacionados. Además, no deben ser entendidos como reglas, aunque yo les aconseje fuertemente que sean seguidos en el caso de que no estén seguros de romperlos concientemente.

Contraste
“Si dos elementos no son exactamente los mismos, diferéncialos completamente.”

El contraste tal vez sea la mejor forma de ofrecer atracción visual a tu proyecto. Para esto, la autora sugiere que el designer no sea tímido. Si la diferencia de dos elementos es poca, puede generarse un conflicto visual en vez de contraste. La página de juegos de la consola XBOX360 es un buen ejemplo de contraste con relación a todo, pues presenta imágenes en gran tamaño luego al principio de la página. La descripción de la imagen (ubicada en la esquina inferior izquierda), entretanto, puede parecer imperceptible a primera vista. La diferencia apenas del tamaño de la fuente, sin que haya una mudanza de colores o de tipo de fuente, disminuye el contraste de este grupo de informaciones.

Repetición
“Algún aspecto del design debe repetirse en el material completo.”

La repetición de aspectos de design como estilo y tamaño de fuente, colores o elementos gráficos, por ejemplo, colaboran a unificar el proyecto gráfico visual. Repetir elementos de design en un proyecto de muchas páginas, como por ejemplo un website, significa darle consistencia visual a éste. El website de Apple presenta un buen ejemplo de consistencia. El menú es mantenido en la misma posición; los colores y organización visual son las mismas; la identidad visual de los íconos es la misma; el estilo, tamaño y colores de fuente también se repiten en todas las páginas. Es posible notar que hay una diferencia estructural entre la “home” y las páginas internas. Y eso es válido, una vez que la home es una página “especial” del sitio.

Al proyectar un interfaz es importante estar siempre atento para que no haya grandes diferencias entre la página inicial y las internas. Al acceder a la página de videos del sitio oficial de Formula1, por ejemplo, tenemos una quiebra de consistencia con relación al resto del sitio. El usuario pierde la referencia de las páginas anteriores, no encuentra el logo o menú, además de encontrar un color de fondo diferente de todo el resto del sitio.

Alineación
“En una página, nada debe ser puesto arbitrariamente. Cada elemento debe tener una conexión visual con algo de la misma.”

Las informaciones no deben ser dispuestas en una página de manera aleatoria, apenas para ocupar los espacios vacíos. La alineación crea una línea “invisible” que ayuda al lector a identificar la cohesión, la conexión entre los elementos aunque éstos están físicamente separados. Al observar los detalles del sitio en español de ESPN, por ejemplo, es posible percibir las líneas “imaginarias” (destacadas en rojo) que definen la alineación del contenido. Es interesante observar que la proporción y la alineación son respetadas aunque tengamos una variación en el número de columnas.

Este es un pequeño desliz comúnmente realizado por los designers. En un detalle del sitio Terra, por ejemplo, a pesar de mantenerse el largo del área de contenido, la alineación general entre las columnas no está bien definida.

Proximidad
“Elementos relacionados entre si deben ser agrupados”.

Los elementos relacionados deben ser vistos de manera conjunta, cohesa, para que se forme una unidad visual. Los elementos o grupos de informaciones que no poseyeran una relación entre si deben ser desasociados, para que se evite la confusión del usuario. Un desliz con relación al principio de la proximidad que es muy común de encontrarse puede ser visto en el detalle de la página de publicaciones del Nielsen Normal Group. Repare que el espacio entre el título y la información a que se refiere el mismo es el mismo espacio referente al final de la información anterior. Esto genera una pequeña confusión en la lectura. En este ejemplo, entretanto, la comprensión de la información no queda comprometida como podría estar en el caso de que este tipo de design fuera adoptado en un menú, por ejemplo.

Lo ideal, en el caso anterior, sería que el título estuviera más próximo del texto a que corresponde y más alejado del texto anterior, como ocurre en este detalle de la página de ayuda del twitter.

Lecturas adicionales para auxiliar en la elaboración de un buen design de interfaces. Además de estos principios, les sugiero la lectura de conceptos relacionados a la tipografía, como categoría, combinación y contraste de tipos. El libro de Robin Williams ofrece una base acerca de estos asuntos.

Otro asunto que les recomiendo es la lectura acerca de la teoría y uso de los colores. El libro “From color to inexistent color” (que es un poco difícil de encontrarse), de Israel Pedrosa, trae un contenido muy rico acerca del asunto. Vale la pena la lectura.

Vou falar um pouco sobre cada princípio individualmente, mas vale a pena lembrar que eles devem ser trabalhados em conjunto, pois estão inter-relacionados. Além disso, não devem ser entendidos como regras, embora eu aconselhe fortemente que sejam seguidos se você não tiver a certeza de como quebrá-los conscientemente.

Contraste
“Se dois itens não são exatamente os mesmos, diferencie-os completamente”.

O contraste talvez seja a melhor de oferecer atração visual ao seu projeto. Para isso, a autora sugere que o designer não seja tímido. Se a diferença entre os elementos for pouca, pode-se gerar um conflito visual ao invés de contraste. A página de jogos do console XBOX360 se mostra um bom exemplo de contraste em relação ao todo, pois apresenta imagens em um tamanho grande logo no início da página. A descrição da imagem (localizada no canto inferior esquerdo), no entanto, pode parecer imperceptível à primeira vista. A diferença apenas de tamanho da fonte, sem que haja uma mudança de cores ou de tipo de fonte, torna pequeno o contraste desse grupo de informações.

Repetição
“Algum aspecto do design deve repetir-se no material inteiro”.

A repetição de aspectos de design como estilo e tamanho de fonte, cores ou elementos gráficos, por exemplo, ajudam a unificar o projeto gráfico visual. Repetir elementos de design em um projeto de muitas páginas, como um website, por exemplo, significa dar consistência visual ao mesmo. O site da Apple apresenta um bom exemplo de consistência. O menu é mantido na mesma posição; as cores e organização visual são as mesmas; a identidade visual dos ícones é a mesma; o estilo, tamanho e cores de fonte também se repetem em todas as páginas. É possível notar que há uma diferença estrutural entre a home e as páginas internas. Isso é válido, uma vez que a home é uma página “especial” do site.

Ao projetar uma interface é importante estar sempre atento para que não haja grandes diferenças entre a página inicial e as páginas internas. Ao acessar a página de vídeos do site oficial da Formula1, por exemplo, temos uma quebra de consistência em relação ao restante do site. O usuário perde a referência das páginas anteriores, não encontra mais o logotipo ou menu, além de encontrar uma cor do plano de fundo diferente de todo o restante do site.

Alinhamento
“Nada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página”.

As informações não devem ser dispostas em uma página de forma aleatória, apenas para ocupar os espaços em branco. O alinhamento cria uma linha “invisível” que ajuda o leitor a identificar a coesão, a conexão entre os elementos mesmo que estes estejam fisicamente separados. Ao observarmos os detalhes site espanhol da ESPN, por exemplo, é possível perceber as linhas “imaginárias” (destacadas por mim em vermelho) que definem o alinhamento do conteúdo. Interessante notarmos que a proporção e o alinhamento são respeitados mesmo quando temos uma variação no número de colunas.

Este é um pequeno deslize comumente cometido pelos designers. Em um detalhe do portal Terra, por exemplo, apesar de o comprimento da área de conteúdo ser mantido, o alinhamento geral entre as colunas não está muito bem definido.

Proximidade
“Itens relacionados entre si devem ser agrupados”.

Os elementos relacionados devem ser vistos de forma conjunta, coesa, para que formem uma unidade visual. Os itens ou grupos de informações que não possuírem uma relação entre si devem ser desassociados, de forma a evitar confundir o usuário. Um deslize em relação ao princípio da proximidade bastante comum de ser encontrado pode ser visto no detalhe da página de publicações do Nielsen Norman Group. Reparem que o espaço entre o título e a informação a que o mesmo se refere das informações é o mesmo espaço referente ao término da informação anterior. Isso gera uma pequena confusão na leitura. Neste exemplo, no entanto, a compreensão da informação não fica tão comprometida como poderia ficar caso este estilo de design fosse adotado em um menu, por exemplo.

O ideal, no caso anterior, seria que o título estivesse mais próximo do texto a que corresponde e mais distante do texto anterior, como ocorre neste detalhe da página de ajuda do twitter .

Leituras adicionais para auxiliar na elaboração de um bom design de interfaces
Além destes princípios, sugiro a leitura de conceitos relacionados à tipografia, como categoria, combinação e contraste de tipos. O livro da Robin Williams oferece uma base sobre esses assuntos.

Outro assunto que recomendo a leitura é sobre a teoria e o uso das cores. O livro From color to inexistent color (um pouco difícil de ser encontrado), de Israel Pedrosa, traz um conteúdo muito rico sobre o assunto. Vale a pena a leitura.

La comunicación impresa se encuentra en todos lados, frecuentemente recibimos folletos, vemos algún instructivo, revisamos la factura del teléfono; sin embargo ¿cuántos de estos materiales impresos hemos dejado de lado por ser difíciles de leer o entender?

Podemos encontrar infinidad de ejemplos de donde partir, en los que los esfuerzos por llevar al usuario información específica llegan a fracasar, simplemente porque no se ha diseñado entendiendo al usuario final.

El Diseño de Interacción debe ayudar a mejorar la relación humano – interfaz/objeto, cada vez que leemos alguno de estos folletos o materiales estamos interactuando con ellos, entonces…

Antes de mandar a imprenta un tiraje de miles y miles de hermosos folletos con detalles de esmalte UV y preciosos e inigualables dobleces…

Se puede probar la efectividad del diseño con prototipos a color que se acerquen lo más posible a la realidad; es decir, imprimir algunas muestras cuidando que el grosor del papel, suaje y dobleces utilizados, colores, tipografía, etc. sean lo más parecidos a como se verán.

Probar algo a bajo costo da muchas ventajas, la primera y más importante: NO SE PIERDE DINERO EN LA IMPRENTA. Porque de esta manera se puede refinar el diseño y saber si verdaderamente el mensaje que se quiere comunicar está llegando al usuario o se debe replantear la forma en la que se ha estructurado.

Primero que nada, antes de empezar las pruebas se debe tener claro:

• La función principal del material que se va a probar. Cuál es el mensaje que se quiere dar.
• El orden en el que la información debe ser leída. Pensar si los dobleces o el suaje ayudan a que esto suceda.
• La importancia de las imágenes. Si deben captar la atención a primera vista o son únicamente de apoyo.
• La forma en la que se debería abrir, cerrar, doblar.

Teniendo estos puntos claros como diseñador, se podrán realizar la prueba para saber cómo lo entiende el usuario.

¿Cómo se prueba? ¡Con usuarios reales!

Se pueden elegir de 4 a 7 personas que cumplan con el perfil del público al que se dirigirá la comunicación. Cabe mencionar que para probar legibilidad y manejo de la información, es recomendable incluir en la prueba, algún usuario con deficiencia visual; con esto se logran hacer ajustes que mejoran la legibilidad para todos.

Ya que se tiene al usuario:

1. Se debe observar cómo interactúa con el material. Se debe poner atención en la forma en la que lo desdobla, lo voltea, lo comienza a leer, lo cierra.El tiempo que le dedica para entenderlo puede ser una buena señal de la efectividad que tiene este material. Si el usuario se siente confundido o no entiende como leerlo, lo cerrará o apartará para evitar la frustración.
2. Escuchar lo que dicen. En ocasiones las pequeñas frases o expresiones, dejan saber si están teniendo algún problema con la información o la forma de manejar el material (con mayor frecuencia cuando se trata de suajes complicados). Se recomienda que el usuario te cuente finalmente cuál es el mensaje que recibió y que te de sus sugerencias para mejorar la experiencia.

Algunas cosas generales que descubrirás después de algunas pruebas con diferentes materiales impresos:

• Los usuarios prefieren imágenes que le ayuden a entender textos cortos que tener que leer párrafos extensos.
• Los usuarios se guían por encabezados, señales, cambio de tipografía,etc. para entender la jerarquía de la información. Dan prioridad a ciertos tipos de información o categorías de manera consistente* (David Sless, 2005)
• Las imágenes también guían la forma en la que se lee o entiende la información.
• La tipografía pequeña no es leída, es decir el usuario omite la información.
• Necesitan espacios visuales de descanso. La saturación abruma.

Las pruebas ayudan a detectar errores específicos de nuestro material impreso, en la versatilidad del diseño encontramos una infinidad de aspectos que pueden ser probados para evitar un objeto de diseño poco exitoso.

Y bueno, una vez que se hayan hecho los cambios sugeridos se puede volver a probar de forma rápida para observar cómo reacciona ahora el usuario.

Se recomienda, NO desanimarse si el doblez innovador que se había propuesto no funciona, es mejor estar seguro, que el mensaje que se quiere comunicar llegará. Además la empresa que iba a realizar la inversión agradecerá la reducción de los costos.En ocasiones no se necesita más que simpleza y claridad para comunicar un mensaje de manera exitosa.