Facebook überarbeitete eine detaillierte Analyse unabhängiger Designs

Es gibt viel zu lernen, wenn man die Arbeit anderer Designer studiert. Dies gilt sowohl für professionelle Projekte als auch für Spezifikationsdesigns für vorhandene Websites. Große Websites wie Facebook bieten eine sehr spezielle Benutzererfahrung mit einigen guten Elementen und anderen nicht so guten Elementen. In diesem Beitrag würde ich gerne verschiedene Facebook-Neugestaltungen untersuchen, um Schnittstellenkonzepte zu analysieren das könnte die aktuelle Benutzererfahrung verbessern.

Ich habe eine Handvoll angepasster FB-Neugestaltungen von Dribbble-Benutzern mitgenommen spezifische Verbesserungen und aktualisierte Elemente der Benutzeroberfläche. Berücksichtigen Sie diese Ideen, wie sie aussehen, wie sie funktionieren könnten und wie sie die Benutzerfreundlichkeit beeinflussen könnten wenn live auf Facebook umgesetzt.

Optimierte Profilseite

Diese Neugestaltung der Profilseite stammt von Haris Jusovic, einem Designer aus der Balkanregion Europas.

In diesem Entwurf legt er mehr Wert auf die Einfachheit, indem er den Seitenbesitzer mit mehr hervorhebt Hervorstehendes Header-Foto und Profilbild.

Beiträge in der Zeitleiste können nach sortiert werden “kürzlich” oder “Beliebt” basierend auf Ihrer Präferenz. Dies ist besonders für die Benutzerfreundlichkeit von großer Bedeutung, vor allem nach dem Rückschlag von Twitter gegen die kürzlich geforderte Änderung des Algorithmus.

Auch viele Tasten werden größer dargestellt extra Polsterung und größere Typografie. Da Facebook interaktiv sein soll, ist es nur sinnvoll, Elemente wie Buttons und Hyperlinks besser sichtbar zu machen.

Insgesamt fühlt sich dieses Konzept an kompakt und leichter im aufgeblähten Zustand. Es wäre schön zu sehen, dass Facebook mehr Wert auf interaktive Elemente legt und möglicherweise auch die Schriftgröße erhöht.

Mehrspaltige Zeitleiste

In Richtung eines vertikal säulenförmigen Layouts wurde Alejandro Osorio umgestaltet. Dieses Layout stellt die Profilzeitleiste dar, die Facebook-Benutzer sehen, wenn sie die Profilseite eines Benutzers besuchen.

Das Design ist auffällig, kann jedoch für einige Benutzer abschreckend sein. Es verlässt sich auf Mehrere Seitenspalten zum Organisieren die Profil-Links des Benutzers sowie eine Zeitleiste der letzten Beiträge. Alle Farben und Elemente bleiben den Designstilen von Facebook treu. Es fühlt sich auf jeden Fall wie eine Facebook-Timeline-Seite an.

Einige der Seitenleistenelemente wirken jedoch etwas verwirrend. Zum Beispiel eine grüne Schaltfläche mit einem einzelnen Pluszeichen direkt neben einem “Folgen” Taste. Einer verwendet nur ein Symbol, der andere nur Text. Dies fühlt sich nicht mit dem Designstil und anderen Profilinformationen an.

Was mir hier am besten gefällt, ist das klare Datenstruktur in der Timeline. Alles ist übersichtlich organisiert und es gibt sogar Sidebar-Links, um zwischen den letzten und den beliebtesten Beiträgen zu wechseln.

Inhaltlich dichtes Redesign

Größere Websites wie Facebook handeln mit viel mehr Daten und einer Benutzerdatenbank, die einen einfachen Zugriff auf diese Daten wünscht. In der Neugestaltung der Homepage von MagicVoltage finden Sie ein einheitliches Merkmal: viele Inhalte in einem Seitenlayout.

Die Startseite von Facebook ist die erste Ansicht der Zeitleiste, die Benutzer beim ersten Besuch der Website sehen. Sie enthält die neuesten Beiträge von Freunden, eine Chatliste, Spiele, Anzeigen und andere relevante Informationen, wie etwa kommende Geburtstage.

Die Vielschichtigkeit dieses Layouts macht es großartig und möglicherweise kontrovers. Alle diese Inhalte auf einer Seite zu haben, macht es super einfach zu navigieren - Sobald Sie tatsächlich erfahren, wo sich alles befindet. Und die Links oben links sind vage genug, um jeden davon abzuhalten, mit ihnen zu interagieren.

Zur Abwehr dieses Designs ist er jedoch für dicht gepackte Inhalte sehr gut geeignet. Es gibt viel Whitespace zwischen Elementen und es läuft ein viersäuliges Design brillant.

Umfangreiche Navigation

Dieses so genannte Facebook 2.0-Redesign von Marcelo Silva ist ein wahrer Anblick. Sein Demo-Layout zeigt eine aktualisierte Startseite mit einer Zeitleiste und teilweise versteckten Chat-Kontakten.

Ein großes Stück zu diesem Design ist das abgestuftes Navigationssystem. Ich mag es, wie es ein primäres Nav mit Symbollinks gibt, die sekundäre Links anzeigen. In dem obigen Screenshot wählt der Benutzer das Profilsymbol aus, für das Links vorhanden sind Durchsuchen des letzten Verlaufs und Bearbeiten des Profils.

Im Gegensatz zu den traditionellen quadratischen Fotos von Facebook wird Marcelo neu gestaltet wählt das kreisförmige Foto. Dieser Stil ist sowohl in der Timeline als auch in der Chat-Liste allgegenwärtig.

M Assistent & Liste der letzten Aktivitäten

Es gibt viel zu sagen über die Neugestaltung der FB von Steven McCabe. Tatsächlich wurden viele Bereiche wie Spiele und aktuelle Aktivitäten mit einem beeindruckenden Facelift komplett neu gestaltet.

Steven's Design ist viel dunkler als das derzeitige Farbschema von Facebook. Ich mag das, weil es mehr Kontrast zwischen Seitenleisten und primärem Seiteninhalt bildet. Die aktuelle Homepage von Facebook enthält den größten Teil dieses Inhalts, kann sich jedoch mit der Zeit in den Hintergrund einfügen.

Der Header verwendet immer noch rote Blasen, um Benachrichtigungen anzuzeigen. In der rechten Seitenleiste befinden sich außerdem Trendposts und ein Newsfeed mit der Möglichkeit, aktuelle Aktivitäten von Freunden zu sortieren.

Ganz unten sehen Sie ein kleines Kästchen für Facebooks M, das Äquivalent zu Siri für Facebook-Nutzer.

Diese Funktion findet bei Neugestaltungen nicht viel Beachtung, aber Steven hat alles dafür getan, dass sein Konzept wirklich die moderne Facebook-Technologie darstellt.

Zeitleistenlayout mit vier Spalten

Hier ist eine weitere 4-Farben-Startseite des japanischen Designers Sho Kameya. Alle diese Spalten überspannen die gesamte Seite, Breite und Höhe.

In der linken Seitenleiste werden traditionelle Facebook-Links für Spiele, Apps, Seiten, Entwicklungsressourcen und andere ähnliche Elemente angezeigt. Als nächstes folgt die Inhaltsspalte, die unter allen Redesigns am vielfältigsten ist. Die traditionellen Links für Aktualisierungsstatus / Foto hinzufügen werden nicht beibehalten, sondern es wird ein verwendet minimalistischer Ansatz mit versteckten Optionen.

Die beiden rechten Seitenleisten enthalten alles Weitere mit mehr Fotos wie Benutzeravataren und Spielsymbolen. Dieses Design behält alle Aktualisierungen wie Geburtstage, Chats und Empfehlungen von Freunden bei.

Dieses Design ist sehr vielfältig, bleibt aber im Kern der Funktionen von Facebook erhalten. Es kann nicht das perfekte Redesign sein, aber es zeigt die Möglichkeiten eines vierspaltigen Layouts.

Vereinfachte Benutzeroberfläche mit Dark Chat List

Das Ziel von Ben Hartleys Neugestaltung ist Einfachheit und Subtilität. Das Layout verwendet eine Kombination aus flachen Entwurfskonzepten mit einigen Schlagschatten auf größeren Seitenelementen.

Viele Markenartikel bleiben gleich und er setzt auf das traditionelle Blau / Grau-Farbschema von Facebook. Sie werden jedoch feststellen, dass einige der Icons neu gestaltet wurden entweder kleiner oder einfacher (oder beides).

Dieses Layout beruht auch auf kreisförmige Avatare und gibt viel Platz für gemeinsam genutzte Bilder mit Pfosten. Ich genieße wirklich seine aktualisierte Chatliste mit dunklerem Farbschema und kleineren Statussymbolen.

Während Bens Neugestaltung sich immer noch etwas unübersichtlich anfühlt, fühlt es sich doch viel einfacher an. Dies wäre ein schwieriger Entwurf, um die Benutzererfahrung ohne UX-Studien in einem Browser zu messen. Aber auf einen Blick scheint es einfacher zu stöbern und gibt mehr Raum für den Verbrauch von Timeline-Inhalten.

Einpacken

Obwohl sich diese Beispiele hauptsächlich auf Facebook beziehen, können die gewonnenen Erkenntnisse auf jede Website angewendet werden. Ein großartiges User Experience-Design überschreitet alle Sprachbarrieren und ist ein wesentlicher Bestandteil des digitalen Kreativprozesses.

Fühlen Sie sich frei, um Ideen aus dieser Analyse zu leihen und ähnliche Ideen in Ihre eigene Projektarbeit umzusetzen. Auch wenn Sie relevante Facebook-Neugestaltungen finden, können Sie diese gerne mit Ihren eigenen Analysen teilen.