Abgerundet oder quadratisch? Das ist die Frage.

Muss ich die üblichen spitzen Knöpfe in abgerundete ändern? Welche sind besser für die Benutzerfreundlichkeit? Wie treffen wir solche Entscheidungen?

Genau diese Probleme treten auf, wenn Sie in die UX eintauchen, die mit runden Schaltflächen in Anwendungen verbunden ist. Wir wissen bereits, dass Größe, Kontrast und der Schattenwurf den Knopf bemerkbar machen können, aber es ist nicht immer einfach, das richtige Gleichgewicht für die Elemente der Hauptaktion und der Nebenaktion zu finden. Die Rundheit kann in diesem Fall Abhilfe schaffen.

Variablen zur Verbesserung der Sichtbarkeit

Erhöht das Runden die Anerkennung?

Abgerundete Elemente sind leichter zu lesen. Es ist einfacher, die Anzahl der Karten in einer Reihe zu zählen, wenn ihre Ecken nicht scharf sind.

Abgerundete Elemente sind leichter zu erkennen als scharf

Dies liegt daran, dass eine besser unterscheidbare Rundheit unseren Augen hilft, schnell zwischen den Karten selbst zu unterscheiden. Im Gegenteil, Karten mit scharfen Ecken sehen einheitlich und einheitlich aus, was ihre Erkennung erschwert.

Im Rasterlayout funktioniert die Rundung noch besser.

In einem TurboTax-Dashboard haftet das Auge beispielsweise besser an Elementen mit abgerundeten Ecken im oberen Bereich als im mittleren Bereich, wo die Karten scharfe Ecken haben.

Turbotax Dashboard

Muss ich vollständig abgerundete Tasten verwenden?

Voll abgerundete Tasten eignen sich hervorragend für Benutzeroberflächen, in denen ausreichend freier Speicherplatz vorhanden ist. Ein Beispiel für eine sehr erfolgreiche Anordnung solcher Schaltflächen ist Spotify, wo der Aufruf zum Handeln gut zu spüren ist.

Abgerundete Schaltflächen in Spotify

Im Allgemeinen ist in diesem Beispiel die Hauptaktion eindeutig definiert, da die Arbeit mit Spotify immer auf die Wiedergabe (Titel, Podcasts, Wiedergabelisten) ankommt. Die vollständig abgerundeten Wiedergabetasten unterscheiden sich stark von UI-Alben und Wiedergabelisten, was den Benutzer dazu ermutigt, auf „Wiedergabe“ zu klicken.

"Play" auf Spotify

Wenn vollständig abgerundete Tasten NICHT funktionieren?

In einigen Fällen kann Rundheit die Benutzerfreundlichkeit beeinträchtigen, zum Beispiel:

1. Wenn abgerundete Schaltflächen wie Tags aussehen

Wenn es nicht einfach ist, eine Schaltfläche von einem Tag (Filter) zu unterscheiden, führt dies zu Verwirrung: „Klicke ich auf eine Schaltfläche oder einen Filter?“

Was ist das: Schaltflächen oder Filter? Überhaupt nicht offensichtlich.

2. Abgerundete Schaltflächen können keine verschachtelten Optionen anzeigen

Vollständig abgerundete Schaltflächen verwenden normalerweise das Pfeilsymbol, um das Vorhandensein verschachtelter Optionen anzuzeigen. Der Klickbereich (oder die Schubkarre) für die Anzeige von Optionen ist jedoch durch die Größe des Symbols begrenzt (normalerweise 16 x 16 oder 24 x 24 Pixel).

Ist es zweckmäßig, jeweils Optionen anzuzeigen?

Wenn wir nur leicht abgerundete Schaltflächen verwenden, können wir den Pfeil ausblenden, sodass sich die Schaltfläche wie eine Popup-Schaltfläche verhält. Dieser Ansatz funktioniert besser.

Apple empfiehlt nicht, abgerundete Tasten für Aktionen zu verwenden (siehe Drucktasten ). Vollständig abgerundete Schaltflächen sind für " Hilfe " oder zur Bereitstellung sich gegenseitig ausschließender Optionen reserviert (siehe Optionsfelder ).

Abbildungen aus den Richtlinien für die Benutzeroberfläche von Apple

3. Voll abgerundete Knöpfe sind nicht für Stapel geeignet

Wenn wir abgerundete Knöpfe in Reihen in Tabellen und Karten platzieren, sehen sie fehl am Platz aus. Für eine Tabelle mit 10 Zeilen erhalten wir beispielsweise eine Spalte mit 10 Schaltflächen, von denen jede wie eine Schaltfläche für die Hauptaktion aussieht.

Alternativ können Sie die Schaltflächen "Keine Rahmen" ausprobieren, wie dies in den neuen macOS-Benachrichtigungen der Fall ist, oder die Schaltflächen nur anzeigen, wenn Sie den Mauszeiger darüber halten. Durch die Minimierung der Sichtbarkeit der Schaltflächen können wir den Benutzer auf den Hauptarbeitsbereich konzentrieren.

Schaltflächen "ohne Rahmen" auf dem Stapel

Ästhetik abgerundeter Ecken

Die Rundheit sieht modern aus. Die Anwendung der vollständigen Rundung begann in mobilen Schnittstellen und wurde ins Web migriert. Der Mangel an Schärfe führt zu einem Gefühl der Einfachheit, des Optimismus und der Zugänglichkeit. Dies ist wahrscheinlich der Grund, warum viele Designsysteme abgerundete Elemente verwendet haben und häufig für Symbole, Schaltflächen oder sogar Bilder verwendet werden.

In Chrome wurde nach einem kürzlich durchgeführten Update (sechs Monate seit Veröffentlichung des Originalartikels - ca. Übersetzung) die Adressleiste gerundet, um die Verfügbarkeit der gleichzeitigen Verwendung für die Suche besser auszudrücken. Benutzer können einen Teil der Suchergebnisse direkt zum Zeitpunkt des Drucks sehen, noch bevor sie zur Seite gehen.

Neue Suchleiste in Chrome (Quelle - Google Blog )

In Übereinstimmung mit dem neuen Konzept wurden die Schaltflächen in der Symbolleiste beim Schweben abgerundet hervorgehoben. Es ist einfach, abgerundete Elemente in anderen Google-Apps wie Kalender, Google Mail und Drive zu finden.

Zusammenfassen

Es gibt keine eindeutige Antwort, die besser ist - Rundheit oder Schärfe. Abgerundete Elemente können den Benutzer jedoch dazu ermutigen, mit der Anwendung zu interagieren, ohne von einer sekundären Benutzeroberfläche abgelenkt zu werden.

---

Liste der Ressourcen für eine eingehende Untersuchung des Problems:

Verwenden Sie runde Formen in Materialdesigns

Eigenschaften von abgerundeten Ecken

Warum abgerundete Ecken die Augen schonen