No contexto deste site, wireframes são documentos que mostram, em uma estrutura visual básica, as relações entre funcionalidades, conteúdo, pontos de contato que irão compor interfaces de mídias digitais. Realizados depois da definição dos requisitos, integram a conceituação funcional e editorial, úteis para o desenvolvimento, edição e avaliação dos produtos.
Funções dos wireframes
■ Explorar e desenvolver os conceitos sobre os contextos de uso, nas fases iniciais do projeto web ou para dispositivos móveis. Inclui o registro dos primeiros produtos da criação da estrutura conceitual e informacional, com a priorização de conteúdos, a intervenção crítica e a formulação do produto por analistas de sistemas, arquitetos da informação, desenvolvedores, designers de interface, redatores e editores, profissionais de marketing, vendas e outras atividades.
■ Permitir a compreensão da estrutura funcional para avaliação pelos stakeholders do projeto. Não só da equipe de projeto para o cliente, como do cliente para a equipe de projeto (clientes também desenham esboços para expressar suas ideias).
■ Facilitar a percepção das funcionalidades das interfaces pelos usuários (hierarquias, fluxos, resultados, percepção de valor) ainda sem a criação de produtos finalizados.
■ Facilitar a visualização do conteúdo e de como os segmentos se relacionam, permitindo uma visão editorial geral. Wireframes devem ter os rótulos (labels) a ser usados no produto final. Se disponíveis, também os alguns textos a serem publicados.
■ Prover uma percepção básica de como os elementos da interface se relacionam, permitindo uma compreensão inicial do layout. Nos wireframes já deve haver uma sugestão detalhada de malha estrutural (grid), bem como uma proposição de uso da tela para diferentes dispositivos/resoluções de tela.
■ Detalhar as especificações para a criação e o desenvolvimento do produto, incluindo os aplicativos dinâmicos, animações, ações e movimentos dos usuários e respostas dos sistemas do início até o final, passando por etapas intermediárias. Também os problemas funcionais devem ser previstos: O que acontece se o usuário preenche um campo de maneira incorreta? O que acontece se o sistema congela depois de se enviar um formulário? Que retorno os clientes devem receber em cada situação de interlocução direta?
A aplicação de legendas sobre as funcionalidades de aplicativos permite que o cliente e a equipe em geral compreenda os componentes, nesta etapa do projeto em que as ideias ainda não têm forma definida.
■ Prevenir problemas que podem aparecer depois da inserção do conteúdo nas páginas.
■ Facilitar o planejamento das próximas etapas do projeto, a partir da visão mais clara do produto.
O conjunto de wireframes inclui a listagem e o posicionamento dos elementos e do conteúdo de cada interface e ponto de contato, com os vínculos entre eles, podendo constituir versões simplificadas das páginas de uma interface web ou aplicativo, com poucos textos e links, sem detalhamento gráfico, para o exame das funcionalidades, da abordagem editorial, da navegação, dos relacionamentos entre seções (hierarquias), controles. Os modelos podem ser muito simples no início e, à medida que o projeto avança, podem ir ficando mais complexos e sofisticados.
Ao longo de projetos de mídias digitais, wireframes são registros a corrigir, testar e aperfeiçoar (as versões iniciais podem ser mantidas em arquivo, para consulta). Seus arquivos devem incluir data de atualização, nome e número da tela e, se necessário, anotações descritivas das ações realizadas na tela e instruções sobre a funcionalidade para os desenvolvedores.
Estas anotações são descrições que orientam o desenvolvimento quando o designer não está presente, justificando porque determinadas decisões foram tomadas e explicando funcionalidades adicionais.
Quando produzidos em momento mais avançado do projeto, wireframes podem se aproximar dos protótipos, ficar mais detalhados e incluir informações mais específicas, necessárias ao desenvolvimento de cada tela, como textos, gráficos, áudios, vídeos, animações, elementos de navegação, links. O grau de detalhamento depende do tipo de retorno que se espera da equipe e dos usuários, em testes. → Exemplo de wireframe no site de Uwe Thimel.
Para avaliar a funcionalidade geral e o fluxo dos percursos, pode ser suficiente fazer modelos de baixa-fidelidade, feitos com papel e lápis, de fácil aprendizado, ou ferramentas de apresentação, como PowerPoint e Keynote, disponíveis na maioria dos dispositivos, em diferentes versões. Já para estabelecer especificações detalhadas de layout e recursos funcionais da interface, é preciso maior detalhamento e o uso de ferramentas com mais recursos dinâmicos, criadas especialmente com este objetivo, como Axure RP, UXPin, Justinmind (consultar lista abaixo).
Alguns projetos permitem que, depois de ajustado e aperfeiçoado o modelo de informações, se acrescente algum conteúdo gráfico à interface. Em outros casos, para que os wireframes sejam testados por representantes dos usuários finais, podem precisar de um acabamento visual mais elaborado que os fios e as listas de links, para ficar mais amigáveis.
Um usuário de teste pode não entender direito porque deve dar palpite sobre o conteúdo e não sobre o layout, sobre o tamanho das fontes mas não sobre as suas cores. Nesse caso, wireframes com indicações de cores, tipologias e imagens podem ajudar muito a criar um ambiente mais compreensível e produtivo. A formatação é orientada especialmente pelo conteúdo, pelos meios de acessar estes elementos (botões, rótulos, formulários), pelas ferramentas de navegação (barras, menus).
Textos neutros, como “Lorem ipsum”, devem ser substituídos por frases indicativas do conteúdo que será publicado, como “Área dedicada às associações de moradores da cidade X”. Textos sobre produtos devem ser ainda mais detalhados, pois são especialmente importantes nas compras online.
Outras técnicas relacionadas
Versões simplificadas de wireframes e protótipos podem ser feitas para registrar o passo a passo das ações a serem realizadas, e ser testadas facilmente, permitindo a verificação de interações sequenciadas e a escolha entre diversas soluções gerais.
■ Protótipos de papel são fáceis de examinar, modificar e de levar para reuniões com colegas de projeto e demais stakeholders. Podem também colaborar para as soluções finais e desempenhar um papel ativo no contexto de trabalho.
O conceito de protótipo de papel pode ser também explorado na criação paralela de soluções, em que uma equipe inicialmente cria protótipos individuais, a seguir, em duplas que juntam as duas soluções individuais, e a seguir em um grupo maior, que chega a uma solução mais geral – o número de etapas depende não só do número de pessoas envolvidas, como do tempo disponível para o conjunto de etapas em um mesmo encontro. Este processo pode ser usado também na criação de layouts.
■ Storyboards, representações visuais das ações dos usuários com a interface, também facilitam a criação de narrativas de modo estático. Procuram mostrar esquemas de pessoas envolvidas nas ações a realizar, a ordem das ações, os contextos de uso, necessidades a serem atendidas, motivações para o uso. Também com a finalidade de criar consenso sobre a visão do produto na equipe de projeto, estão próximos dos modelos conceituais estabelecidos por meio de personas e cenários.
Na elaboração de storyboards, identifica-se os atores envolvidos e como vão usar o produto. Se o produto tem diversos recursos, desenha-se um storyboard para cada situação de uso. Como em tiras de histórias em quadrinhos, as ações dos usuários são desenhadas em sequência – as figuras humanas podem ser apenas tracinhos, sem necessidade de realismo, o importante é que facilitem a avaliação de modelos de interação, sem detalhamento de funcionalidades.
Pode-se expandir os storyboards e acrescentar histórias relacionadas às personas, sobre os usuários, seus hábitos, suas demandas.
Pode-se também, em vez de sequências com representações de usuários, usar sequências com representações de telas, ao modo de wireframes, para que se reproduza a sequência de uso de cada uma com o uso de setas.
■ Cartões também permitem o exame de ações sequenciadas, apenas essas ações são apenas escritas em cartões e dispostas na ordem de realização pelos usuários. E podem ser testados informalmente com pessoas próximas.
(Atualizado em 24.1.2017)
Referências
→ Uma nova onda de ferramentas de wireframing e prototipagem – recomendações de ferramentas para confecção de wireframes (Blog de AI, acesso em 24.10.2016)
→ 24 Free mockup and wireframe tools for web designers – recomendações de ferramentas gratuitas para confecção de wireframes (acesso em 19.8.2015)
→ Prototyping (Usability.gov, acesso em 20.7.2014)
→ Prototyping dynamics: sharing multiple designs improves exploration, group rapport, and results (PDF), Steven P. Dow, Julie Fortuna, Dan Schwartz, Beth Altringer, Daniel L. Schwartz, Scott R. Klemmer (Stanford HCI Group, acesso em 20.7.2014)
→ 10 Effective video examples of paper prototyping, Paul Andrew (Speckyboy Design Magazine, acesso em 20.7.2014)
→ Responsive layouts, responsively wireframed (ThisManLife, acesso em 14.6.2012)
→ Sketchy wireframes (Boxes and Arrows, acesso em 7.1.2010)
→ Livro: Design para a internet – projetando a experiência perfeita, de Felipe Memória. Rio de Janeiro: Editora Campus, 2006.
→ Book review: Paper prototyping (UX Matters, acesso em 13.7.2014)
→ Wireframe showcase (acesso em 24.5.2010)
→ 35 Excellent wireframing resources, de Cameron Chapman (Smashing Magazine, acesso em 29.3.2010)
→ Improving task flows: active vs. passive tasks, de Austin Govella (Thinking&Making, 12.5.2005, acesso em 21.3.2010)
→ Integrating prototyping into your design process, de Fred Beecher (Boxes and Arrows, acesso em 20.10.2009)
→ Improving user task flows: documenting content and behavior, de Austin Govella (Thinking&Making, 2.3.2005, acesso em 21.3.2010)
→ Wireframes (blog de Jakub Linowski, acesso em 12.1.2009)
→ Como fazer wireframes de interfaces, de Frederick van Amstel (Usabilidoido, acesso em 12.1.2008)
Programas para criação de wireframes e protótipos funcionais
→ Adobe Proto – Adobe Touch App, permite a criação de wireframes interativas de websites e apps móveis em tablets (acesso em 5.2.2012)
→ Axure RP (confecção de wireframes, fluxos de usuários e sitemaps, bem como de protótipos interativos, páginas-mestras, com uso de componentes prontos a partir de bibliotecas. Demanda algum tempo de aprendizado e conhecimentos básicos de programação)
→ Balsamiq (criação de wireframes rápidas, simples e estáticas, de baixa fidelidade, semelhantes a esboços feitos à mão livre. Oferece ampla biblioteca de elementos)
→ Fluid UI – prototipação para Android, que facilita a criação de interfaces com HTML, JavaScript e CSS)
→ Flair Builder (multi-plataforma, com palheta de componentes de uso comum em wireframes interativas)
→ ForeUI (online, drag and drop de elementos, adaptação do preview para Windows Xp ou Mac, US$ 79)
→ GUI Design Studio (ferramenta online para a criação de wireframes, bem como de interfaces web, desktop e aplicativos para dispositivos móveis, acesso em 29.3.2010)
→ Hot Gloo (ferramenta online que tem dois modos de trabalho edição e revisão. Este último permite a inserção de notas e comentários, acesso em 18.8.2009)
→ inVision – desenho de protótipos interativos com aproveitamento de modelos criados em formato de imagem (gif, jpeg, ), recursos de compartilhamento de workflow (acesso em 25.2.2012)
→ Pencil Project –ferramenta de prototipagem de GUI de código aberto disponível para todas as plataformas.
→ iPlotz (gratuito para até 5 páginas, mensalidade ou anuidade para número ilimitado de projetos, tem recursos de colaboração e recursos de gestão de projetos – com a verificação das tarefas já completas, por exemplo)
→ Jumpchart, (aplicativo online, com ambiente de compartilhamento de mensagens para a equipe de projeto)
→ JustinMind (ferramenta para a criação de protótipos de aplicativos, sites, produtos web móveis. Como o Axure, demanda algum tempo de aprendizado. Pagamento mensal pelo uso. Acesso em 6.8.2009)
→ JustProto (online, diagramas de processo elementos padronizados, bom controle de texto, poucos eventos interativos)
→ Lovely Charts (gratuito, aplicativo online para a criação de diagramas de fluxo, mapas de sites, organogramas, wireframes, de maneira intuitiva)
→ MockFlow (ferramenta online com elementos arrastáveis e que permite que qualquer página seja transformada em master)
→ Marvel(criação de wireframes com recursos de aplicação dinâmica do layout em formato de imagem como background)
→ Microsoft Expression Studio 3, (aplicativo que permite a representação de diversos estados da interface, com ou sem estilo de rascunho, com possibilidade de compartilhar telas com os cliente e obter retorno)
→ Mockingbird, (aplicativo online, que publica online os protótipos, para visualização pela equipe e pelos clientes em beta no dia do acesso em 5.11.2009)
→ Mockplus (aplicativo WYSIWYG, baseado em desktop, que pode ser usado para a prototipação de aplicativos móveis e web rápida. Com diversos componentes prontos, não requer conhecimentos de programação)
→ Omnigraffle (ption”>diagramas, diagramas de processo, layouts simplificados, protótipos funcionais)
→ Pencil Project (funciona com o Firefox para a produção de protótipos funcionais e wireframes)
→ Pidoco (aplicativo online, que permite a realização de testes de usabilidade remotos com os protótipos gerados. Pacote mais simples a $10 mensais,)
→ Proto.io – ferramenta da Adobe para a confecção de protótipos para dispositivos telefones e tablets, com recursos para a customização de modelos básicos pré-desenhados (acesso em 25.2.2012)
→ ProtoShare (ferramenta online compartilhável para Mac ou PC, pagamento mensal,)
→ UxPin (acesso em 29.7.2016)
→ WireframeSketcher (plug-in da plataforma de desenvolvimento Eclipse, com uma extensa palheta de elementos arrastáveis de interfaces de usuário, formulários e ícones)
→ Wirify (gratuito ou com funcionalidades utilizáveis mediante pagamento, permite a elaboração de wireframes a partir de webpages, acesso em 24.1.2017)
Programas para auxílio de autoria
→ Visio – the interaction designer’s nail gun (3rd edition) (matrizes para a construção de wireframes com o Visio)
→ K Sketch, programa que permite a criação e a gravação de esboços, com formas livres, como as desenhadas a mão livre. (acesso em 6.4.2010)<