Το Facebook επανασχεδίασε μια σε βάθος ανάλυση ανεξάρτητων σχεδίων

Υπάρχουν πολλά που πρέπει να μάθετε μελετώντας το έργο άλλων σχεδιαστών. Αυτό ισχύει τόσο για τα επαγγελματικά σχέδια όσο και για τα σχέδια προδιαγραφών για υπάρχοντες ιστότοπους. Μεγάλες τοποθεσίες όπως το Facebook εξυπηρετούν μια πολύ ιδιαίτερη εμπειρία χρήστη με κάποια καλά στοιχεία και άλλα όχι τόσο καλά στοιχεία. Σε αυτή τη θέση, θα ήθελα να εξετάστε διαφορετικούς επανασχεδιασμούς του Facebook για να αναλύσετε τις έννοιες των διεπαφών που θα μπορούσαν να βελτιώσουν την τρέχουσα εμπειρία του χρήστη.

Έχω τραβήξει μια χούφτα προσαρμοσμένες FB επανασχεδιασμούς από Dribbble χρήστες, το καθένα με συγκεκριμένες βελτιώσεις και ενημερωμένα στοιχεία UI. Πάρτε αυτές τις ιδέες υπόψη για το πώς φαίνονται, πώς μπορούν να λειτουργήσουν, και πώς θα μπορούσαν να επηρεάσουν τη χρηστικότητα αν εφαρμοστεί ζωντανά στο Facebook.

Βελτιωμένη σελίδα προφίλ

Αυτός ο επανασχεδιασμός της σελίδας του προφίλ προέρχεται από τον Haris Jusovic, σχεδιαστή από την περιοχή των Βαλκανίων της Ευρώπης.

Σε αυτό το σχέδιο δίνει μεγαλύτερη έμφαση στην απλότητα, επισημαίνοντας τον ιδιοκτήτη της σελίδας με ένα περισσότερο προεξέχουσα φωτογραφία κεφαλίδας και εικόνα προφίλ.

Οι αναρτήσεις του χρονικού πλαισίου μπορούν να ταξινομηθούν ανά “πρόσφατος” ή “δημοφιλής” με βάση την προτίμησή σας. Αυτό είναι μεγάλο για τη χρηστικότητα, ειδικά μετά την αντίδραση του Twitter ενάντια στην πρόσφατη αλλαγή αλγορίθμου.

Επίσης πολλά από τα κουμπιά εμφανίζονται μεγαλύτερα με επιπλέον padding και μεγαλύτερη τυπογραφία. Δεδομένου ότι το Facebook πρέπει να είναι διαλογικό, έχει νόημα μόνο να αυξάνεται η προβολή στοιχείων όπως τα κουμπιά και οι υπερσυνδέσεις.

Συνολικά, αυτή η ιδέα αισθάνεται συμπαγής και ελαφρύτερος σε πρήξιμο. Θα ήταν ωραίο να δούμε το Facebook να δίνει μεγαλύτερη έμφαση στα διαδραστικά στοιχεία και ίσως να αυξήσει και τα μεγέθη των γραμματοσειρών.

Χρονοδιάγραμμα πολλαπλών στηλών

Η προβολή προς μια κατακόρυφη κατεύθυνση είναι ο επανασχεδιασμός του Alejandro Osorio. Αυτή η διάταξη αντιπροσωπεύει την προβολή της χρονικής γραμμής προφίλ που βλέπουν οι χρήστες του Facebook όταν επισκέπτονται τη σελίδα προφίλ ενός χρήστη.

Ο σχεδιασμός είναι εντυπωσιακός, αλλά μπορεί να είναι εκτός λειτουργίας για ορισμένους χρήστες. Στηρίζεται πολλές στήλες σελίδων για οργάνωση τα προφίλ του χρήστη συνδέονται μαζί με μια προβολή της πρόσφατης αναρτήσης. Όλα τα χρώματα και τα στοιχεία παραμένουν αληθινά στα στυλ σχεδιασμού του Facebook. Σίγουρα αισθάνεται σαν μια σελίδα χρόνου στο Facebook.

Ορισμένα από τα στοιχεία της πλευρικής γραμμής όμως αποσβένονται ως ελαφρώς συγκεχυμένα. Για παράδειγμα, ένα πράσινο κουμπί με ένα μόνο σύμβολο συν ακριβώς δίπλα σε ένα “ακολουθηστε” κουμπί. Κάποιος χρησιμοποιεί μόνο ένα σύμβολο, το άλλο απλό κείμενο. Αυτό είναι ασύμβατο με το στυλ του σχεδιασμού και άλλες πληροφορίες σχετικά με το προφίλ.

Αυτό που μου αρέσει περισσότερο είναι εδώ σαφή δομή των δεδομένων στο χρονοδιάγραμμα. Τα πάντα είναι οργανωμένα με σαφήνεια και υπάρχουν ακόμη και σύνδεσμοι πλευρικής γραμμής για εναλλαγή μεταξύ πρόσφατων δημοσιεύσεων και δημοφιλών αναρτήσεων.

Περιεκτικότητα-πυκνός επανασχεδιασμός

Μεγαλύτερες ιστοσελίδες όπως το Facebook ασχολούνται με πολύ περισσότερα δεδομένα και ένα userbase που θέλει εύκολη πρόσβαση σε αυτά τα δεδομένα. Στον επανασχεδιασμό της αρχικής σελίδας από το MagicVoltage θα βρείτε μια συνεπή λειτουργία: πολλά περιεχόμενα γεμάτα σε μία διάταξη σελίδας.

Η αρχική σελίδα του Facebook είναι η αρχική προβολή του χρόνου που βλέπουν οι χρήστες κατά την πρώτη επίσκεψη στον ιστότοπο. Περιλαμβάνει πρόσφατες αναρτήσεις από φίλους, λίστα συνομιλίας, παιχνίδια, διαφημίσεις και άλλες σχετικές πληροφορίες, όπως τα επερχόμενα γενέθλια.

Η απασχολησιμότητα αυτής της διάταξης είναι αυτό που το κάνει τόσο μεγάλο όσο και δυνητικά αμφιλεγόμενο. Έχοντας όλο αυτό το περιεχόμενο σε μια σελίδα το κάνει εξαιρετικά εύκολο στην πλοήγηση - Μόλις μάθετε πού βρίσκονται τα πάντα. Και οι επάνω αριστερά συνδέσεις εικονιδίων είναι αρκετά ασαφείς ώστε να αποθαρρύνουν οποιονδήποτε από την αλληλεπίδραση με αυτούς.

Αλλά για την υπεράσπιση αυτού του σχεδιασμού χειρίζεται πολύ πυκνά συσκευασμένο περιεχόμενο. Υπάρχει άφθονο κενό μεταξύ των στοιχείων και τρέχει ένα σχέδιο τεσσάρων κολώνων λαμπρά.

Ογκώδης πλοήγηση

Αυτός ο λεγόμενος επανασχεδιασμός του Facebook 2.0 που δημιούργησε ο Marcelo Silva είναι πραγματικά ένα θέαμα που βλέπω. Η διάταξη επίδειξης εμφανίζει μια ενημερωμένη αρχική σελίδα με χρονολογική σειρά και μερικώς κρυμμένες επαφές συνομιλίας.

Ένα μεγάλο κομμάτι σε αυτό το σχέδιο είναι το κλιμακωτό σύστημα πλοήγησης. Μου αρέσει πώς υπάρχει ένα πρωτεύον δρομολόγιο με συνδέσμους εικονιδίων που εμφανίζουν δευτερεύοντες συνδέσμους. Στο παραπάνω screenshot ο χρήστης επιλέγει το εικονίδιο του προφίλ το οποίο έχει συνδέσμους περιήγηση στο πρόσφατο ιστορικό και επεξεργασία του προφίλ.

Σε αντίθεση με τις παραδοσιακές τετράγωνες φωτογραφίες του Facebook, ο επανασχεδιασμός του Marcelo επιλέγει την κυκλική φωτογραφία. Αυτό το στυλ είναι πανταχού παρόν τόσο στη χρονολογική σειρά όσο και στη λίστα συνομιλίας.

M Βοηθός & Πρόσφατη λίστα δραστηριοτήτων

Υπάρχουν πολλά που πρέπει να ειπωθούν για τον επανασχεδιασμό της FB του Steven McCabe. Στην πραγματικότητα, πολλοί τομείς όπως τα παιχνίδια και οι πρόσφατες δραστηριότητες έχουν επανασχεδιαστεί πλήρως με ένα εντυπωσιακό facelift.

Ο σχεδιασμός του Steven είναι πολύ πιο σκούρο από το τρέχον σύστημα χρωμάτων του Facebook. Μου αρέσει αυτό επειδή δημιουργεί μεγαλύτερη αντίθεση ανάμεσα στις πλευρικές γραμμές και το περιεχόμενο της αρχικής σελίδας. Η τρέχουσα αρχική σελίδα του Facebook έχει το μεγαλύτερο μέρος αυτού του περιεχομένου, αλλά με την πάροδο του χρόνου μπορεί να μπερδευτεί στο παρασκήνιο.

Η κεφαλίδα εξακολουθεί να χρησιμοποιεί κόκκινες φυσαλίδες για να υποδηλώνει ειδοποιήσεις. Υπάρχουν επίσης τρεχούμενες αναρτήσεις και ειδήσεις με την δυνατότητα να ταξινομούν την πρόσφατη δραστηριότητα από φίλους στη δεξιά πλευρά.

Στο κάτω μέρος θα δείτε ένα μικρό κουτί για το M, το Facebook ισοδύναμο του Siri για τους χρήστες του Facebook.

Αυτό το χαρακτηριστικό δεν παίρνει μεγάλη προσοχή στον επανασχεδιασμό, αλλά ο Steven πήγε πραγματικά all-out για να κάνει την ιδέα του να αντιπροσωπεύει πραγματικά σύγχρονη τεχνολογία Facebook.

Διάταξη χρονικής γραμμής τεσσάρων στηλών

Ακολουθεί ένας ακόμη επανασχεδιασμός της αρχικής σελίδας της 4ης σελίδας από τον Ιάπωνα σχεδιαστή Sho Kameya. Όλες αυτές οι στήλες καλύπτουν ολόκληρη τη σελίδα, τόσο το πλάτος όσο και το ύψος.

Η αριστερή πλαϊνή μπάρα δίνει μεγάλη έμφαση στους παραδοσιακούς συνδέσμους Facebook για παιχνίδια, εφαρμογές, σελίδες, πόρους dev και άλλα παρόμοια στοιχεία. Ακολουθεί η στήλη περιεχομένου που είναι η πιο ποικίλη μεταξύ όλων των επανασχεδιασμών. Αυτό δεν κρατάει τους παραδοσιακούς συνδέσμους για την κατάσταση ενημέρωσης / προσθήκη φωτογραφίας αλλά χρησιμοποιεί α μινιμαλιστική προσέγγιση με κρυφές επιλογές.

Οι δύο πλευρικές μπάρες δεξιά περιλαμβάνουν όλα τα άλλα με περισσότερες φωτογραφίες όπως είδωλα χρήστη και εικονίδια παιχνιδιών. Αυτός ο σχεδιασμός διατηρεί όλες τις ενημερώσεις όπως γενέθλια, συζητήσεις και συστάσεις φίλων.

Αυτός ο σχεδιασμός είναι πολύ διαφορετικός αλλά παραμένει αληθινός στον πυρήνα των χαρακτηριστικών του Facebook. Μπορεί να μην είναι ο τέλειος επανασχεδιασμός αλλά αυτό δείχνει τις δυνατότητες μιας διάταξης τεσσάρων στηλών.

Απλοποιημένη διεπαφή χρήστη με μαύρη λίστα συζήτησης

Ο στόχος του επανασχεδιασμού του Ben Hartley είναι η απλότητα και η λεπτότητα. Η διάταξη χρησιμοποιεί ένα συνδυασμό επίπεδων σχεδίων με μερικές σκιές στα μεγαλύτερα στοιχεία της σελίδας.

Πολλά προϊόντα με επώνυμα προϊόντα παραμένουν τα ίδια και βασίζεται στο παραδοσιακό μπλε / γκρι σχέδιο χρώματος του Facebook. Αλλά θα παρατηρήσετε ότι μερικά από τα εικονίδια έχουν επανασχεδιαστεί είτε μικρότερες είτε απλούστερες (ή και τα δύο).

Αυτή η διάταξη βασίζεται επίσης κυκλικά είδωλα και δίνει αρκετό χώρο για κοινή χρήση εικόνων με θέσεις. Μου αρέσει πολύ ενημερωμένη λίστα συνομιλίας με το πιο σκούρο συνδυασμό χρωμάτων και τα μικρότερα εικονίδια κατάστασης.

Ενώ ο επανασχεδιασμός του Ben αισθάνεται ακόμα λίγο γεμάτος, αισθάνεται πολύ πιο απλός. Αυτό θα ήταν ένα σκληρό σχέδιο για να μετρήσετε την εμπειρία των χρηστών χωρίς μελέτες UX σε ένα πρόγραμμα περιήγησης. Αλλά με μια ματιά φαίνεται ευκολότερη την περιήγηση και δίνει περισσότερο περιθώριο για κατανάλωση περιεχομένου χρόνου.

Τύλιξε

Αν και αυτά τα παραδείγματα εστιάζονται κυρίως στο Facebook, τα διδάγματα που αντλήθηκαν μπορούν να εφαρμοστούν σε οποιονδήποτε ιστότοπο. Μεγάλη σχεδιαστική εμπειρία χρήστη ξεπερνά όλα τα γλωσσικά εμπόδια και είναι ένα σημαντικό κομμάτι της ψηφιακής δημιουργικής διαδικασίας.

Νιώστε ελεύθεροι να δανειστείτε ιδέες από αυτήν την ανάλυση και να εφαρμόσετε παρόμοιες ιδέες και στο δικό σας έργο. Επίσης, αν βρείτε ανασχεδιασμένους επανασχεδιασμούς στο Facebook, μπορείτε να μοιραστείτε τα σχόλια με τη δική σας ανάλυση.