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

■ Seu conjunto inclui a listagem dos elementos de todas as páginas e do conteúdo de cada uma, com o estabelecimento de vínculos entre elas

Incluei 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 permitem a percepção de como as informações se relacionam e ajudam a prevenir problemas que podem aparecer depois da inserção do conteúdo nas páginas

São também muito úteis para tornar as informações de projeto mais claras para componentes de projeto grandes e heterogêneos, como engenheiros de sistemas e designers de interface

■ Ao longo do projeto, 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 para os desenvolvedores

■ Podem também indicar, para o desenvolvimento de aplicativos dinâmicos ("rich media applications") ou de animações, as ações e os movimentos do usuário do início até o final, passando por etapas intermediárias e os momentos mais importantes

A aplicação de legendas nos diagramas sobre funcionalidades de aplicativos ou movimentos de animações ajuda o cliente a compreender melhor estes componentes, nesta etapa do projeto em que as idéias ainda não têm forma definida

■ 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 a realização de testes de usabilidade e da funcionalidade da interface, que complementam este desenvolvimento conceitual

Assuntos relacionados
► Mapeamento de processos

► Referências bibliográficas (Elaboração da estrutura de web sites)
- A-Z indexes to enhance site searching (Digital Web, acesso em 5.2.2005)
- Real wireframes get real results (Boxes and Arrows, acesso em 8.10.2006)