Recomendações para otimizar o esquema
Aplica-se a esta recomendação da lista de verificação de Otimização da Experiência do Power Platform Well-Architected:
| XO:06 | Mantenha esquemas utilizáveis e visualmente atraentes em todos os tamanhos e resoluções de ecrã. Utilize técnicas adaptativas para compor dinamicamente conteúdo de várias formas. |
|---|
Este guia descreve as recomendações para a estruturação de esquemas de ecrã fáceis de navegar e que se adaptam fluidamente em vários dispositivos. Esta abordagem assegura que os utilizadores têm uma experiência de visualização consistente e otimizada, independentemente do dispositivo que estão a utilizar.
Definições
| Termo | Definição |
|---|---|
| Janela viewport | Parte visível de uma interface digital, como um browser ou uma aplicação móvel, onde o conteúdo é apresentado. Os intervalos da janela viewport são frequentemente associados a classes de dispositivo (telemóvel, tablet e ambiente de trabalho) com base nas dimensões e resoluções do ecrã. |
| Pontos de interrupção | Valores de pixel específicos que definem intervalos de janela viewport usados para determinar o comportamento do esquema adaptativo. |
Principais estratégias de design
Os esquemas reativos proporcionam uma experiência de utilizador flexível e eficiente em diferentes tamanhos de janelas. Adaptam-se dimensionando o conteúdo, reorganizando os elementos e apresentando seletivamente texto e imagens. Os esquemas responsáveis correspondem às necessidades dos utilizadores, independentemente do tamanho do ecrã.
Determinar uma frame de aplicação consistente
O quadro do aplicativo consiste em um conjunto de controles que estão consistentemente disponíveis em todas as telas. É composta por três subcomponentes principais: um cabeçalho, navegação e uma região de conteúdo. As aplicações simples têm a flexibilidade de utilizar o componente de cabeçalho, enquanto as aplicações mais sofisticadas muitas vezes utilizam a navegação lateral para permitir várias páginas. Os subcomponentes são personalizáveis. Por exemplo, pode incorporar uma pesquisa global no cabeçalho ou agrupar itens na navegação lateral de acordo com os requisitos da sua aplicação.
Os três subcomponentes principais do quadro do aplicativo são:
O cabeçalho é um componente central concebido para fazer parte de todas as aplicações internas. É constituído por subcomponentes que dão aos utilizadores acesso a funções ao nível do sistema, ajudam a orientá-los para a IU e proporcionam consistência entre experiências. Aparece na parte superior da frame da aplicação e deve persistir em todas as páginas da aplicação. Opcionalmente, pode alojar comandos globais, como pesquisa, definições, notificações, comentários, perfil ou ajuda. O nome do aplicativo deve ser sempre exibido e, idealmente, também deve servir como um link clicável para a página inicial ou de destino. O cabeçalho deve ser reativo, com comandos que se movem para o controlo de capacidade excedida nas janelas viewport de 600 pixels ou menos. A largura da entrada de pesquisa também é reativa a 1023 pixels ou menos.
A navegação é um sistema de controlos que trabalham juntos para ajudar os utilizadores a encontrar informações e concluir tarefas. Ajuda os utilizadores a saltarem entre as secções de uma aplicação. Hierarquicamente, não está anexada a nenhuma página ou secção, mas existe acima de todos os outros conteúdos. Está sempre presente e pode ser minimizado para um estado fechado para libertar espaço adicional para o conteúdo da página. Em tamanhos de janela menores, pode ser minimizada num menu de lista de opções. As formas mais comuns de navegação incluem a navegação superior e a navegação lateral. Não use ambos simultaneamente.
A região de conteúdo contém o foco do ecrã. O tamanho da janela do navegador influencia a frame de conteúdo e o espaço disponível na região de conteúdo principal. Esta frame adapta-se com base no ponto de interrupção e no comportamento reativo correspondente de cada componente. Saiba mais em Criar uma matriz de ponto de interrupção.
Opcionalmente, a região de conteúdo pode conter várias sub-regiões disponíveis para um posicionamento consistente de elementos, como um cabeçalho de página, painéis laterais inline ou painéis que sobrepõem o conteúdo.
A adesão a uma linguagem de estruturação consistente com esquemas de cores, tipografia e estrutura de esquema ajuda os utilizadores a identificar e interagir rapidamente com vários elementos sem confusão. Quanto mais consistentemente um padrão de frames da aplicação for utilizado em todas as aplicações empresariais internas, mais forte se torna a revocação ou o modelo mental do utilizador. O alinhamento com os padrões do setor ou os padrões comuns da plataforma aumenta ainda mais este efeito.
Após determinada a frame da aplicação, o esquema de cada ecrã reside na região de conteúdo da frame da aplicação.
Utilizar criteriosamente a região de conteúdo
Os utilizadores anseiam por experiências perfeitas, onde as informações sejam facilmente acessíveis, o texto seja fácil de ler e a estética melhore, em vez de dificultar, a capacidade de utilização. Dê prioridade à visibilidade inicial das informações principais, garanta a legibilidade entre as colunas e harmonize os elementos de estruturação para um maior apelo estético.
Certifique-se de que as informações essenciais estão imediatamente visíveis ao abrir a tela sem a necessidade de rolagem. Dê prioridade à apresentação de informações essenciais, tais como opções de navegação, conteúdo crucial e itens acionáveis junto à parte superior do ecrã. Encontrar um equilíbrio entre exibir itens suficientes e fornecer informações detalhadas para cada item é um desafio constante. Por outro lado, embora possa ser tentador fornecer todas as informações possíveis na vista inicial, demasiada informação corre o risco de sobrecarregar os utilizadores e diluir a importância dos principais elementos. Considere utilizar resumos concisos ou pré-visualizações que ofereçam um vislumbre do conteúdo mais detalhado, levando os utilizadores a aprofundarem. Os dashboards são otimizados para servir este propósito de visualização de grandes quantidades de dados.
Incorpore várias colunas, secções ou agrupamentos para organizar logicamente o conteúdo e maximizar o espaço. Preste atenção meticulosa à largura das colunas, garantindo que o texto permaneça legível sem esforço excessivo. Evite colunas demasiado estreitas que obriguem os utilizadores a deslocarem-se constantemente na horizontal, interrompendo o fluxo de interação. Por outro lado, colunas excessivamente largas podem impedir a legibilidade, exigindo que os utilizadores percorram linhas em longas distâncias. Procure um equilíbrio que acomoda uma leitura confortável enquanto faz uso eficiente do espaço disponível.
Dimensione e posicione os elementos visuais adequadamente para criar uma interface visualmente agradável e equilibrada. Alinhe as legendas com os elementos visuais ou títulos correspondentes, mantenha um espaçamento consistente entre os elementos e adira a uma hierarquia com base nas necessidades do utilizador. Elimine os elementos decorativos desnecessários e aloque pixels criteriosamente aos elementos mais importantes. Priorize e enfatize o conteúdo e os elementos de navegação, especialmente em aplicativos ou home pages com uso intensivo de navegação, e evite ornamentações supérfluas que prejudicam a usabilidade.
Uma grelha subjacente pode ser útil para organizar os elementos de forma consistente. O comportamento de grelha escolhido deve ser consistente em todas as regiões de conteúdo do ecrã na aplicação e também pode ser aplicado ao nível do componente, como cartões ou painéis laterais. O tipo mais comum de esquema de grelha utilizado nas aplicações Web é a grelha de colunas. É recomendado um comportamento de grelha fluido (ou esticado) para a implementação de ecrãs reativos.
Utilizar esquemas estabelecidos e padrões de agrupamento
Utilize estruturas e disposições habitualmente reconhecidos para organizar conteúdo e elementos numa interface do utilizador. Estes esquemas e padrões foram refinados e provaram ser eficazes ao longo do tempo, tornando-os familiares e intuitivos para os utilizadores e, ao mesmo tempo, facilitando a implementação de padrões adaptativos. Depois de identificados os cenários e elementos principais, mapeie cada um para um esquema estabelecido que forneça a melhor interação. Priorize o conteúdo e as funcionalidades importantes para a conclusão da tarefa. Decida quais os elementos que devem estar sempre visíveis e acessíveis no ecrã e quais os que podem ser ocultados ou acedidos através de outros menus ou ações.
A lista seguinte, embora não seja exaustiva, descreve esquemas estabelecidos habitualmente utilizados para aplicações empresariais ou de produtividade. Todos podem ser colocados dentro da área de conteúdo principal.
Ecrã Principal ou de Destino
A tela inicial ou de destino serve como ponto de entrada para um aplicativo, fornecendo aos usuários uma visão geral das ofertas ou recursos do aplicativo. Normalmente, tem como objetivo captar a atenção dos visitantes e incentiva a realização de uma ação específica, como concluir uma primeira tarefa ou explorar mais conteúdos. Muitas vezes contém imagens de destaque e opções de navegação limpas.
É ideal para receber os utilizadores, oferecendo acesso rápido às principais funcionalidades, opções de navegação ou chamadas à ação e definindo o tom da experiência da aplicação. Dê prioridade à clareza, simplicidade e navegação intuitiva para orientar os utilizadores de forma eficaz.
Dashboard
Um painel é um hub centralizado dentro de um aplicativo que apresenta aos usuários uma visão geral abrangente de dados ou informações relevantes. Frequentemente, consiste em widgets ou módulos personalizáveis, permitindo que os utilizadores monitorizem métricas específicas ou efetuem ações.
Os dashboards são adequados para aplicações com conjuntos de dados complexos ou funcionalidades multifacetadas, permitindo que os utilizadores acompanhem o progresso, analisem tendências e tomem decisões informadas rapidamente. São particularmente úteis em plataformas de análise, ferramentas de gestão de projetos e aplicações de gestão financeira.
Formulário
Um formulário é um layout estruturado que facilita a entrada de dados dos usuários, geralmente composto por campos para inserir vários tipos de informações, como texto, números, datas e seleções. Os formulários são essenciais para recolher entradas do utilizador, processar transações e facilitar interações dentro de aplicações.
São geralmente utilizados em fluxos de registo, processos de finalização da compra, tarefas de introdução de dados e qualquer cenário que exija a entrada ou comentários do utilizador.
Vista de Entidade ou Perfil
A vista da entidade ou do perfil apresenta informações detalhadas sobre uma entidade específica, como um perfil de utilizador, uma lista de produtos ou um item de conteúdo. Normalmente, inclui texto descritivo, elementos multimédia e ações ou interações relevantes.
É adequada para apresentar informações detalhadas sobre itens numa aplicação. Fornece aos utilizadores informações aprofundadas, facilita a tomada de decisões e apoia a cativação com entidades específicas, tais como perfis de utilizador em aplicações de redes sociais ou listagens de produtos em plataformas de comércio eletrónico.
Página de lista
Uma lista ou tabela exibe uma coleção de itens ou entidades em um formato estruturado, geralmente apresentado em um layout linear ou de grade. Normalmente, inclui breves resumos ou pré-visualizações de cada item, juntamente com controlos de navegação para a navegação ou filtragem.
As páginas de lista são eficazes para apresentar grandes conjuntos de conteúdo ou dados num formato resumido, permitindo que os utilizadores analisem, pesquisem e naveguem de forma eficiente. Se as ações em linhas específicas estiverem habilitadas, o processo deverá ser claro. As páginas de lista são habitualmente usadas em sistemas de gestão de conteúdos, listagens de diretórios, resultados de pesquisa e feeds de notícias.
Minirrevisão (ecrã dividido)
Uma minirrevisão ou um ecrã dividido divide a interface em duas secções distintas, com uma lista no lado esquerdo e uma vista de itens no lado direito. A lista normalmente contém uma coleção de itens, enquanto a exibição de item fornece informações detalhadas sobre o item selecionado na lista.
Este esquema é particularmente eficaz em cenários em que os utilizadores precisam de navegar rapidamente numa lista de itens e ver informações detalhadas sobre cada item simultaneamente, como durante a realização de operações em massa. Catálogos de produtos, sistemas de gestão de documentos, clientes de e-mail ou de comunicação e ferramentas de gestão de tarefas (por exemplo, o visualizador de consultas do Azure Dev Ops) são cenários que normalmente se enquadram neste padrão.
Assistente
Um assistente orienta os usuários através de uma série de etapas ou tarefas sequenciais, geralmente de forma linear, para concluir um processo complexo ou atingir uma meta específica. Frequentemente, inclui indicadores de progresso, pedidos e verificações de validação. Os assistentes são benéficos para simplificar processos complexos, reduzir a sobrecarga cognitiva e orientar os utilizadores através de tarefas ou fluxos de trabalho desconhecidos. São geralmente utilizados em fluxos de inclusão, processos de configuração, formulários com vários passos e interações baseadas em tarefas, como a configuração de definições ou transações complexas.
Personalize e construa com base no layout padrão para atender a requisitos específicos. Este processo pode incluir a adição ou remoção de elementos, o ajuste do tamanho e do posicionamento dos elementos, e a aplicação de estilos para corresponder à identidade da marca ou às diretrizes de estruturação visual. Experimente diferentes configurações e variações do esquema padrão para encontrar a disposição mais eficaz para o conteúdo e a experiência geral do utilizador.
Estruturar esquemas para todos os dispositivos
Os esquemas são o culminar de regras definidas e da organização intencional do conteúdo. É fundamental reunir o conteúdo em estruturas cuidadas, mas fazer com que tudo flua em conjunto com uma hierarquia clara entre plataformas e tamanhos de ecrã requer uma lógica de dimensionamento. Individualmente, a estruturação adaptativa e reativa pode enfrentar este desafio. Em alguns casos, uma combinação de estruturação adaptativa e reativa é a escolha certa.
A estruturação reativa utiliza apenas um esquema, em que o conteúdo é fluido e pode adaptar-se à mudança de tamanho do formato. Esta técnica de estruturação utiliza consultas de multimédia para inspecionar as características de um determinado dispositivo e compor conteúdo em conformidade. A estruturação reativa permite-lhe criar uma funcionalidade uma vez e fazê-la funcionar eficazmente em todos os tamanhos de ecrã.
Um esquema adaptativo muda totalmente de acordo com o formato em que é apresentado. A estruturação adaptativa tem vários tamanhos de esquema fixos e aciona o browser para carregar um determinado esquema com base no espaço disponível. Os sites criados com uma estruturação adaptativa utilizam consultas de multimédia para detetar pontos de interrupção, semelhantes à estruturação reativa. Também utilizam marcação adicional com base nas capacidades do dispositivo. Este processo é conhecido como "melhoria progressiva".
Reposição
Altere a posição dos elementos da página.
Mantenha o conteúdo organizado, legível e equilibrado otimizando a composição à medida que o tamanho da janela aumenta. Por exemplo, elementos empilhados verticalmente numa janela viewport móvel podem ser reposicionados horizontalmente em janelas viewport maiores. Esta alteração segue uma ordem de leitura natural da esquerda para a direita, cria equilíbrio na estrutura e mantém o foco visual nos principais elementos da página.
Redimensionar
Ajuste o tamanho e as margens dos elementos da página.
Redimensione os elementos da página para otimizar para uma experiência de utilizador avançada ao apresentar mais conteúdo na parte superior da janela, reduzindo a necessidade de deslocamento vertical. Ajuste as margens da página para adicionar espaço em branco e equilíbrio ao esquema, o que permite que o conteúdo respire e melhora o apelo visual da estrutura. Por exemplo, um componente de destaque pode estender-se até à largura total da janela para mostrar mais da imagem de fundo. O conteúdo por baixo da imagem pode ser expandido, mas utilize margens diferentes para adicionar variedade no esquema e ajudar a definir a hierarquia visual.
Ajuste
Otimize o fluxo dos elementos da página.
Ajuste os elementos da página para garantir que eles sejam totalmente exibidos, levando em consideração o tamanho e a orientação da janela, reorganizando o conteúdo. Por exemplo, um único fluxo de coluna de conteúdo numa janela mais pequena pode ser ajustado numa janela maior para apresentar duas colunas de texto. Esta técnica permite que mais conteúdo seja apresentado "acima da dobra".
Mostrar/ocultar
Otimize o conteúdo para o tamanho da janela e a sua orientação.
Mostre ou oculte os elementos da página para otimizar o conteúdo para o tamanho da janela e a sua orientação. Esta técnica reativa adapta a quantidade de informações ao contexto de visualização. Por exemplo, as categorias que aparecem num ecrã pequeno poderão apresentar metadados limitados, como uma imagem, um título e uma ligação, para que outras informações fiquem visíveis para ajudar o utilizador a concentrar-se. Num ecrã maior, as categorias podem apresentar metadados adicionais, como uma persona, data e breve descrição, enquanto ainda cabem na janela viewport.
Voltar a arquitetar
Bifurque ou feche elementos da página e conteúdo para manter o foco em informações e ações importantes.
Esta abordagem é semelhante a seguir a prática de "divulgação progressiva" na sua estrutura, mas para diferentes tamanhos e orientações de janelas. Por exemplo, expandir a janela permite que uma lista de itens seja apresentada ao lado dos detalhes. Esta ligação visual entre o conteúdo permite que os utilizadores selecionem facilmente outro item. Num ecrã mais pequeno, o foco permanece na apresentação das informações essenciais.
Criar uma matriz de ponto de interrupção
Uma matriz de ponto de interrupção serve como uma representação gráfica dos comportamentos responsivos ou adaptativos do design de um aplicativo em diferentes tamanhos e orientações de tela. Normalmente, apresenta uma grelha estruturada ou um esquema que detalha a resposta da estrutura em vários pontos de interrupção. Cada segmento corresponde a uma largura de ecrã distinta, oferecendo informações sobre a organização, o esquema e a funcionalidade da estrutura. Uma matriz de ponto de interrupção engloba considerações de largura de ecrã, orientação da janela viewport, elementos de estrutura, estrutura do esquema, apresentação de conteúdo, navegação, multimédia e componentes interativos, para ilustrar a forma como a estrutura de um site ou aplicação responde em diferentes tamanhos de ecrã e orientações. Esta abordagem não só ajuda a finalizar a estrutura de cada ecrã, como também facilita a implementação quando as alterações na propriedade dos principais componentes são explicitamente controladas e bem comunicadas.
Facilitação do Power Platform
Os esquemas de formulário de aplicação condicionada por modelo são configurados utilizando o Power Apps Studio. Com o estruturador de formulários os criadores podem adicionar elementos a uma estrutura de grelha, o que permite que as páginas de formulário sejam inerentemente reativas. Os componentes personalizados incorporados, como as páginas personalizadas, os componentes de tela incorporados e os componentes de código do Power Apps Component Framework precisam de incorporar comportamento reativo nas suas implementações. Por exemplo, as páginas personalizadas têm de implementar um comportamento reativo da mesma forma que uma aplicação de tela pura para que funcione corretamente.
As aplicações de tela requerem uma configuração explícita para cada componente para implementar um comportamento reativo, permitindo um maior controlo sobre a experiência. Os tamanhos de ecrã são determinados na definição da aplicação, que pode ser referenciada para determinar a posição, o comportamento, a visibilidade e outras propriedades relevantes.