Die Schaltfläche, mit der ein Auftrag angelegt wird, ist 44 Pixel hoch, und niemand hat irgendwo 44 eingetippt. Sie ist Auto Layout, horizontal, Abstand 8, Innenabstand 12 und 20: 12 Pixel über einer Zeilenbox von 20 und 12 darunter, und die Höhe fällt aus der Rechnung heraus. Ändert sich die Beschriftung, wird sie von selbst breiter; ändert sich der Schriftgrad, folgt die Höhe. Eine Schaltfläche zeichnen und eine Schaltfläche beschreiben sind zwei verschiedene Arbeiten, und darum geht es hier.
Sören Vollmer baut die Auftragserfassung für eine Fahrradwerkstatt in Bochum-Langendreer: ein Tablet an der Theke, neun Bildschirme, ungefähr 40 Aufträge am Tag, aufgenommen im Stehen, während jemand mit einem Rad daneben wartet. Weder Inhalt noch Sprache noch Breite sucht er sich aus. Aussuchen lässt sich, wie die Oberfläche sich verhält, wenn alle drei anders ankommen als in der Datei.
Sechs Arten von Anweisung
Eine Oberfläche hat eine Eigenschaft, die der Rest dieser Säule nicht hat: Sie wird jedes Mal neu gezeichnet, aus Inhalt, der nicht in der Datei stand, in einer Breite, die niemand ausgewählt hat. Ein Plakat ist fertig. Ein Bildschirm ist ein Satz Anweisungen, den später etwas ohne Urteilsvermögen ausführt, und jede offen gelassene Entscheidung wird zur Entscheidung dieser Maschine.
Deshalb sind die sechs Fächer darunter keine sechs Sorten von Bildschirm, sondern sechs Arten von Anweisung: wie etwas aussieht, woraus es zusammengesetzt ist, wie die Werte heißen und wer sie ändern darf, was bei einer Breite passiert, die Sie nie geöffnet haben, was sich bewegt und was die Bewegung behauptet, und was aufgeschrieben werden muss, weil die Entwicklung es nicht erraten kann.
Vier Regeln mit Werten
Hug contents für die Schaltfläche, Fill container für die Karte. Diese beiden Einstellungen entscheiden, wer einen Streit um die Breite gewinnt: Die Schaltfläche verlangt genau so viel Platz, wie ihre Beschriftung braucht, die Karte nimmt, was die Spalte hergibt. Vertauscht ergibt das eine Schaltfläche, die sich über die ganze Karte zieht, während die Karte auf ihr längstes Wort zusammenschrumpft.
Vier Zustände zeichnen: Standard, Hover, Fokus, Deaktiviert. Diese Regel wird übersprungen, weil die Datei auch ohne sie fertig aussieht. In Sörens Maske ist die Schaltfläche deaktiviert, solange die Rahmennummer fehlt; steht der Zustand nicht in der Datei, erfindet ihn jemand beim Bauen über die Deckkraft, und heraus kommt eine graue Fläche, die den Kontrast verfehlt, und eine Werkstattmeisterin, die mehrmals tippt. Hover allein genügt nicht, denn an der Theke wird getippt.
Ein Fokusring, 2 Pixel stark, mit 2 Pixel Abstand. Der Abstand hält den Ring auf einer gefüllten Schaltfläche lesbar. Er ist zugleich das meistgelöschte Stück Gestaltung überhaupt: Der Browser zeichnet einen umsonst, er wird als hässlich entfernt, und aus einer funktionierenden Tastatur wird ein unsichtbarer Zeiger.
Dann die Größe, und das sind zwei Zahlen: 44 mal 44 für den Daumen, 24 mal 24 als Untergrenze. Die erste ist das bequeme Ziel, das Apple seit 2013 veröffentlicht, die zweite das Mindestmaß aus der WCAG 2.2 von 2023, und ein Mindestmaß ist kein Ziel. Sörens Schaltfläche erreicht beide nebenbei, weil der Innenabstand stimmt.
Deutsch ist länger, und das ist die Zahl
Hier steht die Rechnung, die auf keiner englischen Seite steht, und sie ist nicht klein. Als Faustzahl misst eine gewöhnliche UI-Grotesk bei 16 Pixel Schriftgröße rund 8 Pixel je Zeichen. Add hat 3 Zeichen und misst 24 Pixel, Auftrag anlegen hat 15 Zeichen und misst 120. Mit Innenabstand 20 links und rechts wird aus einer Schaltfläche von 64 Pixeln eine von 160.
Schlimmer trifft es die Beschriftungsspalte eines Formulars, weil sie einmal breit ist und danach jeder Zeile Platz wegnimmt. Address hat 7 Zeichen, Straße und Hausnummer hat 21, also wächst die Spalte von 56 auf 168 Pixel und das Eingabefeld daneben verliert 112. Auf einem Tablet mit 768 Pixeln Breite entscheidet das, ob eine Anschrift ins Feld passt.
Daraus folgt die Prüfung, die vor jedem Fertig steht: Setzen Sie den längsten String ein, den Sie haben. Nicht den längsten, den Sie sich vorstellen. In Sörens Datei ist das die Auftragsart Schaltung einstellen und Kette wechseln, und sie sagt in einem Zug, ob das Layout eine Regel beschreibt oder ein Zufall ist.
Die deutsche Anschrift, und die Anrede
Eine aus dem Englischen übernommene Formularvorlage ist an zwei Stellen falsch. Straße und Hausnummer in ein Feld, Postleitzahl vor den Ort: Die Hausnummer steht hinter dem Straßennamen und nicht davor, die fünfstellige Postleitzahl links vom Ortsnamen in derselben Zeile. Eine Vorlage mit eigenem Feld für die Hausnummer zwingt jede Kundin, gegen ihre Gewohnheit zu tippen, und erzeugt an der Theke Tippfehler in einem Feld, das sonst keine hätte.
Die zweite Entscheidung hat keine englische Entsprechung: Du oder Sie wird einmal entschieden und bindet jede Beschriftung. Melde dich an hat 13 Zeichen, Melden Sie sich an hat 18, und das ist der kleinere Teil. Der größere ist, dass die Wahl über alle Beschriftungen, Fehlermeldungen und Hinweise gelten muss: Ein Wechsel mitten in einer Maske sieht aus, als hätten zwei Leute geschrieben, die nicht miteinander sprechen. In der Werkstatt wird geduzt, also duzt die Maske, und das steht als Satz in der Datei.
Eine Schaltfläche
Vier Teile, und drei davon fehlen in den meisten Baukästen
Eine Komponente ist keine abgelegte Zeichnung. Sie ist eine Zeichnung plus drei Dinge, die entscheiden, was geschieht, wenn eine Maschine die Datei öffnet.
- 01Die LayoutregelAuto Layout, horizontal, Abstand 8, Innenabstand 12 und 20, Hug contents
- 02Die ZuständeStandard, Hover, Fokus und deaktiviert, gezeichnet als Varianten statt beschrieben
- 03Die Werte, die sie liestBenannte Token, damit eine dunkle Fassung ändert, was Fläche-erhöht bedeutet, und sonst nichts
- 04Der Name, unter dem sie liegtWas sie tut, in den Worten, in denen die Werkstatt danach fragt
Nehmen Sie eines der vier heraus, und die anderen drei hören auf zu arbeiten. Ohne Zustände ist es ein Bild, ohne Token eine Abspaltung des Systems, unter dem falschen Namen wird es nächsten Monat neu gebaut.
Die Zeichenfläche, und ihre zweite Hälfte
Hier hören Leute in diesem Fach auf, besser zu werden. Sie lernen die Zeichenfläche und nie das System, das hier Auto Layout und Komponenten heißt, und wer beides überspringt, kann jeden Bildschirm zeichnen und keinen ändern. Der Beleg kommt beim neunten: neun von Hand gebaute Masken sind neun Änderungen, sobald das Feld für die Rahmennummer eine Stelle mehr bekommt, und zwei davon sind hinterher falsch.
Die zweite Hälfte erwischt die, die Komponenten gelernt haben, und sie ist leiser. Eine Komponente mit einem einzigen Aussehen ist ein Bild, das ordentlich abgelegt wurde. Der Punkt sind die Varianten: dieselbe Schaltfläche als Standard, Hover, Fokus und deaktiviert, damit die Zustände in der Datei Entscheidungen sind und beim Bauen keine Vermutungen. Ein Baukasten aus vierzig Komponenten in je einem Zustand hat das Problem nicht gelöst, sondern sortiert.
Zweimal von Hand, dann einmal richtig
Die Reihenfolge läuft rückwärts zu dem, wonach sie aussieht. Zeichnen Sie den ersten Bildschirm von Hand, alles ein Rechteck. Zeichnen Sie den zweiten ebenfalls von Hand und stellen Sie fest, dass Sie dieselbe Schaltfläche ein zweites Mal gezeichnet haben, und leicht anders. Erst dann zurück und beide durch eine Komponente ersetzen. Ab da kostet der dritte Bildschirm nichts, und der neunte auch nicht.
Andersherum, aus einer fremden Bibliothek heraus, lernen Sie deren Entscheidungen ohne einen einzigen der Gründe, und das Erkennungszeichen ist jemand, der ohne Bibliothek keine Schaltfläche zustande bringt. Ein Baukasten hat eine Meinung zum Innenabstand und keine dazu, wofür die Maske da ist.
Das Benennen steht am Ende der Reihenfolge und entscheidet, ob das System ein Jahr übersteht. Das Token heißt nach seiner Aufgabe, nicht nach seiner Farbe. Ein Wert namens Fläche-erhöht darf von fast weiß nach fast schwarz gehen, wenn eine dunkle Fassung dazukommt; ein Wert namens Grau-100 muss dafür umbenannt werden oder er wird belogen, und in der Praxis wird er belogen.
Drei Dinge zum Öffnen
Figma ist hier seit 2019 die Voreinstellung, weil es im Browser lief und mehr als eine Person in dieselbe Datei ließ; den Platz hatte davor Sketch. Der kostenlose Tarif ist echt, und jeder Wert auf dieser Seite lässt sich darin einstellen.
Penpot ist die Alternative, die es wirklich gibt: quelloffen, selbst zu hosten, und die Antwort, wenn die Entwurfsdateien nicht auf einem fremden Server liegen dürfen. Für eine Klinik oder eine Sparkasse ist Penpot deshalb kein Nebensatz, sondern die Bedingung, unter der überhaupt angefangen wird.
Bezahlt wird bei der Übergabe. Der Dev Mode in Figma kam 2023 und hat das kostenlose Inspect-Bedienfeld abgelöst, aus dem die Entwicklung die Maße gelesen hat; er ist ein bezahlter Platz. Prüfen Sie den Preis am Tag selbst und planen Sie damit, dass die Person, die Ihre Datei bekommt, diese Ansicht möglicherweise nicht hat.
Was darunter liegt
Der kürzeste Weg zu etwas Brauchbarem führt über Komponenten, weil dort die Varianten wohnen. Visuelles Design ist die Schicht darüber, Designsysteme die darunter, mitsamt den Regeln, wer einen Wert ändern darf.
Was bei einer Breite passiert, die Sie nie geöffnet haben, steht unter Responsives Design, und was die Entwicklung sonst noch braucht und meistens nicht bekommt, unter Übergabe. Ob die Maske überhaupt die richtige Frage stellt, entscheidet sich vorher, in UX-Design, und die Zahlen, aus denen Innenabstand und Schriftgrad hier stammen, kommen aus den Gestaltungsgrundlagen. Wer den Umgang mit dem Programm selbst sucht, findet ihn unter Figma.
Offen bleibt, wie der Bildschirm sich anfühlen soll, während er sich ändert, und das ist der einzige Teil einer Oberfläche, der sich nicht als Standbild zeichnen lässt. Eine Karte, die erscheint, behauptet etwas anderes als eine, die von der Stelle hereinfährt, an der getippt wurde. Die Antwort besteht aus Dauern und Kurven statt aus Pixeln und steht unter Bewegung.