QA Site Piauí Live
Principais ajustes de design e melhorias de usabilidade no novo site da revista Piauí.
By Alice Lerner
1. Product key
No projeto, foi planejado o uso de capas com fundo claro e fundo escuro. Quando a capa possui fundo branco, o overlay escuro atual prejudica a leitura e não se faz necessário.
O overlay deve funcionar apenas como recurso de legibilidade para capas que não oferecem bom contraste. Em capas brancas, utilize texto na cor preta sem máscara.
1
Na entrada do product key (explorar a revista), a animação de transição não está acontecendo. A tela entra de forma abrupta por cima da home.
2. Navegação entre Edições
A interação das setas de paginação está com a lógica invertida. Ao utilizar a seta para a direita, a interface carrega edições antigas em vez das próximas.
2
A seta habilitada para visualizar o histórico de revistas antigas deve ser a da esquerda.
3. Margens
As margens do layout estão inconsistentes. O destaque principal tem uma margem bastante menor do que os demais módulos. O ideal é que elas sejam unificadas de acordo com o grid definido no design.
3
As margens do layout estão inconsistentes. O destaque principal tem uma margem bastante menor do que os demais módulos. O ideal é que elas sejam unificadas de acordo com o grid definido no design.
4. Menu Inferior
4
O menu de navegação precisa permanecer fixo (sticky) na parte inferior da tela, respeitando a visualização máxima (100vh).
Quando o menu estiver fechado, adicione uma linha de contorno sutil para separá-lo do dos demais módulos, melhorando o contraste entre a barra branca e o fundo bege. Quando aberto, ative um overlay para demarcar a separação do fundo.
5. Busca
5
Adicione um texto de placeholder para ilustrar o que pode ser pesquisado. Ajuste também o tamanho do campo de busca para evitar a atual desproporção com o ícone da lupa.
Quando o usuário começa a escrever, abre uma lista com autocomplete.
6. Inscrição em Newsletters
6
O widget de e-mail (box azul) deve abrir de forma flutuante na primeira dobra, sem scroll para a parte inferior da tela.
