Veja os resultados abaixo:

Leia também: Qual seu software favorito para criar wireframes?

Essa é a proposta da nova ferramenta da testes chamada EyeQuant: um software que analisa determinada interface e prevê para onde o olho humano olharia, em que ordem e por quanto tempo.

Parecido com eyetracking, certo?

A diferença é que o software faz isso automaticamente, sem precisar de um olho humano para testar. Segundo os criadores da tecnologia, os resultados são 90% tão precisos quanto o de um eyetracking, por serem baseados em uma década de estudos neurocientíficos feitos com mais de 400 pessoas.

O resultado acaba sendo muito mais ágil e barato, já que não existem as etapas de recrutamento de usuários e nem as longas sessões de testes. O “conhecimento” sobre o comportamento do olho humano está todo armazenado no software.

Leia também: O que você precisa saber sobre eyetracking

Já perguntamos lá no Facebook: Qual o seu software favorito para criar wireframes? – e a maioria dos respondentes apontou o Axure RP como software favorito.

O Axure já está em sua sexta versão, e a cada novo release eles adicionam funcionalidades mais interessantes para a aplicação. Talvez um dos motivos para o Axure ter tamanha aceitação é a facilidade de se criar protótipos navegáveis em HTML sem precisar escrever uma linha de código sequer.

Coloquei abaixo alguns links de recursos úteis para quem usa o Axure como ferramenta de wireframe e prototipagem.

Widgets

• Android Library for Axure Prototyping
  Para desenhar aplicativos em Android: padrões de interface, botões, menus, dropdown, teclado qwerty, teclado numérico e a moldura de um aparelho que usa o sistema operacional.
• iPad Axure Widget Library
  Para desenhar aplicativos para iPad: padrões de interface, barra superior e inferior, botões, padrões de navegação, ícones mais usados e a moldura do iPad.
• iPhone UI elements Axure widget library download
  Para desenhar aplicativos para iPad: padrões de interface, teclado qwerty, menus, botões, padrões de navegação, ícones mais usados e a moldura do iPhone.
• Social Media Icons Axure Widget Library
  Ícones do Facebook, Flickr, Linked In, MSN, Blogger, Delicious, Twitter, Skype e outros serviços online e redes sociais.
• Touch Screen Hand Gestures Axure Stencils
  Mãos e gestos como tap, double tap, pinch, zoom, drag, spread, slide, entre outros.
• People Widget Library for Axure
  “Pessoinhas” para usar em seus wireframes. Entre eles: homens, mulheres, grupos de pessoas, Albert Einstein e Jakob Nielsen.
• Wireframe Icons for Axure
  Ícones genéricos de imprimir, enviar por email, recarregar, buscar, recortar, colar, relógio, calendário, lixeira – entre outros.
• Axure Better Defaults Library v2
  Uma versão mais “encorpada” dos widgets padrão do Axure, incluindo campos de formulário com validação, headings (h1, h2, h3) e campos de texto editáveis.
• Axure Design Pattern Library v2.0
  Outro complemento para os widgets padrão do Axure. Inclui carrossel, mouse over tip, progress bar, Google Maps e campos de formulário com validação instantânea.

Grids

• Layout grids for Axure
  Grids pré-fabricados de Axure, para facilitar na hora de dividir o layout do seu wireframe em colunas.

Grupo de discussão

• Google Groups: Axure RP Design Library
  Grupo de discussão onde os usuários postam recursos, dicas, treinamentos, tutoriais e -claro- discussões sobre a ferramenta.

Tutoriais

• Vídeos oficiais do Axure no Vimeo
  Canal do Axure no Vimeo com vídeos tutoriais. Entre eles: como criar documentos de Axure compartilhados, protótipos clicáveis, painéis dinâmicos, mestres e fluxogramas.
• Blog do Totalwireframe
  O site Totalwireframe mantém um blog onde são postadas dicas e tutoriais para aproveitar melhor os recursos do Axure.

Sites com mais recursos

• Site do Totalwireframe
  Uma série de bibliotecas que incluem redes sociais, celulares, templates de email e blog.
• Axureland
  O Axureland está passando por um redesign, mas deve voltar ao ar em breve. O site conta com vários recursos para axure, incluindo bibliotecas de widgets atualizadas frequentemente.

Esses dias lancei a pergunta em nossa página do Facebook: Qual seu software favorito para criar wireframes?

A pergunta já recebeu várias respostas até agora, incluindo trollagens (L). A pesquisa não tem caráter estatístico, obviamente, mas é um bom termômetro para saber quais ferramentas os arquitetos de informação e user experience designers têm usado no dia-a-dia – e até descobrir novas ferramentas que você ainda não conhecia.

Além das respostas, alguns comentários interessantes:

Em breve novas perguntas por lá. Se tiver alguma sugestão de enquete, é só mandar para blog.arquiteturadeinformacao@gmail.com.

Post rápido e útil para quem costuma utilizar o Axure para wireframes de interfaces touch. O stencil contempla alguns dos principais gestos utilizados nesse tipo de interação.

Download.

Dá medo pensar na quantidade de informações sobre mim a que outras pessoas podem ter acesso sem que eu perceba. E hoje parece que meus feeds de notícias resolveram alimentar minha pequena paranóia.

No Estadão de hoje, “Programa da Microsoft permite vigilância total de funcionários” (matéria original do Times). O software teria a capacidade de monitorar “o ritmo cardíaco, a resposta elétrica da pele, os sinais cerebrais, o registro das correntes elétricas geradas num músculo, as expressões faciais e a pressão sanguínea” e ainda “detectar automaticamente a frustração ou o estresse do usuário e oferecer ajuda quando for necessário”.

Deixando de lado o medo de um futuro sinistro, acho que esse monitoramento tem implicações  interessantes para nós, arquitetos. Se o usuário está frustrado, o site pode se transformar de forma a gerar mais interesse. Um texto institucional chato pode dar lugar a um vídeo bacana que o faça relaxar um pouco e se interessar de novo pelo conteúdo do site. Se ele está em um game, a frustração pode ser a deixa para que o sistema indique sutilmente o que fazer ou a saída.

Na BBC, “Researchers plunder social networks” (Pesquisadores fazem algo entre invadir e saquear redes sociais). Fala sobre como o Facebook pode ser utilizado como uma grande base de dados sobre preferências, hábitos e relacionamentos. O fato de ser uma base de dados não é novidade, mas me impressionei um pouco com o uso oficial disso para mapear os rastros digitais que estamos deixando por aí. E espero que esse tipo de pesquisa não caia em mãos erradas. :|

Se você, assim como eu, nasceu na década de 70, provavelmente já teve contato com uma máquina de escrever. Este, que foi o principal instrumento de trabalho dos profissionais de comunicação durante muito tempo, forçava os usuários a escrever de forma doentiamente planejada, na maioria das vezes pressionados pelo medo de errar. Realocar uma frase em outro parágrafo significava ter que bater novamente toda uma página – 1.400 toques a mais (considerando uma lauda de 20 linhas com 70 toques cada) e cerca de 10 minutos perdidos (no caso de um datilógrafo mediano). O editor de texto, com os recursos de apagar, copiar e colar causou uma verdadeira revolução na vida de milhões de pessoas, sobretudo de escritores e de jornalistas.

Vejo uma revolução bem parecida para os arquitetos de informação com a chegada dos programas que geram protótipos (e/ou wireframes) navegáveis em HTML. Nessa lista incluo o Axure, o iRise e o OmniGraffle, entre outros que listarei adiante. Não é mais necessário dedicar tempo e esforços para organizar slides, fazer ajustes em um grande volume de telas ou até mesmo publicar centenas de comentários sobre o fluxo de navegação. A preocupação agora é com o que realmente interessa – o design centrado no usuário.

Ok, o assunto não é novo. Mas como é cada vez mais recorrente alguém me perguntar sobre as vantagens deste tipo de protótipo vou pontuar algumas delas. Mais do que vantagens, são verdadeiras razões para cair de amores por estes softwares:

Experiência de navegação – Este item vem no topo da lista porque acredito que é aqui onde está o maior ganho do protótipo em HTML. Por ser todo navegável ele simula realmente o que acontece a cada clique, resultado que víamos somente depois que o projeto já tinha passado pelo design e pela interface.

Dimensionamento do projeto – Fica bem mais fácil entender quais são as telas-tipo (ou templates) com o uso dessas ferramentas. No Axure, por exemplo, é possível acessar com facilidade a lista de páginas e até mesmo gerar um mapa (também navegável) a partir dela.

Componentização – O bom arquiteto tira proveito disso. Não é preciso desenhar novamente um fluxo de “enviar por e-mail” ou de “cadastro” a cada projeto que eles aparecem na matriz de escopo. Os softwares para desenvolvimento de wireframes permitem a criação de verdadeiras bibliotecas de padrões, que podem ser reaproveitadas com o mínimo de ajustes em outros trabalhos. Isso também dá uma grande agilidade na execução do protótipo.

Documentos mais enxutos (ou o fim do trabalho escravo) – Em um passado não muito distante cheguei a criar wireframes em PowerPoint com mais de 2.000 slides para simular fluxos e cenários diversos – uma documentação burra, pesada e de eficácia totalmente discutível que ainda me causava algumas lesões por esforços repetitivos.

E o cliente? – Pelas minhas estatísticas esta é a pergunta número 1. Devo ressaltar que só tenho tido resultados positivos. Os clientes não só estão compreendendo melhor a proposta como também estão aprovando mais rapidamente os trabalhos, com solicitações de ajustes cada vez menores. Alguns clientes inclusive já pediram (e pagaram!) para que documentações feitas inicialmente em PowerPoint fossem convertidas para HTML.

Fácil aprendizado – Quando a diretoria da empresa em que trabalho autorizou a compra do Axure ficamos com receio de demorar a aprender o software. Esse medo foi dissipado já no primeiro dia de uso da ferramenta – medo seria ter que voltar a usar o PowerPoint. O suporte do Axure, por exemplo, é muito bom: no site da empresa há tutoriais e um blog que realmente convida o usuário a compartilhar críticas e sugestões. Muitas melhorias já foram feitas partir delas.

Designers e programadores menos irritados – Abrir um wireframe em Visio ou PowerPoint era, para os desenvolvedores, uma experiência semelhante a de ler “Os Sertões”, de Euclides da Cunha, em mandarim. Além de chato, muitas vezes o documento gerava uma série de dúvidas que simplesmente travavam o trabalho, a maioria delas referente ao fluxo de navegação. Por não conter libraries, os documentos em Visio e Powerpoint também traziam erros de consistência e muitas páginas escapavam da revisão, aumentando a incidência de erros. Para os programadores, um grande recurso destes programas é a geração da especificação técnica.

Reaproveitamento de código – Aqui vale a pena fazer um alerta: protótipo é protótipo, código é outra coisa. Não encare este tipo de documento como um avanço na etapa do desenvolvimento. Os recursos de programação dessas ferramentas são limitados e geram códigos feios, sujos e gigantes, para não ser mais explícita.

Voltando aos softwares disponíveis no mercado, segue um benchmark feito em março deste ano por Emmanuel Pays. Vale ressaltar que na relação custo-benefício o Axure (US$ 589) ganha disparado em comparação ao iRise (mais de US$ 2000,00), campeão na lista de funcionalidades.

E para finalizar fica o alerta: a empresa que não ainda não faz uso destas ferramentas está queimando horas de trabalho intelectual com trabalho braçal, além de desviar o foco do arquiteto para questões menores e nada lucrativas.