Εικόνες Carousels στο Web Design - Οφέλη & Βέλτιστες Πρακτικές

Δεν υπάρχει έλλειψη παρουσιάσεις παρουσίασης καρουσέλ στο δίκτυο. Στην πραγματικότητα, αυτή η τάση έχει κάνει μόνο αυξάνονται τα τελευταία 5-10 χρόνια με περισσότερη υποστήριξη του προγράμματος περιήγησης τώρα από ποτέ. Αλλά τα καρουσέλ της εικόνας αξίζουν πραγματικά την προσπάθεια; Τι είδους οφέλη παράγουν και πώς πρέπει να χρησιμοποιούνται παραγωγικά σε μια διάταξη?

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

Καροτσάκια προϊόντων για το ηλεκτρονικό εμπόριο

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

Υπάρχουν δύο βασικές τοποθετήσεις για ένα ρυθμιστικό προϊόντος ηλεκτρονικού εμπορίου:

1. Στην αρχική σελίδα ενός καταστήματος
2. Σε μια σελίδα προϊόντος

Και οι δύο δουλεύουν διαφορετικά, αλλά εξυπηρετούν τον ίδιο στόχο - να πωλούν τα προϊόντα με οπτικό τρόπο.

Παράδειγμα 1: Au Fine Linens - αρχική σελίδα

Ρίξτε μια ματιά στην αρχική σελίδα του Au Lit Fine Linens, ότι χρησιμοποιεί ένα αυτόματο περιστρεφόμενο καρουσέλ σε πλήρη οθόνη για να αναδείξουν διάφορα προϊόντα, όπως παπλώματα, μαξιλάρια και καλύμματα κρεβατιών.

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

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

Παράδειγμα 2: Ετικέτα τηλεφώνου Eden - σελίδα προϊόντος

Μπορείτε να δείτε ένα πιο συγκεκριμένο παράδειγμα στη σελίδα του προϊόντος της τηλεφωνικής συσκευής Eden. Χρησιμοποιεί ένα αυτόματο περιστροφικό ρυθμιστικό για εμφάνιση εικόνων του προϊόντος.

Θεωρώ ότι αυτά είναι λίγο “πάρα πολύ” στον κόσμο του ηλεκτρονικού εμπορίου. Όταν κοιτάζω ένα προϊόν που θέλω να είμαι στον έλεγχο της εναλλαγής μεταξύ των εικόνων.

Η καλύτερη επιλογή είναι να κάνετε μια γκαλερί εικόνων με έλεγχο που δίνεται στον επισκέπτη. Για παράδειγμα, η σελίδα Design by Humans χρησιμοποιεί μικρογραφίες για κάθε φωτογραφία η οποία είναι πολύ πιο ενθαρρυντική και παρέχει περισσότερο έλεγχο στον χρήστη.

Καροτσάκια χαρτοφυλακίου ιστού

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

Παράδειγμα 1: Biboun - αρχική σελίδα

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

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

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

Παράδειγμα 2: Ιστοσελίδα του Aaron Blaise - αρχική σελίδα

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

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

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

Κοινές τάσεις σχεδιασμού

Αν κοιτάξετε μερικά από τα παραπάνω παραδείγματα θα παρατηρήσετε ότι υπάρχουν γενικά δύο διαφορετικοί τύποι ρυθμιστικών: ΠΛΗΡΗΣ ΟΘΟΝΗ και σταθερό πλάτος.

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

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

Επίσης, εξετάστε την αξία των διαφανειών αυτόματης προώθησης και πόσο δύσκολο μπορεί να είναι για τους χρήστες να πιάσουν αυτό το περιεχόμενο. Υπάρχει μια σπουδαία μελέτη περίπτωσης από τον Όμιλο Nielsen Norman, που δείχνει ότι είναι καλύτερο να μην έχουν ρυθμιστικά αυτόματης προώθησης.

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

Ωστόσο, δεν μπορώ να πω ότι ποτέ δεν αξίζει να προσθέσετε ένα slider αυτόματης προώθησης, ειδικά αφού εσείς με στατικά συρόμενα μην πάρετε όσες απόψεις, και πρέπει επίσης να το κάνετε κάντε την πρώτη σας διαφάνεια το πιο σημαντικό καθώς πολλοί χρήστες δεν θα προχωρήσουν στην επόμενη διαφάνεια. Το να αποφασίσετε εάν θα κάνετε ένα ρυθμιστικό αυτόματο περιστρεφόμενο ή όχι δεν είναι δυστυχώς ένα περιοχή δοκιμασίας και λάθους.

Τι πρέπει να αποφύγετε με κάθε κόστος

Εδώ είναι ένα σημαντικό πράγμα που νομίζω προσωπικά υπάγεται σε “αποφύγετε με κάθε κόστος”. Ρίξτε μια ματιά στο ή κάντε κλικ στο παρακάτω στιγμιότυπο οθόνης και προσπαθήστε να μαντέψετε τι μπορεί να είναι.

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

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

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

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

Διαδραστικές λειτουργίες

Ο τρόπος με τον οποίο οι χρήστες περιστρέφονται με καρουσέλ επηρεάζει το ίδιο το σχέδιο. Υπάρχουν α ποικιλία στυλ πλοήγησης, αλλά αυτά είναι τα πιο δημοφιλή:

• Πλοήγηση βάσει βάσης δεδομένων
• Πλοήγηση με βέλη
• Προεπισκόπηση πλοήγησης μικρογραφιών
• Κατάλογος συνδέσμων ή στοιχείων τίτλου

Το πιο συνηθισμένο είναι το dot navigation που θα βρείτε σε εκατοντάδες σύγχρονες ιστοσελίδες.

Παράδειγμα 1: Chic στο σπίτι - αρχική σελίδα

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

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

Παράδειγμα 2: Καθαρές κύκλοι - αρχική σελίδα

Η αρχική σελίδα του Pure Cycles χρησιμοποιεί ένα συνδυασμός πλοήγησης με κουκκίδες και βέλη. Με αυτόν τον τρόπο οι χρήστες έχουν την πλοήγηση προς τα εμπρός και πίσω, αλλά Δείτε επίσης το “Συνολικά” πλοήγηση μέσω των κουκίδων στο κάτω μέρος.

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

Παράδειγμα 3: Αρχική σελίδα IGN

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

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

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

Βασικά καραβάκια

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

Προσπαθήστε να αποφύγετε τις αυτόματες περιστρεφόμενες καρουσέλ, και να τα χρησιμοποιείτε μόνο σε μεγάλες σελίδες προορισμού (η αρχική σελίδα είναι ένα παράδειγμα). Όσο το καρουσέλ έχει ένα σκοπό, και δεν μοιάζει με διαφήμιση, το σχέδιό σας θα πρέπει να κάνει καλά.

Αν ψάχνετε για περισσότερες πληροφορίες σχετικά με τα δικτυακά καρουσέλ, δείτε μερικές από τις παρακάτω δημοσιεύσεις:

• Carousels από τον Brad Frost
• 8 Απαιτήσεις UX για το σχεδιασμό ενός εύχρηστου ιστοτόπου Carousel
• Carousel Usability: Σχεδιασμός ενός αποτελεσματικού UI για ιστοσελίδες με υπερφόρτωση περιεχομένου