De olhos bem abertos | Arquitetura de Informação

De olhos bem abertos

Posted on março 31, 2011 by Fabricio Teixeira

“Lá na ala da Psicologia da Universidade de Newcastle tem um cantinho do café. Aquela formação clássica: uma garrafa térmica de café, outra de leite, outra de chá. E uma tabelinha com os preços. E também uma caixinha para deixar o pagamento. É assim que funciona o cafezinho por lá, há muitos anos.”

Tudo na base da confiança.

Daí fizeram o seguinte teste: durante 10 semanas colocaram diferentes quadros na parede do café. Em uma semana, colocavam um quadro com flores. Na semana seguinte, colocavam uma foto de close de olhos humanos.

Quando compararam o valor arrecadado nas semanas “quadro com flores” com o valor das semanas “olhos humanos”, quais foram os resultados? A quantidade de dinheiro deixada na caixinha era até 3 vezes maior nas semanas em que havia alguém olhando (mesmo que esse alguém fosse apenas um par de olhos em uma fotografia).

Gráfico com o dinheiro arrecadado semana a semana

Via Update or Die.

Associações rápidas:

Esse é um bom lembrete de o quanto o Visual Design influencia na taxa de conversão de um sistema. Placeholders no lugar das imagens agilizam o trabalho do arquiteto. Mas na hora de testar, nada como ter imagens semelhantes às que serão usadas no layout final da interface.

“Deixar o dinheiro na caixinha” é normalmente um ato solitário. É o comportamento do “usuário” quando ninguém está por perto. Qualquer semelhança com o ato de navegar em um site não é simples coincidência.

Só como curiosidade: reparem que quanto mais estranho/intenso o olhar, mais dinheiro foi arrecadado. Não, isso não quer dizer que imagens bizarras funcionam melhor. Você entendeu. Use isso a seu favor.

Isso me lembrou de uma apresentação que foi publicada aqui no blog há um tempo, onde fizeram um exercício comparativo de eyetracking. Reparem na diferença de onde o olhar da pessoa permanece por mais tempo (área avermelhada) em uma foto e em outra. E só mudaram a posição dos olhos da modelo.

Diferentes versões de um mesmo anúncio

Resultados do eyetracking

Leia também:

viaDe olhos bem abertos | Arquitetura de Informação.

ROI em User Experience | Arquitetura de Informação

ROI em User Experience

Posted on fevereiro 2, 2011 by Fabricio Teixeira

Algumas dicas sobre como comprovar o retorno de investimento (ROI) em um trabalho de User Experience Design. Muitos dos argumentos nós já estamos bem acostumados a ouvir e usar, mas é sempre interessante enxergar novas formas de se contar uma mesma história.

(Se você está lendo este post via RSS e o vídeo não abrir, veja-o no blog)

viaROI em User Experience | Arquitetura de Informação.

 

Como a internet está mudando o cérebro humano | Arquitetura de Informação

Como a internet está mudando o cérebro humano

Posted on janeiro 26, 2011 by Fabricio Teixeira

(Se você está lendo este post via RSS e o vídeo não aparecer aí em cima, veja-o no blog)

Mais um vídeo garimpado do Big Think. Segundo Nicholas Carr, autor do livro The Big Switch, a internet está mudando a forma como o cérebro humano se relaciona com o consumo de informação. À medida em que nos adaptamos ao ambiente da internet – esse ambiente super populado e repleto de distrações – nosso cérebro adquire novas habilidades e acaba perdendo outras.

Estudos mostram que o uso frequente das mídias digitais aumenta nossa habilidade de visão, de distinguir novos padrões e de perceber quando muitas coisas acontecem simultaneamente em uma única tela.

Mas ao mesmo tempo, esse novo hábito de consumir informações paralelas faz com que percamos o foco e a capacidade de prestar atenção com profundidade a uma única tarefa. Isso influencia também nossa habilidade de armazenar informações, o que acaba enfraquecendo nossa memória.

Segundo ele, o ser humano está perdendo a capacidade do “solitary thinking”. A web força as pessoas a utilizarem o scanning, o multitasking – e a deixarem de lado o pensamento em profundidade. Os sintomas incluem também adaptações físicas: novos neurônios são formados e os neurônios que já existem adquirem novas terminações nervosas por causa desses novos hábitos.

A boa notícia é que o cérebro humano tende a aperfeiçoar aquilo que ele faz com frequência. Será que a internet está formando apenas uma geração de craques em usar a internet?

viaComo a internet está mudando o cérebro humano | Arquitetura de Informação.

O design de interface dos campeões | Arquitetura de Informação

O design de interface dos campeões

Posted on janeiro 4, 2011 by Fabricio Teixeira

Ainda na onda das retrospectivas do ano que acabou de acabar, encontrei esse post que retomava as 12 melhores ideias em Interface Design de 2010. Escolhi minhas 6 ideias preferidas e detalhei mais sobre elas aqui no blog, para quem ainda não teve a oportunidade de conhecê-las. Interessante como algumas incorporam tecnologias e referências do mundo geek em objetos cotidianos. Uma bela dose de inspiração para o ano que acaba de começar 🙂

Gesture Remote

Ao invés daqueles controles remotos cheios de botões e opções pouco utilizadas, que tal um controle remoto que responde a gestos? O gadget, que parece inspirado nos trackpads e magic mouses da vida, permite que o usuário troque de canal, ajuste o volume e até navegue por sites de relacionamento apenas movimentando o dedo sobre o aparelho. Confira o vídeo de demonstração:

Mozilla Seabird

O celular-conceito criado com colaboração do Mozilla Labs possui um sistema que projeta a interface do telefone em outra superfície, resolvendo o problema de falta de espaço na tela dos aparelhos. O próprio teclado é projetado na mesa em tamanho maior para melhorar a usabilidade das teclas. Futurista demais?

John’s Phone

Menos é mais. Dizem. Daí que criaram um telefone que faz exatamente o que um telefone foi concebido para fazer: receber e efetuar ligações para outros telefones. Mais nada. A ideia é simplificar ao máximo o aparelho, retirando todas as funções que seriam inúteis ou inacessíveis para muitos dos usuários. Assim qualquer um consegue usar.

Speed Dial

Ao invés da tradicional combinação numérica, uma nova interface para cadeados: o segredo é destravado com uma sequência de movimentos direcionais para cima, para baixo e para os lados. Segundo os criadores do projeto, a lógica é que os movimentos direcionais são mais intuitivos do que os números, principalmente para pessoas mais velhas ou com alguma deficiência visual – já que você não precisa olhar para o cadeado para destravá-lo. Também te lembra a tela de unlock dos celulares Android?

Ideo ATM

Também em 2010, a Ideo desenvolveu para o banco BBVA um projeto de caixa eletrônico com interface touch, como já mostramos aqui no blog – o que eles chamam de Future of Self Service Bank. Um único orifício para cartões, dinheiro e recibos, além de uma interface extremamente simplificada para evitar confusões na hora de realizar uma operação. A máquina também lida muito bem com a transição entre o digital e o físico na hora de entregar o dinheiro e os recibos – veja no vídeo-case do projeto.

Flipboard

O design do webdesign sem o design do caburetê. Qualquer que seja o nome dessa onda minimalista do design, parece que ela ganhou muitos adeptos em 2010. Um deles foi o Flipboard, aplicativo de iPad que promete melhorar a experiência de navegação na hora de consumir conteúdo (seja de um blog, do seu Google Reader ou de algum site de rede social que você faça parte). Abaixo o vídeo de apresentação do aplicativo.

Mais? Veja aqui a lista completa.

viaO design de interface dos campeões | Arquitetura de Informação.

Um pouco de atraso não faz mal a ninguém | Arquitetura de Informação

Um pouco de atraso não faz mal a ninguém

Posted on dezembro 21, 2010 by Fabricio Teixeira

Este excelente post traz dois casos interessantes onde os desenvolvedores adicionaram um atraso proposital a determinado sistema para melhorar a percepção que as pessoas tinham sobre ele.

O primeiro caso é o das máquinas Coinstar.

“Coinstar é um ótimo exemplo. A máquina é capaz de calcular o troco quase instantaneamente. No entanto, durante os testes a empresa percebeu que os consumidores não confiavam muito na máquina. Eles achavam impossível que uma máquina contasse as moedas com tanta precisão em uma velocidade tão rápida. Preocupada com a desconfiança das pessoas, a empresa começou a repensar a experiência do usuário. A solução foi simples: a máquina continuava contando o troco na mesma velocidade, mas mostrava os resultados em um ritmo muito mais lento. Na verdade, o som do troco percorrendo o interior da máquina era apenas uma gravação tocada através de uma caixa de som. Alterar a experiência do usuário para atender às expectativas ajudou a aumentar a confiança dos consumidores no esforço necessário para cumprir a tarefa.” (daqui)

O segundo é sobre o Blogger.

“Participei de um workshop de redesign do Blogger em 2004, quando Jeff Veen da Adaptive Path e Douglas Bowman do stopdesign.com falaram sobre suas experiências redesenhando o Blogger. Uma das coisas que eles perceberam em testes com usuários foi que quando eles clicavam em “Criar meu blog” na última etapa do processo, eles ficavam confusos com a rapidez com que o blog era criado. ‘É só isso? Deu alguma coisa errada?’ – perguntavam. Então eles adicionaram um passo intermediário que dizia ‘Criando seu blog…’, que não fazia nada a não ser mostrar um gif animado e esperar alguns segundos antes de direcionar o usuário para a página ‘Viva, seu blog foi criado!’. Os usuários ficaram muito mais satisfeitos com a experiência que demorava mais.” (daqui)

Segundo o autor do post, “ter que adicionar atrasos à interface é completamente equivocado”. Isso porque, segundo ele, o sistema está se adaptando a um modelo mental incorreto que os usuários têm, e nada está sendo feito para mudar isso. Para ele, a honestidade deve sempre vencer a desonestidade – tanto que o Blogger já retirou do ar esse atraso na hora de criar um blog.

E você, o que acha? Vale a pena adicionar um atraso intencional em uma interface para valorizar o sistema? Vale uma pequena “mentira” para aumentar a sensação de confiança que os usuários têm no seu produto? Comente e compartilhe 🙂

viaUm pouco de atraso não faz mal a ninguém | Arquitetura de Informação.

A estratégia de informação dos cardápios | Arquitetura de Informação

A estratégia de informação dos cardápios

Posted on novembro 22, 2010 by Fabricio Teixeira

Gosto muito de olhar cardápios de restaurantes e entender a estratégia comercial por trás daquele emaranhado de nomes, preços e fotografias. Alguns são tão bagunçados que eu adoraria poder reorganizar e entregar uma nova proposta para o dono (isso já foi assunto aqui nesse blog).

Imaginem minha felicidade, então, quando me deparei com o artigo Neuro-Menus and Restaurant Psychology e pude confirmar algumas das táticas que já havia observado por aí.

Vamos a algumas delas:

Preços-chamariz

Consiste em adicionar um produto nitidamente inferior com preço similar ao dos melhores produtos para valorizar e aumentar as vendas destes últimos – através de uma estratégia conhecida como Decoy Marketing. A ideia não é vender o produto que foi propositalmente adicionado ao cardápio, mas sim valorizar o produto que vem na sequência.

Veja este experimento feito com as ofertas de assinatura da revista The Economist:

Cenário A

$59 – Internet Only Subscription (escolhido por 68 pessoas)

$125 – Internet and Print Subscription (escolhido por 32 pessoas)

Ganho previsto a cada 100 pessoas – $8,012

Cenário B

$59 – Internet Only Subscription (escolhido por 16 pessoas)

$125 – Print Only Subscription (escolhido por 0 pessoas)

$125 – Internet and Print Subscription (escolhido por 84 pessoas)

Ganho previsto a cada 100 pessoas – $11,444

A mesma tática é usada também em cardápios de restaurantes:

“Some restaurants use what researchers call decoys. For example, they may place a really expensive item at the top of the menu, so that other dishes look more reasonably priced; research shows that diners tend to order neither the most nor least expensive items, drifting toward the middle. Or restaurants might play up a profitable dish by using more appetizing adjectives and placing it next to a less profitable dish with less description so the contrast entices the diner to order the profitable dish.” (do New York Times – Using Menu Psychology to Entice Diners, por Sarah Kershaw)

O preço sem preço

O símbolo $ (sozinho ou acompanhado de US$ ou R$), causa uma mudança comportamental conhecida como a “dor de pagar“. Alguns cardápios são desenhados de forma a evitar que as pessoas se lembrem que terão que pagar dinheiro de verdade por aquele prato. Uma mudança simples inclui alterar de R$11,00 para 11, para minimizar a aparência monetária do preço.

“A study published in the spring by Dr. Kimes and other researchers at Cornell found that when the prices were given with dollar signs, customers (…) spent less than when no dollar signs appeared. The study, published in the Cornell Hospitality Report, also found that customers spent significantly more when the price was listed in numerals without dollar signs, as in ’14.00′ or ’14′, than when it included the word ‘dollar’, as in ‘Fourteen dollars’. Apparently even the word ‘dollar’ can trigger what is known as ‘the pain of paying’.”

Adjetivos a rodo

Utilizar adjetivos no descritivo do cardápio ajuda a convencer os estômagos famintos da qualidade e do sabor de determinado prato. Susan Franck, vice-presidente da rede de restaurantes Huddle House, nos EUA, sugere que uma forma de aumentar as vendas é “romancear” a descrição dos ingredientes.

Não há quem resista a “alface fresca”, “ovos selecionados da fazenda” ou “finas fatias de queijo”, não é mesmo?

Quem já leu o verso da embalagem do sorvete Diletto sabe do que estamos falando.

“Um olímpico e exclusivo gelato feito a partir de panna di latte italiano, açúcar de beterraba italiano e os premiados pistaches verdes da fazenda Podere di Bronte, aos pés do vulcão Etna, considerado o melhor solo do mundo para o cultivo do fruto.” – Precisava tanto?

Design, é claro

Por último, o bom e velho design é um dos ingredientes que ajudam a vender melhor o cardápio. Respiros, boxes, elementos gráficos e fotos, quando bem usados, podem deixar o cardápio com um ar mais “sofisticado”, “fun”, “moderno” – dependendo do tipo de restaurante.

Mas o que isso tem a ver com Arquitetura de Informação?

Tenho essa fascinação por cardápios porque eles são um ótimo exercício de organização de informação, hierarquia, diagramação e uso de recursos visuais para fazer uma das coisas que o arquiteto de informação mais gosta de fazer: entender e (tentar) prever comportamento das pessoas.

Assim como na web, existe o feedback instantâneo do que funciona ou não funciona, e o resultado impacta diretamente nas conversões (vendas).

Um cardápio confuso vai gerar mais dúvidas a serem tiradas pelo garçom, congestionando um canal de atendimento que poderia ser usado para outra coisa. Um cardápio bem organizado acaba até reduzindo o tempo que a pessoa passa no restaurante – desocupando a mesa antes para novos consumidores.

Quando os cardápios passarem a ser digitais, será que teremos AIs trabalhando em restaurantes? Tô dentro 🙂

viaA estratégia de informação dos cardápios | Arquitetura de Informação.

Algumas dicas de Acessibilidade | Arquitetura de Informação

Algumas dicas de Acessibilidade

Posted on novembro 3, 2010 by Fabricio Teixeira

Há alguns dias o ThinkVitamin lançou uma série de vídeos-tutoriais sobre acessibilidade e sobre como deixar o seu site acessível.

Ao contrário do que muita gente pensa, cuidar da acessibilidade de um site não significa apenas torná-lo navegável para pessoas cegas. Existe uma série de medidas simples que podem evitar dificuldades de navegação pelos mais diversos públicos: pessoas que lêem mais devagar, pessoas com dificuldades em usar o mouse, pessoas com problemas de visão, pessoas idosas, pessoas que utilizam outros dispositivos para navegar em seu site, pessoas com problemas de audição, entre outras.

Repeti propositalmente a palavra “pessoas” para evitar o distanciamento causado pelo termo “usuários”. Acessibilidade é pensar cada vez mais em indivíduos e evitar a generalização emburrecedora.

Abaixo algumas dicas sobre Visão:

(Se você está lendo este post por RSS e o vídeo não abrir, assista-o no blog)

Daltonismo

O daltonismo vermelho/verde atinge cerca de 7% dos homens nos EUA, algo em torno de 10,5 milhões de pessoas no país – imagine no mundo. Existe também o daltonismo completo, onde a pessoa enxerga tudo em escala de cinza. Criar um layout à prova de daltonismo é um grande desafio para os designers, mas a solução é bastante simples: testar o seu layout em grayscale em algum software de edição de imagens, como o Photoshop. O vídeo ainda dá alguns guidelines interessantes, como “não confie somente nas cores para separar blocos de conteúdo”.

Baixa visão

É a visão reduzida mesmo quando o indivíduo utiliza óculos ou lentes de contato. Algumas das patologias que podem causar a baixa visão são: catarata, glaucoma, miopia, degeneração macular da idade, retinopatia causada por diabetes, retinose. Tais problemas acarretam em uma baixa percepção de luz, visão nublada ou visão desfocada.

Exemplo de imagem vista por uma pessoa com Catarata

Evite tamanhos de fonte absolutos

Ainda é um pouco complicado fazer com que seu layout seja ajustável a todas as resoluções, mas algo que você pode fazer é permitir que o texto corra livremente pela estrutura da página, usando tamanho de fonte relativo (e não absoluto). Dessa forma, quando o usuário aumentar o tamanho do texto, o site não aparecerá desconfigurado.

Evite utilizar texto em imagens

Sempre que possível, substitua os textos que aparecem nas imagens por textos de sistema. Isso porque muitas pessoas navegam utilizando leitores de tela, ou mesmo para evitar que esse texto fique ilegível em resoluções/dispositivos diferentes daquela em que você mesmo costuma visualizar o seu site.

Exemplo de logotipo que utiliza texto dentro da imagem

Evite textos que se movem ou piscam

Pessoas com baixa visão normalmente lêem em um ritmo mais lento do que as outras pessoas. Por isso, vale a pena evitar textos em “marquee” (como normalmente são exibidos os indicadores da bolsa de valores) ou textos que trocam com uma frequência muito rápida.

O blog também lançou alguns vídeos que exemplificam como aplicar essas e outras medidas durante o processo de trabalho:

viaAlgumas dicas de Acessibilidade | Arquitetura de Informação.

Mecanismo anti-idiotas | Arquitetura de Informação

Mecanismo anti-idiotas

Posted on outubro 19, 2010 by Fabricio Teixeira

Acho que todo mundo já passou pela experiência de escrever um e-mail, conferir os destinatários e a ortografia do texto, apertar o Send e… perceber que esqueceu de anexar o arquivo. É terrível. Você se sente um idiota, a pessoa que recebe o e-mail te acha um idiota e se bobear até sua mãe te chamaria de idiota por causa disso.

Mas foi pensando nesse problema que o Google incluiu um alerta inteligente ao clicar em Send, que reconhece o verbo “anexar” no corpo do e-mail e pergunta se o usuário não está se esquecendo de nada:

Ei, seu idiota.

O recurso já funciona há alguns meses, mas somente essa semana ele foi realmente útil para esse idiota que vos escreve. Parece difícil ter diferenciais em uma interface tão padronizada como a de serviço de e-mail – mas parece que não para o Google. É o típico exemplo de melhoria de usabilidade aplicada às necessidades reais do usuário.

Update: descobri que o Twitter também exibe uma dessas mensagens quando você tenta tuitar duas vezes seguidas o mesmo texto.

viaMecanismo anti-idiotas | Arquitetura de Informação.

Distrações do mundo físico | Arquitetura de Informação

Distrações do mundo físico

Posted on setembro 14, 2010 by Fabricio Teixeira

“Shadow, Glare” é uma obra de arte que explora a percepção do usuário. Uma aplicação instalada no computador cria lentamente uma sombra que aparece sobre a informação que está sendo vista na tela.

A sombra é, na verdade, uma imitação da sombra que existiria caso alguém ou algum objeto bloqueasse a luz natural do ambiente.

Segundo o autor, milhares de e-mails, updates e outras informações disputam a atenção do usuário diariamente – mas algumas vezes a visualização é interrompida por propriedades do mundo físico.

“Shadow, Glare” é um lembrete de como a atenção pode ser fragmentada por elementos que vivem dentro e fora da tela. Muitas das distrações que o usuário experimenta não moram nos elementos da interface – e sim fora dela.

viaDistrações do mundo físico | Arquitetura de Informação.