Βέλτιστες πρακτικές για το σχεδιασμό μιας ιστοσελίδας κοινωνικών ειδήσεων
Πώς αποκτάτε τις καθημερινές σας ειδήσεις αυτές τις μέρες; Λοιπόν ... μπορεί να επισκέπτεστε τους αγαπημένους σας ιστότοπους και ιστολόγια, αλλά αυτό είναι αναποτελεσματικό επειδή τα blogs ενδέχεται να μην έχουν ενημερώσεις. Ίσως να εγγραφείτε σε αυτά χρησιμοποιώντας το RSS , το οποίο παραδίδει όλα τα νέα άρθρα κατευθείαν σε σας, αλλά στην περίπτωση αυτή θα πρέπει να ταξινομήσετε όλα τα νέα για να βρείτε αυτό που σας ενδιαφέρει. Μια άλλη επιλογή σήμερα θα ήταν να επισκεφτείτε έναν ιστότοπο κοινωνικών ειδήσεων .
Οι ιστότοποι κοινωνικών ειδήσεων είναι συσσωρευτές συνδέσμων, πράγμα που σημαίνει ότι η κύρια λειτουργία τους είναι να συλλέξουν και να μοιραστούν ενδιαφέροντες συνδέσμους Αυτό μπορεί να γίνει με υποβολές χρηστών ή αυτό μπορεί να γίνει αυτόματα από το σύστημα. Η πτυχή της συσσωμάτωσης είναι μόνο ένα μέρος της, αν και αυτές οι τοποθεσίες ταξινομούν επίσης τους συνδέσμους. Και πάλι, αυτό μπορεί να γίνει μέσω ψηφοφορίας από το χρήστη ή με κάποιον μηχανικό αλγόριθμο (αν και σε αυτή την περίπτωση, μπορούμε πραγματικά να το ονομάσουμε "κοινωνικό" χώρο ειδήσεων;). Το τελικό αποτέλεσμα είναι το ίδιο ωστόσο: οι πιο ενδιαφέρουσες συνδέσεις ανεβαίνουν στην κορυφή . Αυτή η συγκεκριμένη λειτουργία καθιστά τους ιστότοπους κοινωνικών ειδήσεων μια μεγάλη εναλλακτική λύση για το RSS.
Σε αυτό το άρθρο θα παρουσιάσω μερικές από τις σημερινές κορυφαίες ιστοσελίδες κοινωνικών ειδήσεων, θα εντοπίσει τις τάσεις και τα σχέδια στα σχέδιά τους και θα προτείνει μερικές βέλτιστες πρακτικές που θα ακολουθήσουν κατά το σχεδιασμό τέτοιων ιστότοπων. Ας ξεκινήσουμε εξετάζοντας τέσσερις δημοφιλείς ιστότοπους κοινωνικών ειδήσεων και βλέπουμε πώς συγκρίνουν τα σχέδιά τους.
Digg
Το Digg είναι ο πιο δημοφιλής ιστότοπος κοινωνικών ειδήσεων και διαθέτει ένα χρήσιμο σχέδιο που προσαρμόζεται συχνά από πολλούς από τους ανταγωνιστές του. Το Digg χρησιμοποιεί μια διάταξη δύο στηλών : μια λίστα από ιστορίες στα αριστερά και επιπλέον πράγματα στα δεξιά, όπως το κουτί των κορυφαίων 10 ιστοριών. Στην κορυφή, το Digg εμφανίζει μια λίστα κατηγοριών ιστοριών και κάτω από αυτά τα στοιχεία ελέγχου διαλογής. Έτσι, ένας χρήστης μπορεί να επιλέξει μια κατηγορία, να πει ... "Τεχνολογία", και στη συνέχεια να το ταξινομήσετε με "Προσεχείς" για να δείτε όλες τις τελευταίες υποβολές.
Προπέλα
Η έλικα είναι ένα καλό παράδειγμα ενός ιστότοπου που ακολουθεί αρκετά τη διάταξη Digg. Πρόκειται για μια διάταξη δύο στηλών με μια λίστα από ιστορίες στο αριστερό και δευτερεύον περιεχόμενο στα δεξιά , όπως τα πιο πρόσφατα tweets σχετικά με την Propeller ή μια λίστα με τις πιο σχολιασμένες ιστορίες.
Σε αντίθεση με το Digg, ο Propeller χρησιμοποιεί οριζόντιους διαχωριστές γραμμών μεταξύ κάθε ιστορίας, καθώς και ένα φόντο με ζέβρα με ριγέ για να κάνει τη λίστα πιο εύκολη. Αυτό μπορεί να βοηθήσει, αν και πρέπει να σημειώσω ότι η ταινία ζέβρας χρησιμοποιείται παραδοσιακά για να διευκολύνει την ανάγνωση σε πίνακες πολλαπλών στηλών, ειδικά εκείνων με πολλές στήλες. Αυτό συμβαίνει επειδή θέλετε να διαβάσετε ένα κομμάτι δεδομένων σε μια στήλη μακριά από την αρχική ετικέτα στα αριστερά και χρησιμοποιώντας τη λωρίδα ζέβρας ως οδηγό σας βοηθά να κινήσετε το μάτι χωρίς να χάσετε το ίχνος της σειράς . Στο πλαίσιο του Propeller, το οποίο έχει ουσιαστικά μόνο μία στήλη δεδομένων, το αποτέλεσμα της ταινίας ζέβρας είναι αμφισβητήσιμο.
Το Reddit είναι ένα παράδειγμα διαφορετικού σχεδιασμού από αυτό του Digg. Το Reddit επικεντρώνεται σε μεγάλο βαθμό στο περιεχόμενο, κυρίως στους τίτλους. Η εστίαση είναι τόσο δυνατή ώστε τα πάντα εκτός από τα πρωτοσέλιδα να ελαχιστοποιηθούν και να απομακρυνθούν για να αφήσουν τις ιστορίες να πάρουν το μπροστινό κάθισμα. Αυτός ο μινιμαλιστικός σχεδιασμός επιτρέπει την πολύ γρήγορη κατανάλωση πληροφοριών καθώς ο επισκέπτης μπορεί γρήγορα να σαρώσει πολλούς τίτλους για να βρει μια ιστορία ενδιαφέρουσα για αυτούς. Επειδή η Reddit δεν έχει πεδία περιγραφής, κάθε ιστορία καταλαμβάνει λιγότερο χώρο, έτσι ώστε περισσότερες ιστορίες να εμφανίζονται στην οθόνη .
Το Reddit διαθέτει επίσης ένα μοναδικό στοιχείο στην κορυφή της πρώτης σελίδας: μια τυχαία επερχόμενη ιστορία. Όπως και σε άλλες ιστοσελίδες κοινωνικών ειδήσεων, οι τελευταίες ιστορίες του Reddit κρατούνται στο "επερχόμενο" τμήμα. Επειδή αυτή η ενότητα λαμβάνει λιγότερη κίνηση από την πρώτη σελίδα, μερικές ενδιαφέρουσες ιστορίες μπορεί να χαθούν. Για να διορθωθεί αυτό, το Reddit εμφανίζει τυχαίες επερχόμενες ιστορίες στην πρώτη σελίδα για να τους δώσει μια σύντομη στιγμή έκθεσης που θα μπορούσε ενδεχομένως να τους βοηθήσει να τους προωθήσουν στην κορυφή.
Newsvine
Η Newsvine υιοθετεί μια διαφορετική προσέγγιση στο σχεδιασμό της. Σε αντίθεση με άλλους ιστότοπους κοινωνικών ειδήσεων που μοιάζουν με μια λίστα με τίτλους, η Newsvine χρησιμοποιεί την εμφάνιση περιοδικών / εφημερίδων . Οι ιστορίες συνοδεύονται από μια μεγάλη φωτογραφία και περιγραφή και σε μερικές περιπτώσεις το περιεχόμενο της ιστορίας μπορεί επίσης να βρεθεί στη σελίδα λεπτομερειών / σχολίων.
Ένα ενδιαφέρον στοιχείο της Newsvine είναι ο θετικός χάρτης επιπτώσεων:
Το διάγραμμα δείχνει δύο ρίγες: τις πιο ψηφοφορίες και τις πιο συζητημένες ιστορίες. Κάθε ένα παρουσιάζει ένα σύνολο μπλοκ, όλων των διαφορετικών χρωμάτων και μεγεθών. Μεγαλύτερα μπλοκ σημαίνει ότι υπάρχουν είτε περισσότερα σχόλια για αυτά είτε περισσότερες ψήφους, ανάλογα με το γράφημα στο οποίο βρίσκονται. Το χρώμα δείχνει την ηλικία της ιστορίας - το πράσινο είναι φρέσκο και το κόκκινο είναι παλιό. Αυτή η απεικόνιση επιτρέπει έναν μοναδικό τρόπο περιήγησης στο περιεχόμενο της Newsvine .
Ας δούμε τώρα μερικά από τα κοινά στοιχεία διεπαφής που υπάρχουν στις ιστοσελίδες κοινωνικών ειδήσεων:
Κουτιά επιλογής
Όλοι οι ιστότοποι κοινωνικών ειδήσεων έχουν κάποια μέθοδο ψηφοφορίας στα άρθρα, με εξαίρεση τους ιστοτόπους που χρησιμοποιούν αυτοματοποιημένους αλγόριθμους ταξινόμησης για να επεξεργάζονται τις τάξεις. Αυτό καθιστά τον τομέα ψηφοφορίας πολύ σημαντικό. Θέλετε να ξεφύγει αρκετά ώστε να μην χάσετε τους ανθρώπους , αλλά ταυτόχρονα πρέπει να εξασθενίσετε αρκετά καλά στο σχεδιασμό της διασύνδεσης για να διασφαλίσετε ότι δεν αποσπά την προσοχή κατά τη σάρωση των λιστών των τίτλων .
Ακολουθούν μερικά παραδείγματα των κουτιών ψηφοφορίας των δημοφιλών ιστοτόπων:
Κάθε κιβώτιο αποτελείται από έως και τέσσερα στοιχεία: τον βαθμό υποβολής, το άθροισμα των ψήφων, έναν σύνδεσμο για την ψηφοφορία της ιστορίας και έναν σύνδεσμο για να ψηφίσουμε την ιστορία . Οι περισσότεροι ιστότοποι δεν δείχνουν τον βαθμό και απλώς εμφανίζουν το άθροισμα των βαθμολογιών - δηλαδή, προστέθηκαν θετικές και αρνητικές ψήφοι. Μιλώντας για ψήφους, οι περισσότεροι ιστότοποι κοινωνικών ειδήσεων έχουν έναν τρόπο να ψηφίσουν μια ιστορία κάτω καθώς και επάνω, αν και ορισμένοι επιλέγουν να έχουν μόνο το κουμπί ένα επάνω. Σε περιπτώσεις όπου εμφανίζεται μόνο το κουμπί επάνω, ένας σύνδεσμος για "θάψει" (ή κάτω από την ψήφο) μια ιστορία συνήθως παρέχεται αλλού.
Στοιχεία ιστορίας
Κάθε ιστορία έχει κάτι περισσότερο από έναν τίτλο για να πάει μαζί της. Οι ιστορίες εμφανίζουν γενικά την ημερομηνία, τον χρήστη που τις δημοσίευσε, μια σύντομη περιγραφή, έναν σύνδεσμο προς το τμήμα σχολίων και ίσως ακόμη και μια φωτογραφία.
Ακολουθούν μερικά παραδείγματα των περιοχών λεπτομερειών υποβολής δημοφιλών ιστοτόπων:
Το πλαίσιο ψηφοφορίας βρίσκεται συχνά στα αριστερά. Αυτό του επιτρέπει να παραμείνει σε σταθερή θέση για κάθε ιστορία. Οι σύνδεσμοι των σχολίων, καθώς και οποιεσδήποτε άλλες πρόσθετες πληροφορίες, όπως "μοιραστείτε αυτήν την ιστορία", βρίσκονται κάτω από την περιγραφή (αν υπάρχει) ή τον τίτλο. Κάνοντας τα λεπτομερή κείμενα γύρω από τη γκρίζα επικεφαλίδα, τα στοιχεία ξεθωριάζουν και δίνουν έμφαση στους τίτλους , κάνοντας έτσι πιο εύκολη τη σάρωση της λίστας των ιστοριών καθώς τα μάτια μας μπορούν να μεταβούν γρήγορα από το ένα στο άλλο.
Οι περισσότερες ιστοσελίδες κοινωνικών ειδήσεων εμφανίζουν την ώρα ως σχετική - π.χ. πριν από 10 ώρες. Αυτό έχει νόημα επειδή οι άνθρωποι θέλουν να δουν πόσο φρέσκο είναι μια ιστορία και δεν ενδιαφέρονται ιδιαίτερα για την ακριβή ημερομηνία και ώρα που δημοσιεύτηκε.
Θα παρατηρήσετε επίσης ότι μερικοί ιστότοποι εμφανίζουν τον τομέα στον οποίο οδηγεί ο σύνδεσμος υποβολής από την πλευρά της επικεφαλίδας του, συνήθως μετά από παρένθεση. Αυτό είναι χρήσιμο επειδή επιτρέπει στους επισκέπτες να κρίνουν τι είδους περιεχόμενο θα πρέπει να περιμένουν . Για παράδειγμα, εάν βλέπουν το "youtube.com" ως πηγή, θα ξέρουν ότι είναι ένα βίντεο. Σημαντικές πηγές όπως το nytimes.com μπορούν επίσης να αποτελούν ένδειξη της ποιότητας και της διάρκειας της ιστορίας. Ενώ ο χρήστης θα μπορέσει να δει την πηγή ενώ κινείται πάνω από ένα σύνδεσμο, η εμφάνιση του ανά πάσα στιγμή βοηθάει στην γρήγορη σάρωση των τίτλων.
Σελιδοποίηση
Οι ιστότοποι κοινωνικών ειδήσεων έχουν χιλιάδες, ή σε μερικές περιπτώσεις εκατομμύρια, συνδέσμους που έχουν υποβληθεί από χρήστες. Η εμφάνιση όλων αυτών των συνδέσεων ταυτόχρονα είναι φυσικά αδύνατη. πρέπει να εμφανίσετε ένα μικρό σετ κάθε φορά για να επιτρέψετε στους χρήστες να το αφομοιώσουν . Οι σύνδεσμοι συνήθως χωρίζονται σε σελίδες που χρησιμοποιούν σελίδωση . Η φωτογράφηση είναι η μέθοδος διαίρεσης περιεχομένου σε πολλές σελίδες και η παροχή ενός συνόλου συνδέσμων που συνήθως βλέπετε στο κάτω ή πάνω μέρος μιας σελίδας που σας επιτρέπει να μεταβείτε στην επόμενη ή την προηγούμενη σελίδα ή να επιλέξετε έναν αριθμό σελίδας που θέλετε χειροκίνητα.
Ακολουθούν μερικά παραδείγματα της σελίδας των δημοφιλών ιστοτόπων:
Υπάρχουν βέβαια εναλλακτικές λύσεις για την περιστροφή. Το Reddit εμφανίζει μόνο τον επόμενο και τον προηγούμενο σύνδεσμο σελίδας:
Αυτή η μέθοδος καθιστά την πλοήγηση απλούστερη δεδομένου ότι δεν χρειάζεται να σκεφτείτε τι σελίδα θέλετε ή πρέπει να εντοπίσετε τον επόμενο σύνδεσμο - υπάρχουν μόνο δύο σύνδεσμοι, οπότε τις περισσότερες φορές θα θέλατε ακριβώς την επόμενη σελίδα. Τούτου λεχθέντος, το κάνει κάπως συγκεχυμένο κατά καιρούς, δεδομένου ότι είναι δύσκολο να πούμε σε ποια σελίδα βρίσκεστε.
Το Slashdot φορτώνει περισσότερες ιστορίες κατόπιν ζήτησης. Απλά κάντε κλικ στο κουμπί "Περισσότερα" και περισσότερες ιστορίες φορτώνονται παρακάτω χρησιμοποιώντας το AJAX:
Φόρτωση των πραγμάτων με AJAX θα σημαίνει ότι δεν υπάρχει "πρώτη σελίδα" όμως, μόνο ιστορίες στην κορυφή, και ιστορίες στο κάτω μέρος.
Όποια σελίδωση επιλέγετε, υπάρχουν μερικά πράγματα που πρέπει να έχετε κατά νου για να βεβαιωθείτε ότι έχετε κάνει αυτό το στοιχείο διεπαφής χρησιμοποιήσιμο. Οι περιοχές κλικ πρέπει να είναι μεγάλες - μην παρέχετε μόνο μια λίστα συνδέσμων, αλλά προσθέστε ένα χαρακτηριστικό CSS padding σε κάθε σύνδεσμο για να διευκολύνετε το κλικ. Προσδιορίστε σαφώς την τρέχουσα σελίδα με προσαρμοσμένο στυλ - οι χρήστες σας πρέπει να γνωρίζουν πού είναι αυτή τη στιγμή. Τέλος, δώστε τους "προηγούμενους" και "επόμενους" συνδέσμους . Τις περισσότερες φορές οι επισκέπτες σας θα θέλουν να περιηγηθούν ιστορίες στην επόμενη σελίδα, οπότε κάνοντας αυτούς τους συνδέσμους, παίρνετε κάθε σκέψη που εμπλέκεται στον εντοπισμό της επόμενης σελίδας.
Σχόλια
Το τελευταίο θέμα που θα εξετάσω είναι σχόλια. Τα σχόλια είναι ένα σημαντικό στοιχείο των ιστότοπων κοινωνικών ειδήσεων, διότι επιτρέπουν συζητήσεις γύρω από κάθε ιστορία. Ο ιστότοπος όπου αναφέρεται ο σύνδεσμος ιστορίας ενδέχεται να μην έχει λειτουργικότητα σχόλια, επομένως το τμήμα σχολίων των ιστότοπων κοινωνικών ειδήσεων χρησιμεύει ως πλατφόρμα συζήτησης .
Ακολουθούν τα σχόλια που εμφανίζονται στο Digg:
Τα σχόλια μπορούν να ψηφιστούν, όπως ακριβώς και οι μεμονωμένες ιστορίες. Οι έλεγχοι ψηφοφορίας βρίσκονται στα δεξιά του κάθε σχολίου, ως αντίχειρες ή αντίχειρες κάτω. Τα υψηλότερα βαθμολογημένα σχόλια επιπλέουν στην κορυφή της λίστας , πράγμα που σημαίνει ότι η συζήτηση υψηλότερης ποιότητας θα είναι πάντα στην κορυφή και ότι οποιαδήποτε άχρηστα σχόλια θα ψηφιστούν.
Υπάρχει ένα άλλο χαρακτηριστικό το οποίο παρέχει η Digg για να κάνει καλύτερα τα σχόλια: σπείρωμα. Κάθε σχόλιο μπορεί να ξεκινήσει ένα δικό του νήμα αν απαντήσετε σε αυτό . Αυτά τα θέματα έχουν «καταρρεύσει», αλλά μπορείτε να τα ανοίξετε χρησιμοποιώντας το σύνδεσμο των μικρών απαντήσεων στο κάτω μέρος του σχόλιου του νήματος. Όλες οι απαντήσεις αποθηκεύονται κάτω από το γονικό σχόλιο και μπορούν επίσης να ψηφιστούν πάνω ή κάτω. Αυτό επιτρέπει τις ενδιαφέρουσες απαντήσεις να δημιουργήσουν τις δικές τους συζητήσεις.
Ακολουθούν τα σχόλια Reddit:
Παρόμοια χαρακτηριστικά εδώ: ψηφοφορία και σπείρωμα. Οι έλεγχοι ψηφοφορίας τοποθετούνται στα αριστερά κάθε σχολίου και μοιάζουν με βέλη, πάνω και κάτω. Το Reddit επιτρέπει τη βαθιά σπείρωμα, πράγμα που σημαίνει ότι οι απαντήσεις σε ένα σχόλιο μπορούν επίσης να κρατήσουν τις δικές τους σειρές απαντήσεων που σχετίζονται μόνο με αυτούς . Πράγματι, αυτό δημιουργεί ένα δέντρο των σχολίων καθώς πολλά μεμονωμένα σχόλια δημιουργούν κλάδους και υποκαταστήματα απαντήσεων.
Τέλος, ας δούμε τα σχόλια του Newsvine:
Το Newsvine έχει την ίδια δομή με το Digg - κάθε σχόλιο μπορεί να φιλοξενήσει μια σειρά απαντήσεων, αλλά οι απαντήσεις δεν μπορούν να φιλοξενήσουν περαιτέρω απαντήσεις. Αυτό διατηρεί την θέα καθαρή, αλλά η συζήτηση γίνεται λίγο πιο άκαμπτη . Το αν είναι καλό ή όχι εξαρτάται από την ποσότητα ελευθερίας που θέλετε να δείτε στις συζητήσεις σας.
Η οπτική εμφάνιση είναι ελαφρώς διαφορετική. Αντί να προσθέσετε μόνο ένα αριστερό περιθώριο σε κάθε σχόλιο, τα σχόλια του Newsvine είναι τυλιγμένα σε πλαίσια. Οι απαντήσεις είναι επίσης τυλιγμένες σε πλαίσια και τοποθετούνται μέσα στο γονικό κουτί. Αυτό παρέχει έναν σαφή δείκτη σχέσης. Το Newsvine επιτρέπει επίσης μόνο την ψηφοφορία για τα γονικά σχόλια.
Νομίζω ότι τα δύο στοιχεία, η ψηφοφορία με σχόλια και το σχόλιο, είναι απαραίτητα συστατικά που χρειάζεστε για να διευκολύνετε τις καλές συζητήσεις σε ιστότοπους κοινωνικών ειδήσεων. Η ψηφοφορία ενεργεί σαν ένα φίλτρο για να αφαιρέσει οποιαδήποτε σχόλια χαμηλής αξίας ή ανεπιθύμητης αλληλογραφίας από την κορυφή, ακόμη και να τα αφαιρέσει εντελώς (μερικοί ιστότοποι κρύβουν σχόλια με αρνητικές βαθμολογίες). και το σπείρωμα επιτρέπει στη συζήτηση να ξεδιπλώνεται σε διαφορετικές περιοχές ενδιαφέροντος. Περισσότερες περιοχές συζήτησης σημαίνει περισσότερα πράγματα για τα οποία πρέπει να μιλήσετε και περισσότερα σχόλια - κάτι που μια άκαμπτη δομή ενός επιπέδου δεν θα είναι σε θέση να προσφέρει.
Γράφτηκε αποκλειστικά για το WDD από τον Ντμίτρι Φαντεγιέφ. Διαχειρίζεται ένα blog σχετικά με την χρηστικότητα που ονομάζεται Δημοσίευση χρηστικότητας .
Χρησιμοποιείτε σήμερα ιστότοπους κοινωνικών ειδήσεων για να λαμβάνετε την καθημερινή σας δόση ειδήσεων και, εάν όχι, γιατί όχι; Υπάρχουν πράγματα που θα βελτιώσετε ή χαρακτηριστικά που θα προσθέσετε σε τέτοιους ιστότοπους;