Welches Button-Design findet ihr schöner?

Google stellt leider im Zuge von Material UI 3 gerade auf die vollständig abgerundeten Buttons um, und der Rest des Internets läuft blind hinterher,

1. Stil-Vorgaben von Frameworks sollten nie blind übernommen werden
2. Die Material UI Komponenten schnell angepasst sind
3. Und nein, das Internet läuft dem nicht blind hinterher

Ich finde, gerade durch die Unterscheidung von Button = viereckig und Tag = rund wird ein visueller Unterschied zwischen Tags und Buttons geschaffen (...)

Eine Unterscheidung zwischen Button und Tag ist überhaupt nicht nötig, da die Tags selber als Button dienen. Sprich mit einem Klick auf den Tag, ebenso direkt zum entsprechenden Bereich weitergeleitet wird.

Letztendlich ohnehin irrelevant, da die Entscheidung beim Betreiber bzw. bei den verantwortlichen Mitarbeitern liegt. Und wenn es dir so wichtig ist, in deinem Browser einfach eine eigene Regel für dass Aussehen von Buttons hinterlegst.

Eine Unterscheidung zwischen Button und Tag ist überhaupt nicht nötig

Der entscheidende Untersschied zwischen Tag und Button ist, dass Tags vom Nutzer hinzugefügt werden und sowohl in ihrer Anordnung als auch Quantität variabel sind, während Buttons fest an Ort und Stelle fixiert sind. Die visualle Trennung der fixen und bearbeitbaren Elemente verleiht dem Seitenaufbau eine gewisse Hierarchie.

Außerdem treten Tags oft in großen Anzahlen auf, daher ist hier das vollständig abgerundete Design am besten, da es einen Abstand zwischen den Tags sicherstellt (wegen den platzverbrauchenden Rundungen). Bei Buttons ist das absolut nicht notwendig (ganz im Gegenteil), und da sie oft alleinstehen, sieht es auch ästhetischer aus, wenn sich ihre Form am Container orientiert (der ja ebenfalls rechteckig ist).

Eine Webseite die zu viele Buttons hat wirkt zudem überladen, dieses Problem kann man beheben, indem man Tags eben nicht auf eine Ebene mit Buttons stellt, sondern als hierarchisch untergeordnete Elemente betrachtet.

(...) sieht es auch ästhetischer aus, wenn sich ihre Form am Container orientiert (der ja ebenfalls rechteckig ist).

Eine rein subjektive Wertung deinerseits und wenn es dir nicht gefällt, halt selber änderst. Man hat sich hier für runde Buttons entschieden und wenn lieber konservativ die eckige Version sehen möchtest, in deinem Browser nachhilfst.

Außerdem treten Tags oft in großen Anzahlen auf, daher ist hier das vollständig abgerundete Design am besten,

Ebenfalls eine rein subjektive Wertung deinerseits.

(...) da es einen Abstand zwischen den Tags sicherstellt (wegen den platzverbrauchenden Rundungen). 

Die Form von Elementen beeinflusst nicht direkt den Abstand, da jener durch CSS-Eigenschaften wie „margin“, „padding“ oder „gap” festgelegt wird. Im Zweifel eine Einzelfallentscheidung, wenn allg. Standardregeln visuell nicht stimmt sind.

Eine Webseite die zu viele Buttons hat wirkt zudem überladen, (...)

Diese Plattform ist jedoch nicht überladen. Es gibt Buttons und andere Schaltflächen wo man sie erwartet. Die Tags sind auch in einem eigenen Block untergebracht und sich ausreichend von anderen Elementen unterscheiden.

(...) indem man Tags eben nicht auf eine Ebene mit Buttons stellt, sondern als hierarchisch untergeordnete Elemente betrachtet.

Die Hierarchie von UI Elementen hängt von ihrer Funktion, nicht von ihrer Typologie ab. Tags sind nicht zwingend untergeordnet und so wie sie hier verwendet werden, auch nicht mit Buttons konkurrieren. Daher eine fragwürdige Verallgemeinerung.

wenn lieber konservativ die eckige Version

nicht weil ich konservativ bin, sondern weil sie sich objektiv gesehen besser in die Webseite einfügen und somit für ein geordneteres und cleaneres UI sorgen

Die Form von Elementen beeinflusst nicht direkt den Abstand, da jener durch CSS-Eigenschaften wie „margin“, „padding“ oder „gap” festgelegt wird. Im Zweifel eine Einzelfallentscheidung, wenn allg. Standardregeln visuell nicht stimmt sind.

Aber bei einem vollständig abgerundeten Button ist inhärent sichergestellt, dass sich zwischen zwei Buttonbeschriftungen mehr Platz befindet, da die Rundungen nun mal Platz verbrauchen, der nicht von Text belegt werden kann. Bei eckigen Buttons müsste man entweder die Buttons breiter machen oder die Abstände zwsichen den Buttons vergrößern, um den selben Abstand zwischen zwei Texteinheiten zu erzielen.

Die Hierarchie von UI Elementen hängt von ihrer Funktion, nicht von ihrer Typologie ab

Die Funktion eines Tags entscheidet sich grundlegend von der eines Buttons, da ein Button nur als Öffner für eine andere Unterseite fungiert, während ein Tag einen vom Nutzer selbst hinzugefügten Informationsgehalt in sich trägt (der Nutzer kann sie selbst adden und removen, das geht bei Buttons nicht).

Natürlich ist es bereits möglich, zwischen Tags und Buttons zu unterscheiden, aber wenn man den Unterschied auch durch unterschiedliche Formen hervorhebt, dann ist das noch nutzerfreundlicher

Man hat sich hier für runde Buttons entschieden und wenn lieber konservativ die eckige Version sehen möchtest, in deinem Browser nachhilfst.

Das mache ich tatsächlich schon auf vielen Webseiten lol, zum Beispiel habe ich meinen Augen das 2021 discord rebrand bisher keinen einzigen Tag angetan. (Wobei ich mittlerweile die App mit betterdiscord nutze)

nicht weil ich konservativ bin, sondern weil sie sich objektiv gesehen besser in die Webseite einfügen und somit für ein geordneteres und cleaneres UI sorgen

Es ist und bleibt eine subjektive Wertung. Nicht mehr, nicht weniger.

Aber bei einem vollständig abgerundeten Button ist inhärent sichergestellt, dass sich zwischen zwei Buttonbeschriftungen mehr Platz befindet, (...)

Dasselbe erreicht man gleichermaßen, wenn Elemente und deren Abstände durch passende CSS-Eigenschaften angepasst werden.

(...) da die Rundungen nun mal Platz verbrauchen, der nicht von Text belegt werden kann. 

Insofern irrelevant da die gesamte Fläche durch ihre Farbgebung als Element wahrgenommen wird. Sprich auch die Bereiche die nicht mit Text belegt sind,

Die Funktion eines Tags entscheidet sich grundlegend von der eines Buttons, da ein Button nur als Öffner für eine andere Unterseite fungiert, (...)

Ein weiteres Pauschalisieren, da Buttons unterschiedliche Funktionen haben können. Zum Aufrufen einer neuen Seite werden eher Links oder Tags verwendet. Tags durch eine Raute gekennzeichnet, Links ohne Hintergrundfarbe.

(...), aber wenn man den Unterschied auch durch unterschiedliche Formen hervorhebt, dann ist das noch nutzerfreundlicher

Eine größere/andere Trennung wäre nur erforderlich, wenn Tags und Buttons zusammen eingesetzt werden. So sind Tags jedoch ausreichend separiert.

Dasselbe erreicht man gleichermaßen, wenn Elemente und deren Abstände durch passende CSS-Eigenschaften angepasst werden.

Aber dann erhält man entweder unnatürlich breite Buttons oder unnatürlich breite Abstände. Bei runden buttons sind die Abstände automatisch da, ohne dass man sie weit auseinanderrücken muss.

Ein weiteres Pauschalisieren, da Buttons unterschiedliche Funktionen haben können. Zum Aufrufen einer neuen Seite werden eher Links oder Tags verwendet. Tags durch eine Raute gekennzeichnet, Links ohne Hintergrundfarbe.

Aber ein Button zeichnet sich eben dadurch aus, dass er konstant ist, während ein Tag variabel ist. Tags und Buttons sind nicht dasselbe meiner Meinung nach.

So sind Tags jedoch ausreichend separiert

Es gibt aber Unterseiten, auf denen Tags und Buttons nebeneinander auftreten (z.B. Startseite - "Neues Interesse" direkt neben den Tags, wobei ich "Für dich" mal zu den Tags dazuzähle). Da könnte man die Designsprache noch schärfen

Aber ein Button zeichnet sich eben dadurch aus, dass er konstant ist, während ein Tag variabel ist. Tags und Buttons sind nicht dasselbe meiner Meinung nach.

Erneut pauschalisierend und Buttons ebenso variable sein können. Mit oder ohne Icon, mit oder ohne Label, farblich abgetrennt anhand der Funktion sowie dynamische Werte je nach Kontext und dessen Status. Button ist nicht gleich Button und es von einem Elementtyp verschiedene Varianten geben kann.

Aber dann erhält man entweder unnatürlich breite Buttons oder unnatürlich breite Abstände. 

Nein, erhält man nicht. Zumindest nicht, wenn man im 1.-2. Lehrjahr zum Mediengestalter aufgepasst hat. Vor allem etwas von Typografie, Negativraum und mehr noch von Gestaltungsraster und Layout versteht. Und für die ganz faulen gibt es entsprechende Frameworks, die bereits gewisse Dinge mit berücksichtigen.

Es gibt aber Unterseiten, auf denen Tags und Buttons nebeneinander auftreten (z.B. Startseite - "Neues Interesse" direkt neben den Tags, wobei ich "Für dich" mal zu den Tags dazuzähle).

Das „Für dich” ein Button und kein Tag handeln kann, sowohl an dessen Farbgebung und Funktion zu verstehen ist. Die Tags sind einfache Sprungmarken (Links), während „Für dich” ein Button u.a. zum Öffnen der Filterfunktion darstellt. Auch „Neues Interesse” grenzt sich ausreichend durch Farbe und Icon ab.

Dann bist du einer der Minderheit 🤷‍♂️ jeder hat aber auch einen anderen Geschmack

Wer sagt denn, dass die Mehrheit das moderner findet? Wenn man sich z.B. Windows 11 anschaut, dann findet man diese abgerundeten Buttons nirgendwo. Nur Google ist der Meinung, die aus irgendienem Grund überall implementieren zu müssen.

Nur Google schonmal nicht, deutlich mehr Unternehmen verwenden die abgerundeten. Dadurch erklärt sich auch das es die Mehrheit so will, da die Tech Unternehmen den Komfort der Nutzer erhöhen möchte, nicht ohne Grund haben viele OS Updates immer mehr gerundete Ecken vorgewiesen. Ich selber benutze Windows und finde die sollten es auch implementieren. Langsam könnte man denken, dass Windows mit ihrem Design des UI weit hinterherhinkt.

Ne, die rennen einfach alle blind Googles Material UI 3 hinterher. Vollständig abgerundete Buttons sind deutlich platzineffizienter und sie fügen sich schlechter in die Struktur der Webseite ein (die nunmal rechteckig aufgebaut ist, da die Anzeigefläche einer Webseite auch rechteckig ist).

Die rennen nicht Google hinterher 🤦‍♂️ darauf musst du nunmal klar kommen, dass die Nutzer der Unternehmen dies besser finden. Windows ist keine Webseite. Was die Betreiber für Webseiten haben mit Button ist deren Entscheidung, dennoch sollte Microsoft mMn. für ihr UI langsam anfangen die abgerundeten zu verwenden.

Ähm, doch. Viele Webseiten verwenden das Material UI Framework. Google gibt einen Trend vor bzw. aktualisiert Material UI, die Webseiten und Apps mit Material UI implementieren es direkt, die anderen Seitenbetreiber denken dadurch dass das super modern ist und implementieren es auch und schon hat die ganze Welt ihr Buttondesign auf ein wesentlich unökonomischeres und unnatürlicheres umgestellt und verkauft das als "modern". So funktioniert heutzutage Webdesign.

So einfach wie beschrieben funktioniert es nicht 🤦‍♂️ wenn es so wäre hätte Microsoft dies genauso getan, da sie eher mit der Zeit mitgehen müssen als irgendein Webseit Betreiber von dem man nie gehört hat.

Ich könnte mir vorstellen, dass Microsoft hier versucht, einen eigenen Trend zu setzen und sich nicht von Google führen zu lassen. Zumindest wünsche ich mir das. Ich befürchte aber eher, dass Microsoft in eine Art Dauerhintergehinke verfallen ist und die runden Buttons auch bald einführen wird (bitte nicht ...). Zumindest gibt es auf einigen MS-Webseiten schon derartige Ansätze, wenn auch nur vereinzelt (zum Glück). Schade, seit Windows 8 hat Microsoft anscheinend jegliches Profil in Punkto Webdesign aufgegeben.

Entweder man geht mit der Zeit oder man geht mit der Zeit. Einfaches Spiel.

... oder man setzt einen eigenen Akzent.

Der einfach nur fehlschlägt, wenn man es bei den eckigen Buttons lässt. Oder ein Dreieck draus machen möchten

Wie bereits geschrieben sind eckige Buttons mit abgerundeten Ecken objektiv am besten. Gibt keinen Grund diese Buttons aufzugeben und durch schlechtere zu ersetzen, nur weil alle einer stumpfsinnigen Idee hinterherrennen.

Ein Dreieck ist ähnlicher Blödsinn wie die vollständig abgerundeten.

Du findest sie besser nicht jeder teilt die Meinung.