Quais princípios de design interferem na experiência em ambientes digitais?

É responsabilidade do designer projetar a melhor maneira possível para conduzir o usuário a seguir o fluxo desejado com o mínimo de erros e ainda ponderar fatores estratégicos comeciais do segmento.

A interface deve facilitar as tomadas de decisão de acordo com o que se pretende e, para isso, o designer deve fazer o uso coerente de conceitos fundamentais de design (como diagramação, hierarquia, legibilidade, organização, etc) em prol de uma experiência satisfatória.

A interação é satisfatória quando atinge o objetivo pretendido e, para isso, cada elemento da interface deve cumprir suas funções da melhor maneira possível. Uma vez feito isso corretamente, não será problema reciclar os mesmos elementos que já atendem este resultado. Assim, será possível dedicar esforços a novos elementos ou ambientes que realmente tragam valor de negócio.

Quais são as principais vantagens que o uso de biblioteca de padrões de interface pode trazer para o cotidiano de produção do designer?

Não apenas para o designer, o uso de bibliotecas internas é uma estratégia operacional que atinge todos os profissionais de desenvolvimento e permite o lançamento de novos produtos de forma mais ágil.

Seguir um padrão significa diminuir operações de aprendizado. Essa regra é aplicada em todos os níveis, desde a nomenclatura de arquivos ou classes, até elementos de interface para o usuário.

Se temos componentes com funções comuns em diferentes interfaces, esses elementos devem ser iguais (ou pelo menos o mais semelhante possível). Assim, para correções ou melhorias, o processo de evolução dos produtos como um todo é mais simples de ser executado.

Nem sempre a padronização minuciosa é possível, mas visar constantemente essa direção irá significar em menor tempo operacional.

Alguns exemplos que poderiam ser observados em um fluxo completamente padronizado:

• compatibilidade tecnológica
• profissionais conseguem achar os arquivos facilmente
• desenvolvedores sabem as classes que devem ser alteradas
• designers avaliam com mais clareza o que não está perfeito
• métricas são mais fáceis de serem instaladas
• usuários já estão familiarizados com o uso da interface (ou pelo menos parte)

Todos acima podem (devem) sugerir/providenciar melhorias, até mesmo o usuário.

Pela sua experiência na área, como você enxerga a aplicação e o conhecimento sobre bibliotecas de padrões de interfaces entre as agências digitais e os profissionais brasileiros? O que é preciso para tornar esta prática mais comum em projetos nacionais?

O uso de padrões de interface é muito pouco praticada por agências/profissionais no país.

Ainda é comum a mentalidade de que o designer deve contribuir com adornos e impacto visual emotivo, quando deveria estar planejando uma experiência mais consistente e funcional.
O designer não deve ter como objetivo evidenciar suas habilidades, mas sim, utilizá-las para criar um bom produto.

Quando utilizamos as mesmas formas para elementos de mesmas funções, estamos sendo consistentes. A função de cada elemento deve ser facilmente identificada e a consistência propõe que essas funções não precisam ser reaprendidas novamente.

Investir em bibliotecas de elementos funcionais também auxilia a conter custos de desenvolvimento à medida que são reaproveitados.

É comum investir tempo de design e desenvolvimento elaborando diversas formas de fazer as mesmas coisas quando poderiam ser feitas uma só vez corretamente e personalizável (cores e estilos) – quando necessário. Pra que desenhar diferentes páginas de login se todas terão a mesma função?

Ainda sobre o mercado brasileiro, o departamento de novas mídias da Globosat vem dando um bom exemplo na área, ao aplicar tais conceitos na construção de sites como o da série House e o programa Nós3. Diante disso, quando é recomendada a criação interna de uma biblioteca de padrões de interfaces? E quais são os recursos/etapas necessários para a sua construção?

Devemos estar sempre em busca da padronização e o que for considerado estrategicamente interessante para ser específico deve ser identificado.

Os produtos da Globosat são exemplos de aplicações de um padrão planejado. Cada produto mantém sua personalidade com um skin próprio, principalmente na home e em elementos pontuais (como headers, fundos, estilos, etc.); à medida que nos aprofundamos na experiência desses produtos, percebemos um padrão entre os elementos de interface.

O usuário que já teve a experiência de usar o site de um programa do canal multishow terá uma curva de aprendizado menor quando visitar o site de alguma série do canal Universal.

Na Globosat o objetivo do núcleo de novas mídias é atender as necessidades dos canais na TV, que são bastante semelhantes, e criar novos ambientes participativos que complementam a experiência da TV na web. Por conta disso, padronizamos as necessidades funcionais comuns para investir mais tempo em novos produtos ou em pontos necessariamente específicos.

No artigo “Componentes de uma interface web” são apontados os elementos mais comuns utilizados em interfaces digitais. Como justificar a mudança de padrões dos elementos de uma interface?

Durante o fluxo de desenvolvimento devemos separar o que não poderá ser reaproveitado e a equipe deve conduzir o que pode ser reciclável para construir seus padrões internos. Uma forma coerente de iniciar um novo modelo de padrões é investigar e analisar exemplos de interação já consagrados.

O padrão adotado deve estar em constante melhoria, para isso, é necessário avaliar as métricas de aceitação ou rejeição de cada elemento para correções ou remodelagens.

Essas métricas podem ser em forma de números ou de feedback feito pelos usuários ou editores.

Na segunda edição do livro “Não me faça pensar”, Steve Krug faz a seguinte recomendação: “inove quando souber que tem uma ideia melhor, caso contrário, aproveite as convenções”. O uso de biblioteca de padrões no design de interfaces pode limitar o trabalho criativo e inovador? Como utilizar padrões e evitar que isso aconteça?

O uso de uma biblioteca de padrões justamente serve para que se possa investir mais no que realmente é inovador.

A criação, em seu aspecto visual emotivo, possui uma intensidade mensurável no escopo de um produto. Normalmente com pequenas mudanças de estilos é possível oferecer uma identidade específica ao produto, e assim, reutilizar todos os componentes possíveis.

Nos modelos padronizados, podemos definir áreas de personalização para dar mais personalidade a cada produto, além disso, temos ainda a oportunidade de fazer uso de áreas editoriais (conteúdo) para ofertar o posicionamento específico do produto.

Afirmar que seguir modelos padronizados de interface limitam a criatividade é uma mentalidade ultrapassada quando se produz sites ou aplicações que têm como objetivo ofertar conteúdo.

Por favor, indique projetos que sirvam como bons exemplos na aplicação de UI design pattern library.

Mac OSX Reference Library
Getting Started with User Experience
Os estudos dos sistemas operacionais da apple são fontes obrigatórias de aprendizado sobre o uso consciente de uma biblioteca de padrões em interfaces.

Yahoo design stencils
A biblioteca de padrões de desenvolvimento do Yahoo é bastante organizada. Mantém à disposição documentação funcional e visual dos componentes utilizados pelos aplicativos e sites de empresa.

msdn.microsoft.com
A microsoft constrói interfaces que devem ser compatíveis com uma variação muito grande de hardwares e, consequentemente, de performance. Para resolver estas questões, a empresa detém um acervo de estudos bastante detalhado e útil sobre o assunto.

ps. teste de indexação do Spin Doctors #seo

Sobre isso, percebi que pessoalmente não me importo, inclusive acho que se alguém optou por “pegar pra si” um design feito por mim, significa que o agradou realmente.

O único problema disso é a indefinição de propriedade. Se nesses casos os plagiadores colocassem claramente que o “tema” é de determinado autor, não teríamos mais a classificação de “plágio”.

O site http://sseis.co.nr incluiu no fim da página “Desarrollado por: Eduardo Tufino Avila (Live Studios), o que aí sim, fica feio:

Sou fã do wordpress, por exemplo, e já utilizei diversos temas prontos, mantendo os créditos do tema no rodapé ou no código, quando modifico. Isso é útil pra gerar a cadeia de links de possíveis correções do tema, bug-fixes, etc.

Algo que funciona deve ser compartilhado. Não gostamos quando entramos num site mal feito, então, não vejo mal em ver réplicas, contanto que não sejam mal apropriadas.

O Peixe Grande é um concurso de sites criado em 2004 pela Arteccom, editora da Revista Webdesign, com o objetivo de descobrir, divulgar e premiar novos talentos e empreendedores que estão conquistando o mercado digital brasileiro.

Dessa forma, o concurso Peixe Grande incentiva o aumento da qualidade dos websites brasileiros e ajuda na ascensão dos nossos profissionais na rede.

www.peixegrande.com.br/regulamento.pdf

» Post no blog da Arteccom sobre o evento

» fotos no flickr.

Entrevista sobre o site, enviada aos editores:

De que forma os conceitos de usabilidade foram aplicados neste projeto? Como você procurou avaliar a usabilidade deste projeto?

A interface do logolicia tem como objetivo “mostrar logos” + “enviar logos”, assim, buscamos torná-los o mais óbvio possível. Deixamos isso tão gritante que se refletiu de forma divertida na interface.

A interface mantém o conteúdo (logos) em primeiro plano. Não apresentamos nenhum texto introdutório, nem mesmo um menu, que pudesse dispersar a experiência de “ver logos”. Ao entrar no site e rolar a página é possível apreciar e avaliar 32 logos de uma só vez.

Em sequência à galeria, o site se encerra na área de “envio de logos”, onde incentivamos o visitante a também enviar alguns trabalhos. A interface dessa área é o grande triunfo do site, uma vez que deixamos muito claro (com uma seta enorme) que é por ali que se aparece na galeria, além disso, os elementos de interface não deixam dúvidas do que é preciso ser feito para participar – vide o tamanho do botão enviar :)

A comunicação clara e focada torna o logolícia em um site eficiente para ver e postar logos e ainda é facilmente acessado mesmo por alguns celulares. O site, por exemplo, se apresenta mto bem num Iphone.
A interface foi mantida extremamente simples e focada para facilitar o usuário a alcançar o objetivo de ver logos.

Quais foram os principais elementos inseridos neste projeto para estimular a interatividade do usuário com o site? E quais os desafios para a sua implementação?
Para o logolícia se manter ativo, precisamos constantemente que novos logos sejam enviados pelos usuários. Assim, manter um ambiente dinâmico que facilite as postagens é o principal desafio do projeto.

A avaliação dos trabalhos e a possibilidade de debate também contribui com o ambiente social do site, que estimula o autor a acompanhar o seu logo e saber o que as pessoas acham a respeito.

Quais fatores influenciaram no design das interfaces deste projeto?

O design foi concebido visando informar as funcionalidades do site, todos os elementos “decorativos” existem unicamente como sinalização.

Como também queríamos que o site fosse simpático, criamos um logo+slogan sob o conceito de que ver logos é tão delicioso quanto morangos (quase foi um bolo). Essa identidade refletiu nas cores de todo o site, links, etc.

As proporções incomuns de alguns elementos na interface também tornam o site divertido, alguns exageros, como o tamanho do botão enviar, por exemplo, sempre gerou repercussões bem-humoradas :)

Que tipo de retorno este projeto trouxe para a sua carreira? Como você procurou mensurar os resultados obtidos em seu desenvolvimento?

Fizemos o logolícia pois sentimos falta de uma fonte de referência de bons logotipos feitos para o mercado nacional. Desde então recebemos muitos elogios por parte dos usuários e isso já nos faz satisfeitos.

Como o projeto é voltado para o mercado de design, foi positiva a repercussão no nosso meio, ganhamos algumas divulgações espontâneas e fomos listados como uma boa fonte de inspiração.

Mensuramos os resultados com a freqüência em que recebemos logos, são diversos diariamente e esse número tem sempre aumentado mais, juntamente com a a qualidade dos logos. Assim que o site vai ficando mais conhecido, os logos enviados e que não entram na galeria vão sendo cada vez mais incomuns – o que é ótimo, principalmente para quem visita o site.

A metodologia da 37signals é bastante eficiente no ambiente em que atuam, mas não completamente aplicáveis a qualquer cenário, como descrito por Jeff Croft.

Os produtos da 37signals possibilitam essa prática por serem aplicativos pequenos, com uma estética unificada e previamente estabelecida. Eles somente desenvolvem para eles mesmos.

O mais comum em nosso cotidiano é desenvolver websites diversos, cada um com suas peculiaridades e, na maioria das vezes, com uma identidade institucional própria. Nesse sentido é compreensível que a interface macro seja feita em imagem para análise de estratégias e também para definir uma base estrutural.

Conceber um novo produto, que tenha suas próprias formas e funções é mais compatível com uma ferramenta gráfica, como o photoshop. Por outro lado, é perda de tempo desenhar cada detalhe da interface de um projeto inteiro.

A prática de desenhar tudo em detalhes serve normalmente como forma de documentação, o que é desperdício de tempo, já que a chance de um projeto mudar em pouco tempo é altíssima. Muitas vezes uma home basta para saber como o site todo será, assim, já é possível avançar para a estruturação do código e das demais páginas, onde as mudanças normalmente não afetam a estrutura do layout e muitos elementos se repetem (ou são bastante parecidos) em um mesmo projeto.

Casos em que posso omitir o evento de uma aprovação formal, nem mesmo desenho uma página inteira. Deixo alinhamentos, tipografia e outros elementos pra serem tratados e refinados diretamente no código. O desenho (layout em imagem) serve muito mais como uma referência do que um arquétipo.

Com frequencia são atribuídas novas funcionalidades e características aos navegadores, algumas valem a pena se aprofundar mais, pois serão padrões em breve. É o caso do HTML5, suportado por alguns browsers recentes e está começando a ganhar espaço.

Por outro lado, para garantir a adequação dos projetos no dia a dia, penso que basta se ater aos padrões web e desenvolver um código consistente, o mais semântico possível, com foco nos navegadores que seguem essa linha.

2 – Como vimos acima, existe uma oferta variada de navegadores à disposição dos usuários, sendo que o IE e o Firefox parecem atrair a maior atenção do público. De que maneira os browsers podem influenciar no desenvolvimento do design de interfaces?

Diferentes browsers influenciam o desenvolvimento pois divergem na renderização de fontes, espaços e margens.
É preciso saber onde essas diferenças vão interferir no seu layout e já prever formas de contorná-las.

Conhecer o funcionamento dos browsers para estruturar um código bem feito também pode resultar em melhorias de performance do website.

3 – Nesta discussão, a aplicação do conceito de cross-browser se torna fundamental para garantir que um projeto seja suportado pelos diversos navegadores. Diante disso, o que você consideraria imprescindível na aplicação correta deste conceito na construção de um projeto digital?

Nem todo projeto deve ser totalmente cross-browser. Sempre que posso, idealizo projetos visando os principais navegadores que seguem os padrões web. Em navegadores antigos o site deve apenas funcionar bem, ou se possível, nem isso.

Ao ajustar o código para navegadores arcaicos (como o IE6), estamos investindo em postergar sua obsolência.
Como desenvolvedores, podemos induzir atualizações priorizando o código para os browsers atuais (nivelar por cima).

4 – Ainda sobre esse assunto, quais são os erros mais comuns que dificultam a adequação de projetos web ao conceito de cross-browser?

A aplicação dos padrões web permite que os sites funcionem e sejam vistos corretamente em quase todos os navegadores. O IE, o browser com maior predominância no mercado, apresentou até agora grandes deficiências na implementação destes padrões, ampliando a divergência de renderização.

Algumas características às vezes precisam de ‘hacks’ ou programação extra para funcionarem corretamente, o que interfere diretamente no tempo e custo de desenvolvimento.

As divergências seriam minimizadas se a atualização dos navegadores fosse contínua, induzida pelo próprio software, como ocorre no firefox, por exemplo. As últimas versões dos navegadores mais populares já seguem os padrões web (inclusive o IE8).

5 – Quais ferramentas você utiliza para testar a eficácia de seus projetos nos diferentes navegadores disponíveis pelo mercado?

• litmusapp.com
• netrenderer
• browsershots.org

6 – Além das funções de navegação, os plugins agregados ao Firefox o tornaram em uma ferramenta muito utilizada por profissionais de internet. Você também utiliza o Firefox como ferramenta de trabalho? Caso sim, quais plugins você recomendaria para quem deseja trabalhar com o Firefox?

Acho indispensáveis o uso dos plugins Firebug + Colorzilla.
Com estes, na maioria dos ajustes de código não é necessário abrir mais nenhum outro programa além do navegador (e o editor com FTP, claro).

7 – Quais dicas de leitura você daria para o profissional que deseja se aprofundar neste assunto (cross-browser, navegadores, renderização etc.)?

• Comparativo de tecnologias
• Opera Web Standards Curriculum
• blog tableless (Não é o principal tema)
• Os blogs dos respectivos navegadores também são úteis para acompanhar mudanças e novidades.

1 – Quais são os principais fatores que exercem influência na leitura visual de conteúdos digitais?

Conteúdos digitais normalmente são consumidos em concorrência com outros atrativos por estarem na web/pc/mobile, onde temos uma vasta gama de possibilidades para dispersão.

Ao navegar, estamos sempre “com pressa”, com frequência praticamos a leitura genérica e apenas se o conteúdo nos prender, damos atenção específica. Esse comportamento já é bastante conhecido e por isso devemos preparar conteúdos digitais para nos comunicar na forma mais breve, simples e incisiva possível.
Dessa forma, a tendência de se utilizar “menos” também se aplica ao conteúdo.

É pertinente lembrar que a leitura de textos na tela não é uma prática confortável, assim, podemos facilitar essa tarefa, se evitarmos uma disposição em que os textos atravessam a tela de ponta a ponta.

O uso de colunas, bem como quebrar o conteúdo em partes menores e utilizar tópicos em listas sempre que possível, são alguns recursos úteis para buscar maior clareza na apresentação dos textos e torná-los mais atraentes.

Além da legibilidade, temos que prover uma boa ‘leiturabilidade’, ou seja, garantir um bom nível de fluência durante a leitura dos elementos visuais da interface, buscando uma composição consciente e equilibrada.

2 – Um dos caminhos para garantir uma boa legibilidade em uma interface é a aplicação de espaçamentos e margens, além do adequado alinhamento dos objetos. De que maneira estes “conceitos” devem ser aplicados na concepção de uma interface?

Utilizar corretamente as áreas “em branco” é fundamental. Quando exploramos bem as áreas sem conteúdo, conseguimos destacar com maior facilidade as áreas de Informação. Áreas de respiro protegem os elementos de informação e acomodam o olhar durante a leitura.

O uso de grids também é um recurso inteligente para uma boa disposição dos elementos na interface.

3 – Outra questão fundamental envolve a escolha do tamanho da fonte e da família tipográfica a ser utilizada no projeto. Em termos de legibilidade, o que deve ser levado em consideração na hora de se definir esta etapa no processo de criação?

Atualmente é comum resoluções de tela maiores, isso nos permite utilizar com maior liberdade tamanhos diversos de fontes. Facilmente encontramos sites que utilizam chamadas e destaques textuais em tamanhos grandes, o que contribui com que determinadas informações sejam rapidamente notáveis. Dessa forma, podemos, apenas com o uso da tipografia, hierarquizar o conteúdo visualmente.

Ao escolher uma família, devemos ter atenção se ela foi projetada em determinadas formatações (bold/italic). Quando uma fonte não tiver algumas dessas variações, forçá-las pode trazer um resultado visualmente impreciso. É o que chamamos de “Faux Bold and Italics”.

Ao atribuir certas famílias tipográficas em textos com corpo reduzido pode fazer com que detalhes fiquem serrilhados, pois não se encaixaram perfeitamente na grade de pixels da tela. Neste caso, utilizar fontes não-serifadas (menor índice de detalhes gráficos nos tipos) ou projetadas especificamente para mídia digital são alternativas para se precaver de um resultado indesejado.

4 – Não podemos nos esquecer ainda do contraste de cores a serem utilizadas como plano de fundo e no uso das fontes. Em relação à percepção visual na web, quais seriam as recomendações na hora de se definir a combinação cromática de um site?

Uma boa prática é utilizar paletas com número reduzido de cores, com isso adquirimos com maior facilidade harmonia e consistência gráfica da interface como um todo.

Cores reagem de maneiras diferentes quando utilizadas em conjunto (contraste simultâneo), portanto, ao definí-las devemos evitar vibrações no contato entre as cores selecionadas. Um exemplo comum é o vermelho e verde, que, dependendo dos tons, podem apresentar vibrações que geram desconforto visual quando justapostas.

Dar atenção específica para a seleção das cores é essencial para adquirir um bom nível de legibilidade, além de contribuir com a acessibilidade do projeto.

5 – Quais são os erros mais comuns que podem prejudicar a legibilidade de um projeto interativo?

É bastante comum encontrar interfaces que não priorizam visualmente as informações de forma clara. As partes mais importantes do conteúdo devem ser facilmente notadas e nem sempre essa organização é feita com cuidado.

O uso inadequado de cores, contrastes, texturas (imagens), entre outros, são vistos todos os dias, além da frequente prática de saturar a interface com elementos decorativos, na maioria das vezes, desnecessários.

6 – Que tipo de testes você costuma realizar para medir a legibilidade de um projeto interativo?

Um método empírico que utilizo com frequência é visualizar o projeto em tons de cinza, assim, consigo analisar contrastes sem a interferência das cores. Testes básicos em diferentes OSs e browser também garantem a legibilidade em diferentes ambientes.
Mas o teste que considero o mais importante é o coletivo, pedindo opiniões e, de preferência, analisando reações das pessoas usando a interface.

7 – Citar dois bons exemplos de projetos interativos com boa legibilidade, justificando o porquê de sua escolha.

A List Apart – Site de artigos longos e grande quantidade de informações. Em um formato tradicional, mas que com a utilização de linhas e áreas em branco distingue claramente cada bloco de informação.
O uso de cores e variações tipográficas para links, títulos e outros, é bastante sutil e funcional. Informa visualmente a hierarquia do conteúdo.

twistori – Minimalista e vibrante, cada cor representa um filtro de sentimento, muito bem definido no menu.
Com a utilização do fundo escuro as cores se destacam e aguçam o sentidos que relacionam a cor selecionada às suas sensações.
O tamanho das fontes torna fácil a leitura e faz do texto o único elemento de composição da interface.

8 – Que tipo de bibliografia você indicaria para o profissional que deseja se aprofundar neste assunto?

Legibilidade é a clareza na identificação de elementos visuais, não se restringindo apenas ao uso de textos e está diretamente ligado à funcionalidade de uma interface. Leituras referentes a diagramação, o uso da tipografia como forma e composição são recomendáveis.

Para quem está começando, um livro bastante abrangente e que trata de assuntos fundamentais da comunicação gráfica de forma objetiva é o ‘Sintaxe da Linguagem Visual’, de Donis Dondis. Abrange temas como gestalt, semiótica, teoria da cor, tipografia, entre outros.

Já quem quiser uma abordagem mais prática e simplificada, uma boa pedida é o ‘Não me Faça Pensar’, do Steve Krug. O livro é bem-humorado e interpreta situações do dia a dia na prática do desenvolvimento de interfaces e também aborda formas eficientes de utilizar textos na web.

Especificamente sobre o uso da tipografia, há o ‘Tipografia: origens, formas e uso das letras’ de Paulo Heitlinger em que o autor discute a funcionalidade e estética das letras.