O que mais me impressionou foi a fluidez da interação e a qualidade da imagem. Nada daquela gambiarra de projeção interativa, que era a última moda até então.

Um novo serviço chamado Shopperception promete mensurar e analisar o comportamento dos consumidores e a forma como eles interagem com as prateleiras e gôndolas de determinada loja. Tudo isso usando apenas… um sensor de Kinect.

O equipamento usa o reconhecimento espacial dos sensores para monitorar continuamente a forma como os compradores interagem com os produtos na prateleira: quanto tempo eles gastam escolhendo o produto, quais produtos eles tocam, quais produtos eles seguram na mão, quais eles colocam de volta depois de lerem a embalagem e quais eles efetivamente compram.

A tecnologia ainda pode ser usada para testar e comparar a performance de diferentes disposições de gôndolas (assim como fazemos os testes A/B em websites, publicando duas variações da mesma página e vendo qual delas performa melhor).

Veja no vídeo abaixo como o sistema funciona:

Big Brother feelings, ainda? :)

Da geração que já nasce assim, digital.

via

• Tempo médio de acesso em 1996: 30 minutos por mês.
• Tempo médio de acesso em 2011: 27 horas por mês.
• Tempo médio de carregamento de uma página em 1996: 30 segundos.
• Tempo médio de carregamento de uma página em 2011: 6 segundos.

Confira mais detalhes na imagem abaixo:

O projeto mostrado no vídeo abaixo trata de um trabalho de conclusão de curso feito por um estudante norte-americano no ano passado. A ideia é disponibilizar estações de atendimento móveis de um desses serviços voluntários de apoio emocional – onde você telefona, conta seus problemas e alguém do outro lado da linha está pronto para ouvir e acalmar.

A pesquisa começou comparando o quanto as pessoas estão dispostas a falar sobre assuntos pessoais com um desconhecido: pessoalmente ou pelo telefone. Depois, identificou os locais onde as pessoas se sentem mais confortáveis para falar sobre esses assuntos e, consequentemente, onde essas estações móveis teriam mais chance de sucesso.

Assista abaixo.

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

O interessante é que mesmo em um projeto como esses, que não possui quase nenhuma interface digital, o papel do user experience designer é fundamental para que ele aconteça.

Tem muita interatividade, UX e pesquisa para serem feitas com tecnologia por aí. E cada vez menos wireframes :)

Bônus: dois cachorros jantando.

A companhia telefônica sueca “3 Sweden” criou uma interface audiovisual de atendimento ao consumidor, complementada por informações gerenciadas remotamente pelo atendente em uma tela multi-touch, em tempo real.

Parece complicado? Assista ao vídeo abaixo para entender como funciona.

(Se estiver lendo este post por RSS e o vídeo acima não abrir, assista-o no blog)

via

“Algoritmos computadorizados são ótimos, mas as pessoas ainda querem o elemento humano. Por isso que elas gostam de pegar notícias pelo Twitter. Há um humano por trás de cada uma delas”

Limor Elkayam, via.

Logo que o iPad foi lançado vi gente falando que era apenas um iPhone em fullscreen. Até cheguei a acreditar nisso, no início. Mas poxa vida, não dá para avaliar o valor de um livro se suas páginas ainda estão em branco. Somente depois do surgimento dos primeiros aplicativos é que o iPad começou a tomar forma e eu realizei que o hardware não significa nada sem o uso que as pessoas fazem dele. Abaixo dois belos exemplos – e no entanto bem simples – de coisas que não teriam a mesma graça no iPhone.

1.

2.

Ponto e vírgula;

Esses são 2 minutos dos 813 que durou a prova do líder do BBB10, realizada em meados de março. Foram mais de 7 milhões de votos, uma estrutura de servidores digna do livro dos récordes e muita gente morrendo de sono nos bastidores – tentando aguentar o pique dos participantes do reality show.

3:15 a.m. Equipe da AgênciaClick de plantão na agência

A prova, que teve a maior audiência da história de provas do líder do programa, reuniu dois ingredientes importantes para tanto engajamento do público: toneladas de interatividade com uma pitada de sadismo.

Mas passados a euforia e o sono, uma coisa chamou bastante atenção quando parei para pensar sobre a arquitetura de informação da prova. Ela segue por trilhas bastante diferentes da Arquitetura de Informação clássica, aparecendo desconstruída em sua forma e em seu processo. Suas preocupações são muito diferentes da AI à qual estamos habituados, e por isso resolvi compartilhar por aqui.

Listei abaixo algumas das excentricidades da AI desse projeto:

• Seis interfaces diferentes
  Site do grupo Azul, site do grupo Laranja, interfaces que ficavam dentro das caixas, uma interface de monitoramento dos votos e uma interface administrativa. A prova que parece simples – ouvimos gente dizendo que era “só uma enquete” – acabou se desdobrando em seis sistemas diferentes que precisavam estar impecavelmente sincronizados entre si.

• Um site em pop-up
  O espaço de interface que tínhamos era bem limitado. Isso porque o usuário precisava votar na enquete e assistir ao vídeo da prova ao mesmo tempo, em sites diferentes. A solução foi criar um site-pop-up, que abrisse ao lado do streaming de vídeo. Assim o usuário podia votar na próxima surpresinha ao mesmo tempo em que via os Brothers sofrerem as consequências dos votos – e esse “what you vote is what you get” acabou aumentando ainda mais a quantidade de interações.

• Outras resoluções
  Esqueça o 1024x 768, ou qualquer outro número que você tenha aprendido até hoje. Cada uma das 6 interfaces rodou em uma resolução diferente: pop-up, netbook, TV widescreen e até a resolução da mesa de edição da Rede Globo. Em poucos dias aprendemos tudo sobre PAL-M e NTSC – ou muito mais do que ambiciona qualquer um que trabalhe com web.

• Contraste resistente a fumaça
  Esqueça as preocupações de contraste que normalmente temos com os monitores de tubo e os de LCD. Isso é fichinha. O contraste da interface da prova precisava ser nítido o suficiente para resistir à fumaça fria que perambulava dentro das caixas, aos pingos de chuva que passavam em frente à câmera e às mudanças de luminosidade do local. E confesso: dependendo do ângulo e da câmera, algumas cenas não ficavam tão nítidas assim.

• A arquitetura dos cubos
  A arte que estampava a parede dos cubos também precisou ser pensada. Era preciso garantir que, independente de qual câmera estivesse filmando e de quantas pessoas aparecessem na cena, a cor da parede sempre identificasse qual era o grupo que estava sendo filmado: Azul ou Laranja. Arquitetura tridimensional, pra valer; planta alta.

• Uma interface admin à prova de nervosismo
  Além da prova acontecer ao vivo, ela ainda foi anunciada em horário nobre pelo próprio apresentador do programa. Uma falha, um clique errado, ou um nervosismo a mais por parte de quem estava controlando o sistema seriam naturais. Por isso, a interface de administração precisava ter um layout sóbrio, botões auto-explicativos e ainda ocultar qualquer ação que não pudesse ser acionada nem por engano.

• Servidores, tremei
  Assim que o Bial anunciou a prova, imediatamente milhares de pessoas começaram a votar pelo site. Foram mais de 600 pessoas clicando no mesmo botão a cada segundo. A estrutura de servidores precisava estar preparada para receber e contabilizar todas essas interações, e depois enviar os dados para as outras interfaces, sem falhas. Os servidores aguentaram tudo com  louvor, mas muitas telas de erro precisaram ser desenhadas e guardadas na manga para uma eventualidade.

Essa foi a última de uma série de provas do BBB10 desenvolvidas aqui na agência. Foi uma experiência e tanto. Conhecer a estrutura da Rede Globo, trabalhar nos bastidores do Projac, desenhar e testar cada detalhe, projetar para milhões de usuários e enfrentar desafios para os quais as respostas não estejam catalogadas em patterns e libraries. E o melhor: experimentar a interação em tempo real na televisão, como dito no início do vídeo.

Como li em um blog esses dias: já estão decretando o fim do wireframe.

Navegação gestual, simplificada e intuitiva (e mais uma porção desses adjetivos que vemos aos montes em listas de AI).

Pelo que o YouTube nos mostra, o que não falta é iniciativa brasileira em produzir algo similar.

Este ano a AgênciaClick aproveita a oportunidade do evento para aplicar um novo conceito em comunicação interativa: o Open Source Branding. A agência acredita que a comunicação de uma marca não deve ficar concentrada nas mãos de poucos representantes, mas sim das pessoas que recebem e interagem com a mensagem.

A onipresença de blogs, comunidades digitais, microblogs, comunicadores instantâneos e tecnologias móveis criou um habitat para a inteligência coletiva, onde imagens, ideias e palavras são continuamente assimiladas, reelaboradas e desenvolvidas pelas pessoas com quem interagem.

Interessante. Há pouco tempo as marcas zelavam fervorosamente pela integridade de sua imagem e tinham receio até de publicar seus logotipos no brandsoftheworld.com. Hoje já existem empresas fazendo campanha para estimular releituras, mashups e afins.

Open Source Branding na prática
Uma das novidades do Campus Party 2009 é o CP Labs, uma área dedicada a empreendedorismo e inovação, onde os próprios participantes do evento apresentam seus projetos e são premiados por isso. A AgênciaClick, em parceria com dois de seus clientes – Credicard Citi e Ale Combustíveis – propõe um experimento de criação coletiva: o laboratório de Open Source Branding. Ali, os campuseiros poderão responder a desafios criativos que envolvem produtos e serviços dessas duas marcas.

No site da AgênciaClick está disponível o Manifesto pelo Open Source Branding, na íntegra.

Old fashion mesmo só o Túlio da Try, que apareceu em um secular traje de escoteiro. Mas afinal de contas, estamos sempre alertas para a usabilidade, não? rs

CONTEXTO

Em 2006 as instituições Citigroup, Itaú e Unibanco concluíram o processo de cisão da sociedade que mantinham há mais de três décadas sobre a Credicard, a maior emissora independente de cartões de crédito do Brasil.

O Unibanco vendeu sua parte para os demais sócios, que dividiram a empresa em duas – Credicard Citi e Credicard Itaú.  A Credicard Citi, parte administrada pelo Citigroup, iniciou suas operações com uma base de 4,4 milhões de cartões, sendo 3,8 milhões originários da Credicard e 600 mil do Citi, tornando-se a 3ª maior empresa do país e representando 10% do faturamento do mercado brasileiro.

Na cisão a URL www.credicard.com.br passou a direcionar os clientes para suas novas administradoras. Apesar de estar em um endereço próprio, o portal www.credicardciti.com.br continuou compartilhando sistemas e plataforma de publicação com o Itaú, tornando necessária e urgente uma cisão tecnológica.

BRIEFING

A Credicard Citi encarou a cisão como uma oportunidade para corrigir a estrutura atual e alinhar a comunicação visual da nova marca. Para isso utilizou os conhecimentos adquiridos durante os 5 anos trabalhados no portal anterior com a AgênciaClick.

Uma nova leva de pesquisas, incluindo testes de usabilidade realizados pela Try Consultoria, benchmark e análise das métricas pela equipe de Data Intelligence da Click ajudaram a formatar o briefing do novo portal.

Amauri Zerillo, gerente de e-Business da Credicard Citi, usou referências internacionais e o amplo conhecimento do público para destacar a principal missão do projeto: ajudar o usuário a diferenciar os cartões. Trazer apenas uma simples listagem com todos eles, como acontecia, não estava sendo tão eficaz.

A diretora de Criação Juliana Constantino, em parceria com o também diretor de Criação Raphael Vasconcellos, colaborou com sua ampla bagagem em portais do setor financeiro. Dela veio uma importante linha do briefing: utilizar a inteligência que a internet pode oferecer para tratar adequadamente os diversos públicos do portal Credicard Citi.

SOLUÇÕES

A vitrine de cartões foi a solução encontrada para ajudar o usuário a diferenciar o extenso portifólio da marca. Com apenas três perguntas a Credicard Citi apresenta o que há de melhor para o perfil e necessidade do usuário. A interface, em RIA (rich internet application), permite que a interação aconteça de forma rápida em uma única tela, sem a necessidade de espera para a exibição do resultado.

A simplicidade da interface é resultado de um exaustivo trabalho de arquitetura de informação e design. Foram desenhados mais de 10 protótipos navegáveis até chegar no modelo final. Isso demandou da equipe uma verdadeira imersão no portifólio de cartões da marca.

As perguntas foram reordenadas, reescritas e substituídas diversas vezes no desenho da vitrine de cartões

Diferente da maioria dos sites, que possuem uma única página de entrada, o portal da Credicard Citi possui três, com abordagens totalmente diferenciadas:

1. Prospects: é página inicial para quem está procurando o seu cartão. Ela funciona como uma verdadeira vitrine. O assistente de escolhas, destaque da página, permite a localização do cartão ideal para o perfil e necessidade do usuário

2. Clientes: quem já possui um cartão Credicard Citi entra sempre por ela. O destaque na home de clientes geralmente são produtos, serviços e as ferramentas do internet bank

3. Promoção: receptiva para o usuário que está atrás de uma promoção específica. São as tradicionais landing pages, ou seja, as páginas de aterrisagem. Geralmente o usuário que cai nessa página clicou em um banner ou em um e-mail marketing

Para saber qual das páginas apresentar o sistema usa o histórico de navegação do do usuário gravado em cookie. Ou seja, na visita seguinte o site já sabe quem ele é e apresenta informações mais relevantes e contextualizadas com o último acesso. Dessa forma o site passa a ter um melhor diálogo com o consumidor.

O produto estava pronto, precisando de uma nova embalagem. A AgênciaClick procurou esgotar ao limite as possibilidades de design. Aqui também foram realizados dezenas de estudos com aplicações diferenciadas de cores, fontes e formas.

Neste estudo o layout era mais escuro

Nesta outra o cabeçalho começava mudar

Fundo claro, mas com um cabeçalho ainda bem longe da versão final

FICHA TÉCNICA

Direção de criação: Juliana Constantino e Raphael Vasconcellos
Arquitetura de informação: Silvia Melo, Elisa Volpato e Ana Cláudia Pátria
Design: Diego Araújo, Gustavo Terra e Pedro Burneiko
Propaganda: Rodrigo Venkli, Eduardo Battiston, Lúcio Maiolini Manoel, Eduardo Valentin Bellotto, Steve Blask Nelo
Interface / Programação: João Cabral, Edson Sueyoshi, Edgard Medeiros, Douglas Castilho, Klezio Souza, Riccardo Benetti, Vincent Maraschio, Tiago Canzian e Rodrigo Souza
Direção de Atendimento: Ana Maria Nubie e Patrícia Maschio
Atendimento e Negócios: Mauricio Zimmermann, Douglas Mello e Lúcio Novaes
Aprovação (cliente): Amauri Zerillo, Roberta Zaiantchick e Bertoldo Prellwitz

A idéia é mais divertida do que boa. E cara também. Cada pacotinho com 41 peças sai por 30 libras (cerca de R$ 90).

Dica do Duh Belotto

Para atingir um índice digno de pódio a equipe de Criação da AgênciaClick foi atrás dos campeões. Como criar um site que atendesse o fã de futebol tão bem quanto o de badminton? Como se diferenciar da concorrência? A resposta estava na interface do site mais visitado do mundo: a busca.

No novo portal da ESPN a caixa de texto convida o fã do esporte ao diálogo em sua linguagem, permitindo que ele encontre a sua paixão pelo nome que lhe convém – São Paulo ou Tricolor, Flamengo ou Mengão, Corinthians ou Timão. A cada tag (ou palavra-chave) surge um novo site, tornando a experiência de navegação instigante.

E como esporte é imagem, elas estouram na tela em um tamanho raramente visto em portais do segmento – fotos com largura superior a 1280 pixels.

Este é só o começo. Ainda neste semestre surgirão muito mais novidades. Enquanto elas não chegam, entre lá no www.espn.com.br e diga o que você achou da largada.

Um projeto colaborativo bem interessante lançado neste mês pela Isobar ilustra esse novo comportamento do telespectador. O blog Recycle TV propõe novos usos para aquele aparelho quadrado gigante – a TV pode virar uma estante de livros, hostess de bar, peça decorativa e até mesmo um colar.

“Colors”, estante de livros assinada por Yegustrepo

“Fashion Geek”, o colar de Giselle Beiguelman e Vera Bighetti

Recycle TV é uma divertida experiência de TV enquanto a IPTV brasileira ainda enfrenta a burocracia da lei civil, direitos de propriedade intelectual, tributação, competição e quadro regulatório, entre outras. Para o arquiteto de informação fica o desafio de se reciclar entender a TV interativa que vem por aí, tema inclusive de um post anterior.

Em tempo: chegamos ao nosso 100º post!

Mas ao me deparar com o gato-maracajá da O’Reilly (o livro “Designing Web Navigation” de James Kalbach) percebi que obsoletos são os sites que subutilizam este importante elemento de interação.

Kalbach não promove nenhuma guerra entre caixas de busca e menus, mas argumenta que o emprego de ambos deve estar totalmente relacionado com os objetivos e estratégias do negócio. Ou seja, não existe menu certo ou errado, mas sim o mais adequado a determinado tipo de site. Parece óbvio, mas em quase 400 páginas são mostrados exemplos de sites que passaram muito longe disso.

O autor cita um teste de usabilidade realizado por Jared M. Spool, da User Interface Engineering, com 30 usuários de e-commerce. O intuito era investigar o que acontecia com o consumidor após encontrar o que procurava. Os resultados mostram que a busca não é necessariamente a melhor aliada para este tipo de site:

• dos usuários que iniciaram o processo de compra pela busca, apenas 20% continuaram a navegação atrás de algo mais
• dos usuários que iniciaram a compra pelos menus de categorias, 62% permaneceram “circulando” pela loja
• os usuários que começaram pelo menu também trafegaram 10 vezes mais a outras seções não previstas inicialmente

A busca da Apple

E se você ainda precisa de algumas razões para olhar com mais atenção para os menus, Kalbach dá várias delas:

• navegar e buscar são ações totalmente diferentes
• a navegação provê contexto e entendimento
• o menu é um importante aliado da marca: ele comunica quais são as prioridades e valores da empresa através de categorias, ordenação e até mesmo tons de cores
• o desenho de um menu de navegação é um esforço multidisciplinar, que deve considerar objetivos do negócio, as restrições tecnológicas e o conteúdo
• a navegação revela a temática do site e como ela é relevante para uma necessidade específica

Busca ou navegação? As duas, com certeza. Independente do meio escolhido, o resultado deve ser o mesmo: o encontro da informação.

Os resultados da pesquisa deixam claro que a web 2.0, que tem a colaboratividade como principal característica, deixou de ser moda – é um sucesso mais do que consolidado, mas ao mesmo tempo um vasto campo a ser explorado. Entenda um pouco melhor o comportamento digital dos entrevistados:

• 60% já customizaram páginas com RSS, agenda ou outro aplicativo
• 70% lêem blogs
• 40% escrevem em blogs
• 44% consomem conteúdo via RSS
• 35% já usaram tag clouds
• 85% guiam sua navegação pelos mais populares ou mais enviados
• 55% iniciam o processo de compra pela busca

Resumindo: a homepage não é mais o principal ponto de contato digital do consumidor com a marca. A Avenue A | Razorfish traduziu algumas tendências deste novo usuário em 5 recomendações básicas:

1. Torne o seu conteúdo portátil. Permita que os usuários levem-no para onde acharem melhor consumi-lo. RSS e widgets são um bom caminho para a portabilidade

2. Permita aos usuários avaliar e comentar o conteúdo. Isso dará mais credibilidade a ele

3. Invista em videos online. Eles são a próxima grande onda de crescimento no segmento. Descubra como ganhar dinheiro com eles para monetizar o investimento

4. Pense além da homepage – elas não têm mais um papel central na experiência online do consumidor. Pense em como explorar o seu conteúdo em ferramentas de busca, publicidade, blogs e social media

5. Aproxime-se do celular, mesmo que com pequenos passos, e fique de olho nos avanços da área. O iPhone da Apple é um ótimo alvo

A apresentação de Garrick Schmitt (abaixo) mostra algumas empresas que já entenderam este caminho. Eu, particularmente, vejo no novo site da BBC um ótimo exemplo dessa transformação. E por que não incluir também o azedinho Limão nessa lista?