Eine College-App hat ein umfangreiches Update erhalten, und diejenigen, die es geprüft haben, sind nicht beeindruckt. Das Update wurde als „kleine UI-Verbesserungen“ angepriesen, aber das Ergebnis kommt einem Desaster näher als einer Lösung. Das Urteil: das neue Design ist schlampig, überladen und voller Fehler, die jeder menschliche Designer bereits beim ersten Blick bemerken würde.
Der Autor, der das neue Design als „Schlampenkanone“ bezeichnet, ist ein Nutzer, der die Änderungen in seiner Campus-App sah und beschloss, genau zu dokumentieren, was schiefgelaufen ist. Das Ergebnis ist eine fortlaufende Liste von Beanstandungen, die jeder erkennen kann, der schon einmal eine schlecht gestaltete Website durchgeklickt hat.
Die zehn Zeichen von Schlampigkeit
Der Autor beginnt mit einer Beschreibung, wie Schlampigkeit aussieht. Farbverläufe tauchen auf Schaltflächen, im Hintergrund, eigentlich überall, wo das Designteam sie unterbringen konnte. Dies ist das größte und auffälligste Zeichen einer schlampig-programmierten UI und kommt in nahezu jedem der zitierten Beispiele vor.
Dann kommt das Regenbogen-Erbrechen. Das Design wirft Farben ohne Rücksicht auf Harmonie zusammen, so der Autor, und hält sich nicht an die 70-30-10-Regel, die ein gutes Farbgleichgewicht gewährleistet. Das Ergebnis ist ein Bildschirm voller aufeinanderprallender Farbtöne, die billig und unattraktiv wirken.
Pulsierende Badges sind ein weiteres Dorn im Auge. Der Bildschirm für die digitale ID der App zeigt nun einen pulsierenden Badge, der anzeigt, dass das Konto „aktiv“ ist. Das Problem, so der Autor, ist, dass der Badge nie inaktiv ist. Wäre er es, würde die App den Benutzer einfach abmelden. Der Badge dient also keinem Zweck außer der Verschwendung von Platz.
Fingernägel-Karten sind ein wiederkehrender Übeltäter. Der Autor sieht sie in jeder stimmungscode-programmierten UI und findet sie übermäßig verwendet, so dass sie einfach schlecht aussehen. Der Artikel argumentiert, dass niemand jemals Platz genommen und gedacht hat: „Weißt du was das verbessern würde? Eine Fingernagel.“
Emojis sind eine weitere Gewohnheit, die der Autor der KI anlastet. Das Design liebt sie, und der Autor vergleicht diese Zuneigung mit Sams Altmans Liebe, so zu tun, als würde er die Grenze entlanggehen. Der Vergleich ist verspielt, aber der Punkt ist ernst: Zu viele Emojis am falschen Ort lassen ein Design amateurhaft wirken.
Fehljustierungen sind ein wiederkehrendes Problem. SVGs, ASCII-Art und andere Elemente, die nicht in Boxen eingefasst sind, neigen dazu, außerhalb ihrer Markierungen zu liegen. Der Verfasser verweist auf eine Liste im Stundenplan ihrer College-App als ein Paradebeispiel.
Die Schriftartauswahl ist ein weiterer Schwachpunkt. Das Design greift auf sichere Optionen wie Inter oder JetBrains Mono für Websites mit einem Programmieransatz zurück. Der Verfasser merkt an, dass das Design auch „//“ hinzufügt, sobald etwas mit Technik zu tun hat, was als faule Kurzform und nicht als sorgfältige Handwerksarbeit wirkt.
Redundanter Text aufgrund des Chat-Kontexts ist eine abschließende Belästigung. Der Verfasser baute zuvor eine Blogging-Website und sagte dem Designassistenten: „Okay, ich möchte keine HTML-Dateien schreiben; ich werde in meinem komfortablen Neovim schreiben, und ich möchte keine webbezogenen Dinge tun.“ Das Ergebnis war ein Text, der „Mit Hugo erstellt. In Neovim geschrieben.“ besagte. Niemand kümmert sich darum, argumentiert der Verfasser, und das gleiche Muster zeigt sich in Readmes mit Behauptungen über „Moderne CPP 20-Funktionen“, die niemand wirklich hören möchte.
Der Startbildschirm der College-App weist die gleiche Redundanz auf. Der Verfasser sagt, man könne förmlich den Prompt riechen, der es ausgelöst hat, allein anhand der Wortwahl.
Glassmorphism ist eine Designsprache, die der Verfasser in Maßen zulässt. Die brutalistische Ästhetik, die der Verfasser eingesteht, cool auszusehen, bis sie übertrieben wird, ist eine andere Sache ganz und gar.
Generische Slogans runden die Liste ab. Das Design liebt Wörter wie „Erhöhen“, „Nahtlos“, „Next-Generation“, „Beschleunigen“, „Entfesseln“ und „Ermächtigen“. Jede H1 wird von einem gräulichen Untertitel über die Leistungsfähigkeit der Aufgabenverwaltung begleitet. Der Verfasser bezeichnet dies als eine Besessenheit von Hypeschweden, die jeden Bildschirm wie eine Landing Page und nicht wie ein funktionelles Werkzeug behandelt.
Was das für das Design bedeutet
Der Verfasser will damit nicht sagen, dass Vibe-kodiertes Design zum Scheitern verurteilt ist. Die Website, auf der der Artikel veröffentlicht wird, ist selbst Vibe-kodiert und sieht süß aus, so der Verfasser. Die Beschwerde bezieht sich auf den Aufwand. Diese Designs versuchen es nicht einmal, einigermaßen gut auszusehen, argumentiert der Verfasser, und das Ergebnis ist eine Benutzeroberfläche, die sich billig und unattraktiv anfühlt.
Der Artikel ist ein persönlicher Ausbruch, der aber als nützliche Anleitung für jeden dient, der digitale Oberflächen gestaltet oder bewertet. Die zehn Anzeichen von Schlampigkeit sind real, und ihre Erkennung ist der erste Schritt zum Verständnis dessen, was sie kosten.
Der Autor schließt mit einer Frage: Wie sieht ein inaktiver Student aus? Es ist ein Witz, aber er erfasst den gesamten Geist der Beschwerde. Das Design ist voll von Signalen, die niemand verlangt und niemand versteht.
- Farbverläufe überall
- Regenbogen-Erbrochen-Farben
- Pulsierende Abzeichen ohne Zweck
- Überbeanspruchte Fingernagel-Karten
- Zu viele Emojis
- Fehlalignierte SVGs und ASCII-Art
- Faules „//“-Kurzzeichen in technischen Erwähnungen
- Redundanter Text aus Aufforderungen
- Brutalistischer Übergebrauch
- Generische Hype-Wort-Slogans
„10 Tells of a Slop UI“, vercel.app.
Das Notizbuch abonnieren.
Die besten Geschichten des Tages und jedes neue Urteil, in klarem Deutsch, um sieben im Postfach. Eine Mail am Tag, nicht mehr.