Boas práticas para desktop

O Guia de Experiência do Open Finance foi desenvolvido com foco principal em mobile. Esta seção apresenta orientações para adaptar as mesmas diretrizes e boas práticas à experiência em desktop, garantindo consistência, usabilidade e acessibilidade em diferentes dispositivos.

Adaptação responsiva

A seguir, são apresentados exemplos que demonstram a adaptação da Área de Gestão da versão mobile para a versão desktop, preservando a estrutura do fluxo e respeitando as boas práticas de UX.

Recomendações para ambientes desktop

• Aproveitar o espaço disponível: Distribuir os elementos com equilíbrio, sem sobrecarregar a tela, mantendo a hierarquia de informações clara.

• Manter a consistência visual e funcional: As interações e os componentes devem seguir o mesmo padrão definido no Guia, garantindo familiaridade entre as plataformas.

• Respeitar os fluxos propostos: Adaptar o layout, mas preservando os passos e a lógica dos fluxos descritos no Guia.

• Priorizar acessibilidade e legibilidade: Utilizar fontes e contrastes adequados para leitura em telas maiores, com atenção especial à navegação por teclado.

• Responsividade inteligente: Para resoluções intermediárias (ex: laptops), certificar-se de que os elementos se ajustem corretamente sem comprometer a experiência.

• Foco no usuário: A adaptação para desktop deve manter o foco no usuário, garantindo uma experiência fluida, intuitiva e segura, independentemente do dispositivo utilizado.

Boas práticas aplicadas

Esta seção apresenta quatro boas práticas aplicadas à adaptação de interfaces para ambientes desktop, com foco na preservação dos fluxos, na consistência visual e na experiência do usuário em telas maiores.

Hierarquia e Escaneabilidade

1. Hierarquia da informação: Agrupar visualmente menus, filtros e informações para evitar dispersão.

2. Cabeçalhos e subtítulos claros: Cabeçalhos e subtítulos claros são essenciais, pois ajudam na rápida compreensão do conteúdo.

3. Zonas de atenção: Priorizar a área central/esquerda para conteúdo crítico, seguindo os padrões de leitura F/Z.

Uso de Espaço e Layout

1. Layout em colunas: Utilizar layout em colunas, recorrendo a painéis laterais para melhor organização do conteúdo.

2. Componentes adaptativos: Utilizar componentes adaptativos, permitindo que botões e campos se expandam conforme o espaço disponível.

3. Espaçamento generoso: Garantir um espaçamento generoso, evitando elementos "grudados" e proporcionando áreas de respiro.

Navegação e Localização

1. Menu persistente: Manter um menu persistente ou breadcrumb sempre visível para orientar o usuário.

2. Acesso rápido: Incluir atalhos e filtros para facilitar o acesso rápido a ações recorrentes.

3. Estados visíveis: Destacar claramente o que está ativo, como a aba selecionada e os filtros aplicados.

Consistência Multiplataforma

1. Padronização de componentes: Padronizar componentes para manter a mesma identidade visual e padrões do mobile.

2. Manutenção do fluxo original: Preservar a jornada do usuário mantendo a mesma sequência de etapas do mobile.