- Ao desenvolver, é comum criar algo, clicar várias vezes, ajustar e clicar de novo, repetindo esse processo
- No caso de transições de página, usa-se o botão de voltar várias vezes
- Isso é uma espécie de tática de QA: clicar, encontrar problemas e corrigi-los
- É parecido com marcenaria: primeiro se resolvem os problemas maiores e depois se refinam os detalhes
Testes de UI
- Há variáveis demais no software, então é difícil testar e lapidar tudo
- O processo consiste em usar a UI repetidamente, encontrar problemas e corrigi-los
Trabalhando em uma lista de opções de rádio
- Colocar
e na mesma linha, centralizar e adicionar espaçamento entre eles
- Antigamente isso era feito com
float no CSS, mas agora fica fácil com flexbox
Foo
.container {
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
}
Encontrando e resolvendo o problema
- Foi descoberta uma área morta na UI entre o botão de rádio e o rótulo, onde o clique não funcionava
- Confirmou-se que a causa do problema era a propriedade
gap do flexbox
- O problema foi resolvido removendo o
gap e adicionando padding ao rótulo
- Ao adicionar padding ao rótulo, toda a área passou a ser clicável, sem área morta
Conclusão
- Pequenos problemas podem se acumular e causar um grande incômodo
- Ao repetir o processo de encontrar e corrigir problemas, chega-se a um resultado final mais fluido
Resumo do GN⁺
- Este texto explica o processo de identificar e corrigir pequenos problemas que podem surgir durante o desenvolvimento de UI
- O flexbox facilita a criação de layouts, mas problemas inesperados podem aparecer
- Para resolver isso, foram testadas várias abordagens e, no fim, o problema foi solucionado com padding
- O texto traz dicas úteis para desenvolvedores de UI e destaca a importância de resolver pequenos problemas
Ainda não há comentários.