mauro pinheiro

Saúde alimentar em ícones

O supermercado Hortifrutti tem um histórico de tentar informar aos seus clientes os benefícios do consumo de hortaliças e frutas. Há algum tempo lançaram folhetos com informações sobre os alimentos. Cada fruta ou verdura tinha um folheto com dados nutricionais, usos medicinais, crendices etc. A idéia era que os clientes levassem e colecionassem os folhetos, formando uma pequena enciclopédia com informações relativas à saúde alimentar. O único “porém” é que os folhetos não estavam acessíveis no mesmo lugar que as hortaliças e frutas (ficavam no caixa), e estavam sempre mudando (não era possível ver todas as fichas ao mesmo tempo). Na hora de comprar, como saber qual o benefício de cada alimento? Só mesmo aprendendo e confiando na memória.

Essa semana vi uma nova experiência bem interessante no mesmo Hortifrutti (na loja Dias da Rocha, em Copacabana, mas acredito que tenha sido implantado em todas as lojas). Os carrinhos de supermercado agora vêm equipados com uma tabelinha com diversos ícones. E nas gôndolas, cada fruta ou hortaliça apresenta um conjunto de informações, também em forma de ícones. A idéia parece ser informar de maneira bem sintética os benefícios do consumo de cada alimento disponível na loja.

Família completa de ícones criada para o Hortifrutti, para identificar os benefícios dos alimentos à saúde. A tabelinha fica presa nos carrinhos do supermercado.

Nas gôndolas, cada fruta ou hortaliça recebe uma ficha com os ícones que representam os benefícios trazidos pelo consumo daquele alimento. A dificuldade é associar corretamente os ícones aos seus significados. Só mesmo com o guia, sabiamente colocado no carrinho.

A idéia é muito simpática. A realização nem tanto. É muita informação pra ser comunicada com ícones. Até o sujeito aprender o “alfabeto” todo, deve demorar um bom tempo (se é que se aprende). E alguns ícones são muito difíceis de identificar. Por exemplo, a diferença entre o ícone relativo à prevenção do câncer e o relativo à redução de triglicerídeos é muito sutil. Pra complicar, ainda tem um conjunto de variações cromáticas, que até agora não entendi porque não foi resolvido da mesma forma (com ícones, ao invés de cores — pobres daltônicos!).

Além da questão do design da informação, há ainda um probleminha quanto ao design de produto – o suporte do guia que fica no carrinho não parece muito bem adequada ao espaço, a solução atual ainda precisa de algum trabalho.

De qualquer maneira, é um exemplo interessantíssimo de design de informação aplicado em uma situação tão corriqueira quanto fazer compras no supermercado. E é também uma preocupação louvável do Hortifrutti em esclarecer os seus clientes sobre os benefícios de uma alimentação baseada em hortaliças e frutas.

Design de Interação e Computação Pervasiva

Estou preparando uma disciplina para o semestre que vem (2011.2), na UFES. Vou tratar de Design de Interação e Computação Pervasiva, assuntos que discuti na minha tese de doutorado (a ser defendida em Agosto!).

Cartazete que fiz para anunciar a disciplina na UFES. Veja uma versão do cartaz evidenciando o seu grid, no meu Flickr.

A proposta é incluir essa disciplina como uma optativa do curso, mas por enquanto será ofertada como um tema dentro da disciplina optativa Tópicos Especiais em Design. A desvantagem de oferecer essa disciplina como ‘Tópicos Especiais’ é que no histórico dos alunos não há como saber qual o assunto da disciplina – a ementa da disciplina ‘Tópicos Especiais’ é genérica, independente do que seja tratado. Mas essa foi a maneira encontrada para poder oferecer esse tema já no próximo semestre. No futuro, a disciplina deverá ser incorporada à grade, com código, ementa e programa próprios. Assim os alunos poderão ter o registro correto no seu histórico escolar.

Essa vai ser a minha primeira experiência na UFES com esse tema. O formato ainda não está claro, quero ver a resposta da turma ao longo do semestre pra definir a melhor abordagem em sala de aula.

3 em 1: Blogs e Publicidade

Na última quarta-feira (25 de maio) participei do projeto 3 em 1, organizado por alunos do curso de Comunicação Social da UFES. Segundo o site do projeto, o objetivo é “aproximar os estudantes e professores do curso de Comunicação Social à realidade mercadológica.” Para isso, 3 profissionais são convidados a apresentarem pequenas palestras sobre temas relacionados à publicidade, ao que se segue um debate/mesa redonda com os palestrantes e a plateia.

Da esquerda para direita, os convidados: Celso Hora, Mauro Pinheiro (eu!) e Ivo Neuman

Achei o evento bem animado, bem organizado, com uma platéia lotada e participante. De minha parte, não pude preparar muita coisa, envolvido com a finalização da tese. E tenho pouco a dizer sobre a publicidade, campo com o qual nunca tive qualquer contato ou afinidade. Mas procurei falar sobre minha experiência anterior com blogs, como usuário, como criador, lembrando ainda dos projetos que tocamos na época da Globo.com. Espero que tenha sido de algum interesse pra platéia!

Devo dizer que aprendi com os colegas. Ando afastado dos bastidores da web, foi interessante ouvir o Ivo Neuman, um “blogueiro” que dedica-se a fazer do seu blog uma fonte de renda e o Celso Hora, da área de planejamento de estratégia digital da agência de publicidade 4Ps.

Agradeço ao pessoal do 3em1 pelo convite. :-)

Vejam fotos do evento no Flickr do Projeto 3 em 1.

Design nas coisas do cotidiano

Esse post não é uma referência ao Don Norman – mas bem podia ser.

Na verdade é só pra compartilhar uma experiência frustrada, fruto da falta de atenção ao projeto de embalagens. Um caso típico de como um projeto mal feito pode causar frustração, prejuízo, e eventualmente danos às pessoas.

A foto abaixo é de um conjunto de bisnagas do produto Araldite. Pra quem não conhece, é um adesivo à base de resina epóxi. O produto é apresentado em duas bisnagas: uma delas contém o adesivo propriamente dito, a outra contém um catalisador que acelera o processo de endurecimento da resina. Para usar o adesivo, é preciso misturar o conteúdo de ambas as bisnagas.

As bisnagas de araldite. Estariam as tampas corretas? Misturou, colou.

Ocorre que as tampas das bisnagas são facilmente confundidas. Ambas as bisnagas usam as cores vermelho e amarelo, de maneira que as tampas – uma amarela, outra vermelha – podem ser trocadas sem que se perceba.

Sempre que uso Araldite, tenho o cuidado de prestar atenção em qual tampa vai em cada bisnaga. Mas um dia me descuidei e troquei as tampas. Ora, cada tampa tinha resíduos do conteúdo de sua bisnaga – adesivo e catalisador. Uma vez em contato com o seu par, ambas endureceram ao ponto de se tornar impossível abrir novamente a tampa.

Isso seria facilmente evitado se cada embalagem usasse somente uma cor. O sentido de conjunto permaneceria por outros elementos (como a tipografia e a própria composição da embalagem, idêntica em ambas as bisnagas), sem prejuízo da identidade visual do produto. E com mínimas chances de trocar as tampas, uma vez que corresponderiam exatamente a cor da bisnaga em questão. Não é preciso ser um gênio em Design da Informação. Basta bom senso.

Fico imaginando que pessoas com a mesma falta de cuidado ao projetar essas embalagens estão por aí, projetando embalagens de remédios e outros itens, que podem trazer prejuízos bem mais sérios e mais caros às pessoas do que uma simples bisnaga de adesivo impossível de abrir.

Sistemas peculiares de navegação no espaço urbano

De volta a Vitória, revivo algumas particularidades desta capital que, de certa forma, mantém algumas características de cidade pequena. Em Vitória existe uma lógica de mapeamento do espaço urbano que é muito peculiar, e que causa estranhamento em quem vem de fora.

Aqui o nome das ruas é uma informação de pouca valia. As pessoas se orientam por outras referências. Lojas, supermercados, grandes marcos arquitetônicos são os pontos utilizados para construir o mapa mental da cidade, e servem de norte aos moradores.

Em cidades pequenas não é incomum que se utilizem referências como “a venda do Seu Antônio”, a “praça da feira”, “uma casa amarela com varanda na frente”. O número reduzido de ruas e pontos de referência torna possível que a maioria dos habitantes conheça essas informações. Da mesma forma, os nomes ‘oficiais’ das ruas muitas vezes não são importantes nesses lugares – especialmente quando mudam ao sabor dos desejos dos políticos locais.

Na minha volta para Vitória precisei procurar um apartamento para alugar. Me chamou atenção como o nome dos prédios é a informação principal nas imobiliárias. Diversas vezes, ao perguntar onde ficava o imóvel anunciado, me diziam “é no edifício Costa Nobre”. Quando eu dizia não fazer idéia de onde era o “famoso” edifício, me citavam pontos de referência. “Fica perto da DIT”, “é na rua do Debonis”. “Perto do Banco do Brasil”. “Na rua do Banestes”. Quando, enfim, eu pedia o endereço do imóvel, as atendentes precisavam buscar essa informação no sistema. Se perguntasse pelo número do prédio era sempre uma dificuldade. É como se essas informações não fossem importantes aqui.

Para quem vem de fora, o estranhamento é evidente. Apesar da capital do Espírito Santo ser uma cidade em franco crescimento, parece ainda utilizar a lógica das cidades pequenas. Mas com a profusão de prédios novos, lojas e as mudanças cada vez mais rápidas na ocupação do espaço, até mesmo os moradores começam a dar sinais de que esse sistema não basta.

É óbvio que, para quem não é da cidade, as referências utilizadas aqui têm pouco ou nenhum significado. O problema é que agora mesmo para alguns moradores essas referências começam a não serem claras. Desde a primeira vez em que vim para a capital capixaba, seis anos atrás, percebo como essa maneira de mapear a cidade gera conflitos, e desinforma mais do que ajuda. Já ocorreu, por exemplo, me pararem na rua para pedir informações sobre algum lugar. A pessoa queria ir para um determinado prédio, e me dizia o nome do prédio. Mas não tinha o endereço. Não sabia sequer o número do prédio, e assim não sabia se deveria subir ou descer a rua.

Isso foi em 2004. E agora, em fevereiro de 2011, ocorreu algo semelhante. Uma senhora me perguntou onde ficava um determinado órgão público, supostamente próximo de onde nos encontrávamos. Eu não fazia idéia, e perguntei se ela tinha alguma referência. A senhora não tinha o endereço, e não tinha qualquer outra referência. Vagava pelo bairro, e parecia acreditar que todos conheceriam o tal lugar.

De maneira semelhante, me vi na situação de tentar descobrir onde ficava um determinado prédio no Barro Vermelho, um bairro pequeno com não mais do que uma dezena de ruas. A corretora me informou apenas o nome do prédio e o nome da rua, uma vez que não estava mais na imobiliária e, portanto, não tinha como verificar o endereço correto. Ambos acreditávamos que essas informações seriam suficientes. Chegando ao bairro, ao perguntar aos moradores que passeavam por lá, ninguém sabia me dizer onde era o tal prédio. Como o prédio era um prédio novo, seu nome não era conhecido pelos vizinhos – e por que deveria ser? O nome da rua era desconhecido por todos. Fui salvo por um porteiro, depois de peguntar a diversos outros porteiros, sem sucesso.

Em Vitória é comum que os endereços incluam o nome do prédio. Ao nome da rua e número do prédio, acrescenta-se o nome do edifício, informação fundamental para os capixabas. Qualquer situação em que é preciso dar o endereço (por exemplo, para combinar a entrega de um eletrodoméstico), pede-se um ponto de referência e o nome do prédio.

É curioso como em cada lugar os moradores têm sua maneira de fazer o mapeamento do espaço. Em Copacabana, no Rio de Janeiro, ao dar o endereço de um imóvel localizado na Av. Nossa Senhora de Copacabana ou na Rua Barata Ribeiro, é comum que se informe também quais são as ruas transversais que delimitam aquele endereço. Isso porque somente o número do prédio é insuficiente para localizar rapidamente a altura em que este se localiza, ao longo destas ruas imensas que atravessam todo o bairro. Pergunte a um motorista de ônibus que trabalhe no bairro onde fica o número 720 da Nossa Senhora de Copacabana, e ele não saberá dizer. Mas se pedir que lhe avise quando chegar na Nossa Senhora de Copacabana na altura da rua Santa Clara, não terá problema algum em chegar ao local.

Quando viajei para Buenos Aires, resolvemos alugar um apartamento. O site que utilizamos dava como referência o nome da rua e um número que indicava a altura, sem no entanto informar o endereço exato – somente após firmar o negócio é que davam essa informação. Mas já era possível, por exemplo, identificar no Google Maps a quadra na qual se localizava aquele imóvel, e estudar suas cercanias: as informações fornecidas bastavam para sobrevoar o local pela Internet.

Em Londres, os motoristas de taxi também não utilizam somente os nomes das ruas como principal referência. Lá o código postal, equivalente ao nosso CEP, é uma chave para o mapeamento da cidade. Através da lógica de construção do CEP os taxistas conseguem localizar com razoável precisão uma área da cidade. Não sei bem como funciona, mas me parece que as letras iniciais indicam a região. Os números que se seguem delimitam com mais detalhe dentro daquela área. O nome da rua é o nível mais refinado. Quando estive nessa cidade, visitando uma amiga, tive essa experiência: o taxista não fazia idéia de onde ficava a rua, e me perguntou o CEP. Imediatamente pôs-se a caminho, e ao chegar no bairro, localizou facilmente a rua, e ficou irritado quando percebeu que passou do número, como se tivesse falhado em um jogo que ele mesmo criou. Aparentemente, o CEP é a chave necessária para que eles se localizem na cidade, mesmo sem conhecer todas regiões.

Acredito que o código postal seja um sistema universal, que poderia ser utilizado cotidianamente pelos moradores em cidades como o Rio, Vitória ou São Paulo. Mas por algum motivo, só é utilizado pelos funcionários dos Correios. Se soubessemos decifrar a lógica do CEP, provavelmente seria muito mais fácil nos deslocarmos nas cidades, tendo somente esta informação como referência.

Em Vitória a lógica peculiar de mapeamento dos espaços resiste aos sistemas padronizados e estabelecidos em outras cidades. Aqui, o Google Maps não conhece as referências utilizadas por seus habitantes. Por outro lado, as indicações dos moradores, por não fazerem parte do sistema oficial, não podem ser utilizadas em ferramentas como o Google Maps, ou mesmo nos aparelhos de GPS que já povoam os taxis do Rio e de São Paulo.

E o mais curioso é justamente quando o sistema “oficial” da cidade não se apropria da lógica natural de seus habitantes. A sinalização da cidade, o sistema de informação de linhas e rotas do transporte público no site da prefeitura – nada utiliza os códigos que estão vivos nas ruas. No sistema oficial, a lógica é a mesma de outras cidades, a despeito das características possivelmente únicas de como os capixabas fazem o mapeamento do seu espaço urbano.

Me parece uma oportunidade de investigação interessantíssima para o design de informação.

Banco do Brasil peca em usabilidade

Atualmente é raro eu ir ao banco. Mas depois de passar dias tentando, sem sucesso, realizar uma transferência no internet banking do Banco do Brasil, desisti e fui à agência mais próxima da minha casa.

Em uma coisa a gente tem que dar o braço a torcer. O Banco do Brasil ao menos é consistente. Se o internet banking deles é terrível – já escrevi sobre isso antes – o auto-atendimento é igualmente péssimo. As minhas experiências frutradas com o internet banking e com os caixas automáticos do Banco do Brasil dariam pra escrever um livro inteiro!

Hoje, durante uma operação de transferência, me vi forçado a usar 3 teclados diferentes na mesma máquina. Algumas telas apresentavam botões na própria interface gráfica, os quais eu deveria acionar pressionando diretamente a tela sensível ao toque. Mas outras telas me forçavam a escolher botões “físicos”, no próprio quiosque de auto-atendimento, localizados nas laterais da tela do computador. Era sempre um desafio relacionar o botão certo com as opções que apareciam nos cantos da tela. Cada opção supostamente fica posicionada em relação direta a um botão do quiosque, mas nem sempre dá pra ter certeza qual o botão certo a apertar. Cada tela apresenta um número de itens diferentes, então a relação dos itens com os botões externos muda a cada etapa. Toda tela exige atenção antes de escolher qual botão apertar.

Além desses dois meios de interação – botões “virtuais” na interface gráfica e botões físicos do quiosque relacinados a áreas na tela – em alguns momentos era necessário usar o teclado numérico no meio do quiosque.

Em uma determinada etapa do processo de transferência, tive que usar os TRÊS teclados para finalizar o preenchimento de um formulário, navegando em subopções, enfrentando jargões desconhecidos. Nunca me senti tão indefeso e inseguro realizando o que deveria ser uma operação simples de transferência bancária.

Se eu, que sou extremamente familiarizado com sistemas digitais, tive esse sentimento de insegurança, fico imaginando como não devem sofrer pessoas idosas com pouca prática.

Problemas de fluxo de navegação. Problemas de rotulagem dos botões. Uso excessivo de jargões. Problemas de arquitetura de informação.

Em suma: usabilidade zero. É sem dúvida um caso clássico de projeto mal feito. É uma bomba!

É uma pena que não pude tirar fotos da tela. Esse sistema mereceria uma análise detalhada de usabilidade.

Mas, para não perder a viagem, registrei uma coisa curiosa…uma outra prova de como o Banco do Brasil é consistente em ter soluções ruins.

No Banco do Brasil usa-se um sistema de senhas para organizar o atendimento nos caixas. Isso a princípio é ótimo, porque dispensa as filas. Os clientes aguardam sentados a sua vez. Mas a solução precisa de muitos ajustes. Mesmo quem consegue pegar uma senha fica confuso, porque atendimentos prioritários (como o de pessoas idosas) tem uma numeração diferente, e um caixa específico. A falta de sinalização eficiente faz com que muitos clientes não entendam a lógica do sistema e fiquem confusos, indo ao caixa errado, no momento errado.

Mas a coisa toda é ainda mais confusa. Da última vez que precisei usar os caixas, tive extrema dificuldade em conseguir iniciar o processo. Isso porque para pegar a senha é preciso usar um computador, com dezenas de opções confusas. Correntista, não-correntista, empresa, pessoa física, atendimento preferencial…são muitas telas, muitos passos. Tenho a impressão que complicaram mais do que deveriam.

Tanto é assim, que a agência próxima a minha casa resolveu o problema do sistema mal projetado de uma maneira inusitada: colocaram um rapaz para operar a máquina, já que a grande maioria dos clientes sofria para conseguir pegar uma simples senha.

Ao lado do terminal de auto-atendimento para retirada de senhas, um rapaz fica de prontidão para auxiliar os clientes. No tempo em que estive na agência, umas 7 pessoas pegaram senhas. Dessas, só um senhor se aventurou a operar sozinho a máquina. E ao final, pegou uma senha incorreta, tendo que voltar e pedir ajuda ao rapaz. Os outros clientes nem tentaram, pediram auxílio diretamente ao atendente.

Artigo apresentado no P&D Design 2010

Acabo de publicar o artigo que apresentei no 9º Congresso Brasileiro de Pesquisa em Design (P&D Design 2010). Neste artigo, discuto questões de acessibilidade relacionadas à falta de integração entre designers e implementadores.

A falta de conhecimento técnico sobre os meios de produção, acaba dificultando que os designers projetem sistemas capazes de serem acessados em múltiplas plataformas. Essa questão torna-se cada vez mais grave com o aumento dos meios de acesso (telefones celulares, tablets e outros mais que virão). A acessibilidade não se restringe apenas à garantir que pessoas com algum tipo de deficiência física possam navegar sem problemas em um site. Permitir o acesso em diferentes condições tecnológicas também é uma questão importante, mas, infelizmente, muitos designers envolvidos com projetos dessa natureza não se preocupam com esse assunto.

Essas e outras questões (como o método de “melhorias progressivas”) são exploradas no meu artigo: Do design à implementação: acessibilidade de websites e sistemas de informação digitais.