REDESENHO MODERNO PARA RESSALTAR A TRADIÇÃO

Transcrição

1 56 :: Webdesign REDESENHO MODERNO PARA RESSALTAR A TRADIÇÃO Fundado há mais de 110 anos, o IPT ( Instituto de Pesquisas Tecnológicas, é uma das fundações mais tradicionais no país. Diante da necessidade de apresentação de um novo modelo de seu site institucional, a agência de design VSEIS ( acabou sendo contratada para desenvolver este serviço. Nesta entrevista, Estevam Romera (gerente de projetos) e Rommel Lima (diretor de arte) ressaltam os benefícios de se criar uma sintonia com o cliente para agilizar as etapas de produção do trabalho, além de revelar os detalhes técnicos e conceituais envolvidos no desenvolvimento deste projeto. Wd :: No descritivo deste case, vocês revelam que sua produção envolveu enorme trabalho de arquitetura de informação desenvolvido com o departamento de marketing do instituto. Na relação cliente-agência, quais seriam os aspectos essenciais para garantir uma troca de informações saudáveis e um ritmo de trabalho fluido? VSEIS :: A sintonia aconteceu desde o início do projeto. O comprometimento das partes e a frequência das conversas e reuniões tornaram a relação muito confiante e caminharam juntos para o sucesso. Com um prazo não muito extenso, e um trabalho enorme a ser feito, a agilidade entre as partes e o cumprimento de cronogramas tornaram o trabalho bem fluido. Wd :: Em relação à arquitetura de informação, é possível perceber a divisão das interfaces em três camadas: cabeçalho e rodapé, fixos; e um miolo onde varia a transição do conteúdo a ser visualizado pelo usuário. Por que vocês decidiram adotar este modelo no design de interfaces? VSEIS :: Em conjunto com a área de marketing, e entendendo que o público que visita o site da instituição é muito grande e variado por idade e ramo de atividade, adotamos um fluxo de navegação mais convencional, optando pelo layout mais clean e uniforme. Além de percebermos e decidirmos pontos importantes que deveriam estar sempre à vista do usuário, criamos uma hierarquia entre os elementos de uma forma bem visual. Por exemplo: no menu esquerdo foi dado um peso maior em alguns itens que norteiam a escolha do usuário dentro dos temas oferecidos pelo IPT, diferenciado pelo tamanho das fontes. Wd :: Assim como em outras áreas do site, o cabeçalho apresenta um visual bem limpo, com a disposição de apenas dois elementos: logotipo do instituto e a área de buscas. Quais fatores indicaram a prioridade para que tal funcionalidade fosse colocada naquele local? VSEIS :: A gama de serviços, temas, conteúdos e notícias oferecidas pelo IPT e a variedade de modelos páginas existentes no site é enorme. Pensando nisso, optamos por evitar qualquer elemento ao redor, seja no cabeçalho lateral ou rodapé, que desviasse a atenção e/ou poluísse qualquer área que não fosse a do conteúdo. Tentamos assim tornar mais agradável a visita e a leitura do conteúdo ao visitante. Dessa forma, optamos pelos elementos mais importantes ao IPT e ao visitante em destaque no

2 estudo de caso - IPT :: 57 cabeçalho: o novo logotipo, apresentando e reforçando essa reformulação de identidade; e o campo de busca, tão importante ao usuário, que é oferecido e está presente durante toda a sua navegação pelo site. Wd :: Já no rodapé, a outra camada fixa das interfaces, aparecem informações complementares do instituto e do site, como links para contato, descrição do endereço completo, telefone, mapa do site, cadastro etc. Qual a importância de se manter estes dados disponíveis em uma área, até certo ponto, pouco privilegiada da interfaces? Como vocês procuraram determinar a relevância e o destaque das informações disponíveis pelo site? VSEIS :: Levamos em consideração a intenção da maioria dos visitantes ao entrar no site do IPT. Ao analisar os dados, foi constatada a busca de informações sobre os chamados Centros Tecnológicos, serviços e muitas dúvidas sobre as áreas em que o instituto poderia atuar. Além disso, percebemos que no site anterior havia um conteúdo muito confuso sobre as áreas, o que refletia principalmente no enorme número de ligações feitas ao instituto em busca de informações simples que poderiam estar no próprio site. Com esses dados em mãos, dividimos hierarquicamente o conteúdo, trazendo e sugerindo de forma clara esses caminhos no menu principal, além das informações de apoio a estes temas (como notícias, eventos, fornecedores...), que entram no mesmo menu, mas com um peso menor através do tamanho dos tipos. Ao rodapé foi reservado todo o conteúdo institucional do IPT, considerado secundário nas intenções dos visitantes, mas não menos importante do que todo o restante. Por isso, ele está presente em todas as páginas visitadas junto ao endereço físico da instituição, onde contamos com experiências anteriores do visitante, além de ser comum ao público brasileiro o endereço estar nessa área na maioria dos sites. Dessa forma, colocamos próximo tudo que gira ao redor da área institucional, como contato com RH, Imprensa, Ouvidoria, cadastro ao banco das instituições, além do RSS e o Twitter. Wd :: Ainda no rodapé, vemos a disponibilidade de dois ícones: um de RSS e outro do Twitter. Sobre estes dois elementos, alguns especialistas apontam que o modelo de microblogging pode acarretar na morte do RSS. Diante da experiência neste projeto, vocês acreditam que estes dois modelos possam existir de forma harmônica? VSEIS :: Acreditamos que uma ferramenta não vai tomar o espaço da outra, e sim conquistar seu próprio espaço. Imaginando que o uso inteligente das duas ferramentas atende aos tipos variados de usuários, elas podem até caminhar juntas. O RSS atende a um perfil de usuário que quer informações maiores e mais completas, além de um histórico organizado das ações do site de forma até atemporal, estando esse usuário ou não no Twitter. Já o Twitter oferece um serviço instantâneo e ágil, mas com limitações na informação, e é mais usado como chamada para algum dos conteúdos do site, e divulgação das ações de marketing e mídia do IPT. Wd :: Na divisão do miolo do site, parte de transição dos conteúdos disponíveis na navegação, é apresentada uma grid que varia entre duas a três colunas, dependendo da seção escolhida. Como vocês chegaram nesta definição e de que maneira ela ajuda a melhorar o fluxo de navegação? VSEIS :: Nas áreas que existem muita subdivisões, como a de segmentos e centros, optamos por uma divisão mais visual, associando uma imagem ao assunto, facilitando a escolha do usuário ao ver uma imagem associada ao que procura e seu ramo de atuação, dando o mesmo peso a todas as áreas e centros. Nos conteúdos finais, como em um centro, uma notícia sobre o IPT, ou qualquer outra área, forçamos e reforçamos aos usuários uma área de navegação, um lugar reservado a um menu de apoio da área, acostumando e doutrinando a navegação desse visitante. Acreditamos que repetindo as soluções e os critérios em todo o site, independente da área, tornamos mais intuitiva, confortável e proveitosa a navegação desse usuário pelo ambiente. Wd :: Na edição de julho, Seu site está na moda?, foram analisados alguns aspectos que determinam as modas e as tendências no design digital. Atualmente, o uso de espaçamento em branco parece ser a principal delas. Qual seria o limite no uso de áreas de respiro em interfaces digitais? E como vocês trabalharam esta questão neste projeto?

3 58 :: Webdesign Integração com a API do Google Maps permite ao usuário definir sua rota de localização VSEIS :: Antes os espaços em branco em um site eram considerados espaços perdidos e muitas vezes não eram vistos com bons olhos. Hoje, com o excesso de informação que somos expostos na internet, o usuário está muito mais seleto com relação às informações, e mais exigente com a apresentação desse conteúdo. No momento de dividir e pesar o conteúdo que temos a oferecer, os espaços em branco aparecem como um recurso fundamental. O site do IPT oferece uma quantidade muito grande de conteúdo para leitura. Assim, resolvemos usar esse recurso como aliado e tomamos o cuidado de preservar esses respiros em todo o layout e desenvolvimento. O que queremos é que o visitante se sinta confortável em estar e navegar pelo site, tirando o maior proveito possível das informações oferecidas, pois entendemos a importância que o site tem em todo esse trabalho do IPT em buscar a renovação da marca e conceito da empresa perante o grande público. Wd :: O breadcrumb é um elemento muito útil quando falamos do processo de orientação em ambientes digitais. De que maneira esta funcionalidade foi aplicada dentro deste projeto? E que tipo de cuidado deve ser tomado na hora de se trabalhar com este elemento, de maneira que não seja intrusivo ou visualmente irrelevante? VSEIS :: Em um projeto deste tamanho, e com a reformulação que propomos, o breadcrumb se torna essencial. Ele serve como apoio ao usuário e muitas vezes elucida o caminho e a hierarquia da informação. Através dele, o usuário passa a perceber a conectividade entre os assuntos, facilita a navegação no momento, e intuitivamente guarda o caminho para chegar até tal informação numa futura visita. O breadcrumb não pode ser invasivo a ponto de confundir o usuário, e discreto a ponto de não ser percebido. Um recurso que usamos além da posição em que ele aparece, sempre na parte de cima do site, próximo do título da página visitada, é o de dar uma cor diferente para indicar visualmente qual página a pessoa está, identificando o último nó do caminho percorrido. Wd :: Em termos de combinação cromática, vemos uma predominância no uso de tonalidades de azul e preto. Quais aspectos determinaram a paleta de cores a ser utilizada na criação deste projeto? VSEIS :: A paleta de cores surgiu da nova proposta da marca IPT, que é toda baseada em tons azuis, por acreditar que esta seja uma cor sóbria, imponente, que remete a futuro, confiança e solidez de forma leva e moderna, e do conceito debatido entre a VSEIS e a área de marketing do IPT. Além disso, preocupados em deixar o site o mais leve e agradável possível, usamos pontualmente, como uma terceira cor de apoio, o laranja, que aparece nos breadcrumbs, situando o usuário, e nos botões que indicam mais conteúdos, os veja mais espalhados por todo o site. No restante, essa comunicação de cores é exercida nas fotografias espalhadas pelo site, seja nos destaques em Flash da página inicial, seja nas identificações dos centros e segmentos, ou até mesmo nas imagens que compõem uma notícia. Wd :: A tipografia aplicada no site é baseada em uma família de fontes sem serifa. Além de seguir a identidade gráfica da marca, de que maneira este tipo de fonte contribui para a experiência do usuário pelo ambiente? VSEIS :: O conceito da nova marca do IPT é

4

5 Uso do Breadcrumb ajuda a elucidar o caminho e a hierarquia da informação para o usuário TENTAMOS SEMPRE EDUCAR, ENCURTAR O CAMINHO E FACILITAR PARA O USUÁRIO baseado na solidez de 110 anos de experiências de mercado, e na adequação dessa marca aos dias de hoje de forma moderna, atual e leve. Pensando nisso, e na fonte escolhida para essa nova marca, trouxemos esses conceitos discutidos entre a agência e o cliente: justamente essa modernidade e leveza para os tipos escolhidos no site, sempre visando focar no conteúdo oferecido, e evitando ao máximo criar barreiras e elementos gráficos que desviassem o foco de visão do usuário. Neste caso, uma fonte sem serifa foi a escolha mais adequada. Usada de forma sóbria, ela apoia todo o conceito de modernização da marca e leveza e modernidade na navegação. Wd :: Um detalhe interessante deste projeto encontra-se no submenu localização, onde aparece uma funcionalidade para o usuário traçar uma rota para chegar até o instituto. Como surgiu a ideia de incluir esta facilidade no site? VSEIS :: Tentamos sempre educar, encurtar o caminho e facilitar para o usuário. Muitos deles não são familiarizados com ferramentas novas (ou nem tão novas). E são ferramentas que fazem a diferença e facilitam demais a vida do usuário. Sempre que temos a possibilidade de integrar recursos - sem prejudicar o layout, a interface e a navegabilidade do site - tentamos usá-los. A API do Google é muito bem escrita e cheia de exemplos. Com um pouco de paciência e dedicação, é sempre tranquilo de integrá-la. Wd :: Falando ainda sobre tecnologia, este projeto foi construído através da combinação de HTML, Javascript e PHP. Além disso, vemos o uso pontual do Flash na apresentação dos destaques randômicos do site. De que maneira vocês procuram determinar as tecnologias a serem utilizadas em um projeto? Como evitar o uso apenas pelo uso da tecnologia? VSEIS :: É isso que sempre tentamos evitar, o uso pelo uso. Flash cai muito nisso: uso exagerado que prejudica a navegação. Todo recurso tem uma utilidade real e ele tem que ser bem aplicado. Se impedir que o usuário chegue a algum conteúdo de alguma forma, o recurso está sendo mal usado. É preciso analisar o perfil do usuário que vai acessar o site. No caso de um site como o IPT, precisávamos garantir que ele fosse leve e visto em qualquer computador, navegador e resolução. Por isso, a opção de usar o Flash apenas no destaque. Mais que isso, o site poderia ficar pesado demais para alguns computadores. Wd :: Este case se caracteriza por ser uma criação envolvendo um modelo de site institucional. Em projetos deste porte, quais são as principais métricas utilizadas para se mensurar os resultados obtidos na produção? VSEIS :: Neste projeto, o que vale é o conteúdo do site. Quando lemos o relatório do Google Analytics, levamos em conta os números qualitativos: bounce rate, tempo que a pessoa passou no site e número de páginas que o visitante visualizou. Mas a diferença real mesmo foi no aumento ao número de demandas ao SAC do IPT. O site novo expõe muito melhor o que o IPT faz, os serviços prestados. Com isso houve um aumento de 200% no número de solicitações ao SAC do instituto.