Rogério Pereira - Arquiteto de Informação

Card Sorting é uma técnica de um projeto centrado no usuário e tem como objetivo principal descobrir como as pessoas organizam as informações dentro de um site. São criados cartões das principais áreas do site, e logo em seguida são selecionados alguns usuários para que possam organizá-los segundo o seu modelo mental.

É interessante utilizar essa técnica em redesenho de sites, quando o conteúdo está muito bagunçado. O papel do arquiteto é descobrir quando há necessidade de colocar em pratica qualquer metodologia de design centrado no usuário.

Já conhecia a metodologia e participei de uma rodada como usuário em um curso de arquitetura de informação realizado em São Paulo, na JumpEducation. Ainda não tinha tido a oportunidade de fazer com algum cliente. Os prazos apertados e a vontade do cliente de ver o resultado final do layout acabam prejudicando esse processo.

Cenário

Estamos reestruturando alguns portais de conteúdo e serviços de um grande cliente da Talk e definimos uma estratégia de trabalho que envolve o levantamento de conteúdo, Card Sorting, análise dos resultados e uma proposta final com a nova categorização.

Definimos um portal como projeto piloto para iniciar todo esse processo de trabalho. Claro que escolhemos o site que possui o conteúdo mais extenso. O trabalho gerou muito aprendizado e servirá de base para os outros.

Como foi realizado

Com a ajuda da Gabi e do Pedro, arquitetos de informação aqui na Talk, realizamos o exercício com 13 pessoas, dividindo esses usuários em 5 grupos, já que se tratava de 101 cartões.

Realizamos o Card Sorting aberto. Deixamos os usuários definirem as categorias criadas. Dessa forma conseguimos analisar melhor os resultados e validar se o modo de organização estava funcionando efetivamente.

Análise dos dados

Utilizamos o software xSort para coletar os resultados. É possível fazer o Card Sorting no próprio aplicativo. Lá você insere as respostas dadas pelos usuários e no final é possível gerar um Diagrama de Afinidades. Você consegue perceber a relação dos conteúdos organizados. Esse aplicativo foi desenvolvido por um português chamado Gustavo Pimenta.

A experiência do arquiteto de informação é fundamental

O arquiteto tem um papel fundamental nessa etapa. É hora de entender e interpretar o que os usuários querem dizer em relação às semelhanças entre as categorias propostas.

Aprendizado

Nem sempre os usuários criam uma categoria serviços. Eles já possuem o hábito de procurarem serviços que são direcionados aos seus perfis.

A falta de clareza em alguns conteúdos faz com que os usuários não saibam aonde encaixar algumas áreas. Esse é um problema que pode acontecer em seu site dependendo da forma que o conteúdo está escrito. O não entendimento da área por conta de um título mal escrito traz desinteresse por parte do usuário.

As dúvidas que surgiram quando utilizamos o método de Card Sorting fizeram com que entendêssemos muito melhor cada área do site. Com essa forma de organização o projeto parece menor do que realmente é, então visualizamos individualmente cada conteúdo.

O processo está em fase de aprovação e surpreendeu positivamente o cliente. Serviu para o cliente entender que as informações devem ser organizadas de acordo com que faz lógica para os usuários. Queria agradecer a todos que participaram. Sintam-se feliz, pois vocês já fazem parte do processo de reestruturação do site.

Em uma mais uma conversa filosófica com o Daniel Souza, planejador de experiências do usuário na Talk, rendeu um podcast bem informal sobre navegação cruzada. Assim como já falei aqui sobre o mito da barra de rolagem, também resolvi levantar a bola a respeito de outra questão que incomoda muitos designers e arquitetos na hora de desenhar uma interface.

O papo durou 11 minutos e como já falei, foi bem informal. Uma conversa livre e sem regras. O áudio não está perfeito, pois foi apenas o primeiro para testar.

Como não encontrei muita informação sobre o assunto, peço que use a área de comentários abaixo para poder contribuir.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

A primeira edição da Revista Webdesign de 2010 traz o tema usabilidade como reportagem de capa. Fico muito feliz quando vejo a imprensa especializada tratando de um assunto tão importante para o mercado de internet.

A matéria aponta alguns importantes pontos que devem ser observados na hora de pensar em um projeto interativo. A revista ouviu algumas personalidades do mercado como Felipe Memória, karine Drumond, Gustavo Gawryszewsky, Sérgio Carvalho, entre outros.

Temas discutidos na reportagem.

A evolução dos conceitos tradicionais.
Usabilidade no universo das metodologias ágeis.
Em busca da experiência perfeita.
Redes sociais como fontes de pesquisa.
O cliente insiste em algo errado. O que fazer?
Os cuidados no redesenho de interfaces.
Convenções de navegação vc. novas funcionalidades.

Vale a pena a leitura. Compre a revista ou pegue emprestada comigo aqui no escritório da Talk em Brasília. Abraços e até a próxima.

As pessoas passam algumas horas por dia realizando tarefas nas famigeradas redes sociais, seja adicionando uma mensagem, vídeo ou imagem para atualizar a foto de perfil.

A foto do perfil é o que nos identifica dentro dessas comunidades. Hoje fui atualizar minha foto no Twitter e vi um problema de usabilidade, que faz diferença comparando-se com o Orkut, Facebook e Gmail, por exemplo.

Vi o Daniel Souza tendo o mesmo problema quando estava atualizando sua foto.

O Twitter não apresenta nenhuma mensagem de feedback quando você pede para localizar a imagem no computador. Assim, você fica esperando o resultado até que resolve clicar em save para ver a atualização.

Gmail

O Gmail mostra uma mensagem que o upload está em processo, e logo em seguida é possível fazer uma edição no tamanho da imagem.

Com esse modelo, o usuário sabe o que está acontecendo e aguarda o upload ser realizado até o final. Não deixe o usuário advinhar qual será o próximo passo de uma interação.

Orkut

O Orkut possui um comportamento semelhante ao Gmail. Também apresenta um feedback e a opção para cortar a imagem.

Facebook

O Facebook é ainda mais intuitivo com uma mensagem em português.

Faça o teste você mesmo e veja quais são as diferenças, sem deixar de passar por aqui depois para fazer um comentário.

A Globo esperou os primeiros dias de 2010 para mostrar sua nova cara ao mercado. Na última quinta-feira foi a vez do site de Entretenimento, e hoje (12/01/2010) entrou no ar o novo site da Rede Globo, onde traz todo o conteúdo produzido pela emissora.

Os dois sites possuem praticamente a mesma diagramação e ainda procuraram manter o estilo “brancão” que deu início a uma revolução na internet brasileira. Gosto desse padrão, pois se parece muito com um formato de uma revista impressa. Talvez tenha sido a referência utilizada pela equipe.

O layout possui um respiro bem maior em relação ao site atual da globo.com. Me agrada bastante o comportamento do menu funcionando em over. Você consegue manter a página muito mais compacta, só que exige uma taxonomia bem definida. É uma tendência que vem sendo usada muito bem pelos gringos.

A aplicação de cantos arredondados nas imagens deixa o design do site muito mais leve. Como será que resolveram esse problema? Criaram algum script que faz isso automaticamente no CSS?

O novo site apresenta duas possibilidades de organização dos programas. No menu é possível ver os programas organizados por temas, e no rodapé é possível ver os mesmos programas organizados em ordem alfabética. Duas possibilidades para um público tão variado como o da Globo.

Como o vídeo é um dos carros chefes da emissora, a nova home possui um lugar fixo com um vídeo de destaque do momento. Isso mostra o quanto é importante esse tipo de mídia na internet.

Acho que vão seguir a mesma tendência nos sites da globo.com, G1, esportes e vídeos, mas no momento no não vejo necessidade de repetir o item de vídeos, já que está presente também no primeiro menu.

Parabéns a Globo pelo lançamento. Usem esse espaço para comentarem sobre o que acharam dessa nova mudança no site.

Veja uma entrevista muito bacana com Marissa Mayer, vice-presidente de Busca e Experiência do usuário na Google. Ela trabalha na empresa desde 99 e foi a primeira engenheira mulher a ser contratada. Participou da criação de produtos como Google News, Gmail e Orkut.

Quando fui interface na Agência Click, em 2006, tive a oportunidade de conhecer o SVN. Essa técnica permite que várias pessoas possam trabalhar de forma conjunta em um mesmo projeto.

A Gabi, arquiteta de informação na Talk, mostrou que existe a possibilidade de fazer isso no Axure. Essa possibilidade nos ajudou bastante e mostrou que pode ser muito útil para o time que está trabalhando no projeto.

Trabalhamos em conjunto nesse projeto específico e percebi que isso pode nos ajudar de algumas formas. Exemplo: O Redator pode fazer a redação de arquitetura no próprio Axure conforme as telas vão ficando prontas. Isso ajuda bastante em trabalhos que temos que aplicar uma metodologia ágil com vários arquitetos, redatores, designers e desenvolvedores.

Como funciona

Veja os passos para criar uma arquivo versionado no Axure.

Primeiro passo: Abra o RP que vai ser versionado e clique no menu “Share” > “Create Shared Project from Current file…”

Segundo passo: Escolha o nome do projeto. Este será usado por todos os usuários na rede. Escolha um nome fácil para identificar o arquivo.

Terceiro passo: Escolha o local onde o arquivo será compartilhado. É onde a versão será atualizada por todos os usuários que utilizarão o arquivo, e assim, onde todos buscarão as atualizações. Sugiro que seja compartilhado em um servidor que todos possam buscar a informação a qualquer hora. Se for compartilhado no computador de um usuário, este deverá estar logado para que o versionamento funcione.

A pasta não deve ser mexida por ninguém, e ficará assim:

Quarto passo: Escolha o local onde ficará a sua versão do arquivo. É com ele que você vai trabalhar, pois ele buscará e mandará atualizações para o arquivo compartilhado que você salvou anteriormente.

O arquivo que o usuário irá abrir para trabalhar será esse RP com o ícone diferente:

Veja agora os passos para você criar um versionamento local (caso não tenha sido você que criou o arquivo compartilhado)

Primeiro passo: Clique no menu “Share” > “Get and Open Shared Project…”

Segundo passo: Informe o local onde está o arquivo compartilhado. É a versão atualizada por todos os usuário que utilizam o arquivo.

A pasta não deve ser mexida por ninguém, e estará assim:

Terceiro passo: Escolha o local onde ficará a sua versão do arquivo. É com ele que você vai trabalhar, pois ele buscará e mandará atualizações para o arquivo compartilhado que você salvou anteriormente.

Entenda como utilizar o arquivo compartilhado

Para fazer alterações você precisa clicar em Checkout. Significa que você está reservando aquela página no servidor para fazer alterações. Dessa forma apenas você poderá mexer.

Quando terminar de fazer as alterações, clique em Checkin. Significa que você está devolvendo a página atualizada para que outros usuários possam atualizar seus arquivos e mexer se necessário.

O site Olhar Digital fez uma matéria bem interessante mostrando como é o trabalho de um designer de interação.

A designer brasileira Juliana Ferreira faz parte da equipe de desenvolvimento da Nokia e ensina os principais focos de produção da profissão.

Confira a matéria completa.

Mal acabou a primeira versão do programa “A Fazenda”, a Record lançou a segunda versão dois meses antes do início do BBB 10, apresentado pela Rede Globo.

Quando o site da primeira temporada de “A Fazenda” foi lançado, fiz um post aqui no blog falando de alguns problemas de usabilidade, fazendo um comparativo com o site do programa “No Limite”.

No dia da estréia da segunda temporada aconteceu uma integração muito bacana entre a TV e a Internet. Conforme o Britto Júnior anunciava os participantes, o topo era alterado, acrescentando o participante anunciado segundos antes já com sua página interna com galeria de fotos e biografia, isso tudo sincronizado a TV.

Por isso não poderia deixar de falar da nova versão do site. Usar os fazendeiros como elementos principais de navegação é um grande acerto. Assim os usuários podem navegar clicando no participante ou escolhendo a forma que deseja consumidor o conteúdo de fotos, vídeos ou notícias. Dentro da página do participante você tem acesso as informações que estão relacionadas, deste modo o usuário navega da forma que achar mais confortável.

A interface de votação está bem resolvida. Não senti nenhuma dificuldade no uso, mas tem uma coisa que me incomoda. Deveriam pensar em uma forma de destacar mais a chamada nos dias de votação pela Internet. Talvez criar um destaque diferenciado para o quiosque de destaques principais. Outra vantagem, é que a interface de votação está presente na tela, sem a necessidade do uso de um popup, o que atrapalha a tarefa de votação para quem usa algum tipo de bloqueador.

A página que fala sobre o programa deveria ter um conteúdo explicando melhor todas as regras do Reality Show. Eu que não consigo acompanhar, simplesmente não entendo muito bem como funciona.

Gostaria de deixar o espaço para a equipe que trabalha com a Carla Martins, arquiteta de informação da Record, comentar mais sobre o projeto. O espaço está aberto a todos. Fiquem a vontade.

A edição do Jornal Nacional de ontem (23/11), exibiu uma matéria falando sobre as técnicas e pesquisas realizadas no rastreamento do olhar do consumidor (usuário).

A mesma técnica, que chamamos de eyetracking, e utilizamos para mapear o caminho que os olhos dos usuários fazem durante a navegação em um site, está sendo utilizada por pesquisadores para entender o comportamento do consumidor dentro de um supermercado, por exemplo.

Ainda não temos esse poderoso óculos aqui no laboratório de usabilidade da Talk, mas confesso que gostaria de ter acesso a esse tipo de pesquisa. É bastante complexo trabalhar com a interpretação desses dados.

Veja um post que fiz sobre Eyetracking aqui.

Veja a matéria realizada pelo Jornal Nacional.