Facebook herontworpen een diepgaande analyse van onafhankelijke ontwerpen

Er valt veel te leren door het werk van andere ontwerpers te bestuderen. Dit geldt voor zowel professionele projecten als spec designs voor bestaande websites. Grote sites zoals Facebook dienen een zeer specifieke gebruikerservaring met enkele goede elementen en andere niet-zo-goede elementen. In dit bericht zou ik willen onderzoek verschillende Facebook-herontwerpen om interfaceconcepten te analyseren dat zou de huidige gebruikerservaring kunnen verbeteren.

Ik heb een handvol aangepaste FB-herontwerpen opgehaald van Dribbble-gebruikers, elk met specifieke verbeteringen en bijgewerkte UI-elementen. Houd rekening met deze ideeën voor hoe ze eruit zien, hoe ze kunnen functioneren, en hoe ze de bruikbaarheid kunnen beïnvloeden indien geïmplementeerd live op Facebook.

Gestroomlijnde profielpagina

Deze herontwerp van de profielpagina komt van Haris Jusovic, een ontwerper uit de Balkanregio van Europa.

In dit ontwerp legt hij meer nadruk op eenvoud door de pagina-eigenaar met een meer te benadrukken prominente kopfoto en profielfoto.

Tijdlijn berichten kunnen worden gesorteerd op “recent” of “populair” op basis van uw voorkeur. Dit is groot voor de bruikbaarheid, vooral in de nasleep van de tegenwerking van Twitter tegen de recentelijk opgedragen algoritmeverandering.

Ook veel van de knoppen groter weergeven met extra opvulling en grotere typografie. Omdat Facebook bedoeld is als interactief, is het alleen logisch om de zichtbaarheid van items zoals knoppen en hyperlinks te vergroten.

Over het algemeen voelt dit concept aan compact en lichter in bloat. Het zou leuk zijn om te zien dat Facebook zich meer op interactieve elementen richt en misschien ook hun lettergroottes vergroot.

Multi-kolom tijdlijn

Naar een verticaal kolomvormige lay-out toe is het herontwerp van Alejandro Osorio. Deze lay-out vertegenwoordigt de profieltijdlijnweergave die Facebook-gebruikers te zien krijgen wanneer ze de profielpagina van een gebruiker bezoeken.

Het ontwerp is opvallend maar kan voor sommige gebruikers onaangenaam zijn. Het is afhankelijk van meerdere paginakolommen om te organiseren de profielkoppelingen van de gebruiker, samen met een tijdlijnweergave van recente berichten. Alle kleuren en elementen blijven trouw aan de ontwerpstijlen van Facebook. Het voelt zeker als een Facebook-tijdlijnpagina.

Maar sommige elementen in de zijbalk komen er als een beetje verwarrend uit. Bijvoorbeeld een groene knop met één plusteken rechts naast een “volgen” knop. Men gebruikt alleen een symbool, de ander alleen tekst. Dit voelt incongruent aan met de ontwerpstijl en andere profielinformatie.

Wat ik het leukste vind hier is de duidelijke structuur van gegevens in de tijdlijn. Alles is duidelijk georganiseerd en er zijn zelfs zijbalkkoppelingen om te schakelen tussen recente berichten en populaire berichten.

Content-Dense Redesign

Grotere websites zoals Facebook hebben te maken met veel meer gegevens en een gebruikersbasis die gemakkelijke toegang tot die gegevens wil. In de herontwerp van de startpagina van MagicVoltage vindt u één consistente functie: veel inhoud gepropt in één pagina-indeling.

De startpagina van Facebook is de initiële tijdlijnweergave die gebruikers zien wanneer ze de website voor het eerst bezoeken. Het bevat recente berichten van vrienden, een chatlijst, games, advertenties en andere relevante informatie zoals aankomende verjaardagen.

De drukte van deze lay-out maakt het zowel geweldig als mogelijk controversieel. Het hebben van al deze inhoud op één pagina maakt het super makkelijk om te navigeren - als je echt leert waar alles zich bevindt. En de links in het linkse pictogram zijn slechts vaag genoeg om iemand ervan te weerhouden ermee in contact te komen.

Maar ter verdediging van dit ontwerp behandelt het dichtbevolkte inhoud zeer goed. er is veel witruimte tussen elementen en het heeft een ontwerp met vier kolommen op briljante wijze.

Volumineuze navigatie

Dit zogenaamde Facebook 2.0 herontwerp gemaakt door Marcelo Silva is echt een lust voor het oog. Zijn demolay-out toont een bijgewerkte startpagina met een tijdlijn en gedeeltelijk verborgen chatcontacten.

Een groot stuk aan dit ontwerp is de trapsgewijs navigatiesysteem. Ik vind het leuk dat er een primaire nav is met pictogramkoppelingen die secundaire links weergeven. In het bovenstaande screenshot selecteert de gebruiker het profielpictogram met links voor door recente geschiedenis bladeren en het profiel bewerken.

In tegenstelling tot de traditionele vierkante foto's van Facebook, het herontwerp van Marcelo kiest voor de cirkelvormige foto. Deze stijl is alomtegenwoordig in zowel de tijdlijn als de chatlijst.

M Assistent & Lijst met recente activiteiten

Er valt veel te zeggen over het nieuwe ontwerp van Steven McCabe. Veel gebieden zoals games en recente activiteiten zijn zelfs volledig opnieuw ontworpen met een indrukwekkende facelift.

Het ontwerp van Steven is veel donkerder dan het huidige kleurenschema van Facebook. Ik vind dit leuk omdat het meer contrast tussen sidebars en primaire pagina-inhoud opbouwt. De huidige startpagina van Facebook heeft het grootste deel van deze inhoud, maar na verloop van tijd kan het opgaan in de achtergrond.

De koptekst gebruikt nog steeds rode bubbels om meldingen aan te geven. Er zijn ook trending-berichten en een nieuwsfeed met de mogelijkheid om recente activiteiten van vrienden in de rechterzijbalk te sorteren.

Helemaal onderaan zie je een klein vakje voor Facebook's M, de equivalent van Siri voor Facebook-gebruikers.

Deze functie krijgt niet veel aandacht in herontwerpen, maar Steven heeft er echt alles aan gedaan om zijn concept echt moderne Facebook-technologie te laten vertegenwoordigen.

Indeling met vier kolommen in de tijdlijn

Hier is nog een nieuw redesign van 4 cols gemaakt door de Japanse ontwerper Sho Kameya. Al deze kolommen span de hele pagina door, zowel breedte als hoogte.

In de zijbalk uiterst links wordt veel aandacht besteed aan traditionele Facebook-links voor games, apps, pagina's, dev-bronnen en andere vergelijkbare items. De volgende is de inhoudskolom die het meest divers is van alle herontwerpen. Hiermee worden de traditionele links niet behouden voor de status van de update / foto toevoegen, maar wordt in plaats daarvan een minimalistische benadering met verborgen opties.

De twee rechterzijbalken bevatten al het andere met meer foto's zoals gebruikersavatars en spelpictogrammen. Dit ontwerp houdt nog steeds alle updates bij zoals verjaardagen, chats en aanbevelingen van vrienden.

Dit ontwerp is zeer divers maar blijft trouw aan de kern van de functies van Facebook. Het is misschien niet het perfecte herontwerp maar het toont de mogelijkheden van een lay-out met vier kolommen.

Vereenvoudigde UI met Dark Chat List

Het doel van het herontwerp van Ben Hartley is eenvoud en subtiliteit. De lay-out gebruikt een combinatie van platte ontwerpconcepten met enkele slagschaduwen op grotere pagina-elementen.

Veel merkartikelen blijven hetzelfde en hij vertrouwt op het traditionele blauw / grijze kleurenschema van Facebook. Maar u zult merken dat enkele van de pictogrammen opnieuw zijn ontworpen ofwel kleiner of eenvoudiger (of allebei).

Deze lay-out is ook afhankelijk van circulaire avatars en geeft voldoende ruimte voor gedeelde beelden met berichten. Ik geniet echt van de zijne bijgewerkte chatlijst met het donkerdere kleurenschema en kleinere statuspictogrammen.

Hoewel het herontwerp van Ben nog steeds een beetje rommelig aanvoelt, voelt het veel eenvoudiger. Dit zou een moeilijk ontwerp zijn om gebruikerservaring te meten zonder UX-onderzoeken in een browser. Maar in één oogopslag lijkt het gemakkelijker om te bladeren en geeft meer ruimte om tijdlijninhoud te consumeren.

Afronden

Hoewel deze voorbeelden voornamelijk op Facebook zijn gericht, kunnen de geleerde lessen op elke website worden toegepast. Een goed ontwerp voor gebruikerservaringen overstijgt alle taalbarrières en het is een essentieel onderdeel van het digitale creatieve proces.

Voel je vrij om ideeën uit deze analyse te lenen en zelfs soortgelijke ideeën in je eigen projectwerk te implementeren. Ook als je vindbare Facebook-ontwerpen vindt, kun je deze delen met je eigen analyse.