Mit dieser kostenlosen Chrome-Erweiterung erhalten Sie ein flaches Facebook-Redesign
Nach 10 Jahren ist Facebook zu einer der am häufigsten genutzten Websites geworden. Warum sieht es also immer noch 10 Jahre alt aus?
Abgesehen von allen anderen Faktoren ist die Kritik an Facebooks veraltetem Desktop-Design bekannt. Einige Designer fragen ' Warum ist das Design der Facebook-Desktop-Site so schlecht? 'und argumentieren, das sieht klug aus, Google+ und Flipboard sind Facebook um Jahre voraus - was in diesem Fall 'aktuell' bedeutet.
Aus diesen Gründen habe ich beschlossen, Facebook ein neues Gesicht zu geben. Was als lustiges Nebenprojekt begann, entwickelte sich schließlich zum freien Facebook Flat Chrome Erweiterung Ich präsentiere unten.
Das Ziel war die Modernisierung von Facebook und heute das flache Design - oder genauer gesagt ' flach 2.0 '- sieht das Teil. Als kostenlose Anleitung Webdesign-Trends 2015 & 2016 durch das Prototyping-Tool UXPin Das flache Design passt aus mehreren praktischen und ästhetischen Gründen zur aktuellen Weblandschaft.
Flat bietet einen Leistungsvorteil. Die einfachen Grafiken machen die Ladezeit auf Mobilgeräten und Desktops zum Kinderspiel, insbesondere im Vergleich zu der visuell komplexeren Konkurrenz.
Diese schnellere Ladezeit kombiniert mit einem weiteren Vorteil des flachen Designs, der einfachen Anpassung an verschiedene Bildschirmgrößen, um den Designstil unglaublich reaktionsschnell zu gestalten. Seitdem Die Anzahl der mobilen Benutzer war höher als die der Desktop-Benutzer Das flache Design hat aufgrund seiner geräteunabhängigen Erfahrung an Dynamik gewonnen.
Schließlich kann flaches Design den komplexen Inhalt von Facebook in ein einfaches, leicht verständliches Layout reduzieren.
Bei einer Website wie Facebook passiert viel auf dem Bildschirm, sodass flaches Design die naheliegende Wahl ist, um diese Inhalte so zu organisieren, dass sie nicht überwältigend erscheinen. Das flache Design ist nicht nur eine ästhetische Wahl, sondern ermöglicht es den Benutzern, die Daten zu interpretieren und schneller zu finden, was sie benötigen, was die Benutzerfreundlichkeit erhöht.
Nicht dass die Ästhetik vernachlässigbar wäre - das wissen wir Je besser ein Produkt aussieht, desto besser werden Benutzer erkennen, dass es funktioniert .
Sie müssen nicht weiter als Apple suchen, um Unterstützung für flaches Design zu erhalten. Sie gaben ihren typischen Skeuomorphismus für das flach inspirierte Erscheinungsbild der neuesten Versionen von iOS auf.
Aktualisierung des Facebook-Designs
Wie ich oben erwähnt habe, ist eines der großen Probleme mit der Benutzeroberfläche von Facebook übermäßiger Inhalt, der alle miteinander konkurrieren. Als ich die Site kritisch untersuchte, schien es, dass ein Großteil dieses Inhalts unnötig war, zumindest um auf der Seite immer präsent zu sein.
Um den gewünschten Artikel zu finden, müssen Sie ein Meer ähnlicher Artikel in der Art 'Where's Waldo' scannen, was für den Zugriff auf Ihre eigenen Inhalte frustrierend sein kann. Je mehr Optionen der Benutzer durchsuchen muss, desto mehr kognitive Belastung wird erzeugt, wodurch die UX nur verzögert wird. Ihr Navigationssystem ist zottelig und benötigt eine Verkleidung.
Sicher, viele dieser Inhalte - Zeitleiste, Fotos, Spiele usw. - sind relevant. Aber auf der anderen Seite ist vieles nicht. Aber wie gestaltet man eine Benutzeroberfläche neu, um alle Benutzer eines der unterschiedlichsten Benutzergruppen im Internet zufrieden zu stellen?
01. Die Illusion der Unsichtbarkeit
Beim Entwerfen einer neuen Benutzeroberfläche müssen Sie die Motivationen des Benutzers neben allen finanziellen Interessen berücksichtigen. Ein beliebter, aber gefährlicher Gedankengang ist, dass ein Unternehmen, um bemerkt zu werden, die Aufmerksamkeit auf sich selbst lenken muss und großartige neue Funktionen bietet. Der Benutzer tendiert jedoch dazu, genau das Gegenteil zu bevorzugen.
Die nützlichsten Benutzeroberflächen sind diejenigen, die Sie vergessen haben. Wie eine unsichtbare Hand führen sie den Benutzer so einfach wie möglich zu seinen Zielen. Dies ' Rutschiges UX 'ist darauf ausgelegt, dass der Benutzer seine Probleme löst. Ohne Ablenkung kann sich der Benutzer auf die jeweilige Aufgabe konzentrieren.
Fragen Sie sich jedes Mal, wenn Sie erwägen, Ihrer Benutzeroberfläche neue Elemente hinzuzufügen, ob der Benutzer sie wirklich benötigt.
Für Facebook besteht das Hauptziel des Nutzers darin, den Inhalt zu finden, der ihm am wichtigsten ist. Um dies zu erleichtern, habe ich die rechten Statistiklisten wie 'Letzte Beiträge' und 'Trend' entfernt: Dies sind sekundäre Funktionen, die von der primären ablenken. Infolgedessen erleichtert die neue Benutzeroberfläche den Benutzern das Durchsuchen ihres Feeds, um herauszufinden, was sie interessiert.
02. Etiketten aktualisiert
Einer der verwirrendsten Aspekte von Facebook war immer das linke Menü. Aus irgendeinem Grund sind die Elemente so unverständlich aufgelistet. Vergleichen Sie einfach die Benutzeroberfläche in den Jahren 2004 und 2015:
Das ursprüngliche Design war tatsächlich eine Verbesserung gegenüber dem aktuellen, obwohl sie sich nicht so viele Sorgen machen mussten. Um die aktuelle Inhaltslast von Facebook zu verwalten, brauchte ich ein effizienteres Etikettensystem.
Ich nahm einfach das, was am ursprünglichen Menü funktionierte - einschließlich des Formats 'my this, my that', das eine nette persönliche Note hinzufügt - und erweiterte es, um die Ergänzungen aus dem letzten Jahrzehnt abzudecken. Die Labels von Facebook Flat sind logisch, selbstverständlich und konsistent.
03. Verringerung der Reibung von Seite zu Seite
Gute Designs reduzieren das Klicken (Reibung) auf ein Minimum. Wenn Sie jetzt auf Facebook die Hauptseite verlassen, verschwindet das Menü und der Benutzer wird zu zusätzlichen Klicks gezwungen. Die Lösung war ein einfaches 'klebriges' Menü, das niemals verlassen wird - selbst auf Ihrer eigenen Profilseite.
04. Optimierung der Schrift
Wenn es um Typografie geht, ist Form Funktion. Wie Webdesign-Trends 2015 & 2016 erklärt: 'Flache Typografie ermutigt Designer, über jede Typauswahl genauer nachzudenken. Sogar Serifenschriften haben sich weiterentwickelt, wobei einfachere Buchstabenformen zur Norm wurden und der Inhalt selbst durchscheinen kann. '
Für eine Website, die sich so sehr auf Textinhalte stützt, ist die aktuelle Helvetica-Typografie von Facebook dünn und bescheiden. In der aktuellen Besetztoberfläche rückt dies den Text noch tiefer in den Hintergrund, aber alles, was stärker ist, wäre nur ein weiteres Element, das um die Aufmerksamkeit des Benutzers konkurriert.
Die vereinfachte Oberfläche von Facebook Flat öffnete jedoch viele Türen für Typografie mit der Freiheit, gesehen zu werden. Ich habe Trebuchet für meine Schrift gewählt, weil es lesbar, aber dennoch freundlich ist und die Krümmung dazu beiträgt, den Raum zu füllen.
Vielleicht ist es nicht so elegant oder sexy wie einige der heute populäreren flachen Schriften, aber das braucht Facebook nicht. Eine soziale Netzwerkschrift muss klar und einladend für Benutzer sein. Wie bei allen Designs geht es nicht um die beste Wahl, sondern um die richtige Wahl.
05. Mutige Farbstriche
Farben sind nicht mehr nur Dekoration - sie erzeugen eine sofort verstandene emotionale Sprache. Jedes erfolgreiche Update auf Facebook würde einen neuen Anstrich erfordern.
In der inhaltsorientierten Designphilosophie führen weniger Farbverläufe zu weniger Bildrauschen, eine weitere Möglichkeit, dem Benutzer die Navigation und Suche zu erleichtern. Um die allgemeine Vereinfachung fortzusetzen, habe ich CSS-Stile verwendet, um die Farbpalette vollständig zu reduzieren.
Keine Abschrägungen, keine Schatten und keine Farbverläufe. Bei Hintergründen und Menüs bilden kräftige und leuchtende Farben einen natürlichen Kontrast und ziehen den Betrachter zum Inhalt und zur Navigation.
06. Umfassen von Leerzeichen
Oft unterschätzte Leerzeichen wirken sich genauso auf die visuelle Darstellung einer Site aus wie Farbe oder Typografie. Und weil Leerraum verbessert das Verständnis Es war die perfekte Medizin für eine Website wie Facebook, die unter Überfüllung leidet.
Durch Erhöhen des Leerraums um jedes Element - Menüs, Schaltflächen, Blöcke mit Posts, private Nachrichten usw. - wurde der Inhalt besser lesbar und lesbar, wodurch die Benutzeroberfläche verbessert wurde.
Es gab jedoch noch ein weiteres Problem: Um mit den ständig steigenden Auflösungen Schritt zu halten, musste ich jede Inhaltskarte dehnen, um den unangenehmen zusätzlichen Platz zu beseitigen. Glücklicherweise gab es ohne die rechte Statistikspalte viel Platz zum Herumspielen.
Schlussbetrachtungen
Die aktuelle Struktur des Facebook-Designs ist nicht das Problem, sondern nur die Präsentation. Im Gegensatz zu einigen radikaleren Neugestaltungen (wie dieser von Windows inspirierten Neugestaltung) wollte ich die Benutzeroberfläche nicht so ändern, dass Benutzer Facebook vollständig neu lernen müssten. Eine solch drastische Änderung an einem so beliebten System birgt das Risiko von Selbstmord in Unternehmen, egal wie schön das neue visuelle Design aussehen mag.
Hier fällt das MAYA-Prinzip (am weitesten fortgeschritten und doch akzeptabel) ein. Das Redesign musste besser, aber auch vertraut sein.
Mit der Facebook Flat Chrome-Erweiterung war es mein Ziel, Facebook durch Anwendung der Usability-Prinzipien des Flat Design zu einem inhaltsorientierteren (und daher benutzerorientierten) Design zurückzukehren. Ästhetische Verbesserungen wie gestochen scharfe Typografie, klarer Kontrast und minimalistische Elemente trugen zu einer leichteren Benutzeroberfläche mit schnellerem Laden, Suchen und Navigieren bei.
Angesichts der großen Menge an Inhalten, die Facebook unterstützen muss, ist das beste Design überhaupt kein Design.
Weitergehen
Für eine eingehendere Analyse der neuesten Designtechniken wie flaches Design, moderne Typografie, Leerraum, Farben und mehr empfehle ich das Auschecken Web UI Design Trends 2015 & 2016 .
In diesem hilfreichen Referenzhandbuch werden die Best Practices für 10 Techniken anhand von Beispielen aus 166 erfolgreichen Websites beschrieben.
Wörter: Rof Tentik
Rof Tentik ist ein Entwickler und UI-Designer, der die Facebook Flat Chrome-Erweiterung erstellt hat.
Mochte dies? Lese das!
- Designer reagieren auf neues Facebook-Logo
- Auf dem kreativen Spielplatz von Facebook
- Erstellen Sie ein Facebook-Banner, das rockt: 10 Expertentipps
