Recomendações para otimizar a percepção e a estética do usuário
Aplica-se a esta recomendação da lista de verificação de Otimização da Experiência do Well-Architected para Power Platform:
| XO:07 | Aplique princípios de design clássicos a elementos visuais, como esquemas de cores, tipografia e layout. Esforce-se para obter uma hierarquia visual focada, equilibrada e intuitiva que oriente a atenção dos usuários para elementos e ações importantes. |
|---|
Este guia descreve as recomendações para padrões universais de design visual que afetam a percepção do usuário, o que pode influenciar significativamente a satisfação e a adoção de um aplicativo. Os elementos visuais servem como blocos de construção fundamentais usados para criar experiências. A aplicação de princípios visuais que se alinham com a forma como os humanos percebem e processam naturalmente as informações fornece métodos estruturados para ajudar a selecionar e organizar elementos visuais para criar uma aplicação eficaz e atraente.
Estratégias-chave de design
Uma extensa pesquisa sobre a percepção humana do design visual revela que os usuários não veem elementos visuais isoladamente. Ao contrário, percebem-nas em relação a outros elementos e ao contexto em que aparecem. Essas relações influenciam a percepção do usuário, chamando a atenção para áreas específicas, provocando emoções, auxiliando 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 usuário envolventes, memoráveis e eficazes que ressoam com o público-alvo.
Efeito de usabilidade estética
O efeito de usabilidade estética refere-se à tendência de considerar produtos atrativos como mais utilizáveis. Os usuários formam uma opinião inicial sobre um aplicativo dentro de aproximadamente 50 milissegundos. Essa 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 usuário. A pesquisa mostra que os usuários são mais tolerantes com pequenos problemas de usabilidade 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 percepção visual. Ele ajuda os usuários a processar e organizar informações visuais de forma mais eficiente, reduzindo a tensão cognitiva. Composições equilibradas são geralmente percebidas como mais agradáveis e fáceis de compreender, permitindo que os usuários concentrem a atenção de forma eficaz e naveguem pelos estímulos visuais com maior facilidade. Esse aspecto cognitivo do equilíbrio visual ressalta sua importância para facilitar a comunicação clara e melhorar a experiência geral do usuário.
Uma composição é equilibrada quando todos os elementos estão em equilíbrio óptico. 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 carregar mais peso visual do que os menores. Para obter o equilíbrio, elementos maiores podem ser contrabalanceados agrupando-os com elementos menores ou ajustando seu posicionamento dentro do layout.
Cor: cores brilhantes ou intensas podem atrair mais atenção e parecer mais pesadas do que cores suaves ou neutras. O equilíbrio de 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 bem embalados eles estão dentro de um determinado espaço. O equilíbrio 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 os 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 é uma soma de forças visuais entre os elementos.
Equilibrar o layout é uma das tarefas mais difíceis, pois não pode ser medido facilmente.
Color
Matizes, tonalidades, tons e tonalidades podem transmitir significado, evocar emoções e criar apelo estético. A cor desempenha um papel crucial em orientar a atenção do usuário, estabelecer hierarquia, transmitir informações e melhorar a usabilidade. Várias razões explicam o motivo pelo qual o design de cores cuidadoso em uma interface do usuário pode afetar os usuários da maneira desejada:
Atenção e percepção. Certas cores são mais atraentes do que outras, permitindo que os designers direcionem o foco dos espectadores 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 emoção, enquanto cores frias como azul e verde podem despertar calma e tranquilidade. Você pode obter as respostas desejadas para influenciar os usuários em direção à experiência pretendida.
Identidade da marca. O uso consistente da cor em todos os materiais da marca ajuda a estabelecer uma identidade visual forte e promove o reconhecimento da marca. Os usuários geralmente associam cores específicas a marcas específicas e associam sua experiência à lealdade e confiança à marca.
Hierarquia visual. A cor pode ser usada para estabelecer hierarquia visual e organizar informações. Atribua cores diferentes a vários elementos com base em sua importância ou categoria para criar uma hierarquia clara e tornar fácil a navegação e a compreensão.
Proximidade
Os itens que são colocados mais próximos parecem mais relacionados. Ao organizar elementos, verifique se há uma diferença considerável no espaçamento entre os elementos que estão intimamente relacionados e os que não estão.
Este princípio da Gestalt sugere que a distância espacial entre os elementos visuais influencia como eles são percebidos e organizados mentalmente, e ressalta sua importância para facilitar o processamento eficiente e a compreensão dos estímulos visuais.
Agrupe elementos relacionados que sejam funcionalmente semelhantes ou pertençam à mesma categoria hierárquica. Por exemplo, botões que executam opções ou ações semelhantes em um menu suspenso devem ser agrupados para indicar sua associação. Em uma barra de navegação, os itens de menu muito espaçados sugerem um conjunto relacionado de opções, enquanto uma lacuna maior entre as categorias de menu os distingue visualmente. Os itens de formulário relacionados devem ser agrupados, como campos de endereço em uma seção chamada "endereço".
Melhore a legibilidade em interfaces com texto pesado ajustando o espaçamento entre parágrafos, frases e palavras. Um espaçamento de parágrafo mais próximo 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. Essa técnica promove a compreensão eficiente das informações textuais.
Certifique-se de que haja uma distinção perceptível no espaçamento entre elementos relacionados e não relacionados, a fim de 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 ao triângulo do que ao outro círculo.
O espaçamento entre parágrafos é menor que o espaço entre seções.
Continuidade
Elementos que estão dispostos em uma linha ou uma curva são percebidos como mais relacionados do que aqueles que não estão em uma linha ou uma curva.
Organize elementos de interface, como menus de navegação ou etapas em um processo, ao longo de uma linha ou curva para sugerir uma sequência ou progressão. Esse layout ajuda os usuários a perceber a relação entre os elementos e a entender o fluxo lógico de informações ou ações.
Coloque elementos relacionados, como caixa de seleção ou opções, ou itens em uma lista de marcadores, ao longo de uma linha para agrupá-los visualmente. Essa disposição sugere aos usuários que esses elementos compartilham um propósito comum ou pertencem à mesma categoria, facilitando a navegação e a compreensão. Caso os itens com aparência semelhante sejam recuados para dentro, a posição do item será correlacionada com um posicionamento mais baixo na hierarquia visual.
Use linhas ou curvas para guiar a atenção dos usuários e criar caminhos visuais através da interface. Por exemplo, uma seta pode direcionar o olho do usuário de uma seção do conteúdo para outra ao longo de um determinado caminho, indicando uma conexão ou progressão. Essa técnica ajuda os usuários a navegar na interface de forma mais intuitiva e incentiva a exploração.
Organize os principais elementos da interface, como botões de ação ou informações importantes, ao longo de linhas proeminentes para chamar a atenção dos usuários e criar pontos focais. Por exemplo, o padrão MessageBar do Fluent geralmente é exibido como uma mensagem balanceada proeminente na área de conteúdo, com a mensagem à esquerda, levando aos botões de chamada para ação à direita. Essa estratégia de layout destaca esses elementos e enfatiza seu significado, aumentando a probabilidade de interação.
As curvas/linhas são mais fortes que a cor para a nossa percepção.
Os assistentes usam a continuidade para mostrar aos usuários que as etapas estão conectadas, sem sobrecarregá-los com muitas informações.
Encerramento
O cérebro humano tende a ver formas completas, reconhecendo um único padrão familiar, sobre objetos individuais, mesmo quando falta alguma informação.
Garanta consistência visual nos elementos de design, como formas, cores e tamanhos, para ajudar os usuários a aprender padrões esperados, mesmo que sejam apresentados em contextos diferentes.
Use ícones ou símbolos simples e familiares que permitem aos usuários preencher informações ausentes com base em suas experiências anteriores. Por exemplo, um ícone de lupa é comumente associado à funcionalidade de pesquisa, mesmo sem acompanhar texto.
Apresente informações gradualmente aos usuários, também conhecida como divulgação progressiva. Possibilite 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 usuários a perceber objetos como entidades inteiras. Por exemplo, agrupar elementos relacionados pode ajudar os usuários a entender seu relacionamento e finalidade. Organize visualmente os elementos de forma consistente usando os princípios da 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.
Use animação e transições para orientar a atenção dos usuários e transmitir alterações nos estados da interface. Transições suaves entre diferentes estados ou telas podem ajudar os usuários a compreender a relação entre os elementos e preencher as informações ausentes. Vários controles modernos disponíveis no Power Apps exibem animações de forma inerente.
Um quadrado é reconhecido primeiro antes de quatro círculos incompletos.
A animação de um cartão para um modal ajuda a preencher a lacuna entre os dois e relacioná-los entre si.
Ponto focal
Um ponto focal é um elemento de design que imediatamente chama a atenção do espectador. Preferencialmente, um design deve ter uma sequência de pontos focais, normalmente entre um e três, organizados para guiar o usuário pelo conteúdo de maneira deliberada.
Projete a interface com uma hierarquia clara de informações, onde os conteúdos ou ações mais importantes são enfatizados como pontos focais. Use dicas visuais como tamanho, cor, contraste e posicionamento para destacar esses elementos. Apresente as informações gradualmente, começando pelos pontos focais mais importantes. Essa técnica ajuda os usuários a identificar rapidamente o conteúdo ou as ações mais relevantes e os orienta pela interface em uma sequência lógica.
Coloque os botões principais de chamada à ação em destaque na interface, tornando-os os pontos focais mais fortes. Esses botões devem ser visualmente distintos de outros elementos e estrategicamente posicionados para orientar os usuários em direção às ações desejadas, como fazer uma compra ou se inscrever. A linguagem de design do Fluent recomenda o uso da cor do tema da marca para esses 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 usuário. Contrastar superfícies mais claras com texto mais escuro ou elementos de marca cria um ponto focal mais proeminente.
Use espaço em branco e espaço negativo para destacar os pontos focais, criando uma separação visual dos elementos circundantes. Essa técnica ajuda a evitar distrações e permite que os usuários se concentrem nos conteúdos ou ações mais importantes. Elementos de interface do usuário com mais espaçamento ao 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 usuário coesa. Ao definir um padrão de pontos focais, você orienta as expectativas dos usuários sobre a hierarquia que eles precisam entender para navegar na interface e os ajuda a encontrar informações ou ações importantes em várias telas ou páginas.
Lembre-se de que é importante manter o equilíbrio e não sobrecarregar os usuários com muitos pontos focais concorrentes.
O olhar do usuário é atraído primeiro para o quadrado azul.
Elementos como chamadas à ação podem se tornar pontos focais para garantir que os usuários os percebam.
Similaridade
Objetos que parecem semelhantes geralmente são percebidos como um grupo ou padrão, fazendo com que os usuários achem que eles tem a mesma funcionalidade.
Verifique se os elementos de interface com funções semelhantes têm estilos visuais consistentes. Por exemplo, botões que executam ações semelhantes ou igualmente ponderados devem ter a mesma cor, forma e tamanho, sinalizando aos usuários sua funcionalidade compartilhada. Inversamente, certifique-se de que os elementos que diferem significativamente na funcionalidade sejam claramente distinguíveis. Ambas as técnicas evitam confusão e frustração, estabelecendo dicas visuais claras.
Use iconografia e símbolos consistentes para representar ações ou recursos semelhantes em toda a interface. Os usuários tendem a associar ícones familiares a funções específicas com base em suas experiências anteriores. Para atender a essas expectativas, use metáforas de ícones universalmente reconhecidas. Garanta consistência no estilo do ícone usando ícones do mesmo conjunto, como a biblioteca de iconografia do Fluent UI.
Utilize a codificação de cores para significar semelhanças entre elementos ou categorias. Por exemplo, usar a mesma cor para destacar itens relacionados em uma lista ou agrupar pontos de dados semelhantes em um gráfico melhora a coerência visual e ajuda os usuários a discernir padrões.
Mantenha a uniformidade na tipografia e no estilo do texto para elementos que servem a propósitos análogos. Estilos, tamanhos e formatação de fonte consistentes contribuem para uma linguagem visual coesa, facilitando o reconhecimento dos usuários do conteúdo ou ações relacionadas.
Forneça comentários interativos consistentes para ações semelhantes em toda a interface. Seja ao passar o mouse sobre um botão ou clicar em um link, os usuários devem esperar respostas uniformes para reforçar a associação entre semelhança visual e equivalência funcional. Embora a plataforma forneça essencialmente a maioria dos comportamentos de interatividade, como valores de cor de estado focalizado e pressionado, tenha esse princípio de design em mente ao criar elementos de componente do zero ou implementar estados de feedback manualmente.
Certifique-se de que as semelhanças visuais sejam complementadas por outras dicas, como rótulos de texto ou comentários de áudio, para acomodar usuários com necessidades e preferências diversas. A comunicação eficaz da funcionalidade através de múltiplas modalidades sensoriais aumenta a usabilidade 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 painel lateral, os usuários esperarão que todos eles abram essa forma.
Figura e fundo
As pessoas instintivamente percebem que os elementos são uma "figura" (o que se destaca na frente) ou um "chão" (o que recua para o fundo). Portanto, o contexto influencia a percepção, e é crucial garantir delineamento suficiente para distinguir elementos importantes do pano de fundo. O espaço em branco (espaço negativo) melhora a compreensão do conteúdo.
Use contraste de cor, tamanho ou estilo visual para estabelecer uma relação clara entre figura e fundo. Elementos importantes devem destacar-se em destaque contra o pano de fundo, tornando-os facilmente distinguíveis e orientando a atenção dos usuários de forma eficaz. Superfícies de cores mais claras e elementos visuais com maior contraste em relação ao fundo se destacam mais. Essa abordagem reduz a desordem visual e ajuda os usuários a identificar as principais informações. Forneça contraste suficiente entre os elementos de primeiro plano e de plano de fundo para melhorar a legibilidade para usuários com deficiência visual, melhorando sua capacidade de acessar e compreender o conteúdo.
Manter a consistência na colocação e no estilo dos elementos da interface reforça a relação figura-fundo e auxilia os usuários na compreensão da estrutura da interface. O uso consistente de padrões de design e dicas visuais garante que os usuários possam discernir rapidamente entre elementos de primeiro plano e de plano de fundo em diferentes telas e contextos. Inconsistências no design podem interromper os modelos mentais dos usuários e dificultar sua capacidade de navegar na interface de forma eficiente.
O baixo contraste e o mínimo de espaço negativo contribuem para a percepção dos retângulos brancos como parte do fundo.
Uma imagem lateral precisa ficar em segundo plano para que os usuários possam se concentrar no conteúdo importante.
Agrupamento
Os elementos tendem a ser percebidos como grupos se compartilharem uma área com um limite claramente definido.
O agrupamento de elementos relacionados em contêineres visuais, como caixas, cartões ou bordas, ajuda os usuários a percebê-los como unidades coesas. Essa abordagem organiza visualmente o conteúdo e a funcionalidade, facilitando a identificação e o processamento de informações. Agrupamentos claros ajudam a evitar uma interface confusa e reduzem a confusão ou a ineficiência. O agrupamento também é eficiente quando a proximidade não é viável. Por exemplo, uma barra de mensagens que abrange vários controles em uma tela percebida como uma unidade relacionada devido às suas bordas e cor em segundo plano.
Manter um estilo visual consistente para elementos agrupados fortalece sua conexão e melhora a usabilidade. Usar cores, fontes ou ícones semelhantes para esses elementos enfatiza que eles pertencem à mesma categoria ou função. Inconsistências na apresentação visual podem enfraquecer o agrupamento percebido e fazer com que os usuários ignorem as relações entre os elementos ou interpretem mal seu significado ou propósito.
Adicionar bordas ao redor de um elemento ou grupo de elementos cria separação dos elementos circundantes.
A segmentação do conteúdo ajuda os usuários a entenderem que o assunto está mudando.
Sinais vs. ruído
Dicas visuais, como linhas, contraste e espaçamento, são utilizados para sinalizar aos usuários que algo é importante. No entanto, muitos sinais, ou sinais destacando informações que não são importantes, rapidamente se tornam ruído.
Empregar princípios de ponto focal, como texto em negrito, cores contrastantes ou ícones para sinalizar informações ou ações importantes aos usuários. Por exemplo, use uma cor brilhante para botões ou títulos importantes para deixá-los em destaque.
Seja seletivo sobre o que você destaca para evitar sobrecarregar os usuários com muitas informações. Apenas elementos de sinal que são realmente importantes para a tarefa ou objetivo do usuário. O excesso de sinais pode gerar confusão e dificultar a priorização por parte dos usuários. Identifique as informações mais importantes para o usuário e enfatize-as de forma adequada. Normalmente, é recomendável ter apenas um botão de chamada à ação por página. Nos formulários, destaque os campos obrigatórios para orientar a atenção do usuário. Isso evita que os usuários se percam em detalhes desnecessários e os ajuda a se concentrar no que é essencial.
Certifique-se de que os sinais sigam uma linguagem visual consistente em toda a interface para servir como uma diretriz que ajuda os usuários a reconhecer padrões e entender o significado de diferentes sinais de forma intuitiva.
Adapte os sinais ao contexto específico e às necessidades do usuário. Por exemplo, se os usuários estiverem examinando uma interface que apresenta determinadas tarefas, sinalize claramente o status crítico e os itens acionáveis para atrair sua atenção. Os sinais contextuais ajudam os usuários a localizar rapidamente informações relevantes sem se distrair com detalhes não relacionados.
Os sinais ajudam a orientar os usuários através do conteúdo e transmitir o que é importante.
O ruído visual introduz confusão e tem o efeito oposto dos sinais.
Facilitação do Power Platform
Em aplicativos de tela, use contêineres de layout para agrupar elementos relacionados. O ideal é organizar todos os elementos da página em contêineres, e os contêineres de layout também podem separar contêineres filho de forma eficiente ajustando a propriedade gap.
Em formulários de aplicativo baseado em modelo,as seções podem ser utilizadas para agrupar campos ou elementos relacionados.
Implemente consistência em elementos visuais comuns com componentes personalizados reutilizáveis reutilizáveis.
Em aplicativos de tela, os controles modernos apresentam sinalização integrada em seu design. Principalmente, os controles de botão e notificação oferecem várias opções em suas propriedades de estilo, tornando-os sinais eficazes. Siga as práticas recomendadas para cada componente e aplique a sinalização seletivamente para garantir a comunicação ideal.
Informações relacionadas
- Princípios de agrupamento
- Psicologia Gestalt
- Efeito de usabilidade estética
- Rampa de espaçamento do Sistema de Design da Interface de Usuário do Fluent