susan kare and meaning within a pixel grid

Susan Kare und die Bedeutung innerhalb eines Pixelrasters

Posted at 7:56 a.m. · 09 Oktober, 2026

Autor: fujito frenkler

Bedeutung entsteht Quadrat für Quadrat

Ein kleines Raster lässt wenig Raum für Gestaltung. Ein wiedererkennbares Objekt muss reduziert, ein Zustand herausgearbeitet und eine Stimmung durch eine begrenzte Anzahl von Pixeln vermittelt werden. Susan Kares frühe Arbeiten im Bereich der Benutzeroberflächen machen diese Einschränkungen sichtbar, ohne dass das Ergebnis dabei bloß als eingeschränkt wirkt.

Laut den Aufzeichnungen des MoMA stammt Kares Skizzenbuch mit Symbolen für das Apple-Macintosh-Betriebssystem aus dem Jahr 1982; darin wird die Verwendung von Millimeterpapier beschrieben, wobei ein Quadrat ein Pixel darstellt. Dieses Beispiel verdeutlicht, wie Zeichnungen, Metaphern und eine sorgfältige Auswahl dazu beitragen können, ein komplexes System in Formen zu übersetzen, die der Nutzer allmählich erkennen kann.

Die Metapher bietet einen Ausgangspunkt

Ein Symbol kann die Vertrautheit eines anderen Objekts übernehmen. Diese Vertrautheit ist nützlich, wenn sie eine neue Funktion mit etwas verknüpft, das der Benutzer bereits versteht. Sie kann aber auch irreführend sein. Ein Bild eines Behälters gibt keinen Aufschluss darüber, ob die Aktion etwas speichert, archiviert oder löscht. Die Bedeutung hängt von der Benutzeroberfläche und ihren Konventionen ab.

Das Symbol sollte unter Berücksichtigung seiner Beschriftung, seiner Platzierung und des daraus resultierenden Zustands bewertet werden. Das Erkennen eines vertrauten Objekts ist etwas anderes als die Vorhersage dessen, was nach dessen Auswahl geschehen wird. Eine gelungene Darstellung kann dennoch ein mehrdeutiges Steuerelement sein.

Persönlichkeit im Rahmen von Einschränkungen

Ein kleines Bild kann Freundlichkeit vermitteln, ohne die visuelle Komplexität zu erhöhen. Ausdrucksmittel sollten das Verständnis fördern, anstatt ihm im Wege zu stehen. Die Erkenntnis daraus ist nicht, dass jede Benutzeroberfläche ein lächelndes Gesicht braucht, sondern dass technische Grenzen Raum für bewusste Stimmungsgebung und menschliche Wiedererkennung lassen.

Diese Einschränkung fördert zudem die Wahrnehmung von Zusammenhängen. Vergleichen Sie ein Symbol in seiner tatsächlichen Größe mit seinen Nachbarn. Eine Form, die vergrößert betrachtet deutlich erkennbar ist, kann bei normaler Größe mit einer anderen verschmelzen. Die Familie muss als Ganzes zusammenwirken, einschließlich Zuständen wie „deaktiviert“, „ausgewählt“ oder „unterbrochen“.

Konventionen brauchen Pflege

Die Bedeutung eines Symbols kann auch dann noch bestehen bleiben, wenn sein Referent mittlerweile unbekannt geworden ist. Die Diskette, die früher das Speichern symbolisierte, ist ein naheliegendes Beispiel hierfür. Diese Beständigkeit beweist jedoch nicht, dass das Symbol immer ersetzt werden sollte oder dass niemand eine Erklärung benötigt. Testen Sie die Wiedererkennbarkeit bei den Zielnutzern und berücksichtigen Sie die Kosten, die mit einer Änderung einer Konvention verbunden sind.

Barrierefreiheit stellt eine weitere Anforderung: Wesentliche Informationen dürfen nicht allein von der Erkennung dekorativer Elemente abhängen. Beschriftungen und alternative Beschreibungen sollten die Funktionsweise genau wiedergeben. Das Bild und der Text müssen dasselbe vermitteln.

Ein ausgearbeitetes Designbeispiel

Ein Dateimanager verwendet sowohl für das Archivieren als auch für das Löschen ein bekanntes Container-Symbol. Die Symbole sehen ähnlich aus, da bei beiden Vorgängen ein Element aus der aktuellen Ansicht entfernt wird. Ihre Auswirkungen sind jedoch unterschiedlich.

Das Team kann die familiäre Ähnlichkeit bewahren und gleichzeitig die Aktion durch Beschriftungen, Anordnung und Statusrückmeldung deutlich machen. Es sollte geprüft werden, ob die Nutzer vorhersagen können, was mit der Datei geschieht, und nicht nur, ob sie den abgebildeten Container erkennen. Ein auffälliges neues Symbol ist nicht unbedingt eine Verbesserung, wenn es die nützliche Vertrautheit aufgibt, ohne den Unterschied zu erklären.

Betrachten Sie die Symbole in Originalgröße und im Kontext der gesamten Benutzeroberfläche. Benachbarte Steuerelemente können die wahrgenommene Beziehung verändern. Das Pixelraster wird zu einer funktionalen Vorgabe innerhalb eines umfassenderen Informationssystems, genauso wie Kares Skizzen kleine visuelle Entscheidungen in sinnvolle Funktionen umsetzten.

Eine praktische Übung

Entwerfen Sie drei Symbole für verwandte Funktionen innerhalb eines festgelegten Rasters. Beschreiben Sie die Funktion in einfacher Sprache, bevor Sie mit dem Zeichnen beginnen. Testen Sie, was Nutzer allein anhand der Symbole vermuten, und anschließend mit Beschriftungen und Kontext. Halten Sie Verwirrungen fest, die beim Erkennen des Bildes und beim Verstehen der Aktion auftreten. Überarbeiten Sie das kleinste Merkmal, das die Interpretation verändert, und prüfen Sie die gesamte Symbolfamilie in Originalgröße.

Das Raster ist eine Einschränkung beim Zeichnen, keine Ausrede, um die Bedeutung unhinterfragt zu lassen.

Eine Betrachtung der Bilder

1. Das Porträt von Susan Kare stellt die Designerin vor, die hinter der Fallstudie steht. Ihre Arbeit wird anhand des Zusammenhangs zwischen begrenzter Auflösung und erkennbarer Bedeutung beleuchtet.

2. Steve Jobs und der Macintosh liefern den historischen Produktkontext. Ein kleiner Bildschirm erforderte die Verwendung von Symbolen, um innerhalb eines begrenzten Anzeigebereichs und eines sich gerade entwickelnden Interaktionssystems zu kommunizieren.

3. Dieses allgemeine Computersymbol dient als Vergleich und ist kein Werk, das Kare zugeschrieben wird. Seine wenigen Pixel zeigen, wie sehr die Erkennbarkeit davon abhängen kann, bestimmte Merkmale herauszustellen, anstatt jedes Detail darzustellen.

Weiterführende Informationen und Querverweise

f/p Kommunikationsdesign

Weiter mit der Gestaltung von Informationen, Hierarchien und verständlicher Kommunikation.

f/p – Markendesign und Corporate Identity

Eine wiedererkennbare Form mit einem Identitätssystem verknüpfen, das über alle Kontaktpunkte hinweg umgesetzt werden kann.

Praktischer Leitfaden: So wählen Sie eine Agentur für Grafik- und Kommunikationsdesign aus

Stellen Sie einen Bezug zwischen diesem Thema und dem Anwendungsbereich des Kommunikationsdesigns, den zu erbringenden Leistungen und der Partnerauswahl her.

Planen Sie ein Projekt in diesem Bereich? Besprechen Sie es mit f/p design.