Arquitetura da informação - Organização do conteúdo
Atividades relacionadas
Design estrutural (wireframes)
Wireframes compõem versões das páginas do site que constam apenas de textos e links, sem qualquer detalhamento gráfico. O conjunto de wireframes inclui a listagem e posicionamento dos elementos de todas as páginas e do conteúdo de cada uma, com o estabelecimento de vínculos entre elas.
Podem também informações detalhadas, necessárias ao desenvolvimento de cada tela, como texto, gráficos, áudio, vídeo, animações, elementos de navegação, links.
■ Estes modelos têm como função:
◊ Registrar os primeiros produtos do processo de criação da estrutura conceitual e informacional, de alguma maneira subjetivo, para a intervenção, crítica e mesmo reformulação de 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.
◊ Descrever detalhadamente, para o desenvolvimento, 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.
◊ Ajudar a 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, uma descrição das ações que serão realizadas na tela e instruções sobre a funcionalidade da interface para os desenvolvedores.
■ 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 um pouco mais elaborado que os fios e as listas de links, para ficar mais amigáveis.
O 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.
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 como 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
Referências bibliográficas (Criação de modelos de web sites)
► 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 (Boxes and Arrows, 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)
► 16 Design tools for prototyping and wireframing (acesso em 23.4.2009)
► Review: 16 user interface prototyping tools (acesso em 12.1.2009)
► Wireframes (blog de Jakub Linowski, acesso em 12.1.2009)
Programa para criação de wireframes
► 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)
► ForeUI (online, drag and drop de elementos, adaptação do preview para Windows Xp ou Mac, acesso em 11.6.2009)
► JustProto (online, diagramas de processo, elementos padronizados, bom controle de texto, poucos eventos interativos, acesso em 28.5.2009)
► Omnigraffle (diagramas, diagramas de processo, layouts simplificados, protótipos funcionais, acesso em 20.2.2009)
► Balsamiq mockups (modelos para esboços, acesso em 20.2.2009)
► iPlotz (gratuito para até 5 páginas, mensalidade ou anuidade para número ilimitado de projetos, acesso em 20.2.2009)
► Serena Composer (disponível para compra, acesso em 15.9.2009)
► RapidRabb.it (disponível para compra, acesso em 15.9.2009)
► Pencil Project (funciona com o Firefox para a produção de protótipos funcionais e wireframes, acesso em 9.8.2008)
► Axure RP (aplicativo para a produção de protótipos funcionais e wireframes, especificações de programas, acesso em 9.8.2008)
► PhotoShare (ferramenta online para Mac ou PC, pagamento mensal, acesso em 20.2.2009)