Affordances - Os pequenos pormenores com o grande significado

Affordances. Vêm em qualquer forma, o que interessa é que estejam lá. Relevo, cor, geometria, forma, textura, volume, qualquer propriedade física intrínseca de um objecto que pode remeter para o modo como deve ser utilizado. Substituem manuais de instruções ou legendas e descartam a necessidade de qualquer aprendizagem. Servem para facilitar a nossa interacção com os objectos do dia-a-dia e fazem a distinção entre uma peça bem desenhada e pensada, e uma peça com um design pobre. No processo de criação de um utensílio, uma interface, uma ferramenta, uma casa, seja ele qual for o tipo de objecto ou meio cujo objectivo é ser utilizado por pessoas, há inúmeros factores que têm de ser tomados em conta: Robustez, fiabilidade, eficiência, custo de produção, estética (por estética entenda-se beleza ou elegância), viabilidade de produção em massa, entre outros.

No meio de tantos factores, é normal que a questão da usabilidade seja relegada para segundo plano, não só por quem produz, mas também por quem compra. Há uma multiplicidade de razões para que isto aconteça. Olhemos para o lado do consumidor: o fenómeno de aparente esquecimento de que este está na verdade a comprar um objecto que acima de tudo serve para desempenhar uma função prende-se com o facto de muitas vezes o comprador não experimentar o objecto antes de o adquirir. Outras vezes este objecto não é sequer comprado pela pessoa que o vai utilizar e noutras até, o consumidor tem noção de que há uma deficiência no desenho da peça, mas é seduzido por outros factores como o preço ou a harmonia estética do mesmo. Tudo isto motiva a que se continuem a desenhar produtos com más affordances, difíceis de utilizar, muitas vezes até frustrantes, que nos fazem sentir diminuídos e incapazes de lidar com coisas supostamente “simples”. Daniel Norman alerta constantemente para este facto no seu livro “The Design of Everyday Things”, e fornece-nos todas as razões para nos desprendermos de quaisquer sentimentos de culpa ou de inferioridade. Na esmagadora maioria dos casos, a culpa está no objecto e não na pessoa que o utiliza.

Se tirarmos um pouco de tempo para pensar, ao longo da nossa vida lidamos com milhares, senão mesmo milhões de objectos e interfaces que funcionam de maneira diferente, que possuem diferentes modos de operacionar e que não devem, de forma nenhuma, requerer uma aprendizagem constante por parte de quem os utiliza. Parafraseando Norman, o conhecimento deve residir no mundo, e não na cabeça. A solução tem de estar lá, no próprio objecto, gritante e chamativa. Não é por acaso que usamos diários, agendas telefónicas, mapas, etc…O nosso cérebro não é capaz de armazenar e disponibilizar toda a informação com que somos obrigados a lidar no dia-a-dia. Minimizar o número de processos arbitrários que precisamos de memorizar e substituí-los por modelos que se encaixem em conceitos e modelos apreendidos por associação com a natureza ou por interiorização de modelos teóricos explicativos, deveria ser um objectivo primordial do designer.

Trocando por miúdos, e utilizando um exemplo dado por Norman, se virmos as dobradiças de uma porta, saberemos que teremos de exercer força no outro extremo para que esta se abra. No entanto, se as dobradiças da porta não estiverem visíveis (por questões de estética, por exemplo), teremos de decorar o sítio exacto onde estas se encontram, para que no futuro não tentemos abrir essa mesma porta pelo lado das dobradiças. Outro exemplo muito comum são os fogões de cozinha. Criando uma relação de semelhança entre a disposição das bocas do fogão e dos manípulos que as accionam nunca correremos o risco de estar a rodar o manípulo correspondente a uma boca e a chegar o fósforo perto de outra, sem perceber o porquê de esta não acender. Em baixo está um exemplo de uma má affordance de um fogão, pois não existe nada que indicie qual das bocas é accionada por qual dos manípulos. A única maneira é por tentativa erro e posterior memorização. (É de salientar que por vezes uma má affordance pode ser colmatada com a presença de feedback, o que não é o caso neste fogão, pois, por exemplo, nenhuma luz se acende junto da boca que acabamos de accionar ao rodar o manípulo).

Conhecer a forma como pensa o ser humano pode ser um excelente ponto de partida para criar “designs” eficientes e fáceis de utilizar. Aliás, não é por acaso que Daniel Norman, que aborda este tema de forma tão detalhada, não é de forma nenhuma um designer ou um engenheiro, mas tem sim, formação na área da psicologia e das ciências cognitivas. O ser humano procura sempre associações entre as interfaces que opera e o mundo que o rodeia. Ele cria modelos conceptuais que procura nos objectos que utiliza. Olhemos, por exemplo, para o comando de um carrinho telecomandado. O manípulo do acelerador encontra-se perpendicular à superfície do comando, podendo ser movimentado para a frente e para trás. Simples, intuitivo, imediato. Ninguém, alguma vez, requereu qualquer tipo de aprendizagem para operar um comando tão simples como este. Porquê? Porque o carrinho também se desloca para a frente e para trás, porque o movimento do manípulo é igual ao movimento do carrinho. Se o manípulo fosse de deslocar para cima e para baixo, num plano perpendicular ao movimento do carrinho, também seria natural, mas não tanto como da maneira anterior. Agora imaginemos que para acelerar rodaríamos o manípulo para a direita, e para travar, para a esquerda. É certo que iríamos errar diversas vezes antes de nos habituarmos ao mecanismo, antes de memorizarmos o seu funcionamento. Para além disto, esta discrepância entre o modelo conceptual do movimento do carrinho e a forma como temos de accionar o comando, torna imensamente propício o erro (os chamados Slips no livro de D. Norman), mesmo depois de a associação estar memorizada. Ao não ser natural, a tarefa requer mais ou menos atenção da parte do utilizador. Ora nós sabemos que ao realizar uma tarefa repetidas vezes temos tendência a dispensar cada vez menos atenção para a sua execução, tentamos automatiza-la inconscientemente. Mais cedo ou mais tarde, vai ocorrer a distracção ou o erro. No caso do carrinho, não é nada de grave, acelerar em vez de travar. Mas se estivéssemos a falar de um avião de passageiros, as consequências poderiam ser mais graves. Há uma série de razões que podem motivar a distracção, mas a verdade é que esta só acontece se o conhecimento necessário para a operação de uma interface estiver na nossa cabeça, e não no objecto em si. Não falo apenas do conhecimento de como utilizar, mas também do conhecimento de como não utilizar. Ele está presente nos objectos sobre a forma daquilo a que Norman chamou de constrangimentos. Um exemplo trivial: Se houver apenas uma porta da cor da minha chave, eu sei que é essa. Se a porta tiver apenas uma fechadura com ranhura para introduzir chave, então eu também sei que é essa. Se a chave não entrar na fechadura virada para cima, então eu sei que tem de entrar virada para baixo. Agora imaginemos que em todo este processo as respostas não estavam nos objectos, sob a forma das tais affordances e constrangimentos, quantas vezes eu teria de errar para abrir a porta? E de cada vez que eu tivesse de abrir a porta no futuro?

Deixo em baixo alguns exemplos de más affordances com que me fui deparando, na promessa de acrescentar novas imagens à medida que me for deparando com elas.





O microondas telemóvel


 

Confesso que me senti estúpido quando não consegui abrir uma carica com esta ferramenta. Depois de ler o livro de Daniel Norman fiquei um bocado aliviado.

 



Infografia na actualidade

Vivemos num mundo em constante comunicação, sempre ligado – na “Aldeia Global” do sociólogo Marshall McLuhan. Pelas facilidades tecnológicas disponíveis na actualidade (que serão cada vez maiores) a oferta de informação é abundante, diversificada, confusa, esmagadora… Estas facilidades enraizaram determinadas características nos nossos modos de vida, que levaram à actual sociedade generalizada do imediato, do “aqui e agora” ou do “right now” globalizado. E não descuramos esta particularidade no que toca à nossa informação – à necessidade de estarmos constantemente a par do que se passa no “nosso mundo” e no Mundo e ao consumo dessa mesma informação que nos é bombardeada todos os dias, quando nem sempre temos tempo ou espaço para aprofundar assuntos que pretendemos compreender.

            No contexto deste Mundo – o Mundo info-incluído da actualidade – a informação precisou de se adaptar. Existe uma necessidade de aplicar as máximas jornalísticas às práticas de hoje - a informação pede ser clara, facilmente entendida, veiculada ao e compreendida por o maior numero de pessoas possível, da melhor forma possível - ou seja, com eficiência. A infografia é uma resposta a estas realidades e necessidades. Diz Venkatesh Rajamanickam: “(…) jornalistas e comunicadores em geral abraçaram a infografia para ajudar a audiência [(os leitores)] a compreender a sua intenção de um modo mais rápido e inteligente.”. Mas o que é a infografia?

            A infografia é, em termos latos, a representação visual ou gráfica de informação para facilitação da compreensão dos leitores. Segundo Alberto Cairo, consiste na “(…) arte de descrever e transmitir quantidades substanciais de informação através de visualizações”. Esta área é o produto da junção de duas disciplinas diferentes: o design de informação e o jornalismo. Geralmente, é percepcionada como gráficos, mapas e diagramas que acompanham um texto para ilustrar e melhor explicar o que já vem escrito. Neste sentido, esta área existe e é explorada, de uma maneira ou de outra, desde o início dos média. Mas hoje em dia transformou-se em algo totalmente diferente. Com o nascimento e aperfeiçoamento da Internet, surgiu a infografia online - a mais recente forma de criação infográfica. Esta aproveita todas as tecnologias disponíveis para a criação – para além do design de informação, da ilustração, da cartografia e da fotografia, a interactividade também está presente nesta produção multimédia, envolvendo assim o leitor e personalizando a informação (o que facilita sempre a compreensão da mesma).

Para além da vertente tecnológica, a criação infográfica evoluiu no seguimento de uma mudança de atitude por parte dos seus criadores, que vem do crescente interesse que tem havido no sentido de estudar, compreender e aperfeiçoar a produção de infografias. A sua qualidade não passa só pela evolução na forma como são criadas mas também na forma como são pensadas. Existe um aumento na importância dada ao conhecimento do leitor e das suas características que levou à compreensão da supremacia da visão nos sentidos do ser humano e das implicações que isso tem em termos de entendimento de informação: “(…) compreendemos muitas coisas melhor se forem explicadas visualmente (…)” diz-nos Alberto Cairo. Por isso, realça-se que “No desenho de infografias, a aplicação de um estilo gráfico não é tão importante como dar uma forma gráfica ao conteúdo em si, com uma compreensão de como esse conteúdo é percepcionado e processado por uma audiência.”, segundo Venkatesh Rajamanickam.

Exemplo de uma Infografia retirada de http://www.princeton.edu/~ina/infographics/index.html

INFOGRAFIA - Projecto Final

O upload do blogger comprime a imagem com perdas de qualidade.

Deixo aqui o link para o download da original (1,4mb)

Proposta de Trabalho 3 - A Cor: Memória descritiva

Proposta de Trabalho 3 - A Cor: Memória descritiva

Projecto 1

Através da quantidade de cores vermelhas e castanhas, e da predominância de tons quentes, associamos imediatamente a primeira imagem a um cenário de Outono, calmo e triste. As emoções transmitidas são de melancolia e envelhecimento. O caminho, no qual se centra a composição, parece abandonado e esquecido.

Mas se alterarmos o padrão de cores da composição, isto é, alterar os tons de vermelho e castanho para tons de verde, o sentido da imagem altera-se por completo. Imediatamente, associamos o verde à Primavera, o que só por si altera as emoções que são transmitidas pela imagem.

A concepção deste projecto foi muito simples, não tendo sido necessário recorrer a ferramentas de selecção. A técnica utilizada neste exemplo passou por apenas 2 ferramentas do Photoshop.

1.        Replace Color: Seleccionando o vermelho escuro (tom mais predominante na imagem original), foi substituído por um verde escuro.

2.       Color Balance: Usada para suavizar a intensidade dos verdes, e torna-los um pouco mais próximos da realidade. Acrescentou-se um pouco de vermelho na imagem.

Projecto 2

O título desta imagem, retirada do blog pessoal do fotógrafo Mehrdad Garousi, é “Solidão”.

Embora a disposição dos elementos na imagem desempenhem um papel fulcral na passagem da mensagem desta fotografia, a ausência da variedade de cor também influencia a atribuição de significado.

Colorindo esta imagem, obtemos um cenário muito mais alegre e trivial, que retira à imagem a carga pesada que o autor lhe atribuiu. Assim, o modelo que antes olhava pela janela numa expressão solitária, triste e resignada, na segunda imagem transmite mistério e inocência, como quem espera por alguém.

Neste exemplo, recorreu-se ao "Polygonal tool" para seleccionar as diferentes partes que iriam ser pintadas. Como a selecção nunca é exacta, criaram-se "Layer Masks" para apagar os bocados que ficavam pintados acidentalmente ou que tínhamos mais dificuldade em separar da selecção. No que respeita à técnica de colorir, e para não alterar as texturas da imagem, recorreu-se sempre a quatro ferramentas: "Replace Color", "Color Balance", "Hue/Saturation" e "Channel Mixer".

A primeira alteração foi pintar a parede numa tonalidade quente, o que desde logo removia grande parte da frieza da imagem. De seguida, as roupas da modelo e o tom da sua pele. Por fim, foram pintadas as cortinas e a janela.

Projecto 3

O poster do filme “The Spirit”, realizado por Frank Miller, apresenta características distintas deste autor, como o contraste preto e branco e o vermelho a realçar o título do filme e a gravata do personagem, envolvendo toda a composição num ambiente sombrio, negro e violento. Estas características são auxiliadas pelo misticismo à volta do sujeito no poster, e pelas palavras que aparecem sobre as habitações. Toda a composição é notavelmente fria, crua e tenebrosa.

Contudo, se colorirmos a imagem, esta perde muita da sua imponência, dando-lhe um aspecto mais infantil e até folclórico. Enquanto a primeira imagem mostra bem o cenário do filme, virado para um público mais adulto, a segunda revela um panorama mais leve e não tão violento. Com a mudança da cor do título do filme para amarelo, este perde algum do seu carácter mais sanguinário, apesar de certos elementos como a escuridão e a figura da personagem central do filme, não perderem o seu sentido com a colocação de tons mais coloridos.

Neste projecto, usamos sobretudo a opção “Variations” para colorir o poster e iluminar alguns elementos. Conseguimos assim uma imagem mais viva, alegre e virada para um público mais jovem.

Proposta de trabalho 3 – A cor

Recolha de exemplos

Era-nos pedido que fizéssemos uma recolha de exemplos do dia-a-dia em que a cor tivesse um papel determinante na comunicação da mensagem. Ficam em baixo alguns exemplos, uns de carácter prático, outros de carácter artístico, em que a cor é o instrumento principal para a passagem da mensagem e o ponto de partida para a descodificação da mesma.

Nas imagens acima, embora a forma seja muito parecida, a cor altera radicalmente o significado. A imagem à esquerda, o símbolo da luta contra o SIDA, e a imagem à direita, símbolo do luto.

Um dos elementos descritivos mais fortes das estações do ano é precisamente a cor. Por associação podemos ter: Verão – Amarelo, Laranja, Outono – Vermelho, Castanho, Cinzento, Inverno – Branco, Cinzento, Primavera – Verde.

Dois exemplos práticos que mostram a importância da cor no dia-a-dia.

O título desta composição é precisamente “rosa da luxúria”. A intensidade do vermelho e o facto de ser a única cor presente, ajudam a reforçar a mensagem, já que o vermelho é considerado a cor afrodisíaca, da luxúria e da paixão.

Neste caso, a abundância de azul pretende claramente criar uma sensação de frescura a que a marca do perfume pretende ver associado o seu produto.

Sem cor, esta imagem poderia não ter nenhum significado. Através do contraste de tonalidades de pele compreendemos instantaneamente que se trata de uma imagem com um apelo anti-racista.

 Por fim, mais alguns exemplos da vida prática em que a cor determina o significado da mensagem.

Alberto Caeiro

"Tristes das almas humanas que põem tudo em ordem,

Que traçam linhas de coisa a coisa,

Que põem letreiros com nomes nas árvores absolutamente reais,

E desenham paralelos de latitude e longitude

Sobre a própria terra inocente e mais verde e florida do que uso!”

O cenário idílico de uma mesa de piquenique, coberta por uma vinha, personifica o carácter simples e bucólico do heterónimo Alberto Caeiro.

Primeiro criaram-se as linhas que dariam forma à vinha, usando a "Pencil tool". De seguida, usando a ferramenta “Attach to path”, moldou-se o texto às linhas criadas. Procedeu-se à alteração da cor, tamanho e espessura do texto para criar os diferentes formatos dos ramos. Este era o elemento principal do projecto e aquele que mais rapidamente ficou pronto. O mais difícil era decidir como desenrolar a composição a partir daí.

Acabamos por manter o documento na vertical e por enquadrar a vinha no topo da imagem, deixando um vasto espaço para o solo, que ajuda a transmitir a ideia de “terra inocente” e de um cenário campestre e primitivo. No chão, as folhas (representadas pela letra "t") amontoam-se, criando um cenário outoniço.

A mesa, composta por uma flor (com o “O” que completa os dois nomes do heterónimo: Alberto e Caeiro), é feita com dois “r’s” simétricos e um T, esticado depois de aplicar o “Split”. O nome do heterónimo foi, assim,  escrito simetricamente e aponta simbolicamente para um espaço de vida e de verde à volta da mesa onde se encontra pousada a flor. Rodeada ainda pelo castanho das folhas, como um mundo mortiço e desgastado, pelo homem que o transforma e nele procura significado para tudo.

Para além da acima descrita, a outra razão pela qual decidimos usar a cor nesta composição foi precisamente para reforçar o seu efeito. O castanho e o verde são as cores mais presentes na natureza e ajudam à compreensão imediata da imagem que, por limitações técnicas, não é tão clara e elucidativa como a princípio se pretendia.

Ainda assim, o resultado foi bastante satisfatório dado ao contexto. Uma nota para o nome do heterónimo (era requerido no enunciado que estivesse presente) que surge no extremo direito da imagem.

 

Ricardo Reis

“
Ser-me-ás suave à memória lembrando-te assim - à beira-rio,

Pagã triste e com flores no regaço.”

O que se pretendia com a composição relativa ao heterónimo Ricardo Reis era ilustrar o excerto do poema, recorrendo à tipografia. Como elementos de presença obrigatória tínhamos a pagã triste, que é o tema central do poema, o rio que passa, como a vida, e o Sol que simboliza a efemeridade do dia, a imediatez do presente e que vai ao encontro da filosofia do “carpe diem” deste heterónimo.

Assim, optamos por criar uma composição mais simples e mais vaga, como a memória que o poeta evoca no poema. Como que substituindo a figura da pagã triste, as duas palavras aparecem na margem do rio. O “A” da palavra “Pagã” foi alterado para conferir a ideia de feminino, recorrendo ao “til” para simbolizar o cabelo ondulando ao vento, e preenchendo a letra com a cor preta, de modo a moldar-lhe um corpo. Na palavra triste, a lágrima que escorre da letra “i” foi desenhada para reforçar o sentido da palavra.

Para recriar o rio recorremos à mesma técnica usada para desenhar a vinha. Com a "Pencil tool" criaram-se as linhas que representavam a ondulação e o movimento da água, procedendo-se à "fusão" do texto com esses contornos.

Por fim, o sol. Primeiro desenhou-se uma circunferência e de seguida uma caixa com o texto de 24 linhas que servia de matéria-prima à composição. Usando o “Paste special”, este texto foi recortado na forma da circunferência. Por fim, o nome do heterónimo surge em destaque, pintado de preto (o resto do texto está a cinzento), por entre as frases que dão corpo ao sol.

 

Álvaro de Campos

 

“Ó rodas, Ó engrenagens, r-r-r-r-r-r-r eterno!

Forte espasmo retido dos maquinismos em fúria!”

Álvaro de Campos. O heterónimo do futuro e da revolta. O Maquinista. A palavra fúria, a chaminé, o fumo, o relógio e as rodas dentadas são talvez os símbolos que mais se relacionam com ele.

Usando o texto de 24 linhas, pretendíamos dar a ideia do fumo que sai duma chaminé. A chaminé foi desenhada com a "Line tool" e substitui a letra “i” na palavra Fúria. A letra “A” foi alterada e engrossada, de modo a reforçar visualmente o sentido da palavra. Para o fazer, recorreu-se à opção “Split”.

Nesta composição decidimos não criar nenhum cenário, nem dispor os elementos logicamente e de forma organizada. Isto para ir ao encontro da personalidade do heterónimo e do excerto que servia de ponto de partida. O passo seguinte foi desenhar a roda dentada em forma de relógio. Para isso, retirou-se uma imagem "bitmap" da Internet e recorrendo à ferramenta “Trace” esta foi convertida para formato vectorial.

De seguida, aumentamos diâmetro da circunferência branca que ocupa o centro da roda dentada, para que esta se assemelhasse mais à forma de um relógio. Posto isto, e usando a imagem de um relógio como referência, desenhou-se os traços correspondentes às 12 horas. Por fim, com a opção “Attach to path” colocamos o texto desejado nas linhas dos ponteiros do relógio. Entre este texto encontra-se o nome do heterónimo.

Tipografia - Recolha de exemplos

Aqui ficam alguns exemplos que resultaram de uma pesquisa, e que serviram como referência para o projecto 2 - Tipografia.