Warum hat digitales Design so viele runde Ecken?

Themeneinleitung

Abgerundete Ecken. Was das ist muss ich jetzt wohl niemandem erklären, die sind ja in modernen Interfaces beliebter als Kämme bei Meerschweinchenzüchtern. In beiden großen Handy-Betriebssystemen sieht man sie sehr oft, und wenn man mal bei Dribbble reinschaut hat man ja das Gefühl, abgerundete Ecken wären gesetzlich vorgeschrieben. Aber wo kommt das her?

Schon Steve Jobs wusste im Jahr 1981 "Round Rectangles are everwhere", und überredete den Macintosh Programmier Bill Atkinson dazu, das Betriebssystem des allerersten Macs um die Funktion zu erweitern, abgerundete Rechtecke zu zeichnen, auch wenn Atkinson das erst für unmöglich hielt. Und so hatte schon die (fast) erste grafische Benutzeroberfläche eines Computer-Betriebssystems abgerundete Rechtecke.

Seit dem gehören sie fest zu unserem Bild von grafischen Benutzeroberflächen, ich meine, was wäre der Homescreen des iPhones ohne abgerundete Rechtecke? Woran würden wir Knöpfe auf dem Bildschirm erkennen? Wo wären 90% der Interface-Entwürfe bei Dribble?

Abgerundete Rechtecke sind also überall. Aber warum, was bringen sie uns, und warum kommen wir nicht mehr ohne sie aus?

Zuerst einmal sind sie zurzeit einfach im Trend. Modernes UI-Design soll ja oft weich und freundlich wirken, da passen abgerundete Ecken natürlich prima rein, und darum sehen wir sie in den meisten Programmen, auf vielen Webseiten und halt insgesamt in vielen Interfaces.

Eigenschaften

Aber warum wirken sie überhaupt weich und freundlich? Unser Gehirn verbindet mit runderen Formen automatisch auch weichere Eigenschaften wie freundlich oder vertrauenswürdig, weil es diese Formen aus der Natur und unserer Umgebung entlehnt: Weiche Sachen sind oft Rund, spitzen Gegenständen sollte mit Vorsicht begegnet werden.

Das geht sogar so weit, dass wir diese Charakteristika auf Namen und Klänge ausweiten. Eine Katharina ist für unser Gehirn ein geradliniger und strengerer Mensch als ein Barbara, und wir verbinden damit auch verschiedene Körperformen. Das Phänomen hat sogar einen Namen, der Bouba/Kiki-Effekt. So schreiben de meisten Personen das Wort Kiki einer eckigen Form zu, Während Bouba mit einer Runden Form verbunden wird. Und so wirkt dann ein Design mit vielen Kanten sehr nüchtern und direkt und Eins mit runden Ecken deutlich einladender und freundlicher. Und die neue Technikwelt möchte natürlich möglichst freundlich und zugänglich wirken, was die Dominanz abgerundeter Interfaces verständlich macht.

Apropos zugänglich: Abgerundete Ecken machen den Inhalt eines Rechtecks für das Auge einfacher zu erreichen, weil die Ecken nicht wie Pfeile vom Inhalt weg zeigen. Unser Auge wird von den weglaufenden Linien irritiert und konzentriert sich nicht auf das Innere. Und dabei ist Content doch König! Runden wir die Kanten unsere Rechtecks hingegen ab, sorgen die Kurven dafür dass wir die Linien des Kastens als eeeeineeee lange wahrnehmen, die den Inhalt einkreist.

Auch für mehrere Kästen nebeneinander ist dieser Effekt nützlich: Denn ein Layout, was vor allem aus Kästen mit Inhalt besteht, ist für das Auge deutlich besser lesbar, wenn die Kanten der Kästen abgerundet sind.

Die durch die Kurve geschlossene Form eines Kasten grenzt ihn nämlich automatisch gegen die ähnlich verlaufenden Kanten anderer Kästen ab. Dieser stärkere Kontrast ist vor allem bei mehreren Rechtecken unter- und übereinander hilfreich, also beispielsweise bei mehreren Karten nebeneinander oder Buttons untereinander. Das Auge kann die dann einfach besser auseinanderhalten.

Das kann man sich für Listen oder verschiedene Optionen sehr gut zu nutze machen, was ja auch überall gemacht wird. Karten mit abgerundeten Ecken sind ja im Web oder in Apps ein sehr beliebtes Mittel, um Inhalte klar voneinander abzugrenzen und dennoch zu gruppieren, und für das Auge die verschiedenen Optionen klar differenzierbar zu machen.

So verhält sich das auch bei mehreren Buttons. Bei Buttons ist aber nicht nur der Kontrast zu anderen Buttons entscheidend, sondern auch ihre Erkennbarkeit als Buttons. Und hier spielt die Gewohnheit eine große Rolle: Eine Zeile Text in einem Kasten mit runden Ecken? Das muss ein Button sein! Da arbeitet unser Hirn mittlerweile recht effizient. Und es erhöht die Lesbarkeit eines Interfaces ungemein, wenn man Buttons als Buttons erkennt. Das war jetzt sehr oft das Wort Button, freut euch auf meinen Artikel über Buttons!

Umsetzung

Wir wollen lieber mal anschauen, wie sich das in der Praxis verhält. In den gängigen Design Programmen wie Figma, Sketch oder Adobe XD kann man Rechtecken easy abgerundete Ecken verpassen, das dürfte jeder hinbekommen. In Photoshop geht das mit dem Formen-Tool auch, aber wer zum Henker designt in Photoshop? Und wenn man es direkt im Web umsetzen will, gibt es seit CSS3 die CSS-Eigenschaft Border-Radius. Vorher musste man das mit an den Ecken positionierten PNGs lösen. Wow, wir leben in guten Zeiten.

Figma Sketch und Adobe XD erlauben auch, verschiedenen Ecken unterschiedliche Radien zu geben, um zum beispiel eine sehr simple Sprechblase zu erzeugen. Entweder über das Eigenschaften Menü oder direkt mit Ankerpunkten am Rechteck selber.

Dennoch gibt es auch mit vernünftigen Design-Programm ein paar Fallstricke:

Erstens: Viel zu große runde Ecken! Die nehmen viel Platz weg und oft kommen dann die Kurven dem Inhalt in die Quere, und alles sieht irgendwie gequetscht aus. So große Kurven ziehen auch unnötig die Aufmerksamkeit auf sich, und es geht in so einem Layout ja meistens um den Inhalt, und nicht um die krassesten Kurven. Wenn man in seinem Design entscheidet, die Ecken der Kästen abzurunden, dann sollte man sich genau Gedanken machen, welche Größe die Kurve, also welchen Radius sie hat. Einfach den Regler auf irgendeinen Wert zu ziehen ist ja auch nicht designen, sondern halt Regler auf irgendwelche Werte ziehen.

Im Idealfall nutzt das eigene Layout ja eh ein Raster-System, an dem man den Radius ausrichten könnte. Wo mit wir beim zweiten Punkt wären: Den Abständen! Wie gesagt, ist eine Kurve zu groß kommt sie gerne mal dem Inhalt in die Quere, das sie ja, verglichen mit einer normalen Ecke, den inneren Platz zum Inhalt hin verkleinert. Folgt man seinem Rastersystem mit Sorgfalt, richtet man die abstände ja eh danach aus und achtet darauf, dass sich der Inhalt bestenfalls optisch nicht innerhalb der runden Ecke befindet, sondern sich beispielsweise horizontal und vertikal an dem Anfand dieser ausrichtet.

Was man auch mit Sorgfalt machen sollte, ist abgerundete Rechtecke innerhalb von anderen abgerundeten Rechtecken zu platzieren. Richtet man die Ecken der Kästen aneinander aus, passen die Kurven der Kästen häufig nicht aneinander. Zumindest wenn beide Ecken den gleichen Radius haben. Dann ist die Kurve zwischen den beiden Ecken ziemlich krumm.

Das Problem dabei ist, dass man sich die beiden Kurven ja jeweils als Teil eines Kreises vorstellen muss. Und so ein Kreis hat innen ja einen kleineren Radius als weiter außen. Also sollten die inneren Kurven einen geringeren Radius haben, wenn man zwei abgerundete Ecken ineinander platziert, damit diese gemeinsam einen sauberen Kreis bilden. Ansonsten sieht das ziemlich halt krumm aus, diesen Fehler sieht man ab und an mal bei Insta oder Dribble, wenn die Leute gerade erst anfangen.

Smooth Corners

Ein weiteres Problem bei abgerundeten Ecken ist, dass sie oft nicht wirklich rund aussehen. Vor allem bei größeren Radien und nicht ganz so hoch aufgelösten Displays kann die Rundung eines Rechtecks vor allem an den Punkten, wo die Rundung wieder zur Geraden wird, sehr hakelig aussehen. Schuld daran ist wieder einmal, trommelwirbel, unser Gehirn! Auf den alten Schlawiner wirken solche exakten Kreis-zu-Gerade-Übergange nämlich irgendwieee unnatürlich.

Aber wie lässt man sie natürlicher wirken? Wer diesen Artikel gerade auf einem Apple-Gerät liest, kann sich das jetzt selber anschauen: in iOS und macOS, aber auch bei iPhone und MacBook selbst, kommen keine exakten abgerundeten Ecken zum Einsatz.

Bei einer handelsüblichen abgerundeten Ecke haben wir die Gerade, die einen Radius von Null hat, weil sie halt eine Gerade ist, und den Viertelkreis, der mit seinem Radius, sagen wir einfach mal 7 Pixel, direkt an die Gerade angesetzt wird. Da besteht also ein harter Übergang zwischen Gerade und Kreis.

Die Kurven an und im iPhone haben einen weichen Übergang zwischen der Geraden, mit ihrem null-radius, und dem maximalen Radius der Kurve.

Die Abrundung wird also laaangsam stärker, bis sie bei, in unserem Fall 7px ist, um dann wieder abzuflachen bis der Radius wieder bei null ist. Da liegt kein perfekter Kreis an der Geraden an, sondern eine weiche Kurve. Als hätte man die normale Rundung mit Schleifpapier geglättet.

Das wirkt organischer und weicher aufs Auge. Ist aber natürlich auch ein wenig komplexer umzusetzen. In Sketch gibt es dafür einen kleinen Haken den man setzen kann, in Figma gibt es, etwas versteckt hinter zwei Klicks, sogar einen Schieberegler mit dem die Stärke der Glättung eingestellt werden kann. Wer seine App-Entwürfe selbst in Apples Programmiersprache Swift umsetzen will, hat für dich weicheren Kurven sogar einen eigenen Befehl zur Verfügung.

Schlechter siehts da mit CSS aus. CSS selber hat kein Attribut für Smooth Corners, die einzige Möglichkeit sowas im Web umzusetzen besteht in etwas komplizierter Jongliererei mit SVG-Grafiken und JavaScript, auf die ich hier jetzt nicht näher eingehen werde. Auch Adobe XD hat dafür bisher leider keine Möglichkeit und das andere Adobe Programm erwähne ich nicht, weil man das einfach nicht für UI-Design benutzt.

Kritik

So, wie man auch nicht einfach immer abgerundete Ecken nutzen sollte. Bei all der Aufgeräumtheit, Weichheit, Übersichtlichkeit und so weiter, haben natürlich auch abgerundete Ecken ihre Ecken und Kanten.

Wie schon erwähnt haben vor allem extrem viele User Interface Entwürfe für Smartphone Apps bei Dribbble, Behance oder Instagram häufig abgerundete Rechtecke, bei den vielen Mockups nebeneinander wirken die dadurch recht schnell ziemlich austauschbar. Nicht jedes Interface, in dem alles schön abgerundet ist, und dass dann noch eine kleine Welle oder einen Farbverlauf hat, ist originell.

Kurven sind eben ein Stilmittel, und wie alle Stilmittel sollten sie in Maßen eingesetzt werden. Listen oder Blöcke können auch ohne Rundungen übersichtlich und hübsch sein, es muss halt zum Charakter des UIs passen. Überall Abgerundete Ecken auf der Website eines Messerherstellers? Ich könnte mir passenderes vorstellen.

Fazit

Aber dennoch: Abgerundete Ecken sind ein wichtiges Tool im Werkzeugkasten eines Designers. Nicht nur im Ui-Design, auch im klassischen Industrie-Design, im Print, überall begegnet man den Dingern. Und auch zu recht, sie können Inhalt effizient übersichtlicher machen, Kästen ihre optische Dominanz nehmen und ein Design freundlicher und weniger Techy aussehen lassen.

Solange man sie behutsam und mit Verstand einsetzt, sich den Details bewusst ist und nicht einfach immer das gleichr macht, sind sie ein spannendes und praktisches Stilmittel. So ist das ja bei vielen Design-Stilmitteln: Man sollte sich damit auseinadersetzen, warum etwas an genau dieser Stelle Sinn ergibt oder eben nicht.