Facebook przeprojektował szczegółową analizę niezależnych projektów

Nauczyć się pracy innych projektantów jest wiele. Dotyczy to zarówno profesjonalnych projektów, jak i projektów specjalnych istniejących stron internetowych. Duże witryny, takie jak Facebook, oferują bardzo dobre wrażenia użytkownika z kilkoma dobrymi elementami i innymi niezbyt dobrymi elementami. W tym poście chciałbym zbadaj różne przeprojektowania Facebooka, aby przeanalizować koncepcje interfejsu które mogłyby poprawić obecne wrażenia użytkownika.

Wyciągnąłem garść niestandardowych przeprojektowań FB od użytkowników Dribbble, każdy z konkretne ulepszenia i zaktualizowane elementy interfejsu użytkownika. Weź te pomysły pod uwagę, jak wyglądają, jak mogą funkcjonować i jak mogą wpłynąć na użyteczność jeśli zaimplementowano na żywo na Facebooku.

Usprawniona strona profilu

Przeprojektowanie strony profilu pochodzi od Harisa Jusovica, projektanta z regionu Bałkanów w Europie.

W tym projekcie kładzie większy nacisk na prostotę, podświetlając właściciela strony więcej wybitne zdjęcie nagłówka i zdjęcie profilowe.

Posty na osi czasu można sortować według “niedawny” lub “popularny” na podstawie twoich preferencji. Ma to duże znaczenie dla użyteczności, zwłaszcza w następstwie reakcji Twittera na ostatnio obowiązującą zmianę algorytmu.

Również wiele przycisków wyświetla się jako większe dodatkowe wypełnienie i większa typografia. Ponieważ Facebook ma być interaktywny, sensowne jest jedynie zwiększenie widoczności elementów, takich jak przyciski i hiperłącza.

Ogólnie rzecz biorąc, koncepcja ta wydaje się odczuwalna kompaktowy i lżejszy w rozdęciu. Byłoby miło, gdyby Facebook bardziej skupiał się na elementach interaktywnych, a może także zwiększył ich rozmiary.

Wielokolumnowa oś czasu

Podążając w stronę pionowego kolonialnego układu, zaprojektowano Alejandro Osorio. Ten układ reprezentuje widok linii czasu profilu, który użytkownicy Facebooka widzą, gdy odwiedzają stronę profilu użytkownika.

Projekt jest uderzający, ale może zniechęcać niektórych użytkowników. Opiera się na wiele kolumn strony do zorganizowania linki do profilu użytkownika wraz z widokiem ostatnich postów na osi czasu. Wszystkie kolory i elementy pozostają zgodne ze stylami projektowania Facebooka. To na pewno przypomina stronę osi czasu na Facebooku.

Jednak niektóre elementy paska bocznego są nieco mylące. Na przykład zielony przycisk z pojedynczym znakiem plus tuż obok a “śledzić” przycisk. Jeden używa tylko symbolu, drugi tylko tekstu. Jest to niezgodne ze stylem projektowania i innymi informacjami o profilu.

Najbardziej podoba mi się tutaj przejrzysta struktura danych na osi czasu. Wszystko jest uporządkowane w przejrzysty sposób, są nawet linki boczne do przełączania między najnowszymi postami i popularnymi postami.

Przeprojektowanie gęstej treści

Większe strony internetowe, takie jak Facebook, obsługują znacznie więcej danych i bazę użytkowników, która chce mieć łatwy dostęp do tych danych. Na stronie głównej przeprojektowanie przez MagicVoltage znajdziesz jedną spójną funkcję: wiele treści w jednym układzie strony.

Strona główna Facebooka to początkowy widok osi czasu, który użytkownicy widzą podczas pierwszej wizyty na stronie. Obejmuje najnowsze posty od znajomych, listę czatów, gry, reklamy i inne istotne informacje, takie jak nadchodzące urodziny.

Zajętość tego układu sprawia, że ​​jest on świetny i potencjalnie kontrowersyjny. Dzięki tej zawartości na jednej stronie super łatwa nawigacja - gdy rzeczywiście nauczysz się, gdzie wszystko się znajduje. A górne lewe odnośniki do ikon są na tyle niejasne, że nikogo nie zniechęcają do interakcji z nimi.

Ale w obronie tego projektu bardzo dobrze radzi sobie z gęsto upakowaną zawartością. Jest mnóstwo białych znaków między elementami i znakomicie działa w czterech kolumnach.

Obszerna nawigacja

To tak zwane przeprojektowanie Facebooka 2.0 stworzone przez Marcelo Silvę to naprawdę widok. Jego układ demonstracyjny wyświetla zaktualizowaną stronę główną z osią czasu i częściowo ukrytymi kontaktami czatu.

Dużym elementem tego projektu jest wielopoziomowy system nawigacji. Podoba mi się podstawowa nawigacja z odnośnikami do ikon, które wyświetlają dodatkowe linki. Na powyższym obrazku użytkownik wybiera ikonę profilu z linkami przeglądanie najnowszej historii i edytowanie profilu.

W przeciwieństwie do tradycyjnych kwadratowych zdjęć Facebooka, przeprojektowanie Marcelo wybiera zdjęcie okrągłe. Ten styl jest wszechobecny zarówno na osi czasu, jak i na liście czatów.

M Assistant & Recent Activity List

O przeprojektowaniu FB Stevena McCabe można wiele powiedzieć. W rzeczywistości wiele obszarów, takich jak gry i niedawne działania, zostało całkowicie przeprojektowane dzięki imponującemu liftingowi.

Projekt Stevena to znacznie ciemniejszy niż obecny schemat kolorów Facebooka. Podoba mi się to, ponieważ buduje większy kontrast pomiędzy pasami bocznymi i podstawową zawartością strony. Aktualna strona główna Facebooka zawiera większość tych treści, ale z czasem może wtopić się w tło.

Nagłówek nadal używa czerwonych bąbelków do oznaczania powiadomień. Dostępne są również posty z trendami i kanał wiadomości z możliwością sortowania ostatnich aktywności od znajomych na prawym pasku bocznym.

Na samym dole zauważysz małe pudełko na Facebooka M, the odpowiednik Siri dla użytkowników Facebooka.

Ta funkcja nie przyciąga wiele uwagi w przeprojektowaniu, ale Steven naprawdę poszedł na całość, aby jego koncepcja naprawdę reprezentowała nowoczesną technologię Facebooka.

Układ osi czasu w czterech kolumnach

Oto kolejny czterokolorowy projekt strony domowej wykonany przez japońskiego projektanta Sho Kameyę. Wszystkie te kolumny obejmuje całą stronę, zarówno szerokość, jak i wysokość.

Na skrajnym lewym pasku bocznym duży nacisk kładzie się na tradycyjne linki na Facebooku dotyczące gier, aplikacji, stron, zasobów dev i innych podobnych elementów. Następna jest kolumna treści, która jest najbardziej zróżnicowana spośród wszystkich przeprojektowań. Nie zachowuje to tradycyjnych linków do statusu aktualizacji / dodania zdjęcia, ale zamiast tego używa minimalistyczne podejście z ukrytymi opcjami.

Dwa prawe paski boczne zawierają wszystko inne z większą ilością zdjęć, takich jak awatary użytkowników i ikony gier. Ten projekt nadal zawiera wszystkie aktualizacje, takie jak urodziny, czaty i rekomendacje znajomych.

Ten projekt jest bardzo zróżnicowany, ale pozostaje wierny trzonowi funkcji Facebooka. Może nie jest to idealne przeprojektowanie, ale to pokazuje możliwości układu czterokolumnowego.

Uproszczony interfejs użytkownika z Dark Chat List

Celem przeprojektowania Bena Hartleya jest prostota i subtelność. Układ wykorzystuje kombinację płaskich koncepcji z kilkoma cieniami na większych elementach strony.

Wiele markowych produktów pozostaje niezmienionych i polega na tradycyjnej niebiesko-szarej kolorystyce Facebooka. Ale zauważysz, że niektóre ikony zostały przeprojektowane albo mniejszy, albo prostszy (lub obie).

Ten układ również się opiera okrągłe awatary i daje dużo miejsca na udostępnianie zdjęć ze słupkami. Naprawdę lubię jego zaktualizowana lista czatów z ciemniejszym schematem kolorów i mniejszymi ikonami statusu.

Podczas gdy przeprojektowanie Bena wciąż wydaje się trochę zaśmiecone, jest znacznie prostsze. Byłby to trudny projekt do oceny doświadczenia użytkownika bez badań UX w przeglądarce. Ale na pierwszy rzut oka wydaje się łatwiejsze do przeglądania i daje więcej miejsca na korzystanie z zawartości osi czasu.

Zakończyć

Chociaż przykłady te koncentrują się przede wszystkim na Facebooku, wyciągnięte wnioski można zastosować do dowolnej strony internetowej. Doskonały projekt dla użytkownika przekracza wszelkie bariery językowe i jest ważnym elementem cyfrowego procesu twórczego.

Zapraszam do pożyczania pomysłów z tej analizy, a nawet wdrażania podobnych pomysłów we własnych pracach projektowych. Także jeśli znajdziesz jakiekolwiek relatywne projekty na Facebooku, możesz podzielić się nimi z własnymi analizami.