Facebook riprogettato un'analisi approfondita dei progetti indipendenti

C'è molto da imparare studiando il lavoro di altri designer. Questo vale sia per i progetti professionali che per i progetti di specifiche per i siti Web esistenti. Grandi siti come Facebook offrono un'esperienza utente molto particolare con alcuni elementi validi e altri elementi non-così-buoni. In questo post, mi piacerebbe esaminare le diverse riprogettazioni di Facebook per analizzare i concetti dell'interfaccia che potrebbe migliorare l'esperienza utente corrente.

Ho tirato una manciata di ridisegnazioni FB personalizzate da parte degli utenti di Dribbble, ognuna con miglioramenti specifici e elementi dell'interfaccia utente aggiornati. Prendi in considerazione queste idee per come appaiono, come potrebbero funzionare e come potrebbero influire sull'usabilità se implementato dal vivo su Facebook.

Pagina profilo semplificato

Questa riprogettazione della pagina del profilo proviene da Haris Jusovic, designer della regione balcanica europea.

In questo disegno pone maggiore attenzione alla semplicità, evidenziando il proprietario della pagina con un altro foto di intestazione e foto profilo prominenti.

I post della cronologia possono essere ordinati per “recente” o “popolare” in base alle tue preferenze. Questo è grande per l'usabilità, specialmente sulla scia del contraccolpo di Twitter contro il cambiamento dell'algoritmo di recente mandato.

Anche molti dei pulsanti sono più grandi con imbottitura extra e tipografia più grande. Dal momento che Facebook è pensato per essere interattivo, ha senso solo aumentare la visibilità di elementi come pulsanti e collegamenti ipertestuali.

Nel complesso questo concetto si sente compatto e più leggero a gonfiare. Sarebbe bello vedere Facebook concentrarsi maggiormente sugli elementi interattivi e magari aumentare anche le dimensioni dei caratteri.

Linea temporale a più colonne

La riprogettazione verso un layout a colonne verticali è la riprogettazione di Alejandro Osorio. Questo layout rappresenta la vista cronologica del profilo che gli utenti di Facebook vedono quando visitano la pagina del profilo di un utente.

Il design è sorprendente ma può essere scoraggiante per alcuni utenti. Si basa su colonne di più pagine da organizzare i collegamenti del profilo dell'utente, insieme a una visualizzazione cronologica dei post recenti. Tutti i colori e gli elementi rimangono fedeli agli stili di design di Facebook. Sicuramente sembra una pagina della timeline di Facebook.

Ma alcuni degli elementi della barra laterale risultano piuttosto confusi. Ad esempio, un pulsante verde con un singolo segno più accanto a a “Seguire” pulsante. Uno usa solo un simbolo, l'altro solo testo. Questo sembra incongruente con lo stile del design e altre informazioni sul profilo.

Quello che mi piace di più qui è il chiara struttura dei dati nella timeline. Tutto è organizzato in modo chiaro e ci sono anche i link della barra laterale per passare da post recenti a post popolari.

Ridisegno contenuto-denso

I più grandi siti web come Facebook gestiscono molti più dati e una base di utenti che vuole un facile accesso a quei dati. Nella riprogettazione della homepage di MagicVoltage troverai una funzionalità coerente: un sacco di contenuti stipati in un layout di pagina.

La home page di Facebook è la visualizzazione cronologica iniziale che gli utenti vedono quando visitano il sito per la prima volta. Include post recenti di amici, un elenco di chat, giochi, annunci e altre informazioni pertinenti come i compleanni imminenti.

L'impegno di questo layout è ciò che lo rende grande e potenzialmente controverso. L'avere tutto questo contenuto in una pagina lo rende super facile da navigare - una volta che effettivamente impari dove si trova tutto. E i link delle icone in alto a sinistra sono abbastanza vaghi da dissuadere chiunque a interagire con loro.

Ma in difesa di questo design gestisce molto bene i contenuti densi. C'è un sacco di spazio bianco tra gli elementi e gestisce brillantemente un design a quattro colonne.

Navigazione voluminosa

Questa cosiddetta riprogettazione di Facebook 2.0 creata da Marcelo Silva è davvero uno spettacolo da vedere. Il suo layout demo mostra una homepage aggiornata con una timeline e contatti di chat parzialmente nascosti.

Un grande pezzo di questo design è il sistema di navigazione a più livelli. Mi piace il modo in cui c'è un navigatore principale con collegamenti icona che visualizzano link secondari. Nello screenshot qui sopra l'utente sta selezionando l'icona del profilo con i collegamenti sfogliare la cronologia recente e modificare il profilo.

A differenza delle tradizionali foto quadrate di Facebook, la riprogettazione di Marcelo opta verso la foto circolare. Questo stile è onnipresente sia nella timeline che nella chat.

M Assistente e elenco attività recenti

C'è molto da dire sulla riprogettazione della FB di Steven McCabe. In effetti, molte aree come i giochi e le attività recenti sono state completamente ridisegnate con un lifting impressionante.

Il design di Steven è molto più scuro rispetto all'attuale combinazione di colori di Facebook. Mi piace perché crea più contrasto tra le barre laterali e il contenuto della pagina principale. L'attuale homepage di Facebook ha la maggior parte di questi contenuti ma nel tempo può fondersi con lo sfondo.

L'intestazione utilizza ancora bolle rosse per indicare le notifiche. Sono disponibili anche post di tendenza e newsfeed con la possibilità di ordinare le attività recenti degli amici nella barra laterale destra.

In fondo noterete una piccola scatola per Facebook M, la equivalente di Siri per gli utenti di Facebook.

Questa caratteristica non riceve molta attenzione nelle riprogettazioni, ma Steven è davvero andato fuori di testa per rendere il suo concetto rappresentativo della moderna tecnologia di Facebook.

Layout timeline a quattro colonne

Ecco un'altra riprogettazione della homepage di 4 colori realizzata dal designer giapponese Sho Kameya. Tutte queste colonne abbracciare l'intera pagina, sia larghezza che altezza.

La barra laterale di estrema sinistra pone l'accento sui tradizionali collegamenti di Facebook per giochi, app, pagine, risorse di sviluppo e altri elementi simili. La prossima è la colonna di contenuti che è la più diversa tra tutte le riprogettazioni. Ciò non mantiene i collegamenti tradizionali per lo stato di aggiornamento / aggiungi foto ma utilizza invece a approccio minimalista con opzioni nascoste.

Le due barre laterali di destra includono tutto il resto con più foto come avatar utente e icone di gioco. Questo design conserva ancora tutti gli aggiornamenti come compleanni, chat e consigli di amici.

Questo design è molto vario ma rimane fedele al nucleo delle funzionalità di Facebook. Potrebbe non essere la riprogettazione perfetta ma è così mostra le possibilità di un layout a quattro colonne.

Interfaccia utente semplificata con elenco chat scure

L'obiettivo della riprogettazione di Ben Hartley è la semplicità e la sottigliezza. Il layout utilizza una combinazione di concetti di design piatto con alcune ombre esterne su elementi di pagina più grandi.

Molti articoli di marca rimangono gli stessi e si affida allo schema tradizionale blu / grigio di Facebook. Ma noterai che alcune icone sono state ridisegnate più piccolo o più semplice (o entrambi).

Anche questo layout si basa avatar circolari e offre molto spazio per le immagini condivise con messaggi. Mi piace davvero il suo elenco chat aggiornato con la combinazione di colori più scuri e icone di stato più piccole.

Mentre la riprogettazione di Ben si sente ancora un po 'ingombra, sembra molto più semplice. Questo sarebbe un progetto difficile per valutare l'esperienza utente senza studi UX in un browser. Ma a prima vista sembra più facile da navigare e offre più spazio per consumare il contenuto della timeline.

Incartare

Sebbene questi esempi si concentrino principalmente su Facebook, le lezioni apprese possono essere applicate a qualsiasi sito web. Il grande design dell'esperienza utente trascende tutte le barriere linguistiche ed è un elemento vitale del processo creativo digitale.

Sentiti libero di prendere in prestito idee da questa analisi e persino di implementare idee simili nel tuo lavoro di progetto. Inoltre, se trovi qualche riprogettazione Facebook pertinente, sentiti libero di condividere i commenti con la tua analisi.