Em wireframes, as anotações explicam a presença e/ou a funcionalidade dos elementos mais complexos. Já os metadados contêm informações que facilitam o controle das versões dos arquivos e de suas variações.

Anotações

Quando se apresenta um wireframe para os donos de produto ou para integrantes da equipe de projeto que não participaram da sua elaboração, estes muitas vezes não sabem decifrá-los e, ainda menos, entender sua importância. Textos em formato “Lorem ipsum”, widgets e rótulos podem não fazer muito sentido fora da interface finalizada. Como vão funcionar no produto pronto? Qual a sua relação com os objetivos do site?

Anotações em wireframes

Cenários podem ser criados e usados como esboços

As anotações têm a difícil missão de responder a perguntas como estas, facilitando a comunicação das ideias que permeiam a criação da experiência do usuário. Procuram resumir cada item do wireframe, ou pelo menos os mais importantes e os mais sujeitos a dúvidas e controvérsias, explicando não só sua função, mas porque estão situado em determinado lugar.

Muitas vezes substituindo a apresentação presencial dos projetistas dos wireframes, estas informações são muito úteis para que os clientes internos e externos do projeto, como designers, editores, desenvolvedores de mídias ou plataformas digitais entendam a interface digital e possam tomar decisões sobre o produto.

Para atender às diferentes audiências, as anotações podem ser apresentadas em diferentes camadas, de modo que cada profissional localize as informações que lhe interessa diretamente. Os textos de cada camada podem ser adaptados à linguagem de cada área de atividade, embora o grau de aprofundamento não deva ir além do necessário para seu uso pela equipe.

A profundidade e a quantidade das informações são importantes, pois caso levem ao desinteresse dos leitores corre-se o risco das pessoas se desinteressarem pelo conteúdo e aos poucos deixarem de consultá-las, o que pode gerar retrabalho e mal-entendidos no desenvolvimento.

Caso haja necessidade de explicações mais longas sobre determinada funcionalidade ou sobre a presença de alguns elementos, pode-se recorrer a documentos suplementares, referenciados nas próprias anotações (“para maior detalhamento, ver anexo 1”).

Além disso, as anotações também podem citar outros entregáveis do projeto (“para mais detalhes, ver o arquivo Resultado de testes com usuários” em http://..), e neste caso estes devem ser distribuídos junto com os wireframes ou então ficar facilmente acessáveis online, através de links.

Alguns objetos identificáveis em anotações

Botões – Sua função, o que acontece depois que são acionados. Caso sejam redundantes ou pouco usuais, pode ser necessário também justificar sua existência.

Objetos ou telas que mudam de acordo com o contexto funcional – Quando se digita um texto em uma caixa diálogo de mídia social, por exemplo, pode-se indicar que, depois de apertar a tecla “Enter” o texto ficará registrado na tela e nova caixa de diálogo, vazia, aparecerá abaixo.

Condicionantes – Condições para que uma ação aconteça. Em um website de colocação profissional, por exemplo, um usuário que deseje inscrever seu currículo para uma vaga, deve ter preenchido os campos obrigatórios do formulário de currículo.

Funcionalidades ou elementos invisíveis – Pode ser preciso sinalizar menus com subitens escondidos, arquivos para download, textos que aparecem em uma página quando se clica uma seta.

Na criação das anotações, é importante mantê-las curtas, objetivas, com as informações necessárias. Não adianta apenas dizer “Este botão fecha a compra”, mas explicar “Este botão fecha a compra para os usuários logados no sistema. Usuários não logados ou cadastrados receberão uma mensagem para login ou cadastro.”

Justificativas baseadas nos interesses dos usuários finais são mais fáceis de entender. Se um site tem muitas camadas de informações, por exemplo, anotações sobre breadcrumbs podem indicar que “ajudam o usuário a manter o sentido de localização, e a navegar entre itens relacionados”.

Em wireframes com muitos elementos, a numeração de cada item e a localização das notas à direita, facilita sua localização. Em programas como o Axure (ilustração acima, pode-se assinalar anotações para os diversos elementos, com campos customizáveis).

Metadados

São os dados sobre os wireframes que os identificam em relação à autoria e a outras versões do mesmo documento. São especialmente úteis em projetos com grandes equipes e grande número de entregáveis.

Os metadados de wireframes, quando estes são feitos em programas como o Visio, PowerPoint, Excel, podem ficar localizados na parte superior do documento, como um cabeçalho. Ou no rodapé, como notas de pé de página. Em programas como o Axure podem ficar localizadas em pés de página.

Incluem elementos como:

Nome do cliente e título do projeto, caso sejam realizados em agências que realizam diversos projetos simultaneamente. Se for um arquivo modificado, pode ter também um pequeno subtítulo que identifique rapidamente as mudanças realizadas, como ” – modelo com formulários de cadastro revisados”.

Número do arquivo e versão, caso seja revisado. Ajuda a remissão de clientes e da equipe de projeto.

O nome do autor ou autores.

Data de autoria ou da última modificação do arquivo.

Aspectos a desenvolver (“Versão ainda sem os modelos de acesso aos arquivos de textos”).

Nomes e locais de outros arquivos do projeto com informações complementares, como mapas do site, plano de projeto, blueprints de serviços.

Observações gerais, caso seja preciso declarar que alguma pendência, por exemplo. Se uma funcionalidade precisa ser examinada pelos desenvolvedores para que vejam se é viável, esta observação pode ser registrada junto com os demais metadados.

As anotações e metadados facilitam o uso de wireframes em equipes multidisciplinares, a comunicação do produto ao cliente ou dono do produto, bem como sua avaliação depois da realização do projeto.

(Texto publicado em 5.2.2012.)

 

Referências

Livro: Designing for interaction – Creating innovative applications and devices, de Dan Saffer. Berkeley: New Riders, 2010

Why it’s important to annotate your wireframes (UX Movement, acesso em 5.2.2012)

I love wireframes (blog de Ivana Jurcic, acesso em 5.2.2012)

Why you should annotate wireframes, de Rohitha Perera (Creately, acesso em 5.2.2012)

Criando um website: Wireframes, de Carlos Almeida Junior (Empremania, acesso em 5.2.2012)<

Posts tagged ‘annotation’, de Jakub Linowski (acesso em 5.2.2012)

 

Programas

Adobe Proto (acesso em 5.2.2012) – Adobe Touch App, permite a criação de wireframes interativas de websites e apps móveis em tablets.