Mudanças visuais
Um “design system” é um conjunto de padrões e componentes visuais que asseguram a consistência de usabilidade e experiência do usuário ao longo de uma aplicação.
Novo design system
No Zeev um novo design system foi implementado, denominado “Zeev Bootstrap”. Esse design system é composto por um conjunto de fontes, cores, tamanhos, formas, padrões, ícones e formatos que são uniformes e respeitados ao longo da plataforma, e passam a ser padrão para todos os produtos da Zeev (consequentemente, para os produtos Zeev e Zeev Docs).
Esse design system procura respeitar:
A visão de mobile first, ou seja, o design system foi criado pensando no uso em dispositivos móveis, e adaptado ao uso em desktops;
A visão de acessibilidade, com contraste de cores, tamanhos de fontes, legibilidade e espaçamento seguindo normas internacionais da W3C (https://www.w3.org/WAI/standards-guidelines/wcag/). Acessibilidade na Web significa que pessoas com deficiência podem igualmente perceber, entender, navegar e interagir com sites e ferramentas;
A possibilidade de customização do layout do cliente, desde cores, logotipia até componentes mais avançados;
A busca pela simplicidade e auto-explicação, sem a necessidade de leitura de manuais e afins;
É importante destacar que houve um aumento geral do tamanho das fontes do sistema com o novo design system. Esse aumento é deliberado e visa adequar a plataforma aos padrões de acessibilidade atuais de mercado e aos padrões atuais de resolução de monitores. Entretanto, caso a organização não se sinta confortável com esse novo padrão, pode mudar o tamanho de fontes e espaçamentos (além de cores e demais elementos), usando a customização de Skins do sistema.
Novo formato de skins
Os antigos “skins”, usados para customizar visualmente a interface, desenvolvidos no BPMS3, não funcionarão no Zeev, a não ser em telas de execução de tarefas usando o modo de execução 1.0 (veremos isso em capítulo a frente).
De modo geral toda a estrutura HTML e de CSS da aplicação mudou, o que enseja a criação de novos arquivos de SKIN.
Como facilitador, o novo modelo de SKINS utiliza a tecnologia conhecida como “CSS Variables”, o que facilita em muito a customização. Essas CSS Variables serão brevemente documentadas no https://kb.zeev.it.
Horizontalização da interface
No caso do acesso via computadores Desktop, o menu e outras funções do sistema, que antes se encontravam na parte superior da tela do Zeev, agora foram colocados em um menu lateral, que antes não existia.
Esse menu lateral é coerente com a mudança geral das resoluções dos monitores de computadores desktop e notebooks nos últimos anos, que tomaram um formato “wide”, ou seja, com largura maior porém altura menor.
Como pode ser visto no gráfico abaixo, a resolução de 1366 x 768 é principal usada no Brasil, seguida da 1920 x 1080
Ainda assim, o menu é retrátil, podendo aumentar ainda mais a área visível de trabalho. A seleção feita pelo usuário é respeitada e lembrada em seus próximos acessos.
Responsividade
Mesmo sendo uma característica já presente no BPMS3, a responsividade ganhou novos contornos com o Zeev e o uso do Zeev Bootstrap. Nas prints abaixo vemos a mesma tela sendo visualizada em diferentes resoluções, até mesmo em mobile. Quanto menor a resolução da tela, menos componentes são plotados e a experiência é otimizada para o tamanho usado.
Nova interface mobile
A interface mobile também foi reformada, e herda os mesmos princípios do design system. Ela está mais ágil e mais amigável, e compartilha da mesma nomenclatura e padrões visuais do resto do sistema.
Demonstração prática
Veja no vídeo abaixo uma demonstração das principais mudanças visuais.