Recomendações para otimizar a perceção e a estética do utilizador
Aplica-se a esta recomendação da lista de verificação de Otimização da Experiência do Power Platform Well-Architected:
| XO:07 | Aplique princípios de design clássicos a elementos visuais, como esquemas de cores, tipografia e layout. Procure uma hierarquia visual focada, equilibrada e intuitiva que oriente a atenção dos utilizadores para elementos e ações importantes. |
|---|
Este guia descreve as recomendações para padrões de conceção visual universal que afetam a perceção do utilizador, o que pode influenciar significativamente a satisfação e a adoção de uma aplicação. Os elementos visuais servem como os blocos modulares fundamentais usados para criar experiências. A aplicação de princípios visuais que estão alinhados com a forma como os seres humanos naturalmente percebem e processam as informações fornece métodos estruturados para ajudar a selecionar e organizar elementos visuais para criar uma aplicação eficaz e atraente.
Principais estratégias de design
Uma extensa pesquisa sobre a perceção humana do design visual revela que os utilizadores não veem os elementos visuais isoladamente. Em vez disso, perceciona-os em relação a outros elementos e ao contexto em que aparecem. Essas relações influenciam a perceção do utilizador, chamando a atenção para áreas específicas, provocando emoções, ajudando na compreensão, aprimorando a estética e fortalecendo a identidade da marca. A seleção e a disposição cuidadosas dos elementos visuais podem criar experiências de utilizador cativantes, memoráveis e eficazes que ressoam com a audiência-alvo.
Efeito estética-capacidade de utilização
O efeito estética-capacidade de utilização refere-se à tendência de considerar produtos atraentes como mais utilizáveis. Os utilizadores formam uma opinião inicial sobre uma aplicação em aproximadamente 50 milissegundos. Esta primeira impressão é influenciada por vários fatores, incluindo estrutura, cores, espaçamento, simetria, quantidade de texto e fontes. Uma primeira impressão positiva pode aumentar a satisfação geral do utilizador. A pesquisa mostra que os utilizadores são mais tolerantes com pequenos problemas de capacidade de utilização quando acham uma interface visualmente atraente. Além disso, a qualidade do design pode servir como um indicador de credibilidade.
Equilíbrio e peso
O equilíbrio visual representa uma sensação de equilíbrio e harmonia na perceção visual. Ajuda os utilizadores a processar e a organizar as informações visuais de forma mais eficiente, reduzindo a tensão cognitiva. As composições equilibradas são geralmente percebidas como mais agradáveis e mais fáceis de compreender, permitindo que os utilizadores concentrem a atenção de forma eficaz e naveguem por estímulos visuais com maior facilidade. Este aspeto cognitivo do equilíbrio visual sublinha a sua importância para facilitar uma comunicação clara e melhorar a experiência geral do utilizador.
Uma composição é equilibrada quando todos os elementos estão em equilíbrio ótico. Muitas vezes, a colocação matemática requer ajustes. Alguns dos elementos que afetam o peso visual são tamanho, cor, densidade e espaço em branco.
Tamanho: Elementos maiores tendem a ter mais peso visual do que os menores. Para atingir o equilíbrio, os elementos maiores podem ser contrabalançados agrupando-os com elementos menores ou ajustando seu posicionamento dentro do esquema.
Cor: Cores brilhantes ou intensas podem atrair mais atenção e parecer mais pesadas do que cores suaves ou neutras. Equilibrar as cores envolve distribuí-las uniformemente por toda a interface ou usar cores complementares para criar harmonia visual.
Densidade: a densidade dos elementos refere-se ao quão firmemente embalados eles estão dentro de um determinado espaço. O balanceamento da densidade envolve garantir que os elementos sejam distribuídos uniformemente na interface para evitar superlotação ou áreas esparsas.
Espaço em branco: também conhecido como espaço negativo, o espaço em branco refere-se às áreas vazias entre elementos. O espaço ajuda a criar espaço de respiração visual e pode equilibrar a composição, destacando e enfatizando certos elementos.
Uma composição equilibrada é a soma das forças visuais entre os elementos.
Equilibrar o layout é uma das tarefas mais difíceis, porque não pode ser facilmente medido.
Color
Os matizes, tonalidades, sombras e tons podem transmitir significado, evocar emoções e criar apelo estético. A cor desempenha um papel crucial na orientação da atenção do utilizador, no estabelecimento de hierarquias, na transmissão de informações e na melhoria da capacidade de utilização. Várias razões explicam por que motivo um design de cores cuidadoso numa IU pode afetar os utilizadores da forma que pretende:
Atenção e perceção. Determinadas cores são mais apelativas do que outras, permitindo aos designers direcionar a atenção dos visualizadores para elementos específicos. O contraste de cores pode melhorar a legibilidade e distinguir entre diferentes componentes, facilitando o processamento rápido de informações.
Resposta emocional. As cores têm associações psicológicas que evocam emoções e humores. Cores quentes como vermelho e laranja podem criar uma sensação de energia e excitação, enquanto cores frias como azul e verde podem evocar calma e tranquilidade. Pode obter as respostas pretendidas para influenciar os utilizadores em relação à experiência pretendida.
Identidade da marca. O uso consistente de cores em todos os materiais da marca ajuda a estabelecer uma identidade visual forte e promove o reconhecimento da marca. Os utilizadores associam frequentemente cores específicas a marcas específicas e associam a sua experiência à lealdade e confiança da marca.
Hierarquia visual. A cor pode ser utilizada para estabelecer uma hierarquia visual e organizar informações. Atribua cores diferentes aos elementos com base na sua importância ou categoria para criar uma hierarquia clara e facilitar a navegação e a compreensão.
Proximidade
Os itens que são colocados mais próximos parecem mais relacionados. Ao organizar elementos, certifique-se de que há uma diferença perceptível no espaçamento entre os elementos que estão intimamente relacionados e os que não estão.
Este princípio de Gestalt sugere que a distância espacial entre os elementos visuais influencia a forma como são percebidos e organizados mentalmente, e sublinha a sua importância para facilitar o processamento eficiente e a compreensão dos estímulos visuais.
Agrupe os elementos relacionados que são funcionalmente semelhantes ou que pertencem à mesma categoria hierárquica. Por exemplo, os botões que executam ações ou opções semelhantes dentro de um menu pendente devem ser agrupados de forma próxima para indicar a respetiva associação. Numa barra de navegação, os itens de menu muito espaçados sugerem um conjunto de opções relacionado, enquanto que um intervalo maior entre as categorias de menus os distingue visualmente. Os itens de formulário que estão relacionados devem ser agrupados, como os campos de endereço numa secção chamada "endereço".
Melhore a legibilidade em interfaces com texto pesado ajustando o espaçamento entre parágrafos, frases e palavras. O espaçamento mais estreito entre parágrafos indica uma conexão lógica ou continuação do pensamento, enquanto um espaçamento maior denota uma transição ou uma quebra no conteúdo. Esta técnica promove a compreensão eficiente da informação textual.
Certifique-se de que haja uma distinção perceptível no espaçamento entre elementos relacionados e não relacionados para evitar confusão. Uma rampa de espaçamento pode ajudar a determinar consistentemente o espaçamento apropriado necessário com base no tamanho do elemento.
O círculo à esquerda está mais relacionado com o triângulo do que com o outro círculo.
O espaçamento entre parágrafos é menor do que o espaço entre secções.
Continuidade
Os elementos que estão dispostos em uma linha ou uma curva são percebidos como mais relacionados do que os elementos que não estão em uma linha ou uma curva.
Organize os elementos da interface, como menus de navegação ou etapas em um processo, ao longo de uma linha ou curva para implicar uma sequência ou progressão. Este esquema ajuda os utilizadores a perceber a relação entre os elementos e a compreender o fluxo lógico de informações ou ações.
Coloque elementos relacionados, como opções de caixa de verificação ou de opção, ou itens numa lista de marcadores ao longo de uma linha para os agrupar visualmente. Esta disposição sugere aos utilizadores que estes elementos partilham um objetivo comum ou pertencem à mesma categoria, facilitando a navegação e a compreensão. Se itens de aparência semelhantes forem mais recuados para dentro, a posição do item é correlacionada com um posicionamento mais baixo na hierarquia visual.
Use linhas ou curvas para guiar a atenção dos utilizadores e criar caminhos visuais através da interface. Por exemplo, uma seta pode direcionar o olho do utilizador de uma secção de conteúdo para outra ao longo de um determinado caminho, indicando uma ligação ou progressão. Esta técnica ajuda os utilizadores a navegar na interface de forma mais intuitiva e incentiva a exploração.
Organize os principais elementos da interface, como botões de chamada para ação ou informações importantes, ao longo de linhas proeminentes para chamar a atenção dos utilizadores e criar pontos focais. Por exemplo, o padrão Fluent MessageBar é frequentemente apresentado como uma mensagem equilibrada proeminente em toda a área de conteúdo, com a mensagem à esquerda, levando aos botões de chamada à ação à direita. Esta estratégia de esquema realça esses elementos e enfatiza sua importância, aumentando a probabilidade de interação.
As curvas/linhas são mais fortes do que a cor para a nossa perceção.
Os assistentes utilizam a continuidade para mostrar aos utilizadores que os passos estão ligados, sem os sobrecarregar com demasiada informação.
Encerramento
O cérebro humano tende a ver formas completas, reconhecendo um único padrão familiar, sobre objetos individuais, mesmo quando alguma informação está em falta.
Garanta a consistência visual nos elementos de estrutura, tais como formas, cores e tamanhos, para ajudar os utilizadores a aprender padrões que devem esperar, mesmo que sejam apresentados em contextos diferentes.
Utilize ícones ou símbolos simples e familiares que permitam aos utilizadores preencher informações em falta com base nas suas experiências anteriores. Por exemplo, um ícone de lupa é normalmente associado à funcionalidade de pesquisa, mesmo sem acompanhar texto.
Apresente a informação gradualmente aos utilizadores, também conhecida como divulgação progressiva. Permita que os usuários preencham os detalhes ausentes à medida que interagem com a interface, evitando sobrecarregá-los com muitas informações e incentivando a exploração.
Crie padrões visuais coesos que incentivem os utilizadores a perceber objetos como entidades inteiras. Por exemplo, agrupar elementos relacionados pode ajudar os utilizadores a compreenderem a sua relação e propósito. Organize visualmente os elementos de forma consistente usando os princípios de Gestalt para indicar a segmentação. Use o espaço de forma eficaz para criar uma sensação de fechamento em torno dos elementos da interface.
Utilize animação e transições para orientar a atenção dos utilizadores e transmitir alterações nos estados da interface. Transições suaves entre diferentes estados ou ecrãs podem ajudar os utilizadores a compreender a relação entre elementos e preencher informações em falta. Vários controlos modernos disponíveis no Power Apps apresentam inerentemente animações.
Um quadrado é reconhecido primeiro, antes de quatro círculos incompletos.
A animação de um cartão para um diálogo modal ajuda a reduzir a distância entre os dois e a relacioná-los entre si.
Ponto focal
Um ponto focal é um elemento de design que chama imediatamente a atenção do visualizador. Idealmente, um design deve ter uma sequência de pontos focais, normalmente entre um e três, dispostos para guiar o utilizador através do conteúdo de forma deliberada.
Projete a interface com uma hierarquia clara de informações, onde o conteúdo ou as ações mais importantes sejam enfatizados como pontos focais. Use pistas visuais, como tamanho, cor, contraste e posicionamento para destacar esses elementos. Apresente a informação gradualmente, começando pelos pontos focais mais importantes. Esta técnica ajuda os utilizadores a identificar rapidamente o conteúdo ou as ações mais relevantes e guia-os através da interface numa sequência lógica.
Coloque os botões de chamada para ação principais em destaque na interface, tornando-os os pontos focais mais fortes. Estes botões devem ser visualmente distintos de outros elementos e posicionados estrategicamente para orientar os utilizadores para as ações desejadas, como fazer uma compra ou registar-se. A linguagem de design fluente recomenda a utilização da cor do tema da marca para estes elementos.
Use o contraste de forma eficaz para criar pontos focais. Elementos que se destacam devido a diferenças de cor, brilho, tamanho ou tipografia naturalmente atraem a atenção do utilizador. O contraste de superfícies mais brilhantes com texto mais escuro ou elementos de marca cria um ponto focal mais proeminente.
Utilize espaços em branco para realçar pontos focais criando separação visual dos elementos circundantes. Essa técnica ajuda a evitar distrações e permite que os utilizadores se concentrem no conteúdo ou nas ações mais importantes. Os elementos da IU com mais espaçamento ao seu redor atraem mais foco e tendem a ser percebidos como de maior importância do que elementos com menos espaço.
Mantenha a consistência no uso de pontos focais em toda a interface para fornecer uma experiência de utilizador coesa. Ao definir um padrão de pontos focais, orienta as expectativas dos utilizadores relativamente à hierarquia que precisam de compreender para navegar na interface e ajuda-os a encontrar informações ou ações importantes em vários ecrãs ou páginas.
Não se esqueça de que é importante manter o equilíbrio e não sobrecarregar os utilizadores com demasiados pontos focais concorrentes.
O olhar do utilizador é atraído primeiro para o quadrado azul.
Elementos como os apelos à ação podem ser transformados em pontos focais para garantir que os utilizadores reparam neles.
Semelhança
Os objetos que parecem semelhantes são muitas vezes percebidos como um grupo ou padrão, levando os utilizadores a esperar que tenham a mesma funcionalidade.
Certifique-se de que os elementos da interface com funções semelhantes têm estilos visuais consistentes. Por exemplo, os botões que executam ações semelhantes ou com o mesmo peso devem ter a mesma cor, forma e tamanho, sinalizando aos utilizadores a sua funcionalidade partilhada. Inversamente, certifique-se de que os elementos que diferem significativamente na funcionalidade são claramente distinguíveis. Ambas as técnicas evitam a confusão e a frustração, estabelecendo pistas visuais claras.
Use iconografia e símbolos consistentes para representar ações ou recursos semelhantes em toda a interface. Os utilizadores tendem a associar ícones familiares a funções específicas com base nas suas experiências passadas. Para atender a essas expectativas, use metáforas de ícones universalmente reconhecidas. Garanta a consistência no estilo de ícones utilizando ícones do mesmo conjunto, como a biblioteca de iconografia da Fluent UI.
Utilize codificação de cores para significar semelhanças entre elementos ou categorias. Por exemplo, a utilização da mesma cor para realçar itens relacionados numa lista ou o agrupamento de pontos de dados semelhantes num gráfico melhora a coerência visual e ajuda os utilizadores a discernir padrões.
Mantenha a uniformidade na tipografia e no estilo de texto para elementos que servem propósitos análogos. Estilos, tamanhos e formatação de fontes consistentes contribuem para uma linguagem visual coesa, facilitando o reconhecimento dos utilizadores de conteúdo ou ações relacionadas.
Forneça comentários interativos consistentes para ações semelhantes em toda a interface. Seja ao passar o rato sobre um botão ou ao clicar numa ligação, os utilizadores devem esperar respostas uniformes para reforçar a associação entre semelhança visual e equivalência funcional. Embora a plataforma forneça intrinsecamente a maior parte dos comportamentos de interatividade, como os valores de cor do estado de pairar e premido, tenha este princípio de conceção em mente quando criar elementos de componentes de raiz ou implementar manualmente estados de feedback.
Certifique-se de que as semelhanças visuais são complementadas por outras pistas, como rótulos de texto ou feedback áudio, para acomodar utilizadores com necessidades e preferências diversas. A comunicação eficaz da funcionalidade através de múltiplas modalidades sensoriais aumenta a facilidade de utilização e a inclusão.
Os elementos são agrupados por forma e cor, não por disposição (colunas e linhas).
Se um cartão em um painel abrir como um painel lateral, os usuários esperam que todos eles abram dessa forma.
Figura e terreno
Instintivamente, as pessoas consideram que os elementos são ou uma "figura" (o que se destaca na frente) ou um "fundo" (o que recua para o fundo). Por conseguinte, o contexto influencia a perceção e é crucial garantir uma delimitação suficiente para distinguir os elementos importantes do fundo. O espaço em branco (espaço negativo) aumenta a compreensão do conteúdo.
Utilize o contraste de cor, tamanho ou estilo visual para estabelecer uma relação clara entre a figura e fundo. Os elementos importantes devem destacar-se do fundo, tornando-os facilmente distinguíveis e orientando eficazmente a atenção dos utilizadores. As superfícies com cores mais claras e elementos visuais mais contrastantes com o fundo têm mais destaque. Esta abordagem reduz a confusão visual e ajuda os utilizadores a identificar as informações essenciais. Proporcione um contraste suficiente entre os elementos de primeiro e segundo plano para melhorar a legibilidade para os utilizadores com deficiências visuais, melhorando a sua capacidade de acesso e compreensão dos conteúdos.
Manter a coerência na colocação e no estilo dos elementos da interface reforça a relação figura-fundo e ajuda os utilizadores a compreender a estrutura da interface. A utilização consistente de padrões de design e pistas visuais garante que os utilizadores possam discernir rapidamente entre elementos de primeiro e segundo plano em diferentes ecrãs e contextos. As inconsistências na conceção podem perturbar os modelos mentais dos utilizadores e impedir a sua capacidade de navegar eficazmente na interface.
O baixo contraste e o espaço negativo mínimo contribuem para a perceção dos retângulos brancos como parte do fundo.
Uma imagem lateral precisa recuar para o plano de fundo para que os usuários possam se concentrar em conteúdo importante.
Agrupamento
Os elementos tendem a ser vistos como grupos se partilharem uma área com um limite claramente definido.
O agrupamento de elementos relacionados em contentores visuais, como caixas, cartões ou margens, ajuda os utilizadores a percebê-los como unidades coesas. Esta abordagem organiza visualmente o conteúdo e a funcionalidade, facilitando a identificação e o processamento da informação. Os agrupamentos claros ajudam a evitar uma interface desordenada e reduzem a confusão ou a ineficiência. O agrupamento também é eficaz quando a proximidade não é uma opção; por exemplo, uma barra de mensagens que abrange vários controlos num ecrã é vista como uma unidade relacionada devido aos seus contornos e cor de fundo.
A manutenção de um estilo visual consistente para os elementos agrupados reforça a sua ligação e melhora a capacidade de utilização. A utilização de cores, tipos de letra ou ícones semelhantes para estes elementos realça o facto de pertencerem à mesma categoria ou função. As inconsistências na apresentação visual podem enfraquecer a perceção do agrupamento e levar os utilizadores a ignorar as relações entre elementos ou a interpretar mal o seu significado ou objetivo.
A adição de contornos à volta de um elemento ou de um grupo de elementos cria uma separação dos elementos circundantes.
A divisão do conteúdo em secções ajuda os utilizadores a compreender que o assunto está a mudar.
Sinais vs. ruído
As pistas visuais, como as linhas, o contraste e o espaçamento, são utilizadas para indicar aos utilizadores que algo é importante. No entanto, demasiados sinais, ou sinais que destacam informação que não é importante, rapidamente se tornam ruído.
Utilize princípios de pontos focais, como texto a negrito, cores contrastantes ou ícones, para assinalar informações ou ações importantes aos utilizadores. Por exemplo, utilize uma cor viva para botões ou cabeçalhos importantes para os fazer sobressair.
Seja seletivo sobre o que destaca para evitar sobrecarregar os utilizadores com muitas informações. Assinale apenas os elementos que são verdadeiramente importantes para a tarefa ou objetivo do utilizador. Demasiados sinais podem criar confusão e dificultar a definição de prioridades por parte dos utilizadores. Identifique as informações mais importantes para o utilizador e dê-lhes o devido destaque. Normalmente, recomenda-se que haja apenas um botão de chamada para ação por página. Nos formulários, realce os campos obrigatórios para chamar a atenção do utilizador. Isto evita que os utilizadores se percam em detalhes desnecessários e ajuda-os a concentrarem-se no que é essencial.
Certifique-se de que os sinais seguem uma linguagem visual coerente em toda a interface para servir de orientação que ajude os utilizadores a reconhecer padrões e a compreender o significado dos diferentes sinais de forma intuitiva.
Adaptar os sinais ao contexto específico e às necessidades do utilizador. Por exemplo, se os utilizadores estiverem a percorrer uma interface que apresenta determinadas tarefas, sinalize claramente o estado crítico e os itens acionáveis para atrair a sua atenção. Os sinais contextuais ajudam os utilizadores a encontrar rapidamente informações relevantes sem serem distraídos por pormenores não relacionados.
Os sinais ajudam a orientar os utilizadores através do conteúdo e transmitem o que é importante.
O ruído visual introduz confusão e tem o efeito contrário dos sinais.
Facilitação do Power Platform
Nas aplicações de tela, utilize contentores de esquema para agrupar os elementos relacionados. Idealmente, deve organizar todos os elementos da página em contentores, e os contentores de apresentação também podem separar eficazmente os contentores secundários ajustando o espaço entre a propriedade.
Nos formulários de aplicações condicionadas por modelo, as secções podem ser utilizadas para agrupar campos ou elementos relacionados.
Implemente a coerência em elementos visuais comuns com componentes personalizados.
Nas aplicações de tela, os controlos modernos apresentam sinalização integrada na sua conceção. Especificamente, os controlos botão e destaque oferecem opções nas suas propriedades de estilo, tornando-os sinais eficazes. Respeitar as melhores práticas para cada componente e aplicar a sinalização de forma seletiva para garantir uma comunicação ótima.
Informações relacionadas
- Princípios do agrupamento
- Psicologia Gestalt
- Efeito de capacidade de utilização estética
- Rampa de espaçamento do Sistema de Design Fluent UI