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

Configuração de 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.

Palheta de cores – sistemas de cores harmoniosos e conceitualmente integrados, para a identificação funcional dos elementos e o estabelecimento de 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 – a relação direta entre a estrutura visual e a estrutura de informações, que facilitam o deslocamento e a orientação do usuário.

O 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 naturalmente 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 devem estar 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 proporcionar experiências que atendam as necessidades do público de modo eficiente e, 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, bem como 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 algum 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, como acontece em alguns sites de comércio.

Projetistas de interfaces preveem o modo como este retorno é mostrado, para que os usuários sintam que estabeleceram algum tipo de comunicação 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 abre-se várias guias ao mesmo tempo para a realização de tarefas diferentes. E essa realização simultânea pode ser entrecortada por interrupções e outras tarefas em diferentes aplicativos. Assim, 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 estes 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 – link externo)

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 maneira 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 de mídias digitais 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 destes 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

Wayfindings for the mobile webDennis Kardys (Smashing Magazine, acesso em 26.2.2017)

What it takes to deliver breakthrough customer experiences,  Xavier Lhuer, Tunde Olanrewaju, Hyo Yeon (McKinsey, acesso em 5.11.2015)

2) Ultra-contextual design (Sebastien Gabriel, acesso em 23.5.2015)

Material design (Google, acesso em 8.3.2015)

Atomic design (Bradfrost, acesso em 5.3.2015)

My app design workflow (bjango, acesso em 10.10.2014)

15 Responsive design tips, Nathan Segal (HTML Goodies, acesso em 10.9.2014)

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

Obvious design always wins, Annarita Tranfici (Sitepoint, acesso em 21.8.2014)

Effective design principles for web designers: Repetition, Ryan Boudreaux (TechRepublic, acesso em 14.6.2013)

The laws of simplicity, de John Maeda (acesso em 22.6.2010)

Visual framework (Designing interfaces, acesso em 6.2.2009)

Bridging the designer–user gap (Alertbox, acesso em 20.3.2008)

Patern Lab – padrões de elementos para design web (Bradfrost, acesso em 5.3.2015)

Design process in the responsive age, de Drew Clemens (Smashing Magazine, acesso em 7.3.2013)

Style Tiles, de Samantha Warren (Styletil.es, acesso em 15.6.2012)

Eye candy vs. bare-bones in UI design (UX Magazine, acesso em 28.3.2010)

Anatomy of a redesign (WebSiteOptimization, acesso em 25.1.2010)

Integrating prototyping into your design process, de Fred Beecher (Boxes and Arrows, acesso em 20.10.2009)

Usability Body of Knowledge (acesso em 20.3.2009)

 

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)