Arquitetura da informação
Atividades relacionadas
Design estrutural (wireframes)
Wireframes são conjuntos de documentos que mostram a estrutura, a hierarquia de conteúdo, indicações de controles e de conteúdo que irão compor uma interface web. Muitas vezes identificados com protótipos funcionais, são documentos importantes para a documentação da conceituação técnica, editorial e dos recursos de um produto interaivo, para o seu desenvolvimento, edição e avaliação comercial.
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 elas, podendo constituir versões simplificadas das páginas de uma interface web, com poucos textos e links mas sem detalhamento gráfico, para o exame das suas funcionalidades, da abordagem editorial, da navegação, dos relacionamentos entre seções (hierarquias), controles
Próximas aos protótipos, podem também incluir informações detalhadas, 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. Se é preciso avaliar a funcionalidade geral e o fluxo dos percursos, pode ser suficiente fazer modelos de baixa-fidelidade. Já se é preciso estabelecer especificações de layout e recursos da interface, é preciso realizar wireframes mais detalhados.
Wireframes têm como função:
◊ Nas fases iniciais explorar e desenvolver os principais conceitos, com o registro dos primeiros produtos do processo de criação da estrutura conceitual e informacional, de alguma maneira subjetivo, para a intervenção crítica e reformulação por outros profissionais, como analistas de sistemas, arquitetos da informação, programadores, designers de interface, redatores e editores, profissionais de marketing e outros profissionais.
◊ Permitir a compreensão da estrutura pelos stakeholders do projeto, para a sua avaliação.
◊ Facilitar o planejamento das próximas estapas do projeto, a partir da visão mais clara do produto.
◊ Permitir a percepção de como as informações se relacionam e como a interface funciona.
◊ Detalhar as especificações para a criação e o desenvolvimento, incluindo os aplicativos dinâmicos ("rich media applications"), animações, as ações e os movimentos do usuário e respostas dos sistemas do início até o final, passando por etapas intermediárias.
A aplicação de legendas nos diagramas sobre as funcionalidades de aplicativos ou os movimentos de animações ajuda o cliente a compreender melhor 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.
■ Ao longo do projeto, wireframes servem como registros que devem ser corrigidos, testados por futuros usuários e aperfeiçoados (as versões iniciais precisam 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.
■ Alguns projetos permitem que, depois de ajustado e aperfeiçoado o modelo de informações, se acrescente o conteúdo gráfico à interface.
Em outros casos, para que 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.
■ É comum, a partir da elaboração de wireframes, a realização de protótipos interativos que funcionam para testes preliminares de usabilidade e da funcionalidade da interface, que complementam este desenvolvimento conceitual. ► Exemplo 1 (link externo)
Assuntos relacionados
► Desenvolvimento de protótipos
► Mapeamento de processos
► Esboços (sketches)
Referências sobre design estrutural (wireframes)
► Sketchy wireframes (BoxesandArrows, 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.
► Real wireframes get real results (Boxesandarrows, acesso em 8.10.2006)
► A-Z indexes to enhance site searching (Digital Web, acesso em 5.2.2005)
Mais informação sobre o assunto (links externos)
► 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)
► Improving user task flows: documenting content and behavior, de Austin Govella (Thinking&Making, 2.3.2005, acesso em 21.3.2010)
► 16 Design tools for prototyping and wireframing (SitePoint, acesso em 23.4.2009)
► Review: 16 user interface prototyping tools (DexoDesign, acesso em 12.1.2009)
► Wireframes (blog de Jakub Linowski, acesso em 12.1.2009)
Programa para criação de wireframes
Programas para auxílio de autoria
