Το νέο σχεδιασμό ιστοσελίδων του CNN αποδόθηκε
Τη Δευτέρα 26 Οκτωβρίου, CNN.com εισήγαγε ένα νέο σχεδιασμό ιστοσελίδων , κάνοντας μια σειρά σημαντικών αλλαγών στη διάθεσή τους σε βαριά πληροφόρηση.
Ο νέος σχεδιασμός είναι όμορφος, καθαρός, οργανωμένος και καλά δομημένος. Προσκαλεί το μάτι να σαρώσει και να βρει κάτι ενδιαφέρον με το στόχο να κάνει κλικ σε μια άλλη σελίδα.
Ο προηγούμενος σχεδιασμός ήταν κάπως γεμάτος και όχι πολύ φιλόξενος. το περιεχόμενο φαινόταν άρεσε ότι αναγκάστηκε σε ένα αδόμητο χώρο. Η νέα διάταξη είναι πολύ διαφορετική και αγκαλιάζει μια σειρά από σύγχρονες πρακτικές και τάσεις σχεδίασης και βέλτιστης χρήσης ιστοσελίδων .
Επομένως, ας δούμε με περισσότερες λεπτομέρειες όχι μόνο τις αξιοσημείωτες βελτιώσεις, αλλά μερικές από τις αμφισβητήσιμες αποφάσεις σχεδιασμού και χρηστικότητας.
Διάταξη εμπνευσμένη από το πλέγμα
Χρησιμοποιώ τη φράση "εμπνευσμένη από το δίκτυο" επειδή ο νέος σχεδιασμός φαίνεται να βασίζεται σε ένα πλέγμα, αλλά η ευθυγράμμιση ακρίβειας των στοιχείων δεν είναι ακριβώς εκεί.
Λαμβάνοντας μια σύντομη ματιά στο δικό τους πρωτεύον φύλλο στυλ , φαίνεται να έχουν βασίσει χαλαρά το στυλ και το πλέγμα τους στο Blueprint CSS δομή.
Η επαναφορά του CSS φέρει πολλές ομοιότητες με το πλαίσιο Blueprint και η λέξη "σχέδιο" περιλαμβάνεται στην κορυφή, οπότε θα αποτελούσε λογική αξιολόγηση με βάση τις περιορισμένες γνώσεις μου για το Blueprint.
Μετά την ανάλυση μιας καταγραφής οθόνης της αρχικής σελίδας τους, καταλήξαμε στο συμπέρασμα ότι εάν βάσουν τη νέα διάταξη σε ένα πλέγμα, οι ιδιαιτερότητες αυτού του πλέγματος θα είναι: 16 στήλες, 50pp ανά στήλη, με 12ψαράκια (το διάστημα μεταξύ των στηλών) συνολικού πλάτους 980px.
Παρακάτω είναι μια οπτική αναπαράσταση της εκτίμησης πλέγματος μου, όπως ένα Photoshop μακέτα:
Παρόλο που τα στοιχεία στη σελίδα δεν ακολουθούν το είδος της ευθυγράμμισης και της ισορροπίας που συνήθως θα αναμενόταν από τη διάταξη του πλέγματος, υπάρχει μια αξιοσημείωτη βελτίωση σε αυτή τη διάταξη σε σχέση με τον προηγούμενο σχεδιασμό, που φαίνεται παρακάτω:
Η νέα διάταξη διατηρεί όλα τα στοιχεία της σελίδας μέσα σε ένα κοντέϊνερ πλάτους 980px - σε αντίθεση με την προηγούμενη σχεδίαση που έμοιαζε με κέλυφος που είχε μια κεφαλίδα πλάτους ρευστού που κάλυπτε ολόκληρη τη σελίδα πάνω από ένα τμήμα περιεχομένου σταθερού πλάτους.
Επίσης, παρόλο που ο παλιός σχεδιασμός δεν μπόρεσε να αποφασίσει μεταξύ στρογγυλεμένων γωνιών και τετραγώνων, ο νέος σχεδιασμός παρουσιάζει σταθερά τετράγωνες γωνίες με λεπτές ραβδώσεις που χωρίζουν τα κατάλληλα στοιχεία, όπως φαίνεται στην παρακάτω εικόνα.
Παρόλο που η μορφή είναι παρόμοια με το πλέγμα, δεν είναι, όπως αναφέρθηκε, μια αυστηρή μορφή πλέγματος και τα τμήματα κάτω από την πτυχή αδέσποτα είναι αρκετά διαρθρωμένα από τα παραπάνω.
Δραστικά βελτιωμένη ενότητα κεφαλίδων
Μια από τις πιο εμφανείς βελτιώσεις στο νέο σχέδιο είναι η ενότητα κεφαλίδας.
Η οριζόντια γραμμή πλοήγησης είναι σύγχρονη, καθαρή και καθαρή . Το πλαίσιο αναζήτησης, η επιλογή εγγραφής και ο σύνδεσμος σύνδεσης είναι στην επάνω δεξιά γωνία, όπου πρέπει να είναι.
Και, αν και δεν είναι σύνηθες στο μοντέρνο σχεδιασμό να κεντράρει το λογότυπο της ιστοσελίδας, στην περίπτωση αυτή λειτουργεί. Δημιουργεί μια πολύ κυρίαρχη, ζωντανή εμπειρία μάρκας που δεν ξεχνιέται εύκολα .
Ένα άλλο ωραίο χαρακτηριστικό της γραμμής πλοήγησης είναι ότι υποδεικνύει μέσω χρωμάτων και γραφικών ποιοι σύνδεσμοι είναι πρωταρχικοί, οι οποίοι είναι δευτερεύοντες και που θα ανοίξουν σε μικρο-τοποθεσίες ή αδελφές περιοχές. Οι τελευταίοι υποδεικνύονται με ορθογώνια τρίγωνα ("Χρήματα" και "Αθλήματα" - περισσότερα σε αυτό παρακάτω).
Αποτελεσματική χρήση του χώρου
Στη δεξιά πλευρά της σελίδας, κάτω από την κύρια ενότητα διαφημίσεων, έχετε συμπεριλάβει ένα διακόπτη περιεχομένου σε μορφή ακορντεόν, επιτρέποντας στον χρήστη να βλέπει προεπισκόπηση σε σχετικά μικρή περιοχή περιεχομένου που σχετίζεται με διάφορα θέματα.
Έμφαση στη δημοτικότητα του βίντεο και της ιστορίας
Στο προηγούμενο σχέδιο, το βίντεο είχε αρκετά μεγάλη έμφαση, που εμφανίζεται σε ένα κουτί στη δεξιά πλευρά. Στο νέο σχέδιο, το βίντεο είναι μια κύρια κατηγορία στην κύρια γραμμή πλοήγησης, δεδομένου ότι έχει ουσιαστικά την ίδια οπτική σημασία με τη σύνδεση "Home".
Οι ιστορίες βίντεο εμφανίζονται σε ολόκληρο τον ιστότοπο και υποδεικνύονται σαφώς από τον συνήθη σύνδεσμο "κουμπί αναπαραγωγής" σε φωτογραφίες που συνδέονται με περιεχόμενο βίντεο, όπως φαίνεται παρακάτω:
Μια άλλη κατηγορία που έχει την ίδια σημασία με το "Home" και "Video", όπως φαίνεται στην παραπάνω εικόνα, είναι η ενότητα "NewsPulse", η οποία είναι καινούργια και εξακολουθεί να είναι σε beta.
Αυτή η ενότητα εμφανίζει ειδήσεις με βάση τη δημοτικότητα (η οποία φαίνεται να υπολογίζεται από τις συνολικές προβολές σελίδας, όχι από τα σχόλια) και επιτρέπει στον αναγνώστη να φιλτράρει τα αποτελέσματα κατά κατηγορία ή τύπο ιστορίας.
Σελίδες Ισχυρής Κατηγορίας
Οι σελίδες της κύριας κατηγορίας ("ΗΠΑ", "Παγκόσμια", "Πολιτική" κ.λπ.), προσπελάσιμες από την κύρια γραμμή πλοήγησης, λειτουργούν παρόμοια με την αρχική σελίδα .
Στην πραγματικότητα, εάν δεν γνωρίζατε σε ποια σελίδα ήσαστε, ίσως να πιστεύετε ότι ήσασταν στην αρχική σελίδα. Η κατηγορία "ΗΠΑ" εμφανίζεται παρακάτω:
Κάθε μία από αυτές τις ενότητες προβάλλει βολικά τις κορυφαίες ιστορίες, τα τελευταία νέα και άλλα στοιχεία που σχετίζονται με αυτήν την κατηγορία.
Οι μαύροι και οι λευκοί υπότιτλοι που εμφανίζονται κάτω από τις εικόνες, που εμφανίζονται στην αρχική σελίδα και στις σελίδες του άρθρου, είναι εντυπωσιακοί και ευανάγνωστοι, χωρίς τη χρήση υπερβολικά φανταχτερών γραφικών ή στυλ γραμματοσειράς.
Ισχυρές σελίδες άρθρου
Οι σελίδες του άρθρου, ως επί το πλείστον, διατηρούν το ζωντανό branding της αρχικής σελίδας. Το κείμενο του σώματος εμφανίζεται σε 14px Arial με πολύ ευανάγνωστο ύψος γραμμής.
Παρόλο που κάποια στοιχεία στις σελίδες μοιάζουν κάπως μικρά, μου αρέσει προσωπικά ο τρόπος με τον οποίο το μέγεθος γραμματοσειράς του σώματος του αντικειμένου ξεχωρίζει στη σελίδα, οπότε ο αναγνώστης μπορεί να παραμείνει εστιασμένος σε αυτό.
Επίσης, στην αριστερή πλευρά κάθε ιστορίας, υπάρχει μια ενότητα που ονομάζεται "Στιγμιότυπα Story", η οποία συνοψίζει την τρέχουσα ιστορία σε μερικά σημεία με κουκκίδες. Αυτό δείχνει ότι οι σχεδιαστές του CNN έχουν επίγνωση της διαδικτυακής τάσης των χρηστών να «σαρώνουν» το χρονοβόρο υλικό.
Πολλές πληροφορίες
Από όλες τις αρνητικές πτυχές του νέου σχεδιασμού, ίσως το πρώτο πρόβλημα που είναι άμεσα εμφανές είναι η υπερφόρτωση συνδέσμων και πληροφοριών στην αρχική σελίδα - αν και είναι πιο δομημένη και οργανωμένη, όπως συζητήθηκε προηγουμένως.
Η αρχική σελίδα είναι περίπου δυόμισι οθόνες και περιλαμβάνει τμήματα που αντιγράφουν αντικείμενα στην κύρια γραμμή πλοήγησης, με περίπου μισή ντουζίνα συνδέσμους κάτω από κάθε κατηγορία. Αυτές οι ενότητες εμφανίζονται κάτω από την πτυχή και εμφανίζονται σε αυτήν την εικόνα:
Δεδομένου ότι το CNN είναι ένας από τους πιο δημοφιλείς τόπους στον κόσμο (38 εκατομμύρια μοναδικοί επισκέπτες κάθε μήνα), αυτά τα τμήματα θα λάβουν σημαντική κίνηση σε σύγκριση με άλλες τοποθεσίες, ωστόσο, επειδή φαίνονται τόσο κάτω από το πτυχίο και επειδή υπάρχουν τόσα πολλά συνδέσεις, το σχετικό ποσό επισκεψιμότητας που επισκέπτεται αυτούς τους συνδέσμους μέσω της αρχικής σελίδας θα ήταν πιθανώς αρκετά χαμηλό.
Σημαντικές ενότητες Τακτοποιήθηκαν;
Όπως επισημάνθηκε παραπάνω, πολλές πληροφορίες στην αρχική σελίδα εμφανίζονται πολύ κάτω από την πτυχή. Και, ουσιαστικά, φαίνεται ότι κάποιο σημαντικό περιεχόμενο είναι πλήρως θαμμένο στο κάτω μέρος της αρχικής σελίδας, περισσότερες από δύο πλήρεις οθόνες κάτω από την επικεφαλίδα .
Για παράδειγμα, μια ενότητα με τίτλο "Hot Topics" εμφανίζεται κοντά στο κάτω μέρος, στη δεξιά πλευρά, ακριβώς πάνω από μερικά promos και διαφημίσεις.
Φαίνεται να έχει μεγαλύτερη λογική ότι αυτό το τμήμα θα αντικαταστήσει το διακόπτη περιεχομένου ακορντεόν, ή αλλιώς θα ενσωματωθεί στο ακορντεόν.
Οι διαφημίσεις και τα διαφημιστικά μηνύματα που εμφανίζονται κάτω από τα "Καυτά θέματα" εμφανίζονται επίσης πιο σημαντικά από αυτά που αποκαλύπτει η τοποθεσία τους. Και πάλι, παρόλο που ένας τέτοιος ιστότοπος υψηλής επισκεψιμότητας θα λάμβανε πολλά κλικ σε αυτούς τους τομείς, το ποσοστό κλικ προς τα χέρια σε σύγκριση με τις ενότητες και τις διαφημίσεις πάνω από την πτυχή θα ήταν πιθανώς δραστικά διαφορετικό.
Φυσικά, οι παραγωγοί του CNN γνωρίζουν ποιο περιεχόμενο είναι το πιο σημαντικό και καταλαβαίνουν τις συνήθειες των χρηστών τους καλύτερα από οποιονδήποτε άλλο - όμως αυτές οι προκλήσεις σχεδίασης και χρηστικότητας είναι χρήσιμες για την ανάλυση αν άλλοι προγραμματιστές αντιμετωπίζουν παρόμοιες αποφάσεις.
Μυστήρια ευχρηστίας
Υπάρχουν μερικά στοιχεία στο νέο ιστότοπο που ενδέχεται να μην έχουν σχεδιαστεί για βέλτιστη χρηστικότητα.
Ένα παράδειγμα είναι το ορθογώνιο τρίγωνο που εμφανίζεται σε κάθε έναν από τους συνδέσμους μικροσύνδεσμων. Με την πρώτη ματιά, δεν ήμουν σίγουρος για ποια ήταν αυτά τα τρίγωνα. Φαίνονται να υποδηλώνουν ένα είδος τμήματος slider JavaScript που θα εμφανιστεί.
Μερικοί χρήστες που δεν δίνουν την πλήρη προσοχή ίσως μάλιστα τους παραπλανήσουν για τα βέλη που δείχνουν προς τα κάτω που παράγουν drop-down μενού.
θα αρκούσε - αλλά τότε θα παρουσιαζόταν το πρόβλημα των χρηστών, υποθέτοντας ότι οι σύνδεσμοι άνοιξαν σε ένα νέο παράθυρο, το οποίο στην περίπτωση αυτή δεν είναι αληθές. Ο διακόπτης περιεχομένου ακορντεόν, που συζητήθηκε νωρίτερα, έχει επίσης μερικά προβλήματα χρηστικότητας. Πρώτον, όταν είναι απενεργοποιημένη η JavaScript, το ακορντεόν καθίσταται άχρηστο και δεν εμφανίζει κανένα περιεχόμενο.
Θα πρέπει να επεκταθεί από προεπιλογή για να εμφανιστεί όλο το περιεχόμενο ή αλλιώς να εμφανιστεί ένα από τα στοιχεία. Επίσης, οι επικεφαλίδες υπερ-συνδέσμων για τα τμήματα των ακορντεόν πρέπει να εξακολουθούν να συνδέονται με τα αντίστοιχα τμήματα τους, αλλά δεν το κάνουν.
Ένα άλλο πρόβλημα με το περιεχόμενο των ακορντεόν είναι ότι, δεδομένου ότι το κείμενο που περιέχει είναι τόσο μικρό, δεν είναι πάντοτε σαφές τι μπορεί να γίνει clic στο εσωτερικό του ακορντεόν. Αυτό κάνει τους συνδέσμους λιγότερο διακριτό από το υπόλοιπο περιεχόμενο της ακορντεόν.
Στην παρακάτω εικόνα, το κόκκινο βέλος που σχεδιάσαμε δείχνει δύο στοιχεία λίστας με κουκκίδες. Το κείμενο σε αυτά τα στοιχεία της λίστας είναι υπερσυνδεδεμένο, αλλά αυτό δεν είναι προφανές με την πρώτη ματιά.
Ορισμένα τμήματα εξακολουθούν να αντικατοπτρίζουν το παλιό σχέδιο
Όπως θα συμβαίνει με κάθε επανασχεδιασμό ενός ιστότοπου με το μέγεθος του CNN, ορισμένα τμήματα θα αντικατοπτρίζουν ακόμα τον παλιό σχεδιασμό μέχρι να ολοκληρωθούν όλες οι σελίδες.
Αυτό συμβαίνει συνήθως με το παλαιότερο περιεχόμενο που δεν θα επισκέπτεται τόσο συχνά, αλλά στην περίπτωση του CNN, μερικές σημαντικές ενότητες εξακολουθούν να έχουν το παλιό δέρμα.
Δύο παραδείγματα είναι τα σχετικά με και Επικοινωνία σελίδες.
Μικρή τυπογραφία
Ένα ιδιαίτερο ζήτημα σχεδίου που δεν συμμορφώνεται με τις σύγχρονες τάσεις σχεδιασμού ιστοσελίδων είναι η χρήση μικρών κειμένων και μικρών τυπογραφικών στοιχείων.
Το μικρό μέγεθος της γραμματοσειράς στο περιεχόμενο των ακορντεόν συζητήθηκε νωρίτερα. Υπάρχει επίσης η γραμμή εργαλείων "κοινή χρήση" που εμφανίζεται στις σελίδες άρθρων και βίντεο, στην ενότητα "Τελευταίες ειδήσεις" στην αρχική σελίδα, στις συνδέσεις "Εγγραφή" και "Σύνδεση" στην κεφαλίδα και στους συνδέσμους κειμένου κάτω από την πτυχή αρχική σελίδα, για να αναφέρω μερικές.
Θα ήταν πιο αποτελεσματική η γραμμή εργαλείων "κοινή χρήση" με μεγαλύτερη τυπογραφία; Τι γίνεται με την ενότητα "συνιστάται", όπως φαίνεται παρακάτω, ή άλλες ενότητες με μικρότερο τύπο;
συμπέρασμα
Ο νέος ιστότοπος CNN.com έχει προσθέσει μια σειρά χαρακτηριστικών που δεν συζητήθηκαν εδώ, τα οποία σχετίζονται περισσότερο με τις υπηρεσίες ειδήσεων και το προσαρμοσμένο περιεχόμενο. Ο πρώτος σύνδεσμος που ακολουθεί περιέχει ένα βίντεο που παρουσιάζεται από το CNN το οποίο συζητά μερικά από τα νέα χαρακτηριστικά.
Σίγουρα πιστεύω ότι ο νέος ιστότοπος παρουσιάζει πολύ πιο όμορφη και ενδιαφέρουσα εμπειρία χρήστη από την παλιά και εκτός από τις αδυναμίες του switcher περιεχομένου ακορντεόν τα μειονεκτήματα του νέου σχεδιασμού δεν είναι πραγματικά τόσο σημαντικά.
Φαίνεται ότι πολύς χρόνος και ο προγραμματισμός πήγε στο σχεδιασμό του νέου CNN.com και νομίζω ότι οι σχεδιαστές ιστοσελίδων και όσοι ενδιαφέρονται να βελτιώσουν την χρηστικότητα στις δικές τους ιστοσελίδες θα κάνουν καλά να εξετάσουν και να προσπαθήσουν να μάθουν από μερικές από τις αλλαγές που παρουσιάστηκαν στη νέα ιστοσελίδα του CNN.
Περαιτέρω ανάγνωση
- Καλώς ήρθατε στο νέο CNN.com (Video on CNN.com)
- Το νέο CNN.com (Πρώτες εικόνες στο TechCrunch)
- Νέα CNN.com Goes Live: Τι νομίζετε;
Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το Webdesigner Depot του Louis Lazaris, ανεξάρτητου συγγραφέα και web developer. Ο Λούις τρέχει Εντυπωσιακοί ιστότοποι όπου δημοσιεύει άρθρα και σεμινάρια σχετικά με το σχεδιασμό ιστοσελίδων. Μπορείτε να ακολουθήσετε τον Louis στο Twitter ή να έρθετε σε επαφή μαζί του μέσω της ιστοσελίδας του .
Τι σας αρέσει ή δεν σας αρέσει σχετικά με το νέο σχεδιασμό ιστοσελίδων του CNN; Μοιραστείτε τα σχόλιά σας παρακάτω.