Designvergleich von Google+ und Facebook

29.07.14, 10:38

Unterschiede in Ergonomie und Gestaltung

Design ist Kommunikation, und wo herrscht mehr Kommunikation als in den sozialen Medien? Die größten sind Facebook und Google+ mit jeweils über einer Milliarde Nutzer. Facebook hat dabei die weitaus größere aktive Nutzerschaft, auch weil es bereits 2004 gegründet worden war. Google+ stammt aus 2011 und hat sich vom Start weg an die Grundfunktionen von Facebook angelehnt, darauf basierend aber andere Ziele angestrebt, weil es die diversen Googledienste zusammenfassen und Neue kreieren wollte. Wir vergleichen die Unterschiede und Gemeinsamkeiten der beiden sozialen Netzwerke in Design und Funktionalität.

Interface-Design: Die neue Einfachheit

Das Interface-Design hat sich von der Komplexität in die Einfachheit evolutionär gewandelt. Dabei ist die Vereinfachung bei Apple und auch bei Google noch nicht ganz so weit fortgeschritten, Facebook hat einen gewaltigen Schritt in Richtung Flatdesign gemacht, das heißt, es hat seine Icons einfarbig ohne Schattierungen, Spiegelungen und sonstige Dreidimensionalität gestaltet. Google hat seine ikonografische Sprache ebenfalls stark vereinfacht, arbeitet aber noch mit moderaten Verläufen und Schattierungen.

Google setzt auf die Vereinheitlichung eines übergreifenden Corporate Designs

Google hatte im Laufe der Jahre eine Fülle an Webdiensten neben seiner Suchmaschine betrieben, die alle weitestgehend autark nebeneinander her liefen und unterschiedliche Designsprachen hatten. Das wurde dadurch verstärkt, dass Google laufend neue Dienste wie zum Beispiel YouTube hinzukaufte. Mit dem Erscheinen von Google+ wurde gleichzeitig die übergreifende Designanpassung aller Dienste in mehreren Teilschritten betrieben. Von Google+ oder jedem anderen Google-Dienst kann man jeweils alle anderen aufrufen. Ein entsprechendes Ausklappmenü sieht dann so aus:

Ausklappmenü Google+

Oben: Eine Übersicht über einen Teil der Google-Dienste. Zu sehen ist, dass die Icons zum Teil „flat“ sind (Suche, G+, Blogger oder YouTube), zum Teil aber auch mit Verläufen (Play) oder Schattierungen (Books, Shopping) gestaltet sind.

Funktionaler Unterschied zwischen Facebook und Google+

Während Facebook von Anfang an Zusatzprogramme/Apps integriert hatte, ist Google einen anderen Weg gegangen: Es bietet eine Fülle unterschiedlichster Dienste, zu denen z.B. auch Google Mail (Gmail) oder Google Maps gehören, und führt sie über Google+ zusammen. Einmal mit einem Passwort angemeldet, kann man alle diese Dienste nutzen. Deshalb wird gesagt, dass Facebook ein klassisches soziales Netzwerk ist, während Google+ eine Art „sozialer“ kommunikativer Zentrale für die unterschiedlichen Google-Dienste ist.

Facebook Messenger reduziert und mit linearen Illustrations-Icons

Facebook hat seinen „Messenger“ einer radikalen Vereinfachung unterzogen und auch im „PagesManager“ kommt ein klares Flat-Design zum Tragen. Geht es um größere Icons werden die Illustrationen linear dargestellt, was sich im Übrigen mit Apples aktueller Design-Auffassung deckt. In iOS7 sind Nutzer-Dialoge und Unter-Menüs mit dünnstrichigen betont simplen Icons unterlegt, während Google+ auch im kleinen eher flächige und unterschiedlich farbige Darstellungen nutzt.

Facebook Pages Manager

Oben: Das Servicetool „Facebook Pages Manager“, das für die Administration der Unternehmensseiten zuständig ist, erstrahlt in Einfachheit und Übersichtlichkeit.

App Facebook Pages: Konzentration auf das visuell Wesentliche

Die neue Facebook-App „Paper“ schließlich hat ein flächiges leicht schattiertes Menü am unteren Seitenrand. Sie ist im Moment als Ergänzung zur eigentlichen Facebook-App zu sehen, wirkt durch die nachrichtenorientierten Inhalte aber seriöser. Auch hier wurde alles visuell Unnötige weggelassen, damit der Nutzer sich schnell zurechtfindet und das Wesentliche im Blick hat. Derzeit ist „Paper“ aber noch nicht in Deutschland erhältlich.

Facebook Pages

Oben: Die neue App „Facebook Paper“ setzt auf hochwertige Inhalte und richtige Storys fernab des „Katzen-Contents“.

Google+App und Facebook-App im gestalterischen Wettstreit

Obwohl die Headergrafik bei Google+ etwas höher ist als bei Facebook, beginnt der erste reguläre Beitrag bei Google+ früher und ist deshalb ansatzweise noch im ersten Screen zu sehen. Facebook hat zwei Navigationsleisten integriert, zeigt zur Verortung des Unternehmens den Ausschnitt einer Landkarte und beansprucht mehr Platz für die Statistik der Seite. In der Google+App erscheint die Landkarte erst bei Klick auf die Adresse.

Mobile Startscreens von Facebook und Google+

Oben: Die Startscreens der beiden Apps für Facebook (links) und Google+ (rechts).

Richtlinienkompetenzen für das Corporate Design

Für jeden roten Faden in der Gestaltung, sei es die kommunikativ-visuelle Linie eines Unternehmens in der Praxis oder sein Corporate Design, gibt es ein Leitmedium. Das ist so etwas wie der „Primus inter Pares“, der „Gleichere unter Gleichen“, von dem das Design ausgeht und auf alle anderen Medien übertragen wird. Als das Web noch kaum präsent war, wurden Corporate Designs in erster Linie für Drucksachen und erst später für die Erfordernisse von Bildschirmen und audiovisuellen Medien ausgelegt. Die grundlegenden Gestaltungsparameter kamen also aus dem Print-Design. Das war selbst in den Anfangstagen des Web-Designs so, auch wenn viele Webdesigner ihren eigenen Weg gingen und den damit begründeten, dass die aus der Printwelt kommende vorhandene Gestaltungssystematik nicht richtig für die Erfordernisse des Screendesigns wäre. Denn eine Webseite gleicht ihre Virtualität gegenüber beispielsweise einer Broschüre durch einen höheren Grad an Strukturiertheit aus. Je weiter der Siegeszug der elektronischen Medien ging, desto dominanter wurde ihr Einfluss auf das Corporate Design eines Auftraggebers zumal Screen-Design grundlegend als innovativer galt.

Design-Trends durch Virtualisierung

Es konnte also passieren, dass das Design einer Webseite und ihr Corporate Design zur gestalterischen Leitlinie auch für den Printbereich werden konnten. Mit Fortschreiten der Virtualisierung der Kommunikation sind zwei weitere Trends entstanden:

a. Jenseits der eigenen Website: Partizipation an sozialen Netzwerken

Zum einen haben größere Unternehmen – gerade Konsumentenmarken – ihre Social-Media-Präsenzen beträchtlich ausgebaut, das heißt dass dort nicht nur die Gestaltungsparameter des Unternehmens den Ausschlag geben, sondern sich in den gestalterischen Rahmen von Facebook und Google+ einfügen.

b. Desktop versus Mobile

Zum anderen haben mobile Geräte mit kleineren Bildschirmen noch einmal das Mediendesign insgesamt verändert – hin zu mehr Klarheit, Einfachheit, Prägnanz und Übersichtlichkeit. Die Miniaturisierung des Dargestellten an kleinen Bildschirmen hat zu einem neuen Nachdenken darüber geführt, wie Informationen aufbereitet und vermittelt werden müssen, damit sie verstanden werden und Prozesse in Gang setzen. Gab es vorher eine Desktopversion des sozialen Netzwerkes, die sich teils erheblich von der mobilen Version unterschieden hatte, wurden statische Webpräsenz und Mobil-App visuell-gestalterisch angeglichen, wobei die gestalterische Richtlinienkompetenz immer mehr von der Mobilversion ausgeht, weil sie einfacher ist und die Nutzungsdauer mobiler Geräte immer weiter zunimmt. Das gilt sowohl im Privatbereich als auch im Businessbereich. Auf kleinen Bildschirmen muss man sich auf das Notwendige beschränken, alles gestalterisch Überflüssige wird also weggelassen. Dieses reduktionistische Denken wirkt sich auch beim Re-Design manch aufgeblähter Desktopanwendung positiv aus.

Facebook in der Desktop-Browser-Version

Oben: Facebook in der Desktop-Browser-Version: Einspaltige Postings, Informationen links in der Randspalte und rechts eine schmale Spalte zum weiteren Navigieren.

Browserversion von Google+

Oben: Die Browserversion von Google+ bietet Mehrspaltigkeit, die sich über eine Voreinstellung aber auch auf einspaltig umstellen lässt. Je nachdem, wie breit man das Fenster zieht, erreicht man eine Zweispaltigkeit oder maximal eine Dreispaltigkeit.

Google und seine sozialen Netzwerke

Nachdem Facebook als Netzwerk der privaten Kommunikation aufgestiegen war, konnte Google nach zwei gescheiterten Versuchen („Wave“ und „Buzz“) und einem partiell erfolgreichen („Orkut“ mit Schwerpunkt in Südamerika) mit Google+ ein erfolgreiches Konzept für ein soziales Netzwerk an den Start bringen. Während man bei Facebook mit Menschen kommuniziert, die man im realen Leben kennt, kann man auf Google+ einfach fremde Menschen kennenlernen und sich mit ihnen austauschen. Bedeutend sind bei Google+ inzwischen zum Beispiel nicht nur die technikaffine Community, sondern auch Fotografen. Das kommt nicht von ungefähr, stellt Google+ doch immer wieder neue Features für Fotografen zur Verfügung. Das sind nicht nur der große Speicherplatz für Fotos, sondern auch Automatikfunktionen, die Bilder animieren oder Fototagebücher erstellen. Eine ausgefeilte Bildbearbeitung ist in Google+ integriert. Fotografen wurden von Anfang an auch deshalb bei Google+ heimisch, weil die Bilddarstellung hier weitreichender und komfortabler war und der Fotodienst „Picasa“ später in Google+ integriert wurde.

Kreisverwaltung: Google mit neuem Look & Feel

Google+ stellte von Anfang an Bilder weitaus größer dar als Facebook, zeigte animierte GIFs oder bot Services wie das Videokonferenzsystem „Hangout“. Augenfällig waren aber die Kreise, die optisch anschaulich zeigten, wen man in welchen (Personen-)Kreisen hatte und mit welchem Kreis man welche Nachrichten teilen wollte. Facebook hatte daraufhin vom Look&Feel her nachgezogen, seine Einstellungen vereinfacht, mehr Transparenz und Klarheit in das Design seines Netzwerkes gebracht, seine Bilder ebenfalls vergrößert und weitere Dienste integriert. Für den Nutzer bedeutet die Konkurrenz zwischen Facebook und Google mehr Innovation und permanente Optimierung beider Dienste.

Kreisdarstellung von Google+

Oben: Google+ wurde bezüglich seines Interface-Designs vor allem über seine Kreisdarstellungen bekannt. Oben befinden sich Personen, die man in unterschiedliche Kreise ziehen kann. So stellt man sicher, dass ein definierter Personenkreis nur bestimmte Informationen sehen kann.

Soziale Medien fördern und verändern die Kommunikation

Google+, das den Vorteil hatte, von Grund auf neu starten zu können, ohne aufwendig Korrekturen an Bestehendem vornehmen zu müssen, war von Andy Hertzfeld gestaltet worden, der zwischen 1979-1984 zum Apple-Macintosh-Team gehört hatte. Er war dabei federführend bei der Entwicklung der Benutzeroberfläche gewesen, die in den 80er-Jahren im Grunde alles mit begründete, was man heute an grafischen Benutzeroberflächen kennt. Kein anderes User-Interface war stilbildender und einflussreicher als dieses. Seine große Erfahrung konnte er bei Google+ einbringen. Google+ schuf mit den Kreisen etwas Neues, das Facebook dazu brachte, dass es die Funktionalitäten des Teilens von Inhalten mit unterschiedlichen Zielgruppen ebenfalls einführte und ausbaute. Von einer gewissen Klarheit aber auch grafischen Opulenz (die Kreise und anderes sind z.T. animiert) ging die Reise immer weiter hin zu einer Vereinfachung des Designs.

Icons der Hauptnavigationen von Google+ und Facebook

Oben: Die Icons der Hauptnavigationen von Google+ (oben) und Facebook (unten) ähneln sich stark. Bei Facebook sind sie flächiger, bei Google+ zum Teil linear (Benachrichtigungs-Glocke und Personen).

Fazit: Weniger ist mehr – vor allem im Design

Google+ hat designmäßig entscheidende Impulse in die Welt der sozialen Medien gebracht und in vielerlei Hinsicht den Quasi-Monopolisten für die private Kommunikation Facebook aufgeschreckt. Facebook hat dadurch seine Struktur und sein Design vereinfacht und verbessert. Ebenso hat sich übrigens Twitter den beiden Mitstreitern visuell angepasst. Die Linie eines übersichtlichen, reduzierten Designs, das die mobile Welt mehr und mehr durchdringt, schwappt zurück in die Browserwelt und verändert auch ganz allgemein das Interface-Design von Anwendersoftware. Design kommt wieder mehr auf den Punkt, wird prägnanter und deutlicher, anstatt sich in Spiegelungen, Effekten und 3D- Simulationen zu ergehen. Das ist gut für den Nutzer, der sich innerhalb einer immer größeren Informationsflut so wieder besser orientieren kann.

Mobile Android-Menü-Leisten von Google+ und Facebook

Oben: Die Menü-Leisten der Smartphone-Apps für Android von Facebook und Google+ im Vergleich.

Die Hauptnavigationsleiste von Google+ (rot) mit Profilbild, Nutzername, Personensuche und Benachrichtigungsglocke zeigt auf dieser obersten Ebene nur das Notwendigste. Darunter die Facebookleiste (blau) mit dem „Mehr“-Menü für weitere Funktionen, das sich bei Google+ in einer zweiten Navigationsleiste befindet, der Suchfunktion und dem Personenbutton. Die beiden Leisten darunter befinden sich auch bei der App am unteren Bildrand. An diesen beiden Leisten ist deutlich zu sehen, dass Facebook (unten) in seiner Formensprache reduzierter und weniger farbig vorgeht, während Google+ seine Icons gerne zum Teil räumlicher gestaltet (Fotos) und vor allem farbig.

Kommentar hinzufügen

Mit der Nutzung dieses Formulars erklärst du dich mit der Speicherung und Verarbeitung deiner Daten durch diese Website einverstanden.