Icons in Hamburger-Menü ausblenden

  • Ich würde gerne die Icons im Hamburger-Menü loswerden. Außer in den Bereichen Zoom und Edit. Die Icons verschlechtern meiner Meinung nach die Übersicht.

    Wenn ich die Klasse ".toolbarbutton-icon" ausblende, bleiben einige Menüpunkte eingerückt, nämlich die, die eh kein Icon haben.

    Ich könnte die opacity von ".toolbarbutton-icon" auf 0 senken, aber dann sieht es so aus, als seien alle Zeilen nach rechts eingerückt. (Der linke Rand ist dann halt zu breit.)

    -------------------------------------

    Außerdem vemisse ich das Item "Page View" im Hamburger-Menü. Das haben die Entwickler anscheinend vergessen.

    -------------------------------------

    Alternativ würde ich gene das Hauptmenü in die Navigations-Bar verschieben. Aus Platzgründen. Wäre mir sogar lieber. Ich mag dieses Hamburger-Menü nicht.

    Einmal editiert, zuletzt von Anonymous (27. Januar 2018 um 10:52)

  • Bezüglich des Hamburger-Menüs: Ich musste nur rausfinden, wie sich das Menü offen halten lässt, während es inspiziert wird. Das geht in der Browser-Toolbox über den aus vier Rechtecken bestehenden Button oben rechts.

    Wahrscheinlich lässt sich das noch etwas zusammenfassen:

  • Habe den Code upgedatet.

    --------------------------

    Die Übersichtlichkeit ließe sich auch erhöhen, indem man die Icons nicht löscht, sondern in eine Spalte mit einer mittelhellen Hintergrundfarbe packt.

    Ich finde übrigens, dass die Icons zu abstrahiert sind. Oder sagen wir: zu reduziert. Manche sind auch nicht eindeutig.

  • Ich denke, das macht die Sache nur noch schlimmer. Die Bedeutung der meisten Icons erfasse ich nicht so schnell wie die von Text. Die Icons der aktuellen Benutzeroberfläche sind zudem mehr oder weniger eindeutig. Was ist z. B. mit dem Icon für die Chronik/History? Wird mir die Zeit angezeigt, wenn ich darauf klicke? Selbst das Lesezeichen-Icon ist nicht wirklich eindeutig, weil es stark reduziert ist. Wäre der zweite senkrechte Strich nicht etwas kürzer, könnten das auch Domino-Steine sein. Ich habe außerdem die Assoziation "römische Zahl", obwohl so natürlich keine römische Zahl geschrieben wird. Oder das Icon "Zeige Tabs von anderen Geräten". Was soll das sein? Ein Hut?

    Der Schraubenschlüssel ist hingegegen eindeutig. Oder das Haus.

    Fairerweise muss ich sagen, dass es sauschwer ist, Icons mit einer einzigen Farbe eindeutiger zu gestalten. Es liegt in der Natur der Sache, dass das nicht bei allen Icons gleich gut gelingen kann.

    Wenn die Icons nicht in einem Menü liegen, machen sie natürlich Sinn. Da muss man halt Platz sparen. In den Menüs sind sie nur ablenkende Deko.

    Edit: Außerdem entsteht durch die Icons automatisch eine Hierarchie. Erstens, weil sie den Blick unterschiedlich stark auf sich ziehen. Das liegt u. a. daran, dass manche Icons deutlich flächiger gestaltet sind als andere. Letzteres könnte man beheben, indem man sie alle in eine Box mit Hintergrundfarbe packt. Zweitens, weil nicht alle Zeilen ein Icon haben. Bei den Text-Encoding-Optionen haben die Entwickler das Icon im Menü außerdem vergessen, vor die Zeile zu setzen.

    Es gibt bei der aktuellen Benutzeroberfläche eine ganze Menge Inkonsistenzen. Und manches, w. z. B. die Tablines, sind gestalterisch eine Katastrophe. Allerdings wurde die Benutzeroberfläche ja grundlegend überarbeitet und ich vermute, dass sie auch wieder besser werden wird. Es gab zwischendurch immer mal wieder gestalterische Ausreißer. Ich erinnere mich z. B. noch an einen ganz übel gestalteten Vor- und Zurück-Button vor etwa acht Jahren. Aber meiner Meinung nach war das Default-Theme meist ziemlich gut. Ich habe zwar in der Anfangszeit von Firefox immer mal wieder andere Themes ausprobiert, bin aber immer sehr schnell wieder zum Default-Theme zurückgewechselt.

  • Bücherregal (Bücher, Bibliothek) ist ja genau die gewollte Assoziation. Wenn es deine erste ist, erfüllt das Icon bei dir seine Funktion.

    Und das Sidebar-Icon sieht aus wie ein aufgeschlagenes Buch. Das würde ich auch eher mit "Lesemodus" assoziieren. Wobei die senkrechte Linie nicht genau in der Mitte sitzt. Aber nicht weit genug von ihr entfernt, um sie nicht trotzdem als Mitte wahrzunehmen. Dass die rechte Seite leer ist, spielt in dem Zusammenhang keine Rolle.

    Edit: Das Lesezeichen-Symbol. Ein fünfzackiger Stern funktioniert eigentlich nur, wenn das einzige Buch, das man kennt, die Mao-Bibel ist.

    Man könnte es vielleicht folgendermaßen visualisieren, wobei die Icons ja alle auf einer quadratischen Fläche Platz finden sollten und diese Fläche auch einigermaßen ausfüllen sollten. (Deswegen wird der Schraubenschlüssel z. B. diagonal dargestellt. Außerdem ist die Diagonale länger und man hat mehr Platz für die Gestaltung.)

    Ein hochformatiger Rahmen mit zwei waagerechten Strichen, die einen Buchtitel andeuten. An der Oberseite des Rahmens ragt ein stilisiertes Lesezeichen heraus. Wäre aber schwierig, das auf einer quadratischen Fläche unterzubringen.


  • Ich denke, das macht die Sache nur noch schlimmer. Die Bedeutung der meisten Icons erfasse ich nicht so schnell wie die von Text.


    Du hast mich, denke ich, missverstanden. Der von mir verlinkte Stil färbt die Symbole, ja. Aber was hindert dich daran, dort die von dir gesuchten Symbole herauszusuchen (bzw. wohl in deinem Fall kürzer diejenigen herauszunehmen, die Du nicht verändern willst) und – je nachdem, was (am besten) funktioniert – statt des fill-Codes ein

    • display: none
    • visibility: hidden
    • visibility: collapsed
    • opacity: 0
    • list-style-image: none
      oder
    • list-style-image: unset


    einzusetzen? Du solltest dann auch alles in einer Regel zusammenfassen können.

  • Aber was hindert dich daran, dort die von dir gesuchten Symbole herauszusuchen (bzw. wohl in deinem Fall kürzer diejenigen herauszunehmen, die Du nicht verändern willst)

    Erst mal muss ich ja wissen, welchen Elementen die einzelnen IDs zugeordnet sind. Das erschließt sich nicht unbedingt aus der Namen der IDs.

    Der toolbarbutton "#appMenu-fxa-label" ist z. B. der Button "Sign in to Sync".

    Deswegen werde ich auch jede ID in der Version, an der ich gerade arbeite, mit einem Kommentar versehen.

    Prinzipiell kann ich die Selektoren auch zusammenfassen. Z. B. so:

    CSS
    toolbarbutton[id^="appMenu"] > .toolbarbutton-icon {
    	display: none !important;
    }

    … und Ausnahmen dann wieder einblenden. Das mache ich vielleicht später auch. Im Moment liste ich lieber alle IDs, deren Eigenschaften ich verändern will, einzeln auf. Außerdem werde ich jede Panel-Ebene getrennt behandeln.

    Zitat
    Code
    visibility: hidden

    Klar, es gibt viele Möglichkeiten, Elemente auszublenden. In diesem Fall wäre es vielleicht von Vorteil, das mit visibility zu machen und dann den linken Abstand zum Panel zu verändern.

    In dem Zusammenhang kommt mir auch die Idee, dass es vielleicht sinnvoller wäre, die Icons nur dann auszublenden, wenn man mit der Maus nicht darüber fährt. Das ist einfach zu realisieren und hat den Vorteil, dass man zwar nicht durch die Icons irritiert wird, sie sich aber trotzdem merkt, weil der Zusammenhang zwischen Text und Icon erhalten bleibt. Der Abstand zum linken Rand wirkt dann zwar zu groß, aber das stört wahrscheinlich nicht sehr. Muss ich ausprobieren.

    Edit: Meine Anfangsschwierigkeit bestand wie gesagt darin, dass ich nicht wusste, wie ich die Panels offen halte, während ich die Buttons inspiziere. Wie ich dann herausgefunden habe, geht das mit dem aus vier Rechtecken bestehenden Button oben rechts in der Browser-Toolbox.

  • Ist zwar nicht genau das, was Du suchst, aber evtl. gibt mein CSS-Schnipsel einen kleinen Anhaltspunkt.
    Ich habe bei mir alle Icons ausgeblendet, bis auf die Icons der aufgerufenen Seiten in der Tabbar. Meine Tabs sind also nur so breit, wie die Icons.
    Die Ansicht habe ich dann genau ausgerichtet, damit es "ordentlich" aussieht.


    Sieht dann so aus:
    [Blockierte Grafik: http://fs1.directupload.net/images/180127/temp/lwcsbfry.png]

    Das Hamburger Menü habe ich ganz ausgeblendet, davon brauche ich nichts. Wenn ich den Inspector nutzen will, kann man den schnell über "Anpassen" einfügen oder über die Tastenkombi aufrufen.
    Wie gesagt, nicht ganz das von Dir Gesuchte, aber vielleicht hilfreich.

  • Die Favicons werde ich behalten. Ich überlege nur gerade, weshalb mich die Favicons weniger irritieren als die aktuellen Firefox-Icons, denn die Firefox-Icons harmonieren immerhin miteiander. Favicons von unterschiedlichen Websites harmonieren zumindest farblich nicht unbedingt miteinander, tun sie sogar meistens nicht. Tendentiell scheinen Favicons aber flächiger zu sein. Und sie sind etwas kleiner als die Firefox-Icons. Ich hatte die Größe der Firefox-Icons gestern auch mal testweise in den Menüs auf Favicon-Größe reduziert und sie mit einer Hintergrundfarbe ausgestattet. Dadurch habe ich sie als Listenpunkte wahrgenommen und mich weniger von ihrer Symbolik abblenken lassen. Allerdings lassen sich die Icons nicht verkleinern, ohne dass sie unscharf wirken.

    Wie man auf die Idee kommen kann, sich keinen Text mehr auf den Tabs anzeigen zu lassen, kann ich nicht nachvollziehen. Da würde ich ganz schnell den Überblick verlieren. Was machst du denn, wenn du z. B. Seiten mit unterschiedlichem Inhalt, die aber dasselbe Favicon haben, geöffnet hast?

  • Na ja, jeder nutzt den Fox ja nach seinen persönlichen Vorstellungen und nach dem eigenen Geschmack.
    Mich z.B. würde der Text ungemein stören, und da ich nie mehr als höchstens drei Tabs geöffnet habe, komme ich auch nicht durcheinander.
    Daß unterschiedliche Seiten gleiche Favicons haben, habe ich noch nicht gesehen.
    Wie gesagt, Geschmacksache.

  • Daß unterschiedliche Seiten gleiche Favicons haben, habe ich noch nicht gesehen.

    Mit Seite ist eine (Web)seite einer Website gemeint.

    Der Duden sagt, Website sei Femininum. Sollte umgegendert werden. Ausnahmsweise. Da hätte das mal Sinn! :D

    Echt ärgerlich, dass Site und Side fast gleich klingen und Seite (im Buch oder Web) auf Englisch Page heißt.

    Ich muss mir selbst wieder angewöhnen, genauer zwischen den Begriffen zu unterscheiden. Manchmal sage ich auch Webseite, obwohl ich Website meine.

  • Mit Icons das ist Gewöhnungs- und Erfahrungssache. Schau dir mal play, pause und stop an... die sagen ja fast gar nichts aus und trotzdem kennt sie jedes Kind. Aber Dominosteine, Uhrzeit... war hoffentlich ironisch. Der Schraubenschlüssel könnte ja auch ein Reset oder "Hilfe" sein und das Haus ein Link zur Mozilla-Seite und das Puzzleteil bringt dich zu den integrierten Spielen und...

    Zitat

    weil sie den Blick unterschiedlich stark auf sich ziehen


    Absicht. Allerdings wäre es mir auch lieber, wenn man mir die Gewichtung überlassen hätte.

    Zitat

    Die Bedeutung der meisten Icons erfasse ich nicht so schnell wie die von Text.


    Bei mir genau umgekehrt. Nach einer Woche lese ich überhaupt keinen Text mehr. Ich weiß dann schon, ob der Menüpunkt eher unten oder eher oben ist und anhand des Icons geht's dann auch ruckzuck. Vielleicht habe ich früher zu viel Counterstrike gespielt ;)

    Habe mir die Menü-Icons ebenfalls mit Aris' Code eingefärbt, damit geht's noch schneller.

    Zitat

    weil nicht alle Zeilen ein Icon haben


    Du kannst mit CuteButtons allen Items ein Icon verleihen. Hover ist auch eingebaut, falls gewünscht. Du kannst eine .png Datei auch leeren, sodass du dann eben den Effekt hast, nur beim drüberfahren ein Icon einzublenden.

    Zitat

    Wobei die senkrechte Linie nicht genau in der Mitte sitzt.


    Jetzt wird's interessant :D
    Das ist der Auflösung von 16x16 geschuldet. Zieht man den schwarzen Rand ab, dann bleiben innen nur noch 12 Pixel. Und da gibt es eben keine Mitte. Linke Seite 5 px, dann der Strich, dann rechte Seite 6 px. Zwei Stiche in die Mitte ist zu krass und links 6, rechts 5 macht das Ganze noch dunkler und damit schwerer.
    Schiebt man den Strich noch weiter nach links (um Sidebar zu charakterisieren), dann bleiben nur noch 4 Pixel. Dort noch "Zeilen" für die einzelnen Items einzufügen ist unmöglich, das wären dann nur noch die beiden mittleren Pixel. Zwei Pixel nebeneinander machen beim besten Willen keine Zeile, 3 dafür so halbwegs. :)
    Für Sidebar trotzdem ein unglückliches Icon. Ich benutze aber eh nur strg + b.

    Der Stern ist dafür überall standard für "merken", Lesezeichen oder Favoriten. Alternativ kenne ich nur Herzchen, das aber deutlich seltener.

    Ich musste mich selbst schon einige Stündchen mit solchen Icons und Piktogrammen (von Programmiererseite) herumschlagen, daher meine längere Antwort :)

    Gruß,
    BlackRitus


  • Absicht

    Meiner Meinung nach eher als unbeabsichtigte und in diesem Fall zwangsläufige Folge einer an sich sinnvollen gestalterischen Selbstbeschränkung. Ich werde das mal anhand des Puzzle-Teils illustrieren: Es wirkt flächiger als die meisten anderen der Icons. Hätte man das bei der Größe der Icons vermeiden können? Man hätte versuchen können, es nicht schwarz auszufüllen, also nur die Außenlinie der Form zu zeigen. Pi mal Daumen stünde einem dann für die Außenlinie eine Breite von maximal zwei Pixeln zur Verfügung. Bei einer größeren Breite würde sich die Außenlinie an den Engstellen selbst berühren. Schon bei einer Breite von zwei Pixeln käme sich die Außenlinie an den Engstellen zu nahe. Aber bei einer Breite von einem Pixel würde das Icon wieder aus den anderen hervorstechen, weil keines der anderen von einer ein Pixel breiten Linie dominiert wird.

    Der Verzicht auf unterschiedliche Farben innerhalb eines Icons hat Vor- und Nachteile:
    + Je neutraler die Benutzeroberfläche, desto größer die Wahrscheinlichkeit, dass sie nicht vom Inhalt ablenkt.

    Du warst doch bestimmt schon mal in einem Geschäft für Kunstdrucke/Poster, oder? Was man da häufig sieht, sind bereits gerahmte Bilder, deren Rahmen selbst bunt gemustert sind. Bilderrahmen sollen aber den "Farbträger" (z. B. Papier) nicht nur vor Umwelteinflüssen schützen und in einer Ebene stabilisieren, sondern sie sollen sie von der Wand, an der sie aufgehängt werden, abgrenzen.

    Deswegen finde ich es auch völlig unsinnig, sich die Benutzeroberfläche seines Browsers knallbunt einzufärben bzw. sie selbst zum Inhalt zu machen. Ich lege selbst wert auf meine Individualität. Aber manchmal ist eine gewisse Uniformität (im weitesten Sinne eine bewusste Selbstbeschränkung) zweckdienlicher, funktioneller, praktischer u. s. w. Ich denke, Mozilla sieht das in Bezug auf die Default-Themes ähnlich, ist aber bei der aktuellen Benutzeroberfläche möglicherweise ein Stück zu weit gegangen. Da bin ich mir noch nicht sicher.

    - Auf einer Fläche von 16 px × 16 px hat man bei einem Verzicht auf unterschiedliche Farben nur sehr wenig gestalterischen Spielraum. Das spielt keine Rolle, wenn nur wenige Icons gestaltet werden müssen. Aber Firefox hat halt immer mehr Funktionen, die mittels eines Klicks auf einen Button erreicht werden können und sollen. Und die Bedeutung der Mehrheit der Icons erschließt sich mir nicht aus dem Icon selbst. Im Falle des Library-Icons war meine erste Assoziation nicht "Bücher im Regal". Mit ein paar Farben wäre es möglich gewesen, das Icon eindeutiger zu gestalten. Und nein, es war keine Ironie, als ich schrieb, ich assoziiere das Symbol eher mit Dominosteinen oder einer römischen Zahl.

    Ich musste mich selbst schon einige Stündchen mit solchen Icons und Piktogrammen (von Programmiererseite) herumschlagen, daher meine längere Antwort

    Wie du siehst, habe ich mich für die längere Antwort revanchiert. Und ich bin noch nicht mal fertig mit der Antwort, sondern nur müde … Auf jeden Fall ist deine Antwort interessant. Auch deshalb, weil ich mich frage, ob es nicht eine Möglichkeit gibt, herauszufinden, was Menschen in Bezug auf ihre Wahrnehmung gemeinsam haben und eine Benutzeroberfläche quasi nach wissenschaftlichen Kriterien zu gestalten. Es gibt ja durchaus Farben und Formen, auf die die meisten Menschen ähnlich reagieren, z. B. solche, die Gefahr signalisieren, Bilder eben, die wir im Laufe unserer Evolution gespeichert haben oder die wir uns schon in den ersten Lebensjahren einprägen.

  • Erst mal danke auch für deine Antwort :)

    Zum Puzzleteil-Beispiel: Das ist (für mich) einer der meistgenutzten Menüpunkte und etwas, wodurch sich der FF auszeichnet, daher ist das schon gut so, wenn das Gewicht hat.

    Zitat

    Hätte man das bei der Größe der Icons vermeiden können?


    Kaum, die Formen sind zu filigran.

    Zitat

    Bei einer größeren Breite würde sich die Außenlinie an den Engstellen selbst berühren


    Sie berühren sich schon bei 1px: [Blockierte Grafik: https://i.imgur.com/pwuKs89.png]

    Zitat

    Je neutraler die Benutzeroberfläche, desto größer die Wahrscheinlichkeit, dass sie nicht vom Inhalt ablenkt.


    Ich sehe das Menü nur, wenn ich draufgeklickt habe und damit ist meine Aufmerksamkeit gewollt dort und nicht abgelenkt.

    Dass manche Punkte kein Icon haben, hebt sie ab, richtig. Die haben eben nur die meistgenutzten Sachen mit Icons versehen. Ist nachvollziehbar, muss man nicht mögen.

    Bei den Einfärbungen handelt es sich aber um unbestritten nützliches Color Coding und nicht um das Abheben von irgendwas anderem. Den roten Knopf zu finden geht einfach schneller als 5-6 Listenpunkte zu überfliegen.

    Zitat

    Auf einer Fläche von 16 px × 16 px hat man bei einem Verzicht auf unterschiedliche Farben nur sehr wenig gestalterischen Spielraum.


    Oooh ja, was habe ich früher vor so Icon-Generatoren gesessen und einzelne Pixel verschoben. Oder vielleicht erinnert sich noch jemand an die Standby-Bilder auf den Handys :)

    Zitat

    die Bedeutung der Mehrheit der Icons erschließt sich mir nicht aus dem Icon selbst.


    Ist wie gesagt Erfahrungssache. Das schließt mit ein, dass man vielleicht beim ersten mal Draufklicken erst "erfahren" muss, was sich dahinter verbirgt und dann klappt's auch wunderbar. Siehe z.B. auch das Icon für "teilen" bzw. "share online", das hätte vor ein paar Jahren kein Mensch erkannt und heute ist es Standard. Alleine durch's Ausschlussprinzip kommt man doch eigentlich drauf. Verschieden hohe Dominosteine ergeben keinen Sinn. Römische Zahlen habe ich auch noch nirgends gesehen und wüsste nicht, wofür eine völlig falsche Vier stehen sollte.
    Dann muss man eben 1x draufklicken oder einfach den Text daneben lesen (oder Tooltip).

    Icons sind sehr sinnvoll, jedes Betriebssystem benutzt sie, jede Webseite hat eins, sie erleichtern das Navigieren.
    Selbst wenn das eine zusammenhanglose Form ist: Sie hat Wiedererkennungswert und das zählt. Dass die Form vielleicht noch etwas bedeutet, ist dabei nur Gedächtnisstütze.
    Siehe auch Design von Markenlogos (da hab ich jetzt wieder ein Fass aufgemacht :)

    Zitat

    ob es nicht eine Möglichkeit gibt, herauszufinden, was Menschen in Bezug auf ihre Wahrnehmung gemeinsam haben und eine Benutzeroberfläche quasi nach wissenschaftlichen Kriterien zu gestalten. Es gibt ja durchaus Farben und Formen, auf die die meisten Menschen ähnlich reagieren, z. B. solche, die Gefahr signalisieren, Bilder eben, die wir im Laufe unserer Evolution gespeichert haben oder die wir uns schon in den ersten Lebensjahren einprägen.


    Auf jeden Fall ist das interessant! Und wird immer wieder sicherlich schon versucht, allerdings bin ich der Meinung, dass das Meiste erst erlernt ist. Es gibt sicherlich Ecken auf der Welt, in denen man ein weißes Ausrufezeichen auf rotem Grund nicht für ein Warnschild hält, einen stilisierten Totenkopf schon eher.
    Wenn Mozilla jetzt sieht "Aha, dort wird oft draufgeklickt, deshalb pappen wir da ein Icon dran, um es dem Benutzer zu erleichtern, die Funktion überall in der Benutzeroberfläche wiederzufinden", dann ist das vielleicht nicht unbedingt wissenschaftlich, aber dennoch zielführend.

    Gruß,
    BlackRitus

  • So sieht es aus ohne die Icons. Ichhabe sie jetzt in allen Menüs ausgeblendet,auch im Überlauf-Menü. Und ein paar Bottons habe ich in den Menüs komplett ausgeblendet. Recent Highlights, Recent Bookmarks und Recent History muss ich noch ausblenden. Das nutze ich nie.

    Exit muss ich noch ausblenden, sehe ich gerade.

    [attachment=1]1.png[/attachment][attachment=0]2.png[/attachment]

  • Versuche


    (Quelle: simpleMenuWizard)

    Gruß,
    BlackRitus

  • Danke. Hatte ich schon erledigt. Ist bei mir so ähnlich. Den General-Sibling-Combinator (Tilde) sollte ich mir aber mal merken.

    Edit:

    U. a. ist "#appMenu-library-recentHighlights" im App-Menü schon die zweite Ebene. Manche oder alle Toolbarbutton-IDs, die im App-Menü über der ersten Ebene liegen, betreffen auch die entsprechenden Menüs, die sich bei den Buttons öffnen, die direkt auf der Toolbar liegen. Deswegen habe ich für die zweite Ebene den Selektor "#appMenu-popup" vorgeschaltet.

  • Dass die Form vielleicht noch etwas bedeutet, ist dabei nur Gedächtnisstütze.

    Auf irgend einem Forum für Typografie, wahrscheinlich Typophile.com, hatte ich vor einiger Zeit gesehen, dass jemand an einer Schrift arbeitet, die sich an dem Stil der Beschriftung einer Konsole aus dem Film "Prometheus" orientiert. Das sah ziemlich gut aus. Man könnte natürlich so eine Schrift als Webfont in die userChrome.css einbinden und sich anstelle der Icons Zeichen aus der Schrift anzeigen lassen. Es gibt auch reine Symbolfonts, die sehr gut gestaltet sind. Vielleicht ist das überhaupt eine gute Idee, die Icons als Font einzubinden. Es gibt ja auch Pixelfonts, die für einen bestimmten Schriftgrad (in Pixeln) optimiert sind. Oder der Font muss einfach gut gehintet sein. Und SVG-Fonts gibt es auch, fällt mir gerade ein.

    Siehe z.B. auch das Icon für "teilen" bzw. "share online", das hätte vor ein paar Jahren kein Mensch erkannt und heute ist es Standard.

    Also ich kenne zwar das Icon, aber ich kannte seine Bedeutung bislang nicht. Das liegt wahrscheinlich daran, dass ich zwar auf Foren, aber nicht in sozialen Netzwerken w. z. B. Facebook aktiv bin. Ich besitze auch kein Smartphone o. ä., sondern nur ein altes Barren-Handy mit Tastatur unter dem Display. Deswegen bin ich mit einigen der Kommunikationsformen der letzten Jahre gar nicht vertraut, auch nicht mit ihrer Symbolik.

    Ich wußte also nicht, dass es "(Miteinander) teilen" bedeutet. Ich habe Folgendes mit dem Icon assoziiert:
    Ein Netzwerk. Eventuell zwei Köpfe, die sich über einen dritten miteinander in Beziehung setzen.

    Edit: Ich habe noch eine Buchempfehlung für dich:

    Der Mensch und seine Zeichen von Adrian Frutiger. Kostet nur 6 Euro.

    In dem Buch gibt es auch längere Passagen über die Wahrnehmung von Leerraum, offene und geschlossene Zeichen, die Linie als die Summe der Positionen eines sich bewegenden Punktes, die Schwierigkeit, Punkte so zu verteilen, dass ihre Verteilung zufällig aussieht u. s. w.