2009/09 - Melhorando a navegação e despoluindo o visual: Barra lateral dinâmica

Com o crescimento acelerado do conteúdo de nosso site, que já se situa na casa das centenas de páginas, passamos a disponibilizar cada vez mais links em cada página: não apenas links para as páginas mais importantes do site (como a página inicial, o mapa do site, etc.), mas também links específicos ligando conteúdo relacionado.

Por exemplo, as notícias publicadas na imprensa que tratam de resultados de uma pesquisa cujo relatório também está no site, passaram a incluir um link direto da notícia para os resultados (o que acreditamos facilitar a navegação pelo nosso conteúdo).

Analogamente, estamos em processo de criação de links entre eventos e notícias, produtos e relatórios, etc. Como resultado deste 'enriquecimento' do site, passamos a ter um acúmulo de banners, ícones e links espalhados em cada página de conteúdo, o que acabou por criar um visual que avaliamos como 'poluído'.

Este fato nos levou a iniciar um processo de análise de mecanismos de interface de usuário que posibilitassem um visual mais 'clean', e que ao mesmo tempo nos permitisse aumentar ainda mais a quantidade de informação disponibilizada em cada página.

Após algumas semanas de pesquisas, optamos pela inclusão de uma barra lateral dinâmica, baseada em código DHTML. Dentre o grande volume de exemplos disponíveis na Web, optamos por nos basear em material obtido de http://www.dynamicdrive.com/.

O resultado de nossos esforços já pode ser visto nos índices de todas as seções do site (veja p.ex. http://www.mbi.com.br/MBI/empresa/testimonials/ ou http://www.mbi.com.br/MBI/biblioteca/papers/), e será gradualmente estendido para servir de mecanismo padrão de navegação pelo site.

Em particular, gostariamos de chamar a atenção para alguns detalhes: os títulos da barra lateral são exibidos em fundo azul, e basta apontar o mouse para eles (sem precisar clicar) para que a seção correspondente se torne visível. O nome do título selecionado é exibido em cor amarela, enquanto os demais títulos são exibidos na cor branca.

As seções e seu conteúdo foram desenvolvidas para serem sensíveis ao contexto, isto é, embora a barra lateral tenha sempre a mesma apariência, seu conteúdo se modifica de acordo com o local do site onde a barra é exibida.

 Agosto de 2009