As mídias digitais se adaptam aos ambientes de acesso dos usuários, que as adaptam às suas necessidades. As interfaces mostram suas funcionalidades e eficiência a partir da consistência formal e funcional de cada tela e do conjunto e consideram aspectos como:

Fontes – estilos de fontes e outros atributos de texto, como tamanhos e cores aplicados consistentemente, de modo que sua leitura seja adequada a monitores de diversos tamanhos, com diversas configurações de cores e resolução.

Cores – sistemas de cores harmoniosos e conceitualmente integrados, para a identificação funcional dos elementos e do sentido de identidade para valorizar a usabilidade dos canais.

Malha gráfica (grid) – referências ortogonais que se mantêm consistentes em todas as páginas, permitindo a criação de ambientes visualmente harmoniosos e com rigor conceitual.

Navegação e layout – relação direta entre a estrutura visual e de informações, que facilita o deslocamento e a orientação do usuário.

Espaço da tela – áreas a priorizar no posicionamento dos elementos funcionais, editoriais e comerciais.

Facilidade de uso de elementos ativos como títulos de links, botões, barras de navegação, formulários, em diferentes situações e aplicações. Os elementos precisam mostrar as ações associadas, qualidade conhecida como affordance, ou o potencial para ser manipulado da maneira como foi pensado para funcionar. Por exemplo, uma maçaneta redonda de porta convida o usuário a girá-la. O botão de uma interface convida ao clique com o dedo ou o mouse (definição da Wikipedia).

O uso de elementos também está relacionado à lei de Fitt, segundo a qual o tempo necessário para o usuário acessar uma determinada área da interface varia em função da distância ao alvo e do tamanho do alvo. Se um usuário de app móvel coloca sua mão na parte de baixo do dispositivo, seus dedos ficam distantes dos botões da parte de cima da tela. Qual a distância ideal para o usuário médio alcançar os botões na parte de cima de uma tela de tamanho médio sem dificuldade? Qual o tamanho ideal desses botões?

A aplicação da lei de Fitt está diretamente relacionada ao uso de interfaces em contexto, sejam em dispositivos móveis ou não.

Hierarquia visual corresponde às prioridades dos usuários, ou seja, o layout conduz os visitantes aos recursos do canal mais valorizados pelo público. Componentes do layout, como composição, estilos de tipografias, uso de cores e contrastes, conduzem os olhos de um elemento a outro da interface, começando pelos que chamam mais sua atenção. O que os olhos vêem em primeiro lugar? E em seguida? São os elementos que devem ser realmente vistos em primeiro lugar? Que elementos influenciam esta percepção?

Design relacionado a experiências significativas – no desenho da jornada dos usuários estão presentes todos os agentes e processos relacionados à sua experiência. Designers, especialistas em marketing e experiência do usuário, desenvolvedores, gestores de produtos, estrategistas de negócios se unem para mapear os pontos de contato e implementar mudanças visíveis ou não para criar experiências que atendem as necessidades do público de modo eficiente, se possível, surpreendente.

Layouts semelhantes aos que vemos todos os dias são rapidamente esquecidos. Layouts que se diferenciem dos demais são memoráveis.

A inclusão de pessoas que normalmente não fariam parte do projeto pode prover um olhar diferenciado e mais imparcial ao projeto do produto ou serviço, e o exame de experiências bem sucedidas em outras áreas de atividade.

Retorno ao usuário – indicação de que uma ação aconteceu. Cada ação de um usuário cria uma ligação direta com a interface, retorna um sinal de que foi realizada. O movimento do mouse ou do dedo é sinalizado por uma resposta na tela, o posicionamento sobre um link muda o desenho do cursor, a cor de fundo.

Caso o usuário não identifique as mudanças de estado, insiste em realizar a mesma ação até identificar uma resposta, o que pode causar problemas como um duplo cadastro para receber uma mala direta, ou a compra duas vezes do mesmo produto em sites de comércio.

Projetistas de interfaces preveem o modo como este retorno aparece, para que os usuários sintam que se comunicaram por meio da sua ação. Se a entrada de uma ordem de pagamento demanda um longo tempo de latência, por exemplo, é preciso mostrar um sinal, como um ícone animado, de que está sendo realizado.

Usos em contextos dinâmicos e diferenciados – o uso de interfaces em movimento, em diferentes lugares e circunstâncias faz com que precisem se adaptar a cada situação. Em deslocamento, pode-se obter informações sobre o lugar de origem e o destino. Em horas de refeição, pode-se obter a localização de restaurantes com base em preferências anteriormente selecionadas, ou aos sábados à tarde consultar a programação de cinemas próximos.

Mesmo na web para desktop e para tablets, muitas vezes abrem-se várias guias ao mesmo tempo para tarefas diferentes. E essa realização simultânea pode ser entrecortada por interrupções e outras tarefas em diferentes aplicativos. Os sites e aplicativos que suportam a navegação dispersa, intercalada com outras tarefas, e enfatizam os elementos e tarefas mais importantes, tendem a ser mais visitados.

Levando esses fatores em consideração, Jakob Nielsen obteve bons resultados ao variar a estratégia de escrita de textos, verificando em seguida seu impacto positivo na usabilidade. Para isto, aplicou três procedimentos básicos: 1. textos mais concisos; 2. organização da estrutura com subtítulos, listas de itens e parágrafos curtos; e 3. uso de linguagem objetiva. (veja a pesquisa)

Consistência na repetição de elementos – elementos que se repetem, como cores, sombras, texturas, fontes, imagens, linhas, cabeçalhos, rodapés, barras de navegação, logos, e que ajudam a reforçar a identidade visual, bem como o ritmo e a continuidade, enfatizam a consistência entre páginas/telas durante o deslocamento. A consistência reduz o uso da memória visual, pelo reconhecimento instantâneo, bem como ajuda a identificar elementos em contextos funcionais.

Alguma variação nos elementos repetidos pode ajudar também a quebrar a monotonia do conjunto.

Rolagem vertical da tela – quanto mais fundo nas camadas de informações, menos o usuário se incomoda com longas rolagens verticais, pois tende a se interessar mais pelo conteúdo.

Resolução do monitor – considerando as diferenças de cor e resolução (que afetam o tamanho das imagens na tela), cada pessoa vê o layout de uma interface digital de modo diferente. Dificilmente os usuários finais têm exatamente a mesma configuração técnica que os projetistas. (1)

Responsividade – modo como a interface se apresenta e não só em diversos dispositivos como em diferentes contextos de uso e acesso. Apresenta questões formais, técnicas e editoriais.

Uso de guias de estilo (style guides) e padrões de design (design patterns) – documentos que estabelecem as linhas gerais de design e de apresentação de conteúdo facilitam a manutenção da consistência entre os elementos das interfaces. Costumam incluir especificações de layout, fontes, cores, composição, posicionamento de elementos, bem como exemplos da sua aplicação em diferentes situações e quando novo conteúdo (ou tipo de conteúdo) é publicado.

O objetivo desses documentos é prover orientação clara sobre soluções a adotar, bem como assegurar a consistência do produto durante o desenvolvimento. Ver o guia de estilos do Starbuck.

(Atualizado em 26.2.2017)

 

Referências

1) Designer’s guide to dpi (Sebastien Gabriel, acesso em 3.5.2014)

UIPatterns, soluções consolidadas para problemas de design de interfaces web

Recursos auxiliares

MStyleguide and boilerplate patterns, coleção de links de guias de estilo front end e bibliotecas de padrões, com exemplos novos e já usados, incluindo agrupamentos de elementos com objetivos semelhantes.  (de Cloud Four Blog, acesso em 27.4.2015)