- Al desarrollar, uno crea algo, hace clic varias veces, corrige, y vuelve a hacer clic una y otra vez
- En el caso de los cambios de página, se usa varias veces el botón de retroceso
- Esta es una especie de táctica de QA: hacer clic, encontrar problemas y corregirlos
- Se parece al trabajo de carpintería: primero se resuelven los problemas grandes y luego se pulen los detalles
Pruebas de UI
- En el software hay demasiadas variables, así que es difícil probarlo y pulirlo todo
- Se repite el proceso de usar la UI muchas veces para encontrar problemas y corregirlos
Trabajo con una lista de opciones de radio
- Se colocan
y en la misma fila, centrados y con espacio entre ellos
- Antes se usaba
float de CSS, pero ahora se hace fácilmente con flexbox
Foo
.container {
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
}
Encontrar y resolver el problema
- Se descubrió una zona muerta en la UI entre el radio y la etiqueta donde no se podía hacer clic
- Se confirmó que la causa del problema era la propiedad
gap de flexbox
- El problema se resolvió quitando
gap y agregando padding a la etiqueta
- Al agregar padding a la etiqueta, se hizo clicable sin zona muerta
Conclusión
- Los problemas pequeños pueden acumularse y causar una gran incomodidad
- Al repetir el proceso de encontrar y corregir problemas, al final se obtiene un resultado fluido
Resumen de GN⁺
- Este artículo explica el proceso de encontrar y resolver pequeños problemas que pueden surgir durante el desarrollo de interfaces de usuario
- Aunque flexbox permite construir layouts fácilmente, pueden aparecer problemas inesperados
- Para resolver el problema, se probaron varios métodos y finalmente se solucionó usando padding
- Ofrece consejos útiles para desarrolladores de UI y destaca la importancia de resolver los pequeños problemas
Aún no hay comentarios.