Partilhar via

Recomendações para seguir normas de design

  • Artigo

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

XO:02 Siga as normas, as convenções e as diretrizes estabelecidos. Use padrões de design comuns. Mantenha a consistência nos elementos de estrutura, terminologia e interações em toda a interface. Utilize padrões e normas consistentes para orientar os utilizadores pela interface e criar uma experiência de utilizador coesa.

Este guia descreve as recomendações para estabelecer normas de design, convenções e melhores práticas para desenvolver interfaces de utilizador que melhorem a experiência do utilizador e o sucesso geral da aplicação. O desvio das normas deve ser cuidadosamente considerado para evitar afetar negativamente a experiência do utilizador e a capacidade de utilização da aplicação.

Principais estratégias de design

Seguir as normas de design ajuda a reduzir o esforço de tomada de decisão no processo de design, identificando os aspetos importantes do design. Compreender as normas discrimina e simplifica a capacidade de uma equipa obter interfaces de utilizador bem estruturadas. Esta abordagem resulta em ciclos de desenvolvimento mais rápidos, melhor capacidade de utilização e maior satisfação do utilizador, levando a um aumento da produtividade e eficácia dos sistemas de software internos.

Noções sobre princípios de design

Uma extensa pesquisa sobre a cognição humana informa a nossa compreensão do design visual e da interação com os produtos digitais. Este conhecimento está subjacente a muitas melhores práticas e normas, representando aproximadamente 80% do produto final. Os princípios de design podem colmatar a lacuna criativa restante de 20% não coberta pelas normas. A familiaridade com este conhecimento melhora a compreensão da equipa de desenvolvimento das considerações de design durante o planeamento, reduzindo a dependência ou melhorando a colaboração com os recursos de design.

Seguir padrões e metáforas comuns

Os padrões e as metáforas universais são amplamente reconhecidos e esperados em produtos digitais. A incorporação destes padrões, quando apropriado, pode simplificar a integração de utilizadores e a utilização a longo prazo, reduzindo os custos de formação e suporte e, potencialmente, diminuindo a necessidade de atualizações ou novos designs. Estas práticas abrangem vários aspetos do design, incluindo a composição do esquema, o design de navegação, a hierarquia de informações e o design de interação.

Aderir às metáforas de ícones padrão e às cores semânticas é crucial. Os ícones devem utilizar associações visuais estabelecidas para transmitir a funcionalidade de forma rápida e eficaz aos utilizadores. Da mesma forma, cores semânticas, como vermelho por erro ou verde por sucesso, fornecem feedback visual imediato que se alinha com as expetativas e modelos mentais dos utilizadores. Seguir essas convenções ajuda a reduzir a carga cognitiva e melhora a usabilidade, promovendo uma sensação de familiaridade e conforto.

Estabelecer um sistema de design

Um sistema de design é um conjunto de blocos de construção funcionais reutilizáveis usados para criar uma interface de utilizador. São concebidos especificamente para uma organização para que cada elemento esteja alinhado com as normas definidas pela marca. Os quatro componentes principais de um sistema de design são tokens, componentes, bibliotecas de padrões e diretrizes de design.

Os tokens de design são elementos visuais fundamentais de uma interface de utilizador, incluindo aspetos como cor, tipografia e espaçamento. São expressos como variáveis num formato padrão, facilitando a criação e manutenção de uma aplicação utilizando o sistema de design. Independentemente do design específico, os tokens de design simplificam a conversão do design em código. Por exemplo, ao definir um token chamado "primary-color" com um valor designado, os programadores podem integrar o design perfeitamente utilizando o token em vez de incorporar um valor específico diretamente no código. Os tokens de design podem estar alinhados com o guia de estilo de uma organização e geridos centralmente para produzir tokens fáceis de utilizar.

Um componente representa uma unidade discreta e modular de uma interface de utilizador. Serve como um elemento visual para montar interfaces de aplicações. Os componentes bem concebidos apresentam duas características principais: reutilização e modularidade. Eles devem ser projetados para garantir que mantenham 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.

Power Apps Fornece um conjunto abrangente de componentes universais básicos, como botões e listas suspensas, e componentes compostos, como a tabela moderna. Utilize estes controlos tanto quanto possível para necessidades básicas e, em seguida, considere criar componentes compostos onde existam lacunas para padrões de interface de utilizador repetíveis.

Os componentes compostos devem ser versáteis o suficiente para serem utilizados tal como estão ou com ligeiras variações (através de parâmetros) em diferentes contextos de aplicações, sem necessidade de modificações. Alguns exemplos de componentes personalizados incluem:

  • Um cabeçalho ou rodapé com a marca da empresa
  • Um componente de página de recursos do tamanho de um ecrã para os utilizadores fornecerem comentários e obterem ajuda de TI
  • Conteúdo universal, como avisos de copyright ou ligações

Uma biblioteca de padrões oferece um conjunto de padrões de design predefinidos para os criadores usarem como ponto de partida para construir interfaces de utilizador. Estes padrões servem 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 concebidos, permitindo a criação de interfaces de utilizador consistentes e eficazes. As bibliotecas de padrões permitem aos programadores utilizar um padrão específico e seguir as diretrizes de utilização estabelecidas, assegurando coerência e eficácia em todos os designs da interface de utilizador.

As diretrizes oferecem regras e melhores práticas para as equipas de design sobre como utilizar componentes e estilos visuais de forma eficaz. Ao contrário das diretrizes de estilo, que se concentram na estética, as diretrizes do sistema de design definem o comportamento funcional dos componentes e as expetativas de interação do utilizador. Por exemplo, se um sistema de design fornecer um conjunto de tokens de design para referenciar cores, as diretrizes devem esclarecer quando utilizar estas cores e como os programadores podem aceder à cor correspondente no Power Apps. Para os componentes, deve haver documentação sobre o uso correto, os parâmetros de entrada e saída, e as variações de estado que podem ser esperadas do componente.

Os esforços do sistema de design centralizado também podem alojar ativos de comunicação social universais, como logótipos de empresas e outros ativos de design num repositório para permitir um desenvolvimento rápido e generalizado.

O Fluent UI da Microsoft é um exemplo de um sistema de design open-source amplamente adotado. Pode ser uma referência eficaz para muitas decisões de design tomadas no Power Apps porque todos os controlos modernos utilizam os componentes no Sistema Fluent Design (2). Sistemas de design como o Fluent UI 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. Também são concebidos de uma forma que pode ser ubíqua e facilmente usada em vários produtos e plataformas digitais. Cada componente tem diretrizes específicas para garantir que o aplicativo esteja alinhado com a experiência pretendida. Tire partido do conhecimento sustentado pela investigação ao rever as orientações do Fluent 2.

O compartilhamento para evitar implementações duplicadas não só 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 os elementos partilhados ajudam a manter as experiências atualizadas e refletem os conhecimentos de 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 utilizador é crucial para garantir que uma aplicação cumpre os padrões estabelecidos de UI/UX. As equipas centralizadas devem tentar familiarizar-se com os padrões básicos de design e as melhores práticas. Embora os designers normalmente tenham conhecimento da experiência do utilizador, os gestores de projeto também podem beneficiar da aprendizagem destas competências para contribuir efetivamente para a equipa.

A forma mais eficaz de validar uma experiência é percorrê-la fisicamente. No entanto, também pode ler os metadados da aplicação do Power Apps através de programação. Os métodos para fazer isso podem incluir verificar se o tema correto é aplicado ao aplicativo ou verificar se os valores de token de tema são referenciados em controles herdados. Por exemplo, se elementos de texto específicos precisarem usar determinados tokens de design, o nome do componente de texto poderá corresponder a um valor específico e as propriedades do componente deverão corresponder 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 versus aqueles que não o fazem. Por exemplo, considere componentes de texto que são nomeados incorretamente ou corretamente, mas não seguem as diretrizes de valor da propriedade. Para impor um esquema reativo, determinados contentores de esquema podem ser mapeados para convenções de nomenclatura e valores de propriedade específicos (como o LayoutWrap).

Cumprir as normas de acessibilidade para aumentar a base de utilizadores

A incorporação de princípios de design inclusivo garante que os produtos satisfazem uma audiência diversificada, incluindo indivíduos com todo o tipo de capacidades. O design inclusivo procura identificar potenciais barreiras para utilizadores com o todo o tipo de capacidades para criar produtos que abordem os desafios antes da implementação final. É essencial compreender e discutir os aspectos funcionais que podem levar a barreiras de interação para superá-las efetivamente.

Function Propósito
Cognição A nossa capacidade de receber, interpretar e processar informações é influenciada por muitos fatores. Estes fatores incluem 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 aprende, seja ao aprender a utilizar um novo dispositivo ou ao aprender novas informações numa sala de aula. Muitos aspetos da cognição afetam-se mutuamente.
Mobilidade A nossa anatomia e os nossos músculos dão-nos mobilidade e dependem de sinais cerebrais, que controlam os músculos. A mobilidade envolve preensão, capacidades motoras finas, coordenação, controlo (movimento voluntário vs. 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 A nossa capacidade de ver e entender as informações visuais do nosso ambiente orienta o pensamento e o movimento. A visão é influenciada por fatores físicos e neurológicos. As limitações de visão incluem cegueira, baixa visão (visão parcial), diminuição da acuidade, perda de campo visual, daltonismo, fotofobia (sensibilidade à luz) e até mesmo a luz solar intensa que afeta a legibilidade do texto num ecrã.
Audição A nossa capacidade de receber e compreender o áudio do nosso ambiente também orienta o pensamento e o movimento. Os graus de perda auditiva variam em um amplo espectro, levando a barreiras para o uso diário da tecnologia. Exemplos temporários ou situacionais incluem ambientes barulhentos ou zonas silenciosas onde a reprodução de som não é possível.
Voz, discurso e comunicação A nossa capacidade de comunicar (verbalmente ou não) é essencial para expressar os nossos desejos e necessidades, formar relações, transmitir informação aos outros e interagir com o nosso ambiente.
Sensação e perceção A sensação é a nossa capacidade de detetar sentidos como o tato ou o posicionamento do nosso corpo. A perceção é como o cérebro processa e comunica estes sentidos. As limitações da sensação incluem distúrbios vestibulares, dor crônica, integridade da pele, sensação (hipersensível e hipossensível) e propriocepção.

Métodos de acesso ao conteúdo

Os utilizadores acedem aos conteúdos digitais de várias formas. Além da entrada por rato e ponteiro, também podem utilizador teclado e tecnologias de apoio, como leitores de ecrã e braille, lupas, legendas, reconhecimento de voz e definições de alto contraste, que adaptam a experiência para atender às necessidades do utilizador.

Ferramentas de apoio

As ferramentas de apoio comuns incluem:

  • Teclado: pessoas com incapacidade visual interagem com sites e aplicações utilizando um software de leitor de ecrã, que lê conteúdos e controlos em voz alta utilizando a tecnologia de conversão de texto em voz e que utiliza o teclado como uma entrada alternativa para a interação de apontar e clicar com um rato padrão. Além de suportar o conjunto básico de comandos de teclado, os leitores de ecrã também fornecem um conjunto complexo de comandos de teclado. Estes comandos fornecem aos utilizadores um potente conjunto adicional de ferramentas para interagir com as interfaces de utilizador de forma mais eficiente.

  • Leitor de tela: Os leitores de tela convertem texto digital em fala sintetizada e saída braille. Permitem aos utilizadores ouvir conteúdos e navegar com o teclado. Esta tecnologia permite que indivíduos com cegueira ou baixa visão utilizem as tecnologias da informação com o mesmo nível de independência e privacidade que qualquer outro utilizador. Os leitores de ecrã também são usados por indivíduos com deficiências cognitivas ou de aprendizagem e por utilizadores que simplesmente preferem conteúdo de áudio a texto. Estas ferramentas vão além do uso da Web, auxiliando na navegação de documentos, folhas de cálculo e sistemas operativos.

  • 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 concebido para ajudar as pessoas a limitar a quantidade de entradas desnecessárias de toques não intencionais (ou não registados).

  • Conteúdo dinâmico: as funções de marcos, ou etiquetas ARIA, oferecem benefícios imediatos aos utilizadores do leitor de ecrã. Existem oito funções e cada uma representa um bloco de conteúdo que ocorre normalmente em páginas Web. Para as utilizar, adicione o atributo de função relevante a um contentor adequado no seu HTML, permitindo que os utilizadores do leitor de ecrã naveguem rapidamente para essa secção da página.

Estilos visuais

Para criar produtos inclusivos para utilizadores com diferentes capacidades de visão, é essencial considerar estilos visuais como cor, contraste e tamanho do texto. Isto envolve garantir o contraste adequado entre o texto e o seu fundo, incluindo texto em imagens, ícones e botões, para melhorar a legibilidade para utilizadores com baixa sensibilidade ao contraste ou daltonismo. O conteúdo com um bom contraste melhora a legibilidade em várias condições de iluminação, beneficiando todos os utilizadores.

O texto padrão deve manter um rácio de contraste de pelo menos 4,5:1 com o fundo. Para textos maiores, componentes interativos e visualizações de dados, é necessário um rácio de contraste mínimo de 3:1 com a cor de fundo. Os indicadores de estado devem utilizar cores, tipos e imagens semânticos de forma eficaz para transmitir informações, garantindo que o conteúdo pode ser percebido por todos os utilizadores. Considere suportar uma paleta de cores de alto contraste, o que normaliza a paleta de cores para apresentar conteúdo com um rácio de contraste de pelo menos 7:1, garantindo visibilidade e clareza. Oferecer um modo escuro pode melhorar significativamente a legibilidade e reduzir o cansaço ocular.

Tipografia

A tipografia desempenha um papel crucial para garantir a legibilidade para os utilizadores com necessidades diversas. O texto tem de ser suficientemente grande e espaçado para acomodar diferentes requisitos de utilizador. Os utilizadores devem ser capazes de ajustar as definições como a orientação e os níveis de zoom, com as aplicações a adaptar-se perfeitamente ao seu esquema de conteúdo. A tipografia bem definida não só ajuda na legibilidade, mas também facilita a orientação e a navegação da página, beneficiando indivíduos com baixa visão, deficiências cognitivas e daltonismo, e aqueles que dependem de leitores de tela.

Os cabeçalhos deverão apresentar texto grande ou em negrito para permitir uma leitura e compreensão rápidas, especialmente para os utilizadores de orientação visual. Os elementos de cabeçalho aplicados corretamente garantem uma navegação eficiente para todos os utilizadores. A largura da linha e o espaçamento afetam significativamente a legibilidade. Por exemplo, linhas excessivamente largas sobrecarregam os olhos, enquanto linhas excessivamente curtas perturbam o ritmo e a compreensão. Aponte para um comprimento de linha de 50 a 70 carateres e uma altura de linha que seja de 120% a 145% do tamanho do tipo de letra para melhorar a legibilidade.

Em dispositivos móveis, o texto deve ser redimensionável até 200% sem comprometer o conteúdo ou a funcionalidade. Esta flexibilidade garante que os utilizadores podem ajustar o tamanho do texto de acordo com as suas preferências ou necessidades, melhorando a acessibilidade geral. Além disso, os utilizadores devem ter a capacidade de ampliar a interface, com esquemas de página concebidos para ajustar o conteúdo perfeitamente sem deslocamento horizontal para níveis de zoom de até 400%. Garantir que o conteúdo permanece acessível e legível, independentemente do tamanho do ecrã do dispositivo, contribui para uma experiência mais agradável para todos os utilizadores.

Imagens, gráficos e movimento

As imagens e os gráficos tornam os conteúdos mais agradáveis e mais fáceis de compreender para muitas pessoas e, em particular, para as pessoas com dificuldades cognitivas e de aprendizagem. Embora as imagens possam servir como indicadores para pessoas com deficiência visual, ajudando a orientá-las dentro do conteúdo, o uso extensivo em sites pode criar grandes barreiras para os utilizadores.

Práticas acessíveis em torno de conteúdo de multimédia beneficiam os utilizadores de braille e leitores de ecrã, os utilizadores que navegam com imagens desativadas para poupar largura de banda e os crawlers de motores de pesquisa. Também podem ajudar pessoas com perda auditiva ou incapacidades cognitivas.

Use texto alternativo para tornar o conteúdo visual acessível. Os atributos Alt descrevem conteúdo visual, por exemplo, texto que é apresentado enquanto as imagens estão a ser transferidas. Adapte o texto alt ao contexto da imagem. Seja conciso e informativo (utilize de 150 a 250 carateres). Lembre-se de marcar imagens que duplicam o conteúdo de texto como decorativas.

Interação

A interação é onde a acessibilidade é mais importante. Se um utilizador não conseguir navegar por um produto sem problemas e concluir tarefas, o produto não estará verdadeiramente acessível. Interações eficientes com teclado e de toque ajudam os utilizadores de leitores de ecrã, leitores de braille e aqueles que navegam utilizando um teclado. As interações típicas incluem:

  • Navegação: os utilizadores de tecnologia de apoio navegam numa página Web através de separadores, pesquisa e, no caso de leitores de ecrã, utilizando listas de cabeçalhos e ligações. Assegure uma navegação eficiente no teclado com marcos, cabeçalhos e atalhos como "saltar para o conteúdo principal".

  • Hiperligações: a capacidade de utilização e a acessibilidade das hiperligações podem ser melhoradas tornando-as claras, concisas e significativas fora do contexto. Aplique contraste de cor suficiente e diferencie-se visualmente dos outros conteúdos.

  • Tabelas: Confiar apenas em pistas visuais não é suficiente para criar uma tabela acessível. A marcação estrutural permite que a tecnologia de apoio reconheça cabeçalhos e células de dados.

  • Formulários: Os campos de entrada, utilizados para várias interações na Web, muitas vezes levantam preocupações de acessibilidade para indivíduos que usam leitores de tela ou teclados.

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

  • Alterações de estado: especifique texto para qualquer alteração de estado e anúncios. É fundamental comunicar estados de erro e orientar os usuários durante a recuperação de erros, como informações ausentes ou um problema no sistema.

Facilitação do Power Platform

Os controlos modernos estão disponíveis tanto para aplicações de tecla como para aplicações condicionadas por modelo.

As aplicações de ecrã suportam temas modernos, permitindo-lhe implementar uma paleta de marca consistente em todos os controlos na aplicação. As aplicações condicionadas por modelo suportam temas para modificar elementos básicos de imagem corporativa, como cores de cabeçalho de aplicações, ligações e alguns ícones de formulário.

Os componentes reutilizáveis com suporte para soluções estão disponíveis em vários formulários para vários tipos de aplicações. Os componentes de tela personalizados podem ser usados em aplicações de tela ou páginas personalizadas e são criados utilizando low-code. O Power Apps component framework pode ser utilizado para implementar componentes de código para aplicações de tela, aplicações condicionadas por modelo e Power Pages.

As aplicações de tela suportam propriedades acessíveis que são mapeadas para funções específicas de tecnologia de apoio. Utilize ferramentas no estúdio para validar a conformidade com a acessibilidade.

Apesar de as aplicações condicionadas por modelo estarem acessíveis sem configuração, certifique-se de que todos os recursos Web adicionados à aplicação estão acessíveis. As experiências de tela incorporadas, incluindo páginas personalizadas, têm de ser configuradas manualmente para cumprirem as normas de acessibilidade.

As aplicações condicionadas por modelo fornecem atalhos de teclado padrão incorporados para navegar em formulários e vistas.

As aplicações de tela requerem componentes de código para ativar os atalhos de teclado, que podem ser configurados utilizando os atalhos de teclado do Kit para Criadores.

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

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