Ja! Spaltmaße gibt es auch in der Softwareentwicklung bzw. speziell in der Entwicklung von User Interfaces. Und dass diese visuellen Spaltmaße in der Softwareentwicklung von User Interfaces genauso wichtig sind, wie bei Autobauern, möchte ich in diesem Blogpost verdeutlichen.
Bei der Frage geht es offensichtlich um User Experience (UX), die sowohl in der Auto-Welt, als auch in der Welt der User Interfaces durch schlechte „Spaltmaße“ negativ beeinflusst wird. Als einfaches Beispiel habe ich zwei Screenshots von unserem Produkt Secure Password Share.
Im folgenden Screenshot sind die Abstände nicht korrekt, was bei vielen Benutzern direkt zu einem schlechten, ersten Eindruck führen würde:
Lasst den Screenshot etwas auf euch wirken und beachtet dabei insbesondere die Abstände der Login-Card. Hier stimmt doch was nicht, oder?
Betrachtet nun die korrigierten Spaltmaße im folgenden Screenshot und wie das User Interface nun auf euch wirkt:
Die unsymmetrischen Abstände rufen bei vielen Benutzern ein negatives Gefühl hervor, was den Gesamteindruck (Benutzererfahrung) schon zu Beginn der Benutzererfahrung schmälert. Manche werden an der Stelle zwar behaupten, dass diese vermeintlich kleinen Unstimmigkeiten in User Interfaces trivial zu betrachten sind. Die Ansprüche der heutigen Benutzer sind jedoch sehr hoch und sollten nicht unterschätzt werden.
Wie erreicht man, dass ein User Interface konsistent und mit den richtigen „Spaltmaßen“ umgesetzt wird?
- Einsatz eines CSS-Frameworks wie z.B. Bootstrap
- Nutzung eines Styleguides: für unsere eigenen Produkte nutzen wir hierzu unseren doubleSlash Living Styleguide
- Möglichst wenig Custom-CSS
- Regelmäßige QS: im besten Fall voll Automatisiert über z.B. visuellen Abgleich von Screenshots mit Playwright
Wenn diese Maßnahmen angewendet werden, kannst auch du sicherstellen, dass dein User Interface die perfekten Spaltmaße hat!
