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
Demonstração de como adaptar a Área de Gestão na versão mobile para a versão desktop, mantendo a estrutura do fluxo e respeitando as boas práticas de UX.
-
Aproveitar o espaço disponível: Distribua 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: Adapte o layout, mas preserve os passos e a lógica dos fluxos descritos no Guia.
-
Priorizar acessibilidade e legibilidade: Utilize 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), certifique-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
Hierarquia e Escaneabilidade
Importância da hierarquia e escaneabilidade em ambientes desktop.
-
Hierarquia da informação: É fundamental que menus, filtros e informações estejam agrupados visualmente para evitar dispersão.
-
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.
-
Zonas de atenção: É importante priorizar a área central/esquerda para conteúdo crítico, seguindo os padrões de leitura F/Z.
Uso de Espaço e Layout
Importância do espaço e layout em ambientes desktop.
-
Layout em colunas: Recomendamos um layout em colunas, utilizando painéis laterais para melhor organização do conteúdo.
-
Componentes adaptativos: Os componentes devem ser adaptativos, permitindo que botões e campos se expandam conforme o espaço disponível.
-
Espaçamento generoso: É importante garantir um espaçamento generoso, evitando elementos "grudados" e proporcionando áreas de respiro.
Navegação e Localização
Importância da navegação e localização em ambientes desktop.
-
Menu persistente: É importante manter um menu persistente ou breadcrumb sempre visível para orientar o usuário.
-
Acesso rápido: A inclusão de atalhos e filtros facilita o acesso rápido a ações recorrentes.
-
Estados visíveis: É essencial destacar claramente o que está ativo, como a aba selecionada e os filtros aplicados.
Consistência Multiplataforma
Importância da consistência multiplataforma ao aplicar diretrizes em ambientes desktop.
-
Padronização de componentes: É importante padronizar componentes para manter a mesma identidade visual e padrões do mobile.
-
Manutenção do fluxo original: É essencial preservar a jornada do usuário mantendo a mesma sequência de etapas do mobile.
