Recomendações para otimizar layout
Aplica-se a esta recomendação da lista de verificação de Otimização da Experiência do Well-Architected para Power Platform:
| XO:06 | Mantenha layouts úteis e visualmente atrativos entre tamanhos e resoluções de tela. Use técnicas adaptáveis para renderizar dinamicamente conteúdo de maneiras variadas. |
|---|
Este guia descreve as recomendações para projetar layouts de tela fáceis de navegar e adaptar tranquilamente em dispositivos variados. Essa abordagem garante que os usuários tenham uma experiência de exibição consistente e ideal, independentemente do dispositivo que estejam usando.
Definições
| Termo | Definição |
|---|---|
| Visor | Parte visível de uma interface digital, como um navegador da Web ou um aplicativo móvel, onde o conteúdo é exibido. As linhas de visores normalmente estão associadas a classes de dispositivo (móvel, tablet e desktop) com base em dimensões e resoluções da tela. |
| Pontos de interrupção | Valores de pixel específicos que definem linhas de visores usadas para determinar o comportamento do layout adaptável. |
Estratégias-chave de design
Os layouts dinâmicos proporcionam uma experiência do usuário flexível e eficiente em diferentes tamanhos de janela. Eles se adaptam dimensionando conteúdo, reorganizando elementos e exibindo seletivamente texto e imagens. Os layouts responsáveis atendem às necessidades dos usuários, independentemente do tamanho da tela.
Determinar um quadro do aplicativo consistente
O quadro do aplicativo consiste em um conjunto de controles que estão disponíveis consistentemente em todas as telas. Ele abrange três subcomponentes principais: um cabeçalho, uma navegação e uma região de conteúdo. Os aplicativos simples têm a flexibilidade de usar o componente do cabeçalho, e os aplicativos mais sofisticados normalmente usam a navegação lateral para habilitar várias páginas. Os subcomponentes são personalizáveis. Por exemplo, você pode incorporar uma pesquisa global nos itens de cabeçalho ou grupo na navegação lateral para atender aos requisitos do aplicativo.
Os três subcomponentes principais do quadro do aplicativo são:
O cabeçalho é um componente básico projetado para fazer parte de todos os aplicativos internos. Ele consiste em subcomponentes que dão aos usuários acesso a funções de todo o sistema, ajuda a orientá-los para a interface do usuário e oferece consistência entre as experiências. Ela é exibido na parte superior do quadro do aplicativo e deve persistir em todas as páginas do aplicativo. Ele também pode hospedar comandos globais, como pesquisa, configurações, notificações, comentários, perfil ou ajuda. O nome do aplicativo deve ser exibido sempre e também deve servir como um link clicável para a home page ou página de aterrissagem. O cabeçalho deve ser dinâmico, com comandos se movendo para o controle de estouro em visores com 600 pixels ou menos. A largura de entrada da pesquisa também é dinâmica em 1023 pixels ou menos.
Navegação é um sistema de controles que funcionam juntos para ajudar os usuários a encontrar informações e concluir tarefas. Ela ajuda os usuários a ir de uma seção para outra de um aplicativo. Hierarquicamente, ela não está anexada a nenhuma página ou seção, mas existe acima de qualquer outro conteúdo. Ela está sempre presente e pode ser minimizada para um estado recolhido (também chamada de rail state) a fim de liberar espaço adicional para o conteúdo da página. Em janelas de tamanho menor, ela pode ser minimizada em um submenu. As formas mais comuns de navegação incluem navegação superior e navegação lateral. Não use as duas simultaneamente.
A região de conteúdo contém o foco da tela. O tamanho da janela do navegador influencia o quadro do conteúdo e o espaço disponível na região do conteúdo principal. Esse quadro se adapta com base no ponto de interrupção e no comportamento dinâmico correspondente de cada componente. Saiba mais em Criar uma matriz de pontos de interrupção.
A região de conteúdo pode conter diversas sub-regiões disponíveis para a colocação do elemento consistente, como um cabeçalho de página, painéis laterais em linha ou painéis que sobrepõem o conteúdo.
Respeitar uma linguagem de design consistente com esquemas de cores, tipografia e estrutura de layout ajuda os usuários a identificar e interagir rapidamente com elementos variados sem confusão. Quanto mais consistente for o uso de um padrão da estrutura do aplicativo em todos os aplicativos de negócios internos, mais forte será o recall do usuário ou o modelo mental. O alinhamento com padrões do setor ou padrões de plataforma comuns aumenta ainda mais esse efeito.
Depois que o quadro do aplicativo é determinado, o layout de cada tela vai residir na área de conteúdo do quadro do aplicativo.
Usar a área de conteúdo com cuidado
Os usuários querem experiências perfeitas nas quais as informações sejam facilmente acessíveis, o texto seja fácil de ler e a estética melhore, em vez de dificultar a usabilidade. Priorize a visibilidade inicial das informações-chave, garanta a legibilidade entre colunas e harmonize os elementos de design tendo em vista um apelo estético.
Verifique se as informações essenciais estão imediatamente visíveis na abertura da tela, sem a necessidade de rolagem. Priorize a exibição de informações essenciais, como opções de navegação, conteúdo crucial e itens acionáveis próximos da parte superior da tela. Encontrar uma equilíbrio entre a exibição de itens suficientes e o fornecimento de informações detalhadas para cada item é um desafio constante. Por outro lado, embora possa ser tentador dar todas as informações possíveis na exibição inicial, o excesso de informações corre o risco de sobrecarregar os usuários e diluir a importância de elementos-chave. Leve em consideração empregar resumos concisos ou visualizações que ofereçam uma visão rápida de conteúdo mais detalhado, levando os usuários a se aprofundarem. Os painéis são otimizados para atender a essa finalidade para visualização de grandes volumes de dados.
Incorpore várias colunas, seções ou agrupamentos para organizar logicamente o conteúdo e maximizar o espaço. Preste atenção meticulosa à largura da coluna, garantindo que o texto fique legível sem esforço excessivo. Evite colunas muito estreitas que forcem os usuários a rolar muito horizontalmente, interrompendo o fluxo de interação. Por outro lado, colunas muito largas podem impedir a legibilidade, exigindo que os usuários acompanhem linhas em distâncias estendidas. Busque um equilíbrio que acomode uma leitura confortável, ao mesmo tempo em que faz uso eficiente do espaço disponível.
Dimensione e posicione os elementos visuais da maneira indicada para criar uma interface visualmente agradável e equilibrada. Alinhe as legendas com os visuais ou os títulos correspondentes, mantenha o espaçamento consistente entre os elementos e siga uma hierarquia com base nas necessidades do usuário. Corte enfeites desnecessários e aloque pixels de maneira criteriosa para os elementos mais importantes. Priorize e enfatize o conteúdo e os elementos de navegação, principalmente em aplicativos ou home pages com muita navegação, e evite ornamentações supérfluas que prejudiquem a usabilidade.
Uma grade subjacente pode ser útil para organizar elementos de maneira consistente. O comportamento da grade escolhido deve ser consistente em todas as regiões de conteúdo da tela no aplicativo e também pode ser aplicado no nível do componente, como cartões ou painéis laterais. O tipo mais comum de layout de grade usado em aplicativos Web é a grade de colunas. O comportamento da grade fluida (ou esticada) é recomendado para a implementação de telas dinâmicas.
Usar layouts estabelecidos e padrões de agrupamento
Use estruturas e disposições mais reconhecidas para organizar conteúdo e elementos em uma interface do usuário. Esses layouts e padrões foram refinados e se mostraram eficazes com o passar do tempo, deixando-os familiares e intuitivos para os usuários, ao mesmo tempo em que facilita a implementação de padrões adaptativos. Depois que os cenários e elementos básicos forem identificados, mapeie cada um para um layout estabelecido que ofereça a melhor interação. Priorize o conteúdo e os recursos importantes para a conclusão da tarefa. Decida quais elementos devem estar sempre visíveis e acessíveis na tela e quais podem ser ocultados ou acessados por meio de outros menus ou ações.
A lista a seguir, embora não seja abrangente, descreve layouts estabelecidos mais usados para aplicativos de negócios ou produtividade. Tudo pode ser colocado dentro da região de conteúdo principal.
Tela de aterrissagem/página inicial
A tela de aterrissagem ou inicial serve como o ponto de entrada para um aplicativo, dando aos usuários uma visão geral das ofertas ou dos recursos do aplicativo. Isso normalmente visa chamar a atenção de visitantes e incentiva a tomada de uma ação específica, como a conclusão de uma tarefa pela primeira vez ou a exploração de conteúdo adicional. Ele normalmente contém imagens hero e opções de navegação limpas.
É ideal para dar as boas-vindas aos usuários, oferecendo acesso rápido às funcionalidades-chave, opções de navegação ou chamadas à ação e estabelecer o tom da experiência do aplicativo. Priorize a clareza, a simplicidade e a navegação intuitiva para orientar usuários de maneira eficiente.
Painel
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. Muitas vezes, ele consiste em widgets ou módulos personalizáveis, o que permite aos usuários monitorar métricas específicas ou realizar ações.
Os painéis são indicados para aplicativos com conjuntos de dados complexos ou funcionalidades multifacetadas, permitindo aos usuários acompanhar o progresso, analisar as tendências e tomar decisões bem informadas rapidamente. Eles são especialmente úteis em plataformas de análise, ferramentas de gerenciamento de projetos e aplicativos de gerenciamento financeiro.
Formulário
Um formulário é um layout estruturado que facilita a entrada de dados dos usuários, normalmente composto de campos para inserir tipos variados de informações, como texto, números, datas e seleções. Os formulários são essenciais para coletar a entrada do usuário, processar transações e facilitar interações dentro dos aplicativos.
Eles costumam ser empregados em fluxos de registro, processos de check-out, tarefas de entrada de dados e qualquer cenário que exija comentários ou entrada de usuário.
Exibição de entidade/perfil
A exibição de entidade ou de perfil apresenta informações detalhadas sobre uma entidade específica, como um perfil do usuário, uma listagem de produtos ou um item de conteúdo. Ele normalmente inclui texto descritivo, elementos multimídia e ações ou interações relevantes.
Eles são muito indicados para demonstrar informações detalhadas sobre itens dentro de um aplicativo. Eles dão aos usuários insights detalhados, facilitam a tomada de decisões e apoiam a participação em entidades específicas, como perfis de usuário em aplicativos de rede social ou listagens de produtos em plataformas de comércio eletrônico.
Página de listagem
Uma lista ou uma tabela exibe uma coleção de itens ou entidades em um formato estruturado, normalmente apresentado em um layout de grade ou linear. Ele costuma incluir resumos breves ou visualizações de cada item com controles para navegação ou filtragem.
As páginas de lista são eficazes para apresentar grandes conjuntos de conteúdo ou dados em um formato digerível, permitindo aos usuários examinar, pesquisar e navegar com eficiência. Se ações em linhas específicas estiverem habilitadas, o processo deverá estar claro. As páginas de lista costumam ser usadas em sistemas de gerenciamento de conteúdo, listagens de diretório, resultados de pesquisa e feeds de notícias.
Minirrevisão (tela dividida)
Uma tela de minirrevisão ou de divisão divide a interface em duas seções distintas, com uma lista exibida no lado esquerdo e uma exibição de itens no lado direito. A lista normalmente contém uma coleção de itens, e a exibição de itens fornece informações detalhadas sobre o item selecionado na lista.
Esse layout é especialmente eficaz em cenários nos quais os usuários precisem procurar rapidamente em uma lista de itens e exibir informações detalhadas sobre cada item simultaneamente, como ao realizar operações em massa. Catálogos de produtos, sistemas de gerenciamento de documentos, clientes de email ou de comunicação, além de ferramentas de gerenciamento de tarefas (por exemplo, visualizador de consultas do Azure Dev Ops) são cenários que normalmente se encaixam nesse padrão.
Assistente
Um assistente orienta os usuários em meio a uma série de etapas ou tarefas sequenciais, normalmente de maneira linear, para concluir um processo complexo ou atingir uma meta específica. Ele normalmente inclui indicadores de progresso, prompts e verificações de validação. Os assistentes são benéficos para simplificar processos complexos, reduzir a sobrecarga cognitiva e orientar os usuários por meio de tarefas ou fluxos de trabalho desconhecidos. Eles são muito usados em fluxos de integração, processos de configuração, formulários de várias etapas e interações baseadas em tarefa, como a definição de configurações ou transações complexas.
Personalizar e criar o layout padrão para atender a requisitos específicos. Esse processo pode incluir a adição ou a remoção de elementos, o ajuste do tamanho e do posicionamento de elementos e a aplicação de estilo de acordo com as diretrizes de design visual ou identidade da marca. Experimente diferentes configurações e variações do layout padrão a fim de encontrar a disposição mais eficaz para o conteúdo e a experiência geral do usuário.
Projetar layouts para todos os dispositivos
Os layouts são o ápice das regras definidas e da organização intencional do conteúdo. Levar o conteúdo para estruturas cuidadosas é fundamental, mas fazer tudo fluir junto com uma hierarquia clara entre plataformas e tamanhos de tela exige uma lógica de escala. O design individual, adaptável e dinâmico pode superar esse desafio. Em alguns casos, uma combinação de design adaptativo e dinâmico é a escolha certa.
O design responsivo só usa um layout no qual o conteúdo é fluido e pode se adaptar a mudanças no tamanho do formato. Essa técnica de design usa consultas de mídia para inspecionar as características de um determinado dispositivo e renderizar devidamente o conteúdo. O design dinâmico permite a você compilar um recurso uma vez e o fazer funcionar de maneira eficaz em todos os tamanhos de tela.
Um layout adaptável muda totalmente com base no formato em que é apresentado. O design adaptável tem vários tamanhos de layout fixos e dispara o navegador para carregar um determinado layout com base no espaço disponível. Sites criados com design adaptável usam consultas de mídia para detectar pontos de interrupção, semelhante ao design dinâmico. Eles também usam marcação adicional com base nos recursos do dispositivo. Esse processo é conhecido como "aprimoramento progressivo".
Reposicionar
Altere a posição de 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 em um visor móvel podem ser reposicionados horizontalmente em visores maiores. Essa alteração segue uma ordem natural de leitura da esquerda para a direita, gera equilíbrio no design e mantém o foco visual nos elementos-chave da página.
Redimensionar
Ajuste o tamanho e as margens dos elementos da página.
Redimensione os elementos da página para otimizar uma experiência do usuário detalhada exibindo mais conteúdo na parte superior da janela, reduzindo a necessidade de rolagem vertical. Ajuste as margens da página para adicionar espaço em branco e equilíbrio ao layout, o que permite que o conteúdo respire e aprimora o apelo visual do design. Por exemplo, um componente hero pode se estender até a largura total da janela para mostrar mais da imagem em segundo plano. O conteúdo abaixo da imagem pode ser expandido, mas use margens diferentes para adicionar variedade no layout e ajuda a definir a hierarquia visual.
Refluxo
Otimize o fluxo dos elementos da página.
Ajuste os elementos da página para garantir que eles sejam totalmente exibidos, levando em conta o tamanho e a orientação da janela reorganizando o conteúdo. Por exemplo, uma única coluna de conteúdo em uma janela menor pode ser refluída em uma janela maior para exibir duas colunas de texto. Essa técnica permite que mais conteúdo seja exibido "acima da dobra".
Mostrar/ocultar
Otimize o conteúdo para o tamanho da janela e a orientação.
Mostre ou oculte elementos da página para otimizar o conteúdo do tamanho da janela e a orientação. Essa técnica responsiva personaliza a quantidade de informações ao contexto de exibição. Por exemplo, as categorias exibidas em uma tela pequena podem exibir metadados limitados, como uma imagem, título e link, de maneira que outras informações permaneçam visíveis para ajudar o usuário a se concentrar. Em uma tela maior, as categorias podem exibir metadados adicionais, como uma persona, uma data e uma descrição resumida, ao mesmo tempo em que continuam cabendo no visor.
Rearquitetar
Bifurque ou recolha os elementos e o conteúdo da página para manter o foco em informações e ações importantes.
Essa abordagem é semelhante a seguir a prática de "divulgação progressiva" no design, mas para tamanhos e orientações de janelas diferentes. Por exemplo, a expansão da janela permite que uma lista de itens seja exibida ao lado dos detalhes. Esse link visual entre o conteúdo permite aos usuários selecionar facilmente outro item. Em uma tela menor, o foco permanece na exibição das informações-chave.
Criar uma matriz de pontos de interrupção
Uma matriz de pontos de interrupção serve como uma representação gráfica que ilustra os comportamentos dinâmicos ou adaptáveis do design de um aplicativo em diferentes tamanhos de tela e orientações. Ela normalmente apresenta uma grade estruturada ou um layout detalhando a resposta do design em vários pontos de interrupção. Cada segmento corresponde a uma largura de tela distinta, oferecendo insights sobre a estrutura, o layout e a funcionalidade do design. Uma matriz de pontos de interrupção abrange considerações de largura da tela, orientação do visor, elementos de design, estrutura de layout, apresentação de conteúdo, navegação, mídia e componentes interativos, para ilustrar como o design de um site ou aplicativo responde em diferentes tamanhos e orientações de tela. Essa abordagem não apenas ajuda a finalizar o design de cada tela, mas também facilita a implementação quando as alterações de propriedade do componente-chave são explicitamente controladas e bem comunicadas.
Facilitação do Power Platform
Os layouts de formulário do aplicativo baseado em modelo são configurados usando o Power Apps Studio. O designer de formulários possibilita aos criadores adicionar elementos a uma estrutura de grade, o que permite que as páginas de formulário sejam inerentemente responsivas. Componentes personalizados incorporados, como páginas personalizadas, componentes de tela incorporados e componentes de código do Power Apps Component Framework (PCF) precisam incorporar comportamento responsivo nas respectivas implementações. Por exemplo, as páginas personalizadas precisam implementar um comportamento responsivo da mesma maneira que um aplicativo de tela puro para funcionar corretamente.
Os aplicativos de tela exigem configuração explícita em cada componente para implementar comportamento responsivo, dando mais controle sobre a experiência. Os tamanhos de tela são determinados na definição do aplicativo, que pode ser referenciada a fim de determinar a posição, o comportamento, a visibilidade e outras propriedades relevantes.