Facebook on suunnitellut itsenäisten mallien syvällisen analyysin

On paljon opittavaa opiskelemalla muiden suunnittelijoiden työtä. Tämä koskee sekä ammatillisia hankkeita että olemassa olevien verkkosivustojen spec-malleja. Suuret sivustot, kuten Facebook, tarjoavat hyvin erityisiä käyttäjäkokemuksia hyvien elementtien ja muiden ei-niin hyvien elementtien kanssa. Tässä viestissä haluan tarkastella erilaisia ​​Facebook-uudelleensuunnitteluja käyttöliittymäkonseptien analysointiin joka voi parantaa nykyistä käyttäjäkokemusta.

Olen vetänyt kourallisen mukautetun FB-mallin uudelleen Dribbble-käyttäjiltä tiettyjä parannuksia ja päivitettyjä käyttöliittymän elementtejä. Ota nämä ajatukset huomioon, miten ne näyttävät, miten ne voivat toimia ja miten ne voisivat vaikuttaa käytettävyyteen jos se toteutetaan Facebookissa.

Virtaviivainen profiilisivu

Tämä profiilisivun uudelleensuunnittelu tulee Balkanin alueen suunnittelija Haris Jusovicilta.

Tässä suunnittelussa hän keskittyy enemmän yksinkertaisuuteen korostamalla sivun omistajaa enemmän näkyvä otsikon kuva ja profiilikuva.

Aikajanan viestit voidaan lajitella “viimeaikainen” tai “suosittu” asetusten mukaan. Tämä on suuri käytettävyyden kannalta, varsinkin Twitterin taaksepäin hiljattain valtuutetun algoritmin muutoksen vastaisesti.

Myös monet painikkeet näyttävät suuremmiksi ylimääräinen pehmuste ja isompi typografia. Koska Facebook on tarkoitettu interaktiiviseksi, on järkevää lisätä vain sellaisten kohteiden kuten painikkeiden ja hyperlinkkien näkyvyyttä.

Kaiken kaikkiaan tämä käsite tuntuu kompakti ja kevyempi turvotuksessa. Olisi mukavaa nähdä, että Facebook keskittyy enemmän interaktiivisiin elementteihin ja ehkä lisää niiden fonttikokoja.

Monipuolinen aikajana

Alejandro Osoron uudelleensuunnittelu on vertikaalisesti kolumnaalinen ulkoasu. Tämä ulkoasu edustaa profiilin aikajanaa, jonka Facebook-käyttäjät näkevät, kun he käyvät käyttäjän profiilisivulla.

Suunnittelu on silmiinpistävää, mutta se voi olla eräille käyttäjille poissa käytöstä. Se perustuu järjestää useita sivun sarakkeita käyttäjän profiililinkit sekä viimeisten viestien aikajananäkymä. Kaikki värit ja elementit pysyvät uskollisina Facebookin muotoilutyyliin. Se tuntuu varmasti Facebook-aikajanalta.

Mutta jotkin sivupalkin elementit tulevat pois päältä hieman sekaviksi. Esimerkiksi vihreä painike, jossa on yksi plusmerkki aivan a “seurata” painiketta. Yksi käyttää vain symbolia, toinen vain teksti. Tämä tuntuu epäjohdonmukaiselta muotoilun ja muiden profiilitietojen kanssa.

Täällä pidän eniten selkeä rakenne aikataulussa. Kaikki on järjestetty selkeästi ja on jopa sivupalkin linkkejä vaihtaaksesi viimeisimpien viestien ja suosittujen viestien välillä.

Content-Dense Redesign

Suuremmat sivustot, kuten Facebook, käsittelevät paljon enemmän tietoja ja käyttäjäpohjaa, joka haluaa helpon pääsyn kyseisiin tietoihin. MagicVoltagen suunnittelemassa kotisivun uudelleensuunnittelussa on yksi yhtenäinen ominaisuus: paljon sisältöä yhdeksi sivun asetteluksi.

Facebookin kotisivut ovat ensimmäinen aikajananäkymä, jonka käyttäjät näkevät ensimmäistä kertaa vierailemalla verkkosivustolla. Se sisältää viimeisimmät ystävien viestit, chat-luettelon, pelit, mainokset ja muut asiaankuuluvat tiedot, kuten tulevat syntymäpäivät.

Tämän ulkoasun kiireisyys tekee siitä sekä suuren että mahdollisesti kiistanalaisen. Tämän sisällön ottaminen yhdelle sivulle tekee sen erittäin helppo navigoida - kun todella opit, missä kaikki sijaitsee. Vasemmanpuoleisen kuvakkeen linkit ovat vain epämääräisiä, jotta kukaan ei voi olla vuorovaikutuksessa heidän kanssaan.

Mutta tämän mallin puolustuksessa se käsittelee tiheästi pakattua sisältöä hyvin. Siellä on paljon välilyöntejä elementtien välillä ja siinä on loistavasti neljän sarakkeen muotoilu.

Mittava navigointi

Tämä Marcelo Silvan luoman ns. Hänen esittelyasettelu näyttää päivitetyn kotisivun, jossa on aikajana ja osittain piilotetut chat-yhteystiedot.

Suuri pala tähän suunnitteluun on porrastettu navigointijärjestelmä. Pidän siitä, että on ensisijainen nav-kuvake, jossa on toissijaisia ​​linkkejä osoittavat linkit. Yllä olevassa kuvassa käyttäjä valitsee profiilikuvakkeen, jolla on linkit selaaminen ja profiilin muokkaaminen.

Toisin kuin Facebookin perinteiset neliökuvat, Marcelon uudelleensuunnittelu valitsee pyöreän kuvan. Tämä tyyli on yleinen sekä aikajanalla että chat-luettelossa.

M Assistant & Recent Activity List

Steven McCaben FB-uudelleensuunnittelusta on paljon sanottavaa. Itse asiassa monet alueet, kuten pelit ja tuoreet aktiviteetit, on uudistettu täysin vaikuttavalla kasvojenkohotuksella.

Stevenin muotoilu on paljon tummempi kuin Facebookin nykyinen värijärjestelmä. Pidän tästä, koska se rakentaa enemmän kontrastia sivupalkkien ja ensisijaisen sivun sisällön välillä. Facebookin nykyisellä kotisivulla on suurin osa tästä sisällöstä, mutta ajan kuluessa se voi sekoittua taustaan.

Otsikko käyttää edelleen punaisia ​​kuplia ilmoitusten ilmoittamiseen. Siellä on myös trendikkäitä viestejä ja uutissyöttölaitteita, joiden avulla voidaan lajitella viimeisimpien ystävien aktiivisuus oikealla sivupalkilla.

Hyvin alhaalla huomaat pienen laatikon Facebookin M: lle vastaava Siri Facebook-käyttäjille.

Tämä ominaisuus ei saa paljon huomiota uudelleensuunnittelussa, mutta Steven todella meni all-outiin, jotta hänen konseptinsa todella edustaisivat modernia Facebook-tekniikkaa.

Neljän sarakkeen aikajanan asettelu

Seuraavassa on japanilaisen suunnittelija Sho Kameyan tekemä uusi kolmiulotteinen kotisivu. Kaikki nämä sarakkeet kattavat koko sivun, sekä leveys että korkeus.

Etäpuolella oleva sivupalkki keskittyy painokkaasti perinteisiin Facebook-linkkeihin peleissä, sovelluksissa, sivuissa, dev-resursseissa ja muissa vastaavissa kohteissa. Seuraavaksi on sisällön sarake, joka on monipuolisin kaikkien uudelleensuunnittelujen joukossa. Tämä ei pidä perinteisiä linkkejä päivityksen tilaan / lisää valokuvaa, vaan käyttää a minimalistinen lähestymistapa piilotetuilla vaihtoehdoilla.

Kaksi oikeaa sivupalkkia sisältää kaiken muun, jossa on enemmän kuvia, kuten käyttäjän avatarit ja pelikuvakkeet. Tämä muotoilu pitää silti kaikki päivitykset, kuten syntymäpäivät, keskustelut ja ystävien suositukset.

Tämä muotoilu on hyvin monipuolinen, mutta pysyy uskollisena Facebookin ominaisuuksien ytimessä. Se ei ehkä ole täydellinen uudelleensuunnittelu vaan se näyttää neljän sarakkeen asettelun mahdollisuudet.

Yksinkertaistettu käyttöliittymä, jossa on Dark Chat List

Ben Hartleyn uudelleensuunnittelun tavoite on yksinkertaisuus ja hienovaraisuus. Ulkoasu käyttää yhdistelmää tasaisista suunnittelukonsepteista, joissa on muutama pisara varjo suuremmille sivuelementeille.

Monet merkkituotteista pysyvät samoina, ja hän luottaa Facebookin perinteiseen siniseen / harmaasävyiseen järjestelmään. Mutta huomaat, että joitakin kuvakkeista on suunniteltu uudelleen joko pienempi tai yksinkertaisempi (tai molemmat).

Tämä asettelu riippuu myös pyöreät avatarit ja antaa runsaasti tilaa jaetuille kuville viestejä. Nautin todella hänen päivitetty chat-luettelo, jossa on tummempi värimalli ja pienemmät tilakuvakkeet.

Vaikka Benin uudelleensuunnittelu tuntuu vielä hieman sekavalta, se tuntuu paljon yksinkertaisemmalta. Tämä olisi kovaa suunnittelua, jotta voidaan arvioida käyttökokemusta ilman UX-tutkimuksia selaimessa. Mutta yhdellä silmäyksellä näyttää siltä helpompi selata ja antaa enemmän tilaa kuluttaa aikajanan sisältöä.

Paketoida

Vaikka nämä esimerkit keskittyvät lähinnä Facebookiin, saatuja kokemuksia voidaan soveltaa mihin tahansa verkkosivustoon. Suuri käyttäjäkokemuksen muotoilu ylittää kaikki kielimuodot ja se on elintärkeä osa digitaalista luovaa prosessia.

Voit vapaasti lainata ideoita tästä analyysistä ja toteuttaa jopa samanlaisia ​​ideoita omassa projektityössäsi. Myös jos löydät relatable Facebook redesigns, voit vapaasti jakaa kommentteja omalla analyysillä.