em #Design
Lean Redesign UI – Episódio 03: Arquitetura da informação
Nos episódios anteriores, mostramos o pontapé inicial do nosso novo site e como alinhamos os times utilizando a gestão ágil.
Até o momento, as atividades giraram em torno das pessoas responsáveis por pesquisar e gerir. A partir daqui, os designers e desenvolvedores assumirão o protagonismo da arquitetura da informação. Começaremos a dar vida ao projeto.
Aperte o cinto e venha comigo.
Próxima parada: Fluxo de navegação
“… muitos designers pensam no layout primeiro. Nós precisamos parar de fazer isso.
Precisamos pensar em conteúdo estruturado antes.” Stephen Hay
A pessoa responsável pela arquitetura da informação tem em mãos grandes poderes, e por consequência, grandes responsabilidades. Para que ela trabalhe, os objetivos estratégicos da empresa precisam estar postos na mesa. Caso contrário, o redesign perde seu propósito. A organização do conteúdo de cada página depende da clareza desses objetivos.
Com essas informações, é possível pensar o site de um ponto de vista macro. Quem cuida da arquitetura da informação tem o papel de criar fluxos de navegação intuitivos.
Estamos desenvolvendo por ciclos (sprints) e o primeiro protótipo viável (conhecido como MVP) foi pensado para atender as seguintes prioridades:
- Mostrar detalhes de três trabalhos (cases).
- Destacar os produtos e serviços.
- Estimular o contato de possíveis clientes.
Esse será o nosso primeiro sprint.
Desenhando o fluxo
Existem algumas maneiras de representar o fluxo de navegação, a nossa favorita é o clássico: lápis e papel.
“Sim, você sabe desenhar. Desenhe sem medo.“
O desenho do fluxo é uma ferramenta que facilita a comunicação, mas não é obrigatório.
A partir dele decidimos que a página inicial terá 4 grandes blocos: Capa; Quem Somos; Produtos; Serviços e Conteúdos. Cada área com destino específico. De formulário de contato a link para os produtos. A palavra de ordem é: re-aproveitar.
Imaginamos nosso site como uma escultura. Logo, ele será lapidado através de melhorias progressivas.
Próxima parada: Matriz de conteúdo
Content precedes design. Design in the absence of content is not design, it’s decoration.
— Jeffrey Zeldman.
“Conteúdo precede design. Design na ausência de conteúdo não é design, é a decoração” por Jeffrey Zeldman, embaixador do conceito content first.
Quando um designer recebe a missão de pensar uma interface, surge uma vontade súbita de abrir o software de desenho. Normal, afinal, é assim que muitos aprendem. A proposta desta série é mostrar que existem outras maneiras de realizarmos nosso trabalho.
Nesse sentido, uma das mudanças que otimizou o nosso processo de criação e desenvolvimento da arquitetura da informação foi a de tratar o texto como o coração do novo site.
Pare e pense sobre o que é essencial para uma página ir ao ar. Se quisermos ser radicais ao extremo, não precisaremos muito mais do que uma página html com texto.
Começaremos apenas com uma estrutura bruta (Texto + Html). Os refinamentos (CSS + Javascript) virão com o tempo. Essa prática requer desapego. Se o seu time aceitar que o layout feio é provisório, agradecerão por não terem que gastar energia em re-trabalho.
Entra em cena a Matriz de Conteúdo: uma planilha para edição colaborativa do conteúdo. Nela teremos a versão mais atual dos textos que irão ao ar.
Cada coluna representa um aspecto da página inicial. Então teremos:
- bloco de conteúdo;
- referência no esboço;
- caracteres estimados;
- hierarquia do texto. (H1 ~ H6);
- texto sugerido.
Uma outra possibilidade é utilizar o Docs ao invés da planilha. Veja um exemplo aqui.
Dicas:
1- No Google Drive, utilize o recurso de comentário para sugerir alterações. Deixe no documento apenas a versão mais atual do texto.
2- Evite ao máximo o uso do Lorem Ipsum para preencher lacunas. É importante ter uma noção do conteúdo, mesmo que ele sofra pequenas alterações no desenrolar do projeto.
Assim que boa parte do texto estiver aprovado, podemos avançar.
No próximo texto falaremos sobre a criação de elementos visuais. Um processo nomeado: a atmosfera visual.
Até!
