A Facebook újratervezte a független minták mélyreható elemzését

Sokat kell tanulni más tervezők munkájának tanulmányozásával. Ez igaz mind a professzionális projektekre, mind a meglévő webhelyekre vonatkozó spec-mintákra. A nagy webhelyek, mint a Facebook, nagyon jó felhasználói élményt nyújtanak néhány jó elem és egyéb nem-jó elemekkel. Ebben a bejegyzésben szeretném vizsgálja meg a Facebook újratervezését, hogy elemezze az interfész fogalmát javíthatja a jelenlegi felhasználói élményt.

Húztam egy pár egyéni FB újratervezést a Dribbble felhasználóktól speciális fejlesztések és frissített felhasználói felület elemei. Vegyük figyelembe ezeket az ötleteket, hogy hogyan néznek ki, hogyan működhetnek, és hogyan befolyásolhatják a használhatóságot ha élőben valósítják meg a Facebook-on.

Egyszerűsített profiloldal

Ez a profiloldal újratervezése Haris Jusovic, az európai balkáni régió tervezője.

Ebben a kialakításban nagyobb hangsúlyt fektet az egyszerűségre az oldal tulajdonosának kiemelésével kiemelkedő fejlécfotó és profilkép.

Az idővonal-bejegyzések rendezhetők “friss” vagy “népszerű” a preferenciák alapján. Ez nagy a használhatóság szempontjából, különösen a Twitter visszhangja a közelmúltban megkövetelt algoritmus változása ellen.

A gombok közül sokan nagyobbak extra padding és nagyobb tipográfia. Mivel a Facebookot interaktívnak kell tekinteni, csak akkor van értelme növelni az olyan elemek láthatóságát, mint a gombok és a linkek.

Összességében ez a koncepció érzi magát kompakt és könnyebb a puffadás. Jó lenne látni, hogy a Facebook inkább az interaktív elemekre összpontosít, és talán növeli a betűméretüket is.

Több oszlopos idősáv

Az Alejandro Osorio újratervezése a vertikálisan elrendezett elrendezés felé. Ez az elrendezés a profil idővonal nézetét mutatja, amelyet a Facebook felhasználók látnak, amikor meglátogatják a felhasználói profil oldalát.

A kialakítás meglepő, de néhány felhasználó számára kihasználható. Ez támaszkodik többoldalas oszlopok szervezése a felhasználói profilok linkjeit, valamint a legutóbbi bejegyzések időbeli nézetét. A színek és elemek minden bizonnyal megtartják a Facebook tervezési stílusát. Bizonyára úgy érzi, mint egy Facebook idővonal oldala.

De néhány oldalsáv-elem kissé zavaróvá válik. Például egy zöld gomb, egy pluszjel mellett, közvetlenül a “kövesse” gomb. Egy szimbólumot, a másik csak szöveget használ. Ez inkongruensnek tűnik a design stílusával és más profiladatokkal.

Amit leginkább itt szeretek, az a az adatok pontos szerkezete az idővonalban. Minden rendezetten szervezett, és még az oldalsáv linkek is vannak, amelyekkel a legutóbbi hozzászólások és a népszerű hozzászólások között válthatnak.

Tartalom-sűrű újratervezés

A nagyobb weboldalak, mint a Facebook, sokkal több adattal és egy felhasználói bázissal foglalkoznak, amely megkönnyíti az adatokhoz való hozzáférést. A MagicVoltage által létrehozott honlap újratervezésében egy következetes funkció található: sok tartalom egy oldalelrendezésbe tömörítve.

A Facebook kezdőlapja az a kezdeti idővonal nézet, amelyet a felhasználók a webhely első látogatásakor látnak. Ez magában foglalja a barátok legújabb üzeneteit, egy csevegési listát, játékokat, hirdetéseket és egyéb releváns információkat, például a közelgő születésnapokat.

Ennek az elrendezésnek az elfoglaltsága nagy és potenciálisan ellentmondásos. Ennek az oldalnak az összes tartalma teszi ezt szuper könnyű navigálni - ha egyszer megtanulod, hol található minden. És a felső bal oldali ikon linkek elég homályosak ahhoz, hogy megakadályozzák, hogy bárki kapcsolatba lépjen velük.

Ennek a kialakításnak a védelme azonban nagyon jól kezeli a sűrűn csomagolt tartalmat. Van rengeteg üres hely van az elemek között és ragyogóan négy oszlopos kivitelű.

Tágas navigáció

Ez a Marcelo Silva által létrehozott ún. Facebook 2.0 újratervezés valóban látvány. Demo-elrendezése frissített kezdőlapot jelenít meg idővonal és részlegesen rejtett chat-kapcsolatokkal.

Ennek a designnak egy nagy darabja a többszintű navigációs rendszer. Szeretem, hogy van egy elsődleges navigáció, amelyen a másodlagos hivatkozásokat megjelenítő ikon hivatkozások szerepelnek. A fenti képernyőn a felhasználó kiválasztja a profil ikonját a legutóbbi történelem böngészése és a profil szerkesztése.

A Facebook hagyományos négyzetfotóival ellentétben Marcelo újratervezése a kör alakú fotó felé. Ez a stílus mind az idővonalban, mind a csevegési listában mindenütt megtalálható.

M asszisztens és a legújabb tevékenységek listája

Sokat kell mondani Steven McCabe FB újratervezéséről. Valójában sok olyan terület, mint a játékok és a közelmúltbeli tevékenységek teljesen újratervezettek, lenyűgöző arculatával.

Steven tervezése sokkal sötétebb, mint a Facebook jelenlegi színsémája. Szeretem ezt, mert nagyobb kontrasztot hoz létre az oldalsávok és az elsődleges oldal tartalom között. A Facebook jelenlegi honlapja ennek a tartalomnak a legnagyobb részét tartalmazza, de idővel a háttérbe keveredhet.

A fejléc még mindig piros buborékokat használ az értesítések jelzésére. Vannak olyan trendek és hírcsatornák is, amelyek képesek a legutóbbi tevékenységeket a jobb oldali sávban rendezni.

Az alsó részén egy kis doboz látható a Facebook M, a egyenértékű Siri Facebook felhasználók számára.

Ez a funkció nem fordít sok figyelmet az újratervezésekben, de Steven valóban mindent megtett, hogy a koncepciója valóban képviselje a modern Facebook technológiát.

Négyoszlopos idősor elrendezés

Itt van egy újabb 4 colos honlap, amelyet a japán Sho Kameya tervez. Mindezek az oszlopok az oldal teljes részét képezi, mind a szélesség, mind a magasság.

A baloldal bal oldali sávja nagy hangsúlyt fektet a hagyományos Facebook linkekre a játékok, alkalmazások, oldalak, dev erőforrások és más hasonló elemek számára. Ezután a tartalomoszlop a legváltozatosabb az újratervezések között. Ez nem tartja meg a hagyományos linkeket a frissítés állapotának / a fénykép hozzáadásának, hanem a minimalista megközelítés rejtett lehetőségekkel.

A két jobb oldali sáv mindent tartalmaz, még több fotóval, mint például a felhasználói avatarok és a játékikonok. Ez a kialakítás továbbra is megtartja az összes frissítést, például a születésnapokat, a csevegéseket és a barátok ajánlásait.

Ez a kialakítás nagyon változatos, de a Facebook sajátosságainak lényege. Lehet, hogy nem a tökéletes újratervezés, hanem a négyoszlopos elrendezés lehetőségeit mutatja.

Egyszerűsített felhasználói felület a sötét csevegési listával

Ben Hartley újratervezésének célja az egyszerűség és a finomság. Az elrendezés lapos tervezési koncepciók kombinációját használja, néhány nagyobb árnyékkal a nagyobb oldalelemekre.

Számos márkás termék ugyanaz marad, és a Facebook hagyományos kék / szürke színsémájára támaszkodik. De észre fogod venni, hogy az ikonok egy része újratervezett kisebb vagy egyszerűbb (vagy mindkettő).

Ez az elrendezés is támaszkodik kör alakú avatarok és rengeteg helyet biztosít a megosztott képekhez hozzászólásokkal. Igazán élvezem frissített csevegési lista a sötétebb színsémával és a kisebb állapotikonokkal.

Míg Ben újratervezése még mindig kicsit zavartan érzi magát, sokkal egyszerűbbnek érzi magát. Ez egy nehéz kialakítás lenne, hogy a felhasználói élményt böngészőben UX-tanulmányok nélkül értékelje. De egy pillantásra úgy tűnik könnyebb böngészni és több helyet biztosít az idővonal tartalmának fogyasztására.

Wrap-Up

Bár ezek a példák elsősorban a Facebookra összpontosítanak, a megtanult tanulságokat bármely weboldalra alkalmazni lehet. A nagyszerű felhasználói élmény kialakítása túllép minden nyelvi akadályt, és ez a digitális kreatív folyamat lényeges része.

Nyugodtan kölcsönözhet ötleteket ebből az elemzésből, és akár hasonló ötleteket is megvalósíthat saját projektmunkájában. Ha bármilyen relatábilis Facebook-ot is talál, akkor a saját elemzéssel nyugodtan ossza meg a megjegyzéseket.