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ídia digital. Realizados rapidamente 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, na web ou em dispositivos móveis. Inclui o registro dos primeiros produtos da criação da estrutura conceitual e informacional, para a priorização de conteúdos, a intervenção crítica e a formulação do produto por profissionais como analistas de sistemas, arquitetos da informação, desenvolvedores, designers de interface, redatores e editores, profissionais de marketing, de vendas e de outras atividades.

Permitir a compreensão da estrutura funcional para avaliação pelos diferentes 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 simplificados 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 em geral e de como os segmentos se relacionam, permitindo uma visão editorial geral. Wireframes devem ter os rótulos (labels) a serem usados no produto final. Se disponíveis, também os principais textos a serem publicados.

Prover uma percepção básica de como os elementos da interface se relacionam entre si, permitindo uma compreensão inicial do layout. Nos wireframes já deve haver uma sugestão detalhada de malha estrutural (grid) a ser utilizada, 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 enviado 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 a compreender 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 posicionamento dos elementos e do conteúdo de cada interface e ponto de contato, com o estabelecimento de vínculos entre eles, podendo constituir versões simplificadas das páginas de uma interface web ou aplicativo móvel, 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 ser corrigidos, testados e aperfeiçoados (as versões iniciais podem ser mantidas em arquivo, para consulta). Seus arquivos devem incluir a data de atualização, o nome e o número da tela e, se necessário, anotações descritivas das ações que serão realizadas na tela e instruções sobre a funcionalidade da interface 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 no pé desta página).

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. Neste 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 também, 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. Estes podem assim 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 inicialmente 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 telas, ao modo de wireframes, de modo 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 estas 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)

Briefs – criação online de apps para iPhone e o compartilhamento dos produtos através de um app visualizador. Destaca os detalhes animados das passagens entree cenas (acesso em 15.6.2013)

Denim (aplicativo de código aberto para o desenho de wireframes ao modo de esboços, muito útil especialmente para as primeiras etapas do projeto em que não se deve ater muito ao acabamento dos elementos e sim a seu aspecto conceptual, acesso em 7.1.2010)

Fluid UIprototipação para Android, que facilita a criação de interfaces com HTML, JavaScript e CSS (acesso em 10.6.2013)

→ Fluid UIferramenta online, desenvolvida em HTML5, para a prototipação de apps (acesso em 21.8.2012)

Flair Builder (multi-plataforma, com palheta de componentes de uso comum em wireframes interativas, acesso em 29.3.2010)

ForeUI (online, drag and drop de elementos, adaptação do preview para Windows Xp ou Mac, US$ 79. Acesso em 11.6.2009)

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)

→ iPhone MockUp – confecção de protótipos para iPhone, em modo outline ou esboço (acesso em 25.2.2012)

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, acesso em 20.2.2009)

Jumpchart, (aplicativo online, com ambiente de compartilhamento de mensagens para a equipe de projeto, acesso em 5.11.2009)

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, acesso em 28.5.2009)

→ Keynote Kung Fu – confecção de protótipos para web e dispositivos móveis para Mac (acesso em 20.6.2012)

Lovely Charts (gratuito, aplicativo online para a criação de diagramas de fluxo, mapas de sites, organogramas, wireframes, de maneira intuitiva, acesso em 13.9.2009)

MockFlow (ferramenta online com elementos arrastáveis e que permite que qualquer página seja transformada em master, acesso em 18.8.2009)

 Marvel (criação de wireframes com recursos de aplicação dinâmica do layout em formato de imagem como background)

Microsoft Expression Blend SketchFlow (prototipação de interfaces com Microsoft Silverlight, Windows (WPF), ou Surface, acesso em 16.3.2010)

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, acesso em 22.3.2010)

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 (diagramas, diagramas de processo, layouts simplificados, protótipos funcionais, acesso em 20.2.2009)

Pencil Project (funciona com o Firefox para a produção de protótipos funcionais e wireframes, acesso em 9.8.2008)

Pentotype – criação de apps para telefones e tablets, com efeito de esboço manual, a ser usada em tablets ou desktop com dispositivos para desenho (acesso em 3.8.2014)

Pidoco (aplicativo online, que permite a realização de testes de usabilidade remotos com os protótipos gerados. Pacote mais simples a $10 mensais, acesso em 29.10.2009)

→ 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, acesso em 20.2.2009)

RapidRabb.it (disponível para compra, acesso em 15.9.2009)

  Serena Composer (facilita o uso tanto por usuários da área comercial e analistas de negócios quanto por desenvolvedores, que podem criar requisitos para protótipos funcionais Disponível para compra, acesso em 15.9.2009)

Templatr (modelos onlines para a criação de designs para blogs; demandam conhecimento de HTML e permitem o download dos templates produzidos, acesso em 29.3.2010)

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, acesso em 18.6.2009)

Wirify (gratuito ou com funcionalidades utilizáveis mediante pagamento, permite a elaboração de wireframes a partir de webpages, acesso em 24.1.2017)

 

Criação de protótipos para dispositivos móveis

 UXRecorder (acesso em 5.9.2016)

 

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)

Sketchbook Pro (permite o desenho livre de esboços, com suporte de ferramentas de texto e alguns efeitos de texturas)

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)<