All posts by : admin

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

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

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

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

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

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.

O preço da boa legibilidade

Posted on outubro 1, 2010 by Fabricio Teixeira

As placas de ruas da cidade de Nova Iorque serão trocadas de caixa alta para caixa baixa.

Estudos mostraram que é mais difícil ler placas em caixa alta, e que esses milisegundos gastos olhando para fora da rua aumentam as chances de acontecer acidentes – especialmente entre os motoristas mais velhos.

“Mudar de BROADWAY para Broadway salvará vidas”, afirma a nova versão do Manual on Uniform Traffic Control Devices.

O tipo utilizado nas placas também mudou para o Clearview, uma fonte especialmente desenhada para esse propósito.

“These new and updated standards will help make our nation’s roads and bridges safer for drivers, construction workers and pedestrians alike.”, afirma o Secretário de Transportes da cidade.

O custo? US$110 por placa, US$ 27 milhões para toda a cidade.

viaO preço da boa legibilidade | Arquitetura de Informação.

Frustração catalogável

Posted on setembro 28, 2010 by Fabricio Teixeira

A caixa de buscas do Google é um universo à parte no que tange ao comportamento do usuário. Há algum tempo ela deixou de ser apenas um campo texto e passou a representar o ponto de partida de grande parte das tarefas realizadas na web. Com o tempo, passou a corrigir erros ortográficos, sugerir buscas relacionadas e – com o recente Google Instant – inclusive prever o que você está digitando.

Ainda assim, a busca do Google não está isenta de causar frustração nos usuários.

Usuária loucamente frustrada.

Agora imagine um mecanismo de busca que detecte essa frustação em tempo real e já sugira uma solução para o problema. É isso que o time de User Experience do Google vem tentando fazer e compartilha em seu blog.

“We gave users search tasks, some of which we knew to be difficult. The first couple of searches always looked pretty much the same independent of task difficulty: users formulated a query, quickly scanned the results and either clicked on a result or refined the query. However, after a couple of unsuccessful searches, we started noticing interesting changes in behavior. In addition to many of them sighing or starting to bite their nails, users sometimes started to type their searches as natural language questions, they sometimes spent a very long time simply staring at the results page, and they sometimes completely changed their approach to the task.”

Segundo o Google, além de mudanças faciais e corporais nos usuários que estão com dificuldades, ocorrem mudanças também na navegação.

“…those signals were: use of question queries, use of advanced operators, spending more time on the search results page, formulating the longest query in the middle of the session, and spending a larger proportion of the time on the search results page.”

Esses são os primeiros sinais de que sim, é possível que, no futuro, o computador identifique que o usuário está tendo dificuldades. É como se a frustração pudesse ser “catalogada” e identificada por uma inteligência artificial.

Sabemos que esse tipo de pesquisa monitorada (ou teste de usabilidade) é fundamental para que uma empresa tente entender melhor como as pessoas se comportam ao utilizar determinado serviço. Mas para o Google esse tipo de resultado deve ter um sabor especial.

Afinal, como ser inovador em um serviço que já está bem estabelecido e que as pessoas já sabem utilizar? Como evoluir a busca, que já é um processo tão simples, sem torná-lo complicado demais?

Não tem momento melhor para extrair esses insights do que ao observar pessoas.

viaFrustração catalogável | Arquitetura de Informação.