Na edição de novembro, você poderá conferir uma reportagem especial que apresenta os atuais desafios na construção de interfaces manipuláveis e flexíveis.

Para quem ficou curioso sobre o assunto, publicamos por aqui um breve aperitivo, através do bate-papo que tivemos com Yasodara Córdova, designer de interação, pesquisadora de metodologias ágeis para design e professora do curso de Desenho Industrial da Universidade de Brasília.

Wd :: Diagramação é um processo antigo no cotidiano de trabalho do designer. Com o advento da internet, quais foram as principais transformações ocorridas, ou seja, o que permaneceu como uma espécie de “herança” sobre boas práticas e o que foi modificado no processo de diagramação de interfaces para mídias digitais?

Yasodara :: Diagramação é uma prática antiga não só entre designers, mas entre outros profissionais encarregados de projetar. Grid significa grade, é um tipo de malha criada e utilizada para demarcar e organizar proporções entre futuras localizações. Cidades, por exemplo, quando planejadas, apresentam grid pré-definida, utilizado para facilitar a distribuição dos elementos pelo espaço.

No caso do papel, a grid é utilizada para definir desde a mancha gráfica até a distância entre as linhas do texto, tudo voltado para melhorar a leitura. No começo da web, a preocupação com a grid era praticamente inexistente. Tanto que havia espaço para gifs animados pulando de qualquer lugar da tela. Com o crescimento da web 2.0, isso mudou bastante, uma vez que o conforto do usuário passou a ser preocupação central do processo de criação de sites.

Projetar grid para suporte em papel segue basicamente o mesmo processo utilizado para conceber grids para sites. A diferença vem na produção: em uma revista o diagramador acomoda o conteúdo nas páginas para não fugir ao projeto; já na web é hora de montar o HTML/CSS da(s) tela(s). A web herdou do processo de diagramação justamente a falta de preocupação com esta parte do design. É muito comum o cliente leigo ignorar essa parte do design ou simplesmente não querer pagar por não entender para que serve, só que na hora de entregar o produto é visível a diferença entre projetos que não utilizaram grid e os que utilizaram.

Wd :: Sites como o iGoogle e o Netvibes possibilitam que o usuário altere a apresentação visual da interface, com o deslocamento e/ou fechamento das caixinhas oferecidas inicialmente pelo ambiente. Ou seja, este modelo de interface praticamente cria um navegador dentro do navegador, como se fosse uma espécie de “metalinguagem navegacional”. Quais são os desafios na hora de se pensar a diagramação de projetos disponíveis em um meio que permite uma extrema manipulação dos elementos existentes em uma interface? E até onde essa dinâmica deve ser estimulada e como isso afeta o trabalho de diagramação?

Yasodara :: A modificação da informação na tela só é possível por causa da grid. É ela que possibilita que o usuário tenha “liberdade” para alterar a interface e/ou os dados da tela e nada importante saia do lugar. O digital permite essa extrema manipulação do que está na tela, e isso é muito bom porque abre possibilidades de trabalho muito interessantes para o designer, que quase não tem limitações ao criar.

Além disso, a personalização dos serviços pela intervenção individual é uma tendência forte: o usuário quer que seu ambiente digital, seja ele o celular, o PDA ou a tela do computador, seja uma extensão de sua personalidade e, portanto, exclusivo. Isso vai desde o desktop, que obedece a uma grid, assim como outros tipos de displays. O designer precisa ter isso em mente para ajudar a fornecer mais opções para cada usuário, esse é um dos desafios.

Outro grande desafio para o diagramador é lidar com as funcionalidades pré-existentes no browser, do tipo aumentar ou diminuir a letra. A estrutura tecnológica do back-end também é crítica nesse tipo de aplicação. O designer deve se preocupar com questões do tipo: “como o site vai receber dados”, ou “como o site vai armazenar o layout que o usuário escolher” para que se diminua a possibilidade de erro e a experiência do usuário seja a melhor possível.

Wd :: Geralmente, a Arquitetura de Informação é uma etapa que antecede a diagramação das interfaces. Quais são os aspectos fundamentais para se garantir a harmonia do trabalho entre a etapa de arquitetura de informação e o design?

Yasodara :: O trabalho de arquitetura de informação é o que dá início às outras fases de produção do design, justamente por fechar o escopo do projeto com relação a conteúdo, mas não é obrigatório que se tenha a arquitetura fechada para dar início ao trabalho de construção da grid.

Por exemplo: os sites da bbc.co.uk obedecem todos a mesma grid. Qualquer site ou aplicação lançada pelo veículo obedece à grid do projeto original para garantir que exista unidade e coesão entre os vários braços da BBC. Nesse caso, a grid vem antes da arquitetura de informação, e foi prevista desde a formulação da identidade do primeiro site do veículo.

Basta observar o documento “Behind The Glass Wall”, que conta como se deu o desenvolvimento da identidade visual para a empresa, para se ter certeza de que a grid pode ser encarada como pilar fundamental da estratégia de design que envolve toda a empresa, e vem antes da fase de arquitetura de informação.

Da mesma maneira, diagramar um projeto de modo novo pode ser desperdício de investimento. No caso de pequenos sites, pode se optar pela utilização de uma grid pronta, como as disponíveis em http://960.gs/, ou mesmo construir uma a partir da arquitetura de informação, que é mais ágil. De qualquer forma, é importante que os profissionais que vão construir as duas etapas estejam alinhados ou seja a mesma pessoa, para que a grid atenda perfeitamente à arquitetura do projeto e vice-versa.

Wd :: De forma resumida, podemos dizer que o desenvolvimento de wireframes será uma etapa fundamental para definirmos os rumos da diagramação de interfaces digitais. Quais são as vantagens que sua aplicação pode trazer para a etapa de diagramação? E qual o limite que o designer deve ter para seguir ou modificar as recomendações geradas na criação do wireframe?

Yasodara :: O wireframe se constrói depois da diagramação. A grid pode inclusive ser utilizada como ferramenta de construção do wireframe, se o designer se dispuser a trabalhar direto no HTML/CSS da grid, construindo um framework próprio para facilitar a prototipagem. A montagem dos wireframes fica muito mais fácil, rápida e fluida quando se tem a grid e a arquitetura de informação pré-definidas. É como encaixar blocos em módulos pré-definidos.

Wd :: No livro “Webwriting: redação e informação para web”, o consultor Bruno Rodrigues analisa que, “em arquitetura de informação, mais importante do que pensar no agora é planejar o futuro – em outras palavras, no que não existe”. Assim, ele lembra a importância de se trabalhar com a previsão de uso de phantom labels (áreas fantasmas), principalmente pelas possibilidades que o meio digital proporciona para a evolução no uso dos ambientes. De que maneira esta prática deve ser trabalhada na diagramação de interfaces web?

Yasodara :: Na engenharia civil, a hora de especificar a fundação de um prédio é o momento em que o engenheiro indica a quantidade de ferros adequada para o número de andares que está prevista a construção.

Na web, essa metáfora não poderia ser aplicada porque não existe maneira segura de especificar a quantidade de andares que a estrutura irá ter que suportar. A ideia de escalabilidade atinge também o design, além do desenvolvimento de sistemas, porque aplicações devem ser fluidas o suficiente para crescerem de acordo com demandas futuras de mercado.

Sendo assim, a diagramação deve ser matematicamente pensada para que a aplicação possa crescer e evoluir de acordo com as necessidades da empresa. O fato de o aplicativo fazer uso de arquitetura de informação e diagramação já é um grande passo para ser escalável em termos de design.

Wd :: Definida a arquitetura do projeto e com as orientações do wireframe, chegou a hora do designer trabalhar a disposição dos elementos gráficos pela interface. Segundo Steve Krug, no livro “Não me faça pensar”, páginas com uma hierarquia visual clara apresentam três características: conteúdo mais importante recebe destaque gráfico (como negrito, tamanho de fonte maior, cores diferentes); agrupamento de informações serve para mostrar o que está relacionada por ali; e aninhar elementos ajudam a identificar a qual grupo pertence cada informação. Pensando nisso, quais são e como devem ser aplicadas as boas práticas e os princípios fundamentais do design para atingirmos tais características?

Yasodara :: A característica multidisciplinar do design garante que boas práticas estejam espalhadas por áreas diferentes, como, por exemplo, a arte, que pode aconselhar sobre o uso de cores sugerindo combinações para melhor visualização em ambientes digitais. A atenção à mistura entre as três cores primárias do sistema RGB (Red, Green, Blue) é importante porque evita o uso de contraste ruim para a leitura, por exemplo, ou combinações monótonas demais, ou o contrário: combinações super estimulantes.

Sobre tipografia, é importante lembrar sempre que na web existem, por enquanto, poucos recursos tipográficos. A utilização de fontes para ambientes digitais que sejam comuns à maioria dos usuários ainda é recomendada quando o assunto é longos blocos de texto. Outras aplicações tipográficas devem ser consideradas parte do design gráfico e analisadas como tal.

O estudo sobre margens quase sumiu da web, uma vez que os conceitos de página mudaram. A opção é pela distância que o conteúdo terá da tela, e se o layout é fluido ou não. No final das contas, existem estudos sérios sobre usabilidade que recomendam práticas para melhor visualização e experiência na web. Entretanto, a própria característica mutante das aplicações na internet exige que o designer siga a máxima de “conhecer bem as regras para transgredi-las”.

É importante seguir as boas práticas dentro da tecnologia escolhida e globalmente (por exemplo, utilizar boas práticas no Flash para acessibilidade – que é característica da web). Não existe ainda um conceito fechado de como fazer design na web. O jeito é examinar cases externos e buscar conhecimento em várias áreas, como a ergonomia, a arte e a ilustração científica, por exemplo.

Wd :: Na edição de abril de 2008, quando falamos da aplicação de grids na construção de sites, o designer Marcelo Gluz ressaltava que, “funcionalmente, a grid guia o olho do usuário em seus caminhos pela página”. Em sua opinião, quais seriam as vantagens de sua aplicação no processo de diagramação de interfaces web?

Yasodara :: A maior vantagem do uso de uma grid bem definida é a possibilidade de o design ser escalável. Isso agiliza a produção de telas derivadas e aumenta a satisfação do usuário final. O ambiente virtual não precisa ficar preso a uma tela, já que a grid permite inclusive que o usuário altere a forma e conteúdo sem modificar a estrutura de proporções.

Wd :: Quais são as características que vão determinar a harmonia, o equilíbrio e o ritmo na diagramação de interfaces web?

Yasodara :: Harmonia em design é um componente determinado basicamente pela composição da paleta escolhida e a proporção entre os locais onde os elementos gráficos estarão.

O equilíbrio também é sentido pela sensação da visualização da proporção entre os elementos visuais – é aquela história do peso da página – e o ritmo se dá pela proporção entre as colunas, margens, espaços em branco, linhas e tipografia escolhida. Estes elementos, por sua conexão com a proporção ideal entre elementos, estão intimamente ligados com matemática.

Na hora de diagramar, o designer precisa calcular proporções e utilizar geometria descritiva para criar espaços que estejam ligados por equações matemáticas que garantam relações de proporção. Caso contrário o layout sempre vai parecer amador.

Wd :: Na edição de setembro de 2009, quando falamos sobre o uso de cores na web, o professor Guto Lins alertava que “quando a ilegibilidade é conceitual – e até necessária -, ela ganha legitimidade. Mas, salta aos olhos e desagrada, quando está mesma ilegibilidade é fruto da falta de aprofundamento e do amadorismo”. Trazendo esta realidade para a diagramação de interfaces, qual o limite para se transgredir as boas práticas de diagramação na web de maneira que isto não prejudique o período de experiência de um projeto?

Yasodara :: A web ainda é um neném. As melhores práticas vão mudando junto com a tecnologia que as sustenta. Há dois anos monitores eram diferentes do que são hoje. Para que o projeto web tenha consistência e o mínimo de conforto atemporal, é necessário associar bom senso a aprofundamento.

É importante saber de onde vêm as melhores práticas e seus fundamentos, que surgem de várias áreas diferentes. O uso de cores, proporção entre colunas, margens e outros elementos importantes, tudo isso vem do design gráfico que tem braços de arte, ergonomia, psicologia entre outras áreas.

O designer precisa transitar entre as várias áreas de conhecimento relacionadas ao digital para acertar suas escolhas. Por incrível que pareça, até conhecimentos sobre antropologia e sociologia são importantes em um projeto.

Wd :: Na etapa final de diagramação da interface, o designer vai acabar gerando telas, comumente criadas em arquivos PSD, que vão orientar o trabalho do desenvolvedor no processo de torná-las funcionais. Até onde o designer deve participar deste processo? E como garantir que todos os detalhes das interfaces definidos no PSD sejam fielmente reproduzidos na etapa de programação do site?

Yasodara :: Para garantir que todos os detalhes das interfaces pensadas pelo usuário na fase de construção gráfica sejam aplicados, o mais recomendado é que o designer aprenda HTML/CSS e finalize ele mesmo a diagramação das telas. Não há maneira mais eficiente. Em modelos de produção ágil, isso já acontece e é um movimento sem volta. Diminui as famosas brigas entre designers e programadores e facilita o trabalho de ambos, já que minimiza os erros e coloca cada um responsável pela área que entende.

Wd :: Que tipo de testes você costuma realizar para verificar a eficácia da diagramação das interfaces de um projeto?

Yasodara :: O melhor teste para verificar se sua diagramação funcionou é observar o usuário. Antes de colocar em produção, é importante realizar testes com usuários navegando no site e coletar impressões em formulários previamente formulados. Itens como “o usuário encontrou a barra de busca nos primeiros três segundos?” são importantes porque descortinam a reação do indivíduo frente ao site. Na fase de implementação do design gráfico, se algo não se encaixa ou não fica confortável, é hora de mudar a grid ou refazer as contas.

Wd :: Atualmente, quais são as ferramentas mais utilizadas no processo de diagramação de interfaces? E quais você recomendaria o uso?

Yasodara :: Axure, Fireworks, InDesign,Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Expression Design, até Autocad pode ser utilizado na etapa de planejamento da grid. Eu recomendo o uso do Omnigraffle ou do pencil (extensão do Firefox) para esta primeira etapa. Para a construção do HTML/CSS, recomendo o Notepad ++, Gedit, bloco de notas ou outra ferramenta de código que possibilite a geração de código limpo e prototipagem rápida do layout.

Wd :: Pela sua experiência, quais são os erros mais comuns que podem comprometer a qualidade de diagramação das interfaces de um site?

Yasodara :: Diagramar sem pensar matematicamente nas proporções é um erro, porque se não existir relação entre as partes e o todo o resultado final provavelmente deixará a desejar. Também é um erro pensar que a grid vem depois do wireframe: o correto é pensar na grade e depois prototipar as telas.

Wd :: Para finalizar, quais dicas de leitura você daria para quem quer se aprofundar neste assunto?

Yasodara :: “The Grid Book (Paperback)”, de Hannah B Higgins, e “Grid Systems in Graphic Design”, do Josef Muller-Brockmann. Também tem o “Elementos do Estilo Tipográfico”, do Robert Bringhurst, e o “Type. A Visual History of Typefaces & Graphic Styles, 1628-1900″, para fundamentos em tipografia.