Compartilhar via

Recomendações para seguir os padrões de design

  • Artigo

Aplica-se a esta recomendação da lista de verificação de Otimização da Experiência do Well-Architected para Power Platform:

XO:02 Siga padrões, convenções e diretrizes estabelecidas. Use padrões de design comuns. Mantenha a consistência em elementos de design, terminologia e interações em toda a interface. Use padrões e padrões consistentes para orientar usuários em meio à interface e criar uma experiência do usuário coesa.

Este guia descreve as recomendações para estabelecer padrões de design, convenções e melhores práticas para desenvolver interfaces de usuário que aprimorem a experiência do usuário e o êxito geral do aplicativo. O desvio em relação aos padrões deve ser cuidadosamente levado em consideração para evitar afetar negativamente a experiência do usuário e a usabilidade do aplicativo.

Estratégias-chave de design

Seguir padrões de design ajuda a reduzir o esforço da tomada de decisões no processo de design, identificando os aspectos importantes do projeto. A compreensão dos padrões discrimina e simplifica a capacidade de uma equipe de conseguir interfaces do usuário bem projetadas. Essa abordagem acarreta ciclos de desenvolvimento mais rápidos, usabilidade aprimorada e mais satisfação do usuário, o que acarreta o aumento da produtividade e a eficácia dos sistemas de software internos.

Compreender princípios de design

Uma pesquisa abrangente sobre a cognição humana informa nossa compreensão do design visual e da interação com produtos digitais. Esse conhecimento sustenta muitas melhores práticas e padrões, responsabilizando aproximadamente 80% do produto final. Os princípios de design podem preencher a lacuna criativa de 20% restantes não abrangida por padrões. A familiaridade com esse conhecimento aumenta a compreensão da equipe de desenvolvimento das considerações de design durante o planejamento, reduzindo a dependência ou melhorando a colaboração com recursos de design.

Seguir padrões e metáforas comuns

Padrões universais e metáforas são muito reconhecidos e esperados em produtos digitais. A incorporação desses padrões quando indicado pode simplificar a integração do usuário e o uso a longo prazo, reduzindo os custos de treinamento e suporte e potencialmente diminuindo a necessidade de atualizações ou redesigns. Essas práticas abrangem aspectos variados do design, inclusive composição de layout, estrutura de navegação, hierarquia de informações e design de interação.

O cumprimento das metáforas de ícone padrão e cores semânticas é crucial. Os ícones devem usar associações visuais estabelecidas para transmitir rápida e efetivamente a funcionalidade para usuários. Da mesma forma, cores semânticas, como vermelho para erro ou verde para êxito, indicam comentários visuais imediatos alinhados às expectativas e aos modelos mentais dos usuários. Seguir essas convenções ajuda a reduzir a carga cognitiva e aprimora a usabilidade, promovendo uma sensação de familiaridade e conforto.

Estabelecer um sistema de design

Um sistema de design é uma coleção de blocos de construção funcionais reutilizáveis usados para compilar uma interface do usuário. Eles foram projetados mais especificamente para uma organização, de maneira que cada elemento esteja alinhado com os padrões estabelecidos pela marca. Os quatro componentes-chave de um sistema de design são tokens de design, componentes, bibliotecas de padrões e diretrizes.

Os tokens de design são elementos visuais essenciais de uma interface do usuário, inclusive aspectos como cor, tipografia e espaçamento. Eles são expressados como variáveis em um formato padrão, o que facilita a criação e a manutenção de um aplicativo usando o sistema de design. Independentemente do design específico, os tokens de design simplificam a tradução do design em código. Por exemplo, ao definir um token chamado "primary-color" com um valor designado, os desenvolvedores conseguem integrar o design perfeitamente usando o token em vez de incorporar um valor específico diretamente no código. Os tokens de design podem ser alinhados ao guia de estilo de uma organização e gerenciados de forma centralizada para produzir tokens fáceis de usar.

Um componente representa uma unidade discreta e modular de uma interface do usuário. Ele serve como um elemento visual para montar interfaces de aplicativo. Componentes bem projetados tem duas características-chave: reusabilidade e modularidade. Eles devem ser projetados para assegurar que mantém a consistência visual em vários aplicativos dentro do ecossistema de uma marca, reduzindo a necessidade de recriar o design a cada vez. Um único componente deve servir perfeitamente em vários contextos.

O Power Apps oferece um conjunto abrangente de componentes universais básicos, como botões e listas suspensas e componentes compostos, como a tabela moderna. Use esses controles o máximo possível para necessidades básicas e leve em consideração a compilação de componentes compostos nos quais existam lacunas para padrões de interface do usuário repetíveis.

Os componentes compostos devem ser versáteis o suficiente para serem usados como estão ou com pequenas variações (por meio de parâmetros) em contextos de aplicativo diferentes, sem a necessidade de modificações. Entre alguns exemplos de componentes personalizados estão:

  • Um cabeçalho ou rodapé com marca da empresa
  • Um componente da página de recurso do tamanho de uma tela para usuários fazerem comentários e receberem ajuda de TI
  • Conteúdo universal, como avisos de direitos autorais ou links

A biblioteca de padrões oferece um conjunto de padrões de design predefinidos para os fabricantes usarem como ponto de partida para construir interfaces de usuário. Esses padrões funcionam como soluções padronizadas para desafios de design comuns. O objetivo principal de uma biblioteca de padrões é oferecer uma coleção centralizada de padrões bem elaborados, possibilitando a criação de interfaces do usuário consistentes e eficazes. As bibliotecas de padrões capacitam os desenvolvedores a usar um padrão específico e seguir diretrizes estabelecidas para uso, garantindo coerência e eficiência em todos os designs de interface do usuário.

As diretrizes oferecem regras e melhores práticas para equipes de projeto sobre como usar componentes e estilos visuais de maneira eficaz. Diferentemente das diretrizes de estilo, que se concentram na estética, as diretrizes do sistema de design definem o comportamento funcional de componentes e expectativas de interação do usuário. Por exemplo, se um sistema de design oferecer um conjunto de tokens de design para referenciar cores, as diretrizes deverão esclarecer quando usar essas cores e como os desenvolvedores podem acessar a cor correspondente no Power Apps. Para componentes, deve haver uma documentação sobre o uso correto, parâmetros de entrada e saída e variações de estado que podem ser esperadas do componente.

Os esforços do sistema de design centralizados também podem hospedar ativos de mídia universais, como logotipos de empresa e outros ativos de design, em um repositório para permitir o desenvolvimento rápido e generalizado.

O Fluent UI da Microsoft é um exemplo de um sistema de design de código aberto muito adotado. Ele pode ser uma referência eficaz para muitas decisões de projeto tomadas no Power Apps porque todos os controles modernos usam os componentes do sistema de design do Fluent (2). Sistemas de design como a interface do usuário do Fluent são o resultado de uma quantidade significativa de esforços de pesquisa e desenvolvimento na criação de componentes para garantir que eles atendam às necessidades dos usuários. Eles também foram projetados de maneira que possam ser onipresentes e facilmente usados em vários produtos e plataformas digitais. Cada componente tem diretrizes específicas para garantir que o aplicativo fique alinhado com a experiência desejada. Aproveite o conhecimento apoiado pela pesquisa revisando as diretrizes do Fluent 2.

O compartilhamento para evitar implementações duplicadas não apenas aumenta a eficiência da produção, mas também garante que as experiências permaneçam coerentes ao longo do tempo. As contribuições para elementos compartilhados ajudam a manter experiências atualizadas e refletem os conhecimentos em toda a organização. Atualmente, a coerência é um desafio porque componentes, sistemas, processos e cultura muitas vezes não são compartilhados, não promovem a coerência e dificultam as contribuições.

Realizar revisões de design

O acesso a recursos destinados a orientar o design da experiência do usuário é crucial para garantir que um aplicativo atenda aos padrões estabelecidos de UI/UX. As equipes centralizadas devem procurar se familiarizar com os padrões de design básicos e as melhores práticas. Embora os designers normalmente tenham conhecimento sobre a experiência do usuário, os gerentes de projeto também podem se beneficiar do aprendizado dessas habilidades para favorecer efetivamente a equipe.

A maneira mais eficaz de validar uma experiência é caminhando fisicamente por ela. No entanto, você também pode ler metadados do aplicativo Power Apps de maneira programática. Dentre os métodos para isso podem estar a verificação se o tema correto é aplicado ao aplicativo ou a verificação se os valores de token do tema são referenciados em controles herdados. Por exemplo, se elementos de texto específicos precisarem utilizar determinados tokens de design, o nome do componente de texto poderá corresponder a um valor específico, e as propriedades do componente deverão acabar correspondendo a um mapeamento de token de design específico.

Avalie o número de elementos que são um tipo de componente específico e atendem a determinados critérios, comparando com aqueles que não atendem. Por exemplo, leve em consideração componentes de texto nomeados correta ou incorretamente, mas que não seguem as diretrizes de valor de propriedade. Para impor um layout dinâmico, determinados contêineres de layout podem ser mapeados para convenções de nomenclatura e valores de propriedade específicos (como LayoutWrap).

Atender aos padrões de acessibilidade para aumentar a base de usuários

A incorporação dos princípios de design inclusivo garante que os produtos atendam a um público-alvo diversificado, inclusive indivíduos de todas as habilidades. O design inclusivo busca identificar barreiras potenciais para usuários de todas as habilidades criarem produtos que superem desafios antes da implementação final. É fundamental compreender e debater os aspectos funcionais que possam acarretar barreiras de interação para efetivamente superá-las.

Função Finalidade
Cognição Nossa capacidade de receber, interpretar e processar informações é influenciada por muitos fatores. Entre esses fatores estão atenção, consciência, foco, memória, julgamento, compreensão, resolução de problemas e raciocínio. A cognição de uma pessoa pode afetar a maneira como ela aprende, seja aprendendo a usar um novo dispositivo ou aprendendo novas informações em uma sala de aula. Muitos aspectos da cognição afetam uns aos outros.
Mobilidade Nossa anatomia e músculos nos dão mobilidade, e eles dependem de sinais cerebrais, que controlam os músculos. A mobilidade envolve pegada, habilidades motoras finas, coordenação, controle (movimento voluntário X involuntário), velocidade, tônus muscular, resistência, postura e lesões temporárias. A mobilidade pode ser influenciada por condições situacionais, temporárias, progressivas ou permanentes.
Visão Nossa capacidade de ver e compreender informações visuais de nosso ambiente orienta o pensamento e o movimento. A visão é influenciada por fatores físicos e neurológicos. Entre as limitações da visão estão cegueira, baixa visão (parcial), acuidade reduzida, perda de campo visual, daltonismo, fotofobia (sensibilidade à luz) e até mesmo luz solar brilhante que afeta a legibilidade do texto em uma tela.
Audição Nossa capacidade de receber e compreender áudio de nosso ambiente também orienta o pensamento e o movimento. Os níveis de perda auditiva variam em um amplo espectro, acarretando barreiras ao uso diário da tecnologia. Entre exemplos temporários ou situacionais estão ambientes barulhentos ou zonas silenciosas onde a reprodução de som não é possível.
Voz, fala e comunicação Nossa capacidade de nos comunicarmos (verbalmente ou não) é essencial para expressar nossos desejos e necessidades, formar relacionamentos, transmitir informações para outras pessoas e interagir com nosso ambiente.
Sensação e percepção Sensação é a nossa capacidade de detectar sentidos como o toque ou o posicionamento de nosso corpo. A percepção é como o cérebro processa e transmite esses sentidos. Entre as limitações sensoriais estão distúrbios vestibulares, dor crônica, integridade da pele, sensibilidade (hipersensível e hipossensível) e cinestesia.

Métodos de acesso ao conteúdo

Os usuários acessam o conteúdo digital de várias maneiras. Além da entrada de mouse e ponteiro, eles também podem utilizar teclado e tecnologias assistivas, como leitores de tela e braille, lupas, legendas, reconhecimento de voz e configurações de alto contraste, que adaptam a experiência para atender às necessidades do usuário.

Ferramentas adaptativas

As ferramentas auxiliares comuns incluem:

  • Teclado: pessoas com deficiência visual interagem com sites e aplicativos usando um software leitor de tela, que lê conteúdo e controla em voz alta usando a tecnologia de conversão de texto em fala e usa o teclado como uma entrada alternativa para a interação apontar e clicar com um mouse padrão. Além de dar suporte ao conjunto básico de comandos de teclado, os leitores de tela também oferecem um conjunto complexo de comandos de teclado. Esses comandos dão aos usuários um conjunto adicional avançado de ferramentas para interagir com interfaces do usuário de maneira mais eficiente.

  • Leitor de tela: os leitores de tela convertem texto digital em fala sintetizada e saída em braille. Eles permitem aos usuários ouvir conteúdo e navegar usando o teclado. Essa tecnologia permite a indivíduos com cegueira ou baixa visão usar a tecnologia da informação com o mesmo nível de independência e privacidade de qualquer outro usuário. Os leitores de tela também são usados por indivíduos com deficiências cognitivas ou de aprendizado, e por usuários que simplesmente preferem conteúdo em áudio em vez de texto. Essas ferramentas vão além do uso na web, auxiliando na navegação de documentos, planilhas e sistemas operacionais.

  • Toque:os alvos de toque são, em grande parte, direcionados a pessoas com atrasos motores, que podem ter problemas para tocar na tela. Mais especificamente, o toque foi projetado para ajudar as pessoas a limitar a quantidade de entradas espúrias de toques não intencionais (ou não registrados).

  • Conteúdo dinâmico: as funções do ponto de referência, ou rótulos ARIA, oferecem benefícios imediatos para usuários de leitores de tela. Existem oito funções, cada uma representando um bloco de conteúdo que normalmente ocorre em páginas da Web. Para usá-las, adicione o atributo de função relevante a um contêiner indicado no HTML, permitindo aos usuários de leitor de tela navegar rapidamente até essa seção da página.

Estilos visuais

Para criar produtos inclusivos para usuários com recursos de visão diferentes, é essencial levar em consideração estilos visuais como cor, contraste e tamanho do texto. Isso envolve garantir o contraste indicado entre o texto e o plano de fundo, inclusive texto em imagens, ícones e botões, a fim de aumentar a legibilidade para usuários com baixa sensibilidade ao contraste ou daltonismo. O conteúdo bem contrastante aumenta a legibilidade em condições de iluminação variadas, beneficiando todos os usuários.

O texto padrão deve manter uma taxa de contraste de pelo menos 4.5:1 com o plano de fundo. Para um texto maior, componentes interativos e visualizações de dados, uma taxa de contraste mínima de 3:1 com a cor em segundo plano é necessária. Os indicadores de status devem usar cores semânticas, tipo e imagens de maneira eficaz para transmitir informações, garantindo que o conteúdo possa ser percebido por todos os usuários. Leve em consideração dar suporte a uma paleta de cores de alto contraste, que normaliza a paleta de cores para exibir conteúdo com uma taxa de contraste de pelo menos 7:1, garantindo visibilidade e clareza. A oferta de um modo escuro pode melhorar significativamente a legibilidade e reduzir a fadiga ocular.

Tipografia

A tipografia desempenha um papel crucial em garantir a legibilidade para usuários com necessidades diversas. O texto deve ser grande o suficiente e devidamente espaçado para acomodar requisitos de usuário diferentes. Os usuários devem ser capazes de ajustar configurações como níveis de orientação e zoom, com os aplicativos adaptando perfeitamente o layout de conteúdo de acordo. Uma tipografia bem definida não só auxilia na legibilidade, mas também ajuda na orientação da página e a navegação, beneficiando indivíduos com baixa visão, deficiências cognitivas, daltonismo e aqueles que dependam de leitores de tela.

Os títulos devem apresentar texto grande ou em negrito para possibilitar digitalização e compreensão fáceis, principalmente para usuários visuais. Os elementos de título devidamente aplicados garantem uma navegação eficiente para todos os usuários. A largura e o espaçamento da linha afetam significativamente a legibilidade; por exemplo, linhas muito largas cansam os olhos, e linhas muito curtas atrapalham o ritmo e a compreensão. Busque um comprimento de linha de 50 a 70 caracteres e uma altura de linha de 120% a 145% do tamanho da fonte para melhorar a legibilidade.

Em dispositivos móveis, o texto deve ser redimensionável até 200% sem comprometer o conteúdo ou a funcionalidade. Essa flexibilidade garante que os usuários possam ajustar o tamanho do texto de acordo com as preferências ou as necessidades, melhorando a acessibilidade geral. Além disso, os usuários devem ter a capacidade de ampliar a interface, com layouts de página projetados para refluir perfeitamente o conteúdo sem rolagem horizontal para níveis de zoom de até 400%. Garantir que o conteúdo permaneça acessível e legível, independentemente do tamanho da tela do dispositivo, favorece uma experiência mais amigável para todos os usuários.

Imagens, gráficos e movimento

Imagens e gráficos deixam o conteúdo mais agradável e fácil de entender para muitas pessoas e, em especial, para aqueles com dificuldades cognitivas e de aprendizado. Apesar de as imagens funcionarem como pistas para pessoas com necessidades especiais visuais, ajudando a orientá-las dentro do conteúdo, o uso extensivo em sites pode criar grandes barreiras para os usuários.

As práticas acessíveis relacionadas ao conteúdo de mídia beneficiam usuários de braille e leitores de tela, usuários que navegam com imagens desativadas para economizar largura de banda e rastreadores de mecanismo de pesquisa. Eles também auxiliar pessoas com perda auditiva ou necessidades especiais cognitivas.

Use texto alternativo para deixar o conteúdo visual acessível. Os atributos Alt descrevem conteúdo visual, por exemplo, texto exibido durante o download das imagens. Adapte o texto alternativo ao contexto da imagem. Mantenha a concisão e a informação (use de 150 a 250 caracteres). Lembre-se de marcar imagens que duplicam conteúdo de texto como decorativas.

Interação

A interação é onde a acessibilidade é mais importante. Se um usuário não conseguir navegar por um produto tranquilamente e concluir tarefas, o produto não estará verdadeiramente acessível. As interações eficientes por toque e teclado auxiliam usuários de leitores de tela, leitores de braille e aqueles que navegam usando um teclado. Entre as interações comuns estão:

  • Navegação:os usuários de tecnologia adaptativa navegam em uma página da Web por tabulação, pesquisa e, no caso de leitores de tela, usando listas de títulos e links. Garanta uma navegação eficiente por teclado com pontos de referência, cabeçalhos e atalhos, como "pular para o conteúdo principal".

  • Hiperlinks: a usabilidade e a acessibilidade dos hiperlinks podem ser aprimoradas deixando-os claros, concisos e significativos, mesmo sem contexto. Aplique contraste de cores suficiente e diferencie visualmente de outro conteúdo.

  • Tabelas: a dependência apenas de dicas visuais não é suficiente para criar uma tabela acessível. A marcação estrutural permite que a tecnologia adaptativa reconheça cabeçalhos e células de dados.

  • Formulários: os campos de entrada, usados em várias interações da Web, normalmente trazem preocupações de acessibilidade para indivíduos que usam leitores de tela ou teclados.

  • Foco: a visibilidade de foco ajuda usuários que dependem do teclado para navegar na página, indicando visualmente o elemento com o qual interagem em seguida. Às vezes, o foco precisa ser movido de forma programada ou limitada a uma área específica para otimizar a experiência.

  • Alterações de estado: especifique o texto para qualquer alteração de estado e anúncios. A comunicação dos estados de erro e a orientação dos usuários por meio da recuperação de erros, como informações não encontradas ou problema no sistema, é fundamental.

Facilitação do Power Platform

Há controles modernos disponíveis para aplicativos de tela e aplicativos baseados em modelo.

Os aplicativos de tela dão suporte a temas modernos, o que lhe permite implementar uma paleta de marcas consistente em todos os controles do aplicativo. Os aplicativos baseados em modelo dão suporte a temas para modificar elementos de identidade visual básicos, como cores de cabeçalho do aplicativo, links e alguns ícones de formulário.

Os componentes reutilizáveis com reconhecimento da solução estão disponíveis em vários formulários para tipos variados de aplicativo. Os componentes de tela personalizados podem ser usados em aplicativos de tela ou páginas personalizadas e são criados usando low code. O Power Apps component framework pode ser usado para implementar componentes de código para aplicativos de tela, aplicativos baseados em modelo e Power Pages.

Os aplicativos de tela dão suporte a propriedades acessíveis mapeadas para funções de tecnologia adaptativa específicas. Use ferramentas de estúdio para validar a conformidade de acessibilidade.

Embora os aplicativos baseados em modelo sejam acessíveis sem configuração, verifique se todos os recursos da Web adicionados ao aplicativo permanecem acessíveis. As experiências de tela incorporadas, inclusive páginas personalizadas, devem ser configuradas manualmente para atender aos padrões de acessibilidade.

Os aplicativos baseados em modelo oferecem atalhos de teclado padrão internos para navegar em formulários e exibições.

Os aplicativos de tela exigem componentes de código para habilitar atalhos de teclado, que podem ser configurados usando os atalhos de teclado do Kit do Criador.

Lista de verificação de Otimização da Experiência

Lista de verificação de Otimização da Experiência