- Beim Entwickeln baut man etwas, klickt mehrfach darauf, nimmt Änderungen vor und klickt dann erneut – ein Vorgang, der sich ständig wiederholt
- Bei Seitenwechseln nutzt man dabei häufig mehrmals den Zurück-Button
- Das ist eine Art QA-Taktik: durch Klicken Probleme finden und beheben
- Ähnlich wie bei der Holzbearbeitung löst man zuerst die großen Probleme und schleift danach die Details glatt
UI-Tests
- In Software gibt es zu viele Variablen, um alles vollständig zu testen und zu glätten
- Man verwendet die UI immer wieder, findet Probleme und behebt sie iterativ
Arbeit an einer Liste von Radio-Optionen
und werden in derselben Zeile platziert, zentriert ausgerichtet und mit Abstand versehen- Früher nutzte man dafür CSS-Floats, heute geht das mit Flexbox viel einfacher
Foo
.container {
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
}
Probleme finden und lösen
- In der UI wurde ein toter Bereich entdeckt, der zwischen Radio-Button und Label nicht anklickbar war
- Es stellte sich heraus, dass die Flexbox-Eigenschaft
gap die Ursache war
- Das Problem wurde gelöst, indem
gap entfernt und dem Label Padding hinzugefügt wurde
- Durch das Padding auf dem Label wurde der Bereich ohne tote Zone vollständig anklickbar
Fazit
- Viele kleine Probleme können zusammen zu großen Unannehmlichkeiten führen
- Durch das wiederholte Finden und Beheben von Problemen erhält man am Ende ein reibungsloses Ergebnis
Zusammenfassung von GN⁺
- Dieser Artikel beschreibt, wie kleine Probleme im UI-Entwicklungsprozess entdeckt und gelöst werden können
- Mit Flexbox lässt sich ein Layout einfach aufbauen, aber es können unerwartete Probleme auftreten
- Um das Problem zu lösen, wurden verschiedene Ansätze ausprobiert; letztlich wurde es mit Padding behoben
- Er bietet nützliche Tipps für UI-Entwickler und betont, wie wichtig es ist, kleine Probleme konsequent zu beheben
Noch keine Kommentare.