Ανασχεδιασμός του Happy Cog του VisitPhilly.Com:
Μια υποδειγματική σύγχρονη ιστοσελίδα
Τον Ιανουάριο, ο Jason Santa Maria έστειλε ένα τιτίβισμα ανακοινώνοντας αυτό visitphilly.com είχε επανασχεδιαστεί από παγκοσμίου φήμης στούντιο σχεδιασμού Happy Cog . Το ενδιαφέρον μου ήταν επίκαιρο, και δεν θα μπορούσα παρά να ρίξω μια ματιά.
Μπορώ να πω ειλικρινά ότι ποτέ δεν είμαι πιο εντυπωσιασμένος με έναν επανασχεδιασμό ιστοσελίδων απ 'ότι ήμουν με αυτόν.
Αυτό το Happy Cog ήταν σε θέση να μετατρέψει έναν τόσο μεγάλο ιστότοπο σε μια όμορφη, προσβάσιμη, λειτουργική και ελκυστική εμπειρία του χρήστη, μαρτυρώντας το ταλέντο της ομάδας στο Happy Cog.
Σε καμία περίπτωση δεν είμαι σε θέση να προσφέρω μια κριτική που να δικαιολογεί τον σχεδιασμό, το σχεδιασμό και την ανάπτυξη που πρέπει να έχουν εμπλακεί σε αυτό το έργο.
Αλλά σκέφτηκα ότι θα ήταν χρήσιμο να επισημάνω γιατί αυτός ο επανασχεδιασμός αποτελεί ένα όμορφο και αποτελεσματικό σχεδιασμό ιστοσελίδας για τη σημερινή αγορά.
Ένας σαφής σκοπός
Το όνομα του τομέα, το λογότυπο, τα σαφή drop-down μενού, η όμορφη φωτογραφία: όλα αυτά και περισσότερο παίζουν βασικούς ρόλους στην επικοινωνία του ξεχωριστού στόχου της ιστοσελίδας (για να ενθαρρύνουν τους χρήστες να επισκεφτούν την πόλη της Φιλαδέλφειας) και να προσκαλούν τους χρήστες να εξερευνήσουν την ιστοσελίδα τι είναι (μάλλον εκπληκτικά) μια όμορφη αμερικανική πόλη.
Τα πρώτα στοιχεία πλοήγησης που ο χρήστης ειδοποιεί είναι τα mega αναπτυσσόμενες συνδέσεις μενού και τους μεγάλους δεσμούς κειμένου που επικαλύπτουν την κύρια περιστρεφόμενη εικόνα.
Το παρακάτω στιγμιότυπο υπογραμμίζει αυτούς τους συνδέσμους, δηλαδή "Πράγματα που πρέπει να κάνετε" (που εμφανίζονται ενεργά), "Plan Your Trip", "Philly Now" και την επικάλυψη της εικόνας "Power Lunch".
Αυτά τα αντικείμενα προορίζονταν προφανώς αμέσως. Στο πλάνο που ακολουθεί, έχω χαρτογραφήσει την πιο πιθανή διαδρομή των ματιών ενός χρήστη που σαρώνει την αρχική σελίδα.
Αφού σημειώσουμε (και ενδεχομένως εξερευνήσουμε) ένα ή περισσότερα από τα αναπτυσσόμενα μενού, ο χρήστης θα σαρώσει το κείμενο που σχετίζεται με την ενεργή εικόνα και στη συνέχεια φυσικά θα μετακινηθεί προς τα κάτω στην ενότητα με τίτλο "Τι νέο υπάρχει", επιστρέφοντας τελικά σχεδόν στον πλήρη κύκλο την κεφαλίδα κοντά στο πλαίσιο αναζήτησης.
Το περιεχόμενο είναι οργανωμένο έτσι ώστε ο χρήστης να μπορεί να πάρει ένα ενημερωτικό και οπτικά αξιοσημείωτο ταξίδι σε όλα τα σημαντικά τμήματα της σελίδας μέσα σε λίγα δευτερόλεπτα.
Ο χρήστης δεν αναμένεται να καθυστερήσει, να μπερδευτεί ή να συγκλονιστεί, παρά το γεγονός ότι είναι διαθέσιμο τόσο μεγάλο περιεχόμενο για να το εξερευνήσετε.
Ένα ελάχιστο των πρωτογενών συνδέσεων
Όπως αναφέρθηκε, μία από τις πιο σημαντικές περιοχές είναι το αναπτυσσόμενο μενού. Η απόφαση να επιμείνουμε σε ένα ελάχιστο αριθμό πρωτογενών συνδέσεων εδώ είναι η σωστή.
Έχοντας μόνο τρεις συνδέσμους επιτρέπει την εμφάνιση των αντικειμένων σε μια μεγαλύτερη γραμματοσειρά, κρατώντας έτσι την προσοχή του χρήστη και επιδεικνύοντας τη δομή της εστιασμένης ιστοσελίδας.
Η ελάχιστη γραμμή πλοήγησης είναι μια από τις σημαντικότερες αλλαγές στον επανασχεδιασμό και προσφέρει μεγάλα οφέλη. Συγκρίνετε την με την κεφαλίδα στο παλιό σχέδιο, που δεν είναι τόσο εστιασμένη:
Παρόλο που η παλιά κεφαλίδα δεν είναι κακώς σχεδιασμένη ή άχρηστη, δεν είναι τόσο εστιασμένη και όχι τόσο όμορφη όσο η νέα. Μια άλλη αδυναμία είναι η έλλειψη δεικτών drop-down μενού, οι οποίοι στη νέα ιστοσελίδα είναι σαφείς και ελκυστικοί.
Όταν κάποιος χρήστης φτάσει σε έναν ιστότοπο όπως αυτός (συχνά μέσω μιας αναζήτησης Google), συχνά θα θέλουν να κάνουν ένα από τα δύο πράγματα: δείτε τι προσφέρει η πόλη της Φιλαδέλφειας ή σχεδιάστε το ταξίδι.
Η περιηγηθείσα πλοήγηση στην κεφαλίδα βοηθάει τον χρήστη να επιτύχει αυτούς τους στόχους γρήγορα και αποτελεσματικά.
Όμορφη τυπογραφία
Θα περιμέναμε κάτι λιγότερο από το Happy Cog; Αγαπώ απόλυτα τη γραμματοσειρά που χρησιμοποιείται για το λογότυπο της "Φιλαδέλφειας και της υπαίθρου".
Έχει μια λεπτή δυτική αίσθηση, αλλά είναι ακόμα μοντέρνα και αξιοπρεπή. Για να διατηρηθεί συνεπής η επωνυμία, η γραμματοσειρά επαναχρησιμοποιείται για πολλές επικεφαλίδες σε ολόκληρο τον ιστότοπο, μερικές από τις οποίες επισημαίνονται στο παρακάτω στιγμιότυπο οθόνης.
Το μεγαλύτερο μέρος του κειμένου στην υπόλοιπη ιστοσελίδα είναι στη γραμματεία της Γεωργίας, με την περιστασιακή χρήση του Arial, αλλά γίνεται αρκετά κομψά. Ο ποικίλος συνδυασμός των τίτλων, του αντιγράφου σώματος, των λεζάντων και άλλων περιγραφικών στοιχείων του ιστότοπου είναι εξαιρετικά αναγνώσιμος και παρουσιάζεται με γούστο.
Παρά το μέγεθος του περιεχομένου, ακόμη και στις εσωτερικές σελίδες, ο χρήστης σπάνια, αν αισθάνεται πάντα συγκλονισμένος, σε αντίθεση με την εμπειρία του παλιού ιστοτόπου .
Αυξημένη απόδοση και ταχύτητα
Ένας ιστότοπος με τόσο μεγάλο περιεχόμενο και τόσες εικόνες αναπόφευκτα παίρνει ένα χτύπημα στην απόδοση. Οι προγραμματιστές το συνειδητοποίησαν και έδωσαν μεγάλη προσοχή ώστε να εξασφαλίσουν ότι κάθε περιεχόμενο με καθυστέρηση φόρτωσης δεν θα αποσπούν την προσοχή ή θα αναγκάζει τους επισκέπτες να εγκαταλείψουν και να κοιτάξουν μια άλλη πόλη της Πενσυλβανίας .
Όπως φαίνεται παρακάτω, όταν ο χρήστης επισκέπτεται την αρχική σελίδα, το τελευταίο αντικείμενο που φορτώνεται είναι ένα από τα πιο σημαντικά στοιχεία της νέας διάταξης: η κύρια περιστρεφόμενη εικόνα. Αλλά η πραγματική βραδύτητα μετριάζεται από τον δείκτη φόρτωσης περιεχομένου (το περιστρεφόμενο κινούμενο γραφικό):
Αυτή η βελτίωση της χρηστικότητας δεν περιορίζεται σε μεγάλες εικόνες. Λόγω της ποικιλίας περιεχομένου στα αναπτυσσόμενα μενού, εμφανίζεται ένα παρόμοιο γραφικό φόρτωσης περιεχομένου καθώς φορτώνεται το περιεχόμενο του μενού μέσω του Ajax:
Για αυτό το μενού, η ενίσχυση είναι επιτακτική, επειδή τα αναπτυσσόμενα μενού συνήθως δεν καθυστερούν όταν ενεργοποιούνται.
Καμία ένδειξη φόρτωσης δεν θα προκαλούσε σύγχυση, ενδεχομένως κάνοντας το ποντίκι του χρήστη μακριά και μετά το ποντίκι πίσω, αναρωτιόντας γιατί η λειτουργικότητα είναι κολλημένη.
Έτσι, παρόλο που η σελίδα δεν φορτώνει πραγματικά γρηγορότερα, η αυξανόμενη ταχύτητα αυξάνεται. Αυτό είναι ένα μάθημα για όλους τους σχεδιαστές και προγραμματιστές να σκεφτούν όχι μόνο την πραγματική ταχύτητα αλλά και την ταχύτητα που αντιλαμβάνονται.
Χαρακτηριστικά που βασίζονται στον χρήστη
Ένα από τα πιο σημαντικά χαρακτηριστικά της νέας ιστοσελίδας είναι ο τρόπος με τον οποίο έγινε η μετάβαση στο νέο σχεδιασμό, γεγονός που εξασφαλίζει ότι οι επισκέπτες που επιστρέφουν δεν θα συγκλονιστούν από τις δραστικές αλλαγές.
Όταν επισκέπτεστε για πρώτη φορά τον ιστότοπο, παρατηρείτε ένα μεγάλο κόκκινο banner στο επάνω μέρος της σελίδας, ενημερώνοντάς σας ότι ο ιστότοπος έχει επανασχεδιαστεί και εξακολουθεί να είναι σε beta. Σας δίνεται η δυνατότητα να περιηγηθείτε στον ιστότοπο χρησιμοποιώντας την παλιά διεπαφή.
Η παροχή στους επισκέπτες που είναι εξοικειωμένοι με την παλιά διάταξη και η δομή της επιλογής να επιστρέψουν σε αυτό είναι κρίσιμη, επειδή εξασφαλίζει ότι δεν θα απογοητευτούν προσπαθώντας να βρουν οικείο περιεχόμενο.
Σε έναν τόσο μεγάλο ιστότοπο, ειδικά έναν ανασχεδιασμένο από μια εταιρεία γνωστή για τα σχέδια που εστιάζονται στο χρήστη, τέτοιες σημαντικές αρχιτεκτονικές αλλαγές και βελτιώσεις είναι βέβαιο ότι θα αποβάλουν τους επισκέπτες που είχαν συνηθίσει στο παλιό στυλ.
Το μήνυμα στο κόκκινο πανό, επομένως, εμποδίζει οποιαδήποτε σύγχυση ή απογοήτευση εκ μέρους των επισκεπτών.
Δεν είχα ξοδέψει πολύ χρόνο για να συγκρίνω τον παλιό ιστότοπο με το νέο, έτσι δεν μπορώ να επιβεβαιώσω πόσο παρόμοια είναι τα περιεχόμενα και οι αρχιτεκτονικές, αλλά επειδή μας δίνεται η δυνατότητα να επισκεφτούμε την παλιά ιστοσελίδα, το περιεχόμενο πρέπει να είναι παρόμοιο αρκετά εάν είμαστε σε θέση να αποκτήσουμε πρόσβαση σε τρέχοντα γεγονότα και άλλα τακτικά ενημερωμένα στοιχεία και στις δύο εκδόσεις.
Ένα κοινό στοιχείο είναι ο σύνδεσμος που εμφανίζεται πάνω από το πλαίσιο αναζήτησης, ζητώντας ανατροφοδότηση σχετικά με το νέο σχέδιο καλώντας τους χρήστες να συμπληρώσουν μια «έρευνα beta». Αυτό το χαρακτηριστικό δείχνει ότι οι ιδιοκτήτες ανησυχούν για τον τρόπο με τον οποίο οι χρήστες βιώνουν και αντιλαμβάνονται τον ιστότοπο.
Πλήρως προσβάσιμο περιεχόμενο
Πολλά από τα μέλη της ομάδας Happy Cog είναι γνωστά σε απευθείας σύνδεση για την υπεράσπιση των προτύπων διαδικτύου και προσβάσιμου περιεχομένου, οπότε δεν αποτελεί έκπληξη το γεγονός ότι αυτός ο ιστότοπος είναι πλήρως προσβάσιμος σε σχεδόν οποιοδήποτε χρήστη σε οποιαδήποτε πλατφόρμα.
Με την απενεργοποίηση της JavaScript, η εμπειρία του χρήστη στον ιστότοπο είναι πολύ παρόμοια, παρόλο που πολλές βελτιώσεις δεν είναι πλέον διαθέσιμες.
Το CSS text-indent ιδιότητα χρησιμοποιείται για να αντικαταστήσει το κείμενο στις επικεφαλίδες με εικόνες που εμφανίζουν την προσαρμοσμένη γραμματοσειρά. Αυτό εξασφαλίζει ότι οι σελίδες παραμένουν σημασιολογικές, φιλικές προς το SEO και είναι ορατές σε όλους τους χρήστες.
Η παρακάτω εικόνα εμφανίζει μια επικεφαλίδα σε μια εσωτερική σελίδα, στα αριστερά με το στυλ απενεργοποιημένο, στα δεξιά με αυτό ενεργοποιημένο.
Μπορούμε να δούμε πώς οι επικεφαλίδες ενισχύονται από τις εικόνες χωρίς να χάσουν τη σημασιολογική τους αξία και χωρίς οι σχεδιαστές να καταφεύγουν σε περιττές πολύπλοκες μεθόδους αντικατάστασης γραμματοσειρών.
Μια άλλη βασική δυνατότητα προσβασιμότητας είναι η εφαρμογή των βελτιώσεων JavaScript. Η αρχική σελίδα έχει δύο switchers περιεχομένου με καρτέλες, ένας ονομάζεται "Book Online" και ο άλλος συνδέεται με τα κοινωνικά δίκτυα του visitphilly.com:
Όταν είναι απενεργοποιημένη η JavaScript, εμφανίζεται όλο το περιεχόμενο και στα δύο πλαίσια με καρτέλες. Πολλοί ιστότοποι με εικονίδια με καρτέλες εμφανίζουν μόνο ένα από τα πλαίσια όταν είναι απενεργοποιημένη η JavaScript, αλλά αυτό δεν είναι γενικά βέλτιστη πρακτική.
Αυτή η τεχνική χρησιμοποιείται σταθερά σε ολόκληρο τον ιστότοπο για μια σειρά χαρακτηριστικών, εξασφαλίζοντας ότι το στρώμα συμπεριφοράς (δηλαδή το Ajax και το JavaScript) είναι μια βελτίωση, όχι μια αναγκαιότητα.
Αυτό καθιστά το περιεχόμενο προσβάσιμο όχι μόνο σε χρήστες που περιηγούνται χωρίς JavaScript, αλλά σε αράχνες μηχανών αναζήτησης όπως το Googlebot.
Οποιεσδήποτε αδυναμίες στο σχεδιασμό;
Και πάλι, δεν είμαι σε θέση να επικρίνω αρκετά ένα σχέδιο που έχει γίνει από μια εταιρεία όπως το Happy Cog. Αλλά θα επισημάνω (προσεκτικά) δύο δευτερεύουσες αδυναμίες στο νέο σχεδιασμό και τη δομή.
Πρώτον, βρίσκω τη διατύπωση του τρίτου συνδέσμου στο κύριο μενού πλοήγησης λίγο ασαφής ("Philly Now").
Δεν ήξερα αμέσως τι σήμαινε αυτό. Είχα υποθέσει ότι σήμαινε τρέχοντα γεγονότα, αλλά είναι προφανώς ένας συνδυασμός γεγονότων, καιρού και τρεχουσών φωτογραφιών. Ακόμη δεν είμαι βέβαιος πώς να το περιγράψω, και έχω την αίσθηση ότι ο σύνδεσμος σπάνια θα πατηθεί.
Η άλλη αδυναμία είναι τα δεξιά τρίγωνα στο δευτερεύον μενού πλοήγησης στις εσωτερικές σελίδες:
Υποθέτω ότι αυτά τα τρίγωνα έδειχναν μενού πτηνών, αλλά δεν υπάρχουν πτήσεις. Τα τρίγωνα είναι μόνο δείκτες για να προσελκύσουν την προσοχή του χρήστη στην περιοχή περιεχομένου. Τα ορθογώνια τρίγωνα είναι καλύτερα επιφυλακτικά για αυτόνομους συνδέσμους και μενού πτήσεων, όχι για κατακόρυφη πλοήγηση όπως αυτή.
Βρίσκουμε το ίδιο πράγμα στην αρχική σελίδα, αλλά δεν είναι τόσο κακό, επειδή τα βέλη αποτελούν μέρος ενός προγράμματος μεταγωγής περιεχομένου που βασίζεται στο JavaScript.
Καμία από αυτές τις "αδυναμίες" δεν βλάπτει πολύ την εμπειρία του χρήστη. Και το γεγονός ότι μπορώ να βρω μόνο δύο αδυναμίες δείχνει πόσο μεγάλος είναι αυτός ο επανασχεδιασμός.
Άξια εξέτασης και απομίμησης
Πολύ περισσότερα θα μπορούσαν να ειπωθούν για την αποτελεσματικότητα του σχεδιασμού και του κώδικα του visitphilly.com, πέρα από το πεδίο εφαρμογής αυτού του άρθρου.
Εκτός από αυτό που συζητήσαμε εδώ, θα μπορούσα να επισημάνω τον έγκυρο και καλά σχολιασμένο κώδικα, την αποτελεσματική χρήση του λευκού χώρου, την οπτική ιεραρχία, τις άριστες επιλογές χρωμάτων, την σχεδόν ταυτόσημη εμπειρία στο IE6 και πολλά άλλα.
Ελπίζω ότι αυτή η ανάλυση θα δώσει μια αξιοπρεπή εικόνα κάποιων από τα βασικά χαρακτηριστικά αυτού του νέου σχεδιασμού και πώς θα επιτύχει τον σύγχρονο σχεδιασμό ιστοσελίδων στον κλάδο.
Περαιτέρω ανάγνωση
- Μεγαλύτερη Φιλαδέλφεια Τουρισμού Marketing Corp. εγκαινιάζει ολοκαίνουργιο visitphilly.com
- Χαρτοφυλάκιο Happy Cog Studios
- Αναθεώρηση Happy Cog της VisitPhilly
Αυτή η ανάρτηση γράφτηκε αποκλειστικά για το Webdesigner Depot του Louis Lazaris, ανεξάρτητου συγγραφέα και web developer. Ο Λούις τρέχει Εντυπωσιακοί ιστότοποι όπου δημοσιεύει άρθρα και σεμινάρια σχετικά με το σχεδιασμό ιστοσελίδων. Μπορείτε να ακολουθήσετε τον Louis στο Twitter ή να έρθετε σε επαφή μαζί του μέσω της ιστοσελίδας του .
Σας αρέσει το νέο visitphilly.com; Υπάρχουν άλλα χαρακτηριστικά του σχεδιασμού, της διάταξης ή της αρχιτεκτονικής που βελτιώνουν την εμπειρία του χρήστη; Προσφέρετε τα σχόλιά σας παρακάτω.