Prototipação baseada em padrões de interação

Ultimamente não tenho postado aqui no Usabilidoido devido à minha pesquisa de doutorado. O pouco tempo que sobra tenho investido na plataforma Corais. Nesse post vou apresentar um dos projetos que estamos desenvolvendo lá e que você leitor pode participar também se desejar!

Trata-se de uma idéia antiga que surgiu durante uma aula no Instituto Faber-Ludens: criar um prototipador de interfaces que facilite o aprendizado de usabilidade no momento em que o conhecimento é preciso. 

O problema: o conhecimento de usabilidade está espalhado por muitas diferentes fontes de informação: blogs, livros, manuais, amigos. Na hora em que o designer precisa desse conhecimento, na hora da criação da interface, ele não tem tempo para consultar tais fontes. Por isso, a diferença de experiência de um designer que teve a oportunidade de consultar estas fontes antes de projetar uma interface é tão grande: ele tem esse conhecimento na cabeça. Profissionais experientes são escassos e mesmo que estejam disponíveis, eles podem não saber como expressar seu conhecimento para que novatos aprendam com ele. 

Existem ferramentas de prototipação que ajudam o novato a aprender a projetar, oferecendo stencils, elementos reutilizáveis que agilizam muito o trabalho de criação da interface. Um bom exemplo são os stencils da biblioteca de padrões de interação do Yahoo. O problema é que as ferramentas de prototipação importam apenas a forma visual do padrão, os elementos de interface propriamente ditos, deixando de lado todo o conhecimento de usabilidade descrito na biblioteca do Yahoo. Apesar de ser uma referência fantástica para aprendizado, essa biblioteca é criada e mantida apenas pelos funcionários do Yahoo e não refletem necessariamente tudo o que acontece na Web. Ela não inclui, por exemplo, os padrões de interação popularizados pelo seu concorrente Google. Então, o profissional que quer realmente saber o que está acontecendo tem que consultar outras bibliotecas como a Welie, UI Patterns e muitas outras.

Resultado: a curva de aprendizado para quem deseja aprender a fazer design de interface é errática e demorada. 

Proposta: criar um prototipador de interfaces que ajude o designer a aprender fazendo. O prototipador oferecerá conhecimentos de usabilidade no momento em que eles forem necessários, conhecimento este compartilhado pela comunidade de usuários da ferramenta através de um wiki. Resumindo, é uma mistura de Axure com o livro Designing Interfaces, que apresenta vários padrões de interação, e a Wikipedia.

Mas o que é um padrão de interação?

O padrão de interação é um arranjo de elementos de interface frequentemente utilizado por designers. O padrão não é padrão porque uma autoridade o elegeu, mas porque uma comunidade reproduziu. Isso significa que ele pode deixar de ser reproduzido ou mudar com o tempo.

Por que os padrões mudam os designers precisam estar sempre se atualizando, navegando e observando as mudanças feitas por outros designers. Isso explica porque designers fiquem navegando a esmo pela web, utilizando redes sociais e outras diversões em horário de trabalho. Eles estão atualizando seu conhecimento sobre padrões.

Como não existe um resultado tangível para tal atividade, gestores não vêem com bons olhos tal atividade e, por vezes, proibem a prática, o que acaba deixando a empresa pra trás em termos de novas práticas de interface.

Biblioteca colaborativa de padrões

A ferramenta que estamos propondo sistematiza o processo de reconhecimento de padrões, oferecendo resultados tangíveis para a organização, ao mesmo tempo que reduz o tempo necessário de navegação para se atualizar, pois conta com a experiência de outros usuários da ferramenta que estão compartilhando seus achados. 

Para ficar mais fácil de perceber como seria essa biblioteca, fiz um rascunho num outro post demonstrando o padrão widget calculador de frete.

Note o botão "Eu já vi", que funcionaria como um Like do Facebook. Ele vai ajudar a separar quais são os padrões fortes, que devem ser seguidos, e quais não. Na ferramenta de prototipação, o usuário teria acesso a todos esses dados sem precisar ir para o website. Isso seria incorporado na própria interface do prototipador, através de tooltips e painéis. 

Conjuntos de padrões

A motivação para escrever esse post veio ao ler o artigo do nosso aluno Alysson Franklin sobre Metadesign em formulários. Nosso amigo fez um esforço enorme de catalogar padrões de interface utilizando uma estrutura diferente do que normalmente é utilizada pelas bibliotecas de padrões de interação, mais lógica.

Porém, o que me chamou a atenção foi o padrão Formato estruturado: 

Estruturar um campo de input significa quebrar um campo em vários outros, de modo a facilitar o entendimento do que é esperado que o usuário faça. Um bom exemplo seria quebrar um campo único de CEP por exemplo em dois campos, um para os primeiros 5 números, e outro campo para os 3 restantes. Outros exemplos podem ser mencionados: números de telefone, numeros de cartão de crédito (cartões AMEX tem um numero de caracteres diferente de cartões VISA por exemplo).

Esse padrão está contido dentro do padrão que eu identifiquei acima! E o meu padrão de calculador de preço de envio está contido no padrão de carrinho de compra!! E o padrão de carrinho de compra está contido no de loja virtual!!! 

Se a biblioteca cadastrar essa relação entre os padrões, será possível fazer recomendações de padrões baseados nas escolhas do usuário. Por exemplo, se ele coloca na tela um calendário, é bem possível que ele vá querer um seletor de data (que costuma estar contido nos mesmos padrões) ou um formulário inteiro de cadastro (que costuma conter calendários). No rabisco abaixo dá pra ver as dicas de usabilidade que vem da biblioteca (inclusive com a opções de editar a biblioteca e complementar com sua experiência) e as dicas de padrões geradas automaticamente.

As bibliotecas de padrões costumam sofrer do mal de serem ou muito específicas ou muito genéricas, mas com essa relação de conjunto entre os padrões, essa biblioteca pode ter os dois. Quem vai decidir isso serão os próprios usuários da biblioteca, que escolherão as relações. 

Acredito que podemos ter sobreposições entre os conjuntos, ou seja, eles não serão relações hierárquicas. Um mesmo padrão pode fazer parte de vários conjuntos. O seletor de data pode fazer parte de formulário de cadastro e postar no blog, por exemplo. Isso permiria oferecer wizards que criariam uma interface inteira mediante critérios escolhidos passo-a-passo.

Esse esquema de organização lembra muito outro projeto antigo do Faber-Ludens, no qual o Rodrigo Gonzatto propôs o conceito de infra-etiquetas. É um exemplo de que uma idéia abstrata às vezes leva um tempo para maturar e se tornar aplicável para um produto útil.

Gostou? 

O ProtoPattern é um projeto colaborativo que qualquer um pode participar, basta comentar nesse post ou adicionar sugestões de novas funcionalidades. Precisaremos de muitos voluntários para tornar essa idéia realidade!

• Padrões são inevitáveis, até no design
• Padrões de Interação na Web
• Design de interfaces com padrões de interação

Você merece.

Assine nosso conteúdo e receba as novidades!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Website internacional | Política de Privacidade | Contato