Por mais que se mostrem definições teóricas do que é design de interação, a ficha demora a cair. Designers são profissionais que aprendem fazendo muito mais do que teorizando. Como ensinar fazendo algo que ainda não está sendo feito?

A esse respeito, tive uma experiência muito bem sucedida com meus alunos da Unisul recentemente que gostaria de compartilhar. A disciplina era Usabilidade e Ergonomia de Interfaces, mas por achar mais importante compreenderem design de interação como um todo, não enfatizei os aspectos do nome da disciplina. Em 30 horas de aula eu precisava dar essa visão geral e ainda construir com eles um projeto.

Comecei mostrando alguns projetos que julgo interessantes por explorar as possibilidades do design de interação. Designers são ótimos em observar outros projetos e reproduzir suas características. Porém, eu queria que eles compreendessem que design de interação não é o projeto do artefato em si e sim o que as pessoas vão poder fazer com o artefato.

Lá pelas tantas, apresentei um dos projetos do Instituto Faber-Ludens, o Catálogo de Brincadeiras. Expliquei que as brincadeiras de criança são formas de design de interação popular que existem a muito tempo e que a diferença para o design de interação profissional de hoje é que este embute as regras da brincadeira (ou qualquer outra atividade) nos artefatos. Os alunos se interessaram tanto que decidiram desenvolver o projeto da disciplina a partir dessa idéia. No videocast número 2 do Instituto explico melhor esse conceito:

A proposta era que eles extraíssem as regras de uma brincadeira e aplicassem-nas numa outra situação que não fosse uma brincadeira, tentando prazer e resultados práticos aos participantes. Primeiro eles tinham que levantar uma lista de brincadeiras que conheciam e uma lista de possíveis situações em que ela seria aplicável. Depois que escolhiam o melhor "encaixe", iam a campo pesquisar tanto a brincadeira quanto a situação. Na volta, tiveram que diagramar a brincadeira e apresentar as entrevistas sobre a situação. Veja o exemplo do projeto Pok, que visa aplicar no trânsito a brincadeira de jogar pipoca em pessoas que incomodam no cinema.

No caso desse projeto, a solução foi uma buzina melhorada. A buzina padrão é um sinal genérico que não indica o quê está sendo avisado, nem quem está sendo avisado. Por isso, é comum os motoristas devolverem com buzinadas, gerando uma confusão infernal. Os alunos Marco e Alan criaram uma buzina direcionada, acionada por um controle remoto. A recepção do sinal é dada por um adesivo colado no vidro ou capô do carro. Esse adesivo também exibe o status do motorista. Se ele recebe muitas advertências como essa, fica com a pontuação baixa. É um "Como estou dirigindo dinâmico". O motorista advertido fica sabendo na hora com o seu próprio controle remoto, que emite sinal sonoro dentro do carro. É uma espécie de "pipoca eletrônica" que, além de avisar o intransigente, o coloca numa situação de constrangimento social, inibindo o comportamento indesejado pelas pessoas ao redor.

Outro projeto interessante foi inspirado na brincadeira Elefantinho Colorido e aplicado em festas. As pessoas entram na balada e recebem um botom colorido, cada um de uma cor. De vez em quando, o DJ aciona um alerta e os botons de uma determinada cor acendem, incentivando que as pessoas com a mesma cor se encontrem e dancem juntas. Ajudei as alunas Bárbara e Mirela a construir um protótipo do Elefante Psicodélico na própria universidade. (Note no vídeo a precariedade da fixação do meu datashow).

Pode-se criticar que eles estão sonhando com uma realidade distante do mercado de produtos eletrônicos brasileiro. Sim, dar liberdade para desenvolver projetos experimentais é fundamental numa faculdade que deseja formar profissionais para o futuro e não só para o mercado atual. Porém, o que estou tentando ensinar não é o modo de funcionamento desses artefatos e sim o processo de design de interação. Este se aplica a qualquer artefato, inclusive aqueles que já estão bem estabelecidos no mercado. Um outro projeto que demonstra isso bem legal é o Boo, que se configurou num aplicativo OpenSocial para o Orkut. A inspiração veio da brincadeira Caça ao Tesouro e a situação foi o primeiro beijo de um adolescente. Já avisei ao Jader e a Juliana que eles podem ganhar muito dinheiro se conseguirem desenvolver mais o projeto.

Ainda desenvolvemos outros projetos interessantes com os alunos, cujo processo está todo documentado no blog da disciplina. Aliás, graças a este blog, outros professores estão aplicando algumas das idéias em suas disciplinas, como é o caso de Elton Vinicius da Silva com seus alunos da UFES. Adorei os trabalhos dos alunos e espero que essa iniciativa esteja contribuindo para vivermos num mundo melhor projetado!

No curso de especialização do Instituto Faber-Ludens estou aplicando uma versão mais completa do exercício. Aliás, estamos planejando levar o curso a outras cidades. Quem tiver interesse, por favor, participe da enquete.

Comente este post

Palestra apresentada no Planeta Web 2008, evento promovido no Senac Campinas. Será também apresentada no dia 17 na Lapa Tito, dia 18 Lapa Scipião e dia 19 em Guarulhos.

Slides

Dessa vez consegui finalmente usar o Keynote pra sincronizar o áudio da apresentação.

Slides com áudio

[ Download vídeo ] 14mb

Webdesigner 2.0: Requisitos mínimos para o upgrade profissional [MP3] 7 mb - 30 min

Comente este post

Próximos eventos

Fecharemos a maratona para divulgação do curso de especialização do Instituto dia 29 de maio, com a palestra conjunta O Diferencial do Design de Interação nas Organizações, em que eu e Paulo Melo falaremos sobre como o Design de Interação está se tornando estratégico para as empresas de Tecnologia. O curso de especialização começa dia 7 de junho!

Comente este post

Comente este post

Sabemos que não se trata de uma avaliação exaustiva, que a qualidade do vídeo é tosca (foi gravado no celular) e que a história é meio ridícula. Porém, nosso objetivo era apenas mostrar como é possível (e interessante) observar a exeriência do usuário em qualquer ambiente.

Comente este post

O vídeo foi criado inicialmente como ferramenta para suas aulas de Antopologia Cultural na Kansas University. Wesch mandou para 10 pessoas conhecidas e estas espalharam para outras e outras até que, 4 dias após sua publicação, o vídeo havia se tornado o assunto do momento nos blogs, visto por mais de 1 milhão de pessoas.

Em entrevista a John Battelle, Wesch revela que o vídeo foi criado para fazer as pessoas refletirem sobre sua relação com a tecnologia. Se estamos apenas alimentando a máquina com dados, a máquina está nos usando. Se aproveitamos a máquina para intensificar nossas relações com outras pessoas, então nós semos a web, nós fazemos parte da máquina.

Comente este post

Fiz uma análise de usabilidade comparativa entre duas grandes redes de fast-food que aceitam encomendas pela Internet (McDonalds e Habibs) e cheguei a conclusão estarrecedora de que o ato de selecionar o pedido no website pode demorar mais do que a própria entrega do pedido em sua casa só por que a interface foi mal projetada.

Gravei um vídeo de 50 minutos, mostrando passo-a-passo como é o processo desde a entrada no website até a chegada da encomenda em casa, comentando problemas de usabilidade que os usuários podem encontrar, suas causas e possíveis soluções. O vídeo comenta bons e maus exemplos de:

• usabilidade no ecommerce
• conteúdo persuasivo
• padrões de interação
• fluxo de tarefa
• mensagens de erro
• instruções em formulários

Screenshots

Trecho do vídeo

Para ter uma idéia melhor de como se desenrola o vídeo, abaixo segue uma demonstração de alguns trechos, em qualidade de vídeo extremamente reduzida:

Vídeo completo

O vídeo está sendo distribuído em CD-Rom (340 MB - DivX- 800x600px) por R$20. O frete é grátis para todo o Brasil (carta registrada). Pagamento por depósito bancário ou transferência eletrônica. O vídeo está disponível para download logo abaixo. A análise foi feita em dezembro de 2005

Análise de usabilidade de fast-foods online [MOV] Quicktime 7 - codec H.264 - 56 minutos - 156mb

Comente este post

Como fazer wireframes de interfaces [MOV] Quicktime 7 - codec H.264 - 26 minutos - 57mb

Comente este post

[ nota ] Esse é meu primeiro experimento com Flash Video (.FLV) e apesar de complicado pra configurar tudo, o resultado final valeu à pena. De 200 MB do AVI original, passou para 9 MB no FLV. O código deste player é distribuido gratuitamente.

Comente este post

O legal desse vocabulário controlado é que ele permite relações hierárquicas entre os termos, ou seja, é possível usá-lo para gerenciar taxonomias. Para quem ainda não leu o post que explica todos esses termos complicados, a taxonomia é um tipo de classificação que pode gerar menus de navegação.

Há alguns meses atrás, gravei um screencast mostrando como foi o processo de alimentação de um vocabulário controlado que desenvolvi para o catálogo de obras de uma editora curitibana. Na ocasião, eu havia assumido a programação do projeto, achando que seria fácil implementar minhas idéias em PHP no Drupal, mas acabei desistindo. Realmente não levo jeito para programar, mas o trabalho de arquitetura da informação ficou legal. A editora contratou outros profissionais para fazer a programação, mas eles ainda não lançaram a versão final.

Vocabulário controlado na prática [AVI] 37 Mb ~ 7 minutos

Quem gostar do assunto classificação deve procurar cursos e livros na área da Ciência da Informação. No Brasil, ainda temos pouca coisa aplicada à Arquitetura da Informação, que trata do contexto de websites.

Hoje, dia 30/09, é o último dia pra votar neste blog no concurso Trama Universitário. Por enquanto, o Usabilidoido está entre os últimos, mas se todos os leitores votassem, certamente estaria lá em cima :P

Comente este post

Fiquei impressionado com a velocidade de carregamento das páginas, pelo menos 3 vezes mais rápido que o IE. Comecei a explorá-lo e descobrir funcionalidades que não tinha no IE e que agilizavam bastante o uso (mouse gestures, zoom, abas e muito mais). Virou meu navegador padrão e também de meu colega que trabalhava na escrivaninha ao lado. Porém, desisti de usá-lo porque travava muito.

Voltei pro IE e o que mais fazia falta eram as abas, que permitem organizar muito melhor a navegação quando se está vendo vários sites ao mesmo tempo. Nessa época, começou a surgir um burburinho em torno de um navegador open-source chamado Firebird (que depois mudaria para Firefox) que tinha o tal recurso. Tornou-se meu navegador padrão, mas ainda sentia falta dos recursos do Opera...

Quando saiu a versão 8 do Opera, baixei correndo. Bugs resolvidos! Além disso, a interface tava muito mais clean e agradável, melhorou muito a usabilidade. É meu navegador padrão até hoje, mesmo com as propagandas adsense no topo.

Há alguns meses atrás, gravei um screencast comparando os três navegadores do ponto de vista da usabilidade da interface, mas não coloquei no ar porque não queria estourar a largura de banda da minha hospedagem. O vídeo ficou com 30MB. Ontem descobri através do Michel Lent que o OurMedia hospeda qualquer mídia de graça e pra sempre. Duvidei, mas tentei e, após sofrer um pouco, consegui colocar o vídeo lá. Agradeço imensamente a iniciativa de democratização da mídia que essa comunidade está fazendo!

Quem quizer iniciar seu Podcast, VideoBlog e afins, pode hospedar lá, mas prepare-se para uma interface super difícil de usar.

Ainda existem questões que não mencionei no screencast, porque não são diretamente relacionadas à usabilidade da interface. Por exemplo, alguns sites quebram no Opera e no Firefox porque usam scripts muito antigos. Na minha navegação diária, mais ou menos 3% dos sites que vejo tenho que abrir no Internet Explorer excepcionalmente por causa disso. Por outro lado, o IE tem falhas de segurança e facilita que spywares e outros programas maliciosos entrem no seu computador.

Se fosse pra analisar todos os pontos, ficaria aqui a vida toda, mas acho que já dei minha contribuição para uma decisão mais consciente. Faça sua escolha!

Downloads

• Firefox 1.0.6 português 4 MB
• Opera 8.01 português 3 MB
• Internet Explorer update 6.0 SP1

Comente este post

No começo, fazia esses diagramas com lápis mesmo, no papel. Na medida em que me envolvia em projetos maiores, o suporte se demonstrou ineficiente. Era preciso mudar a mesma coisa várias vezes, recombinar, sem falar da necessidade de ser apresentável ao cliente e outros membros da equipe. Comecei a usar o próprio Flash, software vetorial que mais me sinto à vontade (exemplo). Fiquei satisfeito e nem senti vontade de tentar o software indicado por outros arquitetos da informação: Microsoft Visio. Sabia até que você podia incluir nele a biblioteca do Visvocab criada pelo Jesse James Garret, o padrão de notação que adoto.

Ano passado, na correria para terminar meu TCC, descobri um tal de Smartdraw que tinha inclusive uma versão Trial. Gravei hoje um screencast demonstrando as funcionalidades dele que permitiram que eu fizesse meus diagramas muito mais rápido do que imaginava:

Lembrei dele porque tive a oportunidade esses dias de experimentar o Visio e não gostei. Ainda acho o Smartdraw muito mais fácil de usar e rápido. O Visio é mais flexível e faz mais coisas que o Smartdraw, mas não está tão otimizado para o que eu queria. O Smartdraw que falo é a versão 6, que deu lugar para a 7. Esta última ficou mais parecida com o Visio e perdeu algumas das funcionalidades que demonstro no screencast. A página oficial do software não oferece o download da versão 6, mas um passarinho me contou que circula uma demo da versão 6 no Emule.

Outro software interesante é o PocketDraw, que permite fazer diagramas como esse num computador de mão. Se tivesse um PocketPC poderia testar se a aplicação ajudaria a discutir a navegação numa reunião com equipe e clientes ou até mesmo durante aqueles momentos inesperados em que vem uma idéia brilhante na cabeça nos lugares mais estranhos. (veja foto do topo tirada por Mike Lee)

Comente este post

Já tinha ouvido falar desse software, mas nunca tinha testado até o leitor Rodrigo Morales me chamar a atenção para ele numa conversa por MSN. Quando ele me disse que esse software tinha um look´n feel a la Macintosh, eu voei para fazer o download.

3MB depois e uma rápida instalação e meu queixo caiu no chão. A velocidade de processamento é quase instantânea pra quase todas as ações e todas as transições são animadas e suavizadas. O design da interface é todo arredondado e suave, criando uma atmosfera bastante aprazível.

Eu pensava que não existia nada mais prático para lidar com fotos do que o clássico ACDsee versão 2.4, mas mudei de idéia. Já estou usando o Picasa no dia-a-dia para organizar minhas fotos e se pudesse colar fotos do clipboard, como faço no Irfanview, ele me seria ainda mais útil quando uso screenshots nos meus posts.

Junto com o Picasa, pode ser instalado um software chamado Hello que permite que ao clicar num botão no Picasa, seus amigos recebam e comentem fotos. É como um instant messenger (ICQ/MSN) para fotos.

Legal, mas é chato ter que instalar um software só para isso. Se dependesse de mim, os dois vinham juntos. Mesmo assim, o pessoal ainda vai preferir usar um Flickr ou um Flogão para compartilhar fotos com o mundo porque não necessita instalar software algum. Se o Picasa integrasse com esses serviços, seria excelente, mas vai ser difícil, já que o Flickr foi adquirido pelo inimigo nº1 do Google, o Yahoo.

Para quem ficou curioso como gravei este screencast, bastou ter um microfone e rodar o Camtasia Studio, que é gratuito por 30 dias. Ele me exporta o SWF e oferece uma penca de opções. Recomendo ;)

Comente este post