Τάσεις στο web design: slider ιστοσελίδας. Είναι τελικά χρήσιμο;

Back to Blog
Τάσεις στο web design: slider-carusel

Τάσεις στο web design: slider ιστοσελίδας. Είναι τελικά χρήσιμο;

Μετά το hamburger menu, συνεχίζουμε ρίχνοντας τη ματιά μας σε μια ακόμη από τις τάσεις στο web design που πιθανόν να μη τη βλέπουμε συχνά στο μέλλον. Ασχολούμαστε με τα slider της Αρχικής Σελίδας μιας ιστοσελίδας. Βλέπουμε το λόγο που υπάρχει, παραθέτουμε τα πλεονεκτήματά του και υμνούμε την ομορφιά του.

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

2. Slider ιστοσελίδας

Δεν θα ακούσετε συχνά τη φράση “άσχημο σαν slider ιστοσελίδας”.

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

Τι είναι το slider;  

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

Το slider του “σαλονιού” της αρχικής σελίδας συνήθως περιλαμβάνει περισσότερα από εναλλασσόμενες εικόνες. Πολύ συχνά τα δομικά του στοιχεία εμφανίζονται με κίνηση. Τίτλοι που επιδεικνύουν το βασικό αντικείμενο της ιστοσελίδας εμφανίζονται με περίτεχνο τρόπο επιδιώκοντας να αιχμαλωτίσουν τη προσοχή του επισκέπτη. Εικόνες πέραν του βασικού φόντου εμφανίζονται από το πουθενά, εμπλουτίζοντας το μήνυμα του τίτλου κι ενισχύοντας την οπτική εμπειρία. Ενώ συχνά συνοδεύονται με buttons που καλούν τον επισκέπτη να δει περισσότερα, οδηγώντας τον στην υποσελίδα όπου αναπτύσσεται το θέμα του τίτλου.

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

Slider ή Carusel; – η άχρηστη (;) πληροφορία της ημέρας

Στο χώρο της κατασκευής ιστοσελίδας το slider ιστοσελίδας αναφέρεται συχνά και με το παραπλήσιο όρο carusel – εξ΄ ου και η χαρακτηριστική photo του άρθρου.

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

Έτσι, ένα απλής μορφής slider θα μπορούσε να είναι το παρακάτω:

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

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

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

Όπως και να έχει, το θέμα μας με το (από εδώ και πέρα) slider ιστοσελίδας είναι άλλο. Ας δούμε λοιπόν μερικά χρήσιμα πράγματα γι΄ αυτό.

Ποιος είναι ο ρόλος και τα πλεονεκτήματα ενός Slider; 

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

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

Αλλά ο πρωταρχικός σκοπός, άρα ο ρόλος και τα πλεονεκτήματα του slider είναι διαφορετικός. Ας τον δούμε.

Αυτό που επιδιώκει να προσφέρει ένα slider είναι:

  1. Πολλά μέρη περιεχομένου καταλαμβάνουν το ίδιο τμήμα της Αρχικής Σελίδας. Αυτό έχει ως αποτέλεσμα να υπάρχει διάχυση των βασικών πληροφοριών της ιστοσελίδας στη κορυφή της, όπου υπάρχουν και οι περισσότερες πιθανότητες να γίνουν ορατές από τους επισκέπτες.
  2. Περιλαμβάνει συμπυκνωμένες χωρικά αλά όχι “πνιγμένες” οπτικά, τις χαρακτηριστικές πληροφορίες της επιχείρησης. Αν η δραστηριότητα της επιχείρησης επεκτείνεται σε διάφορους υποτομείς, αυτοί παρουσιάζονται ξεχωριστά μεν, στον ίδιο χώρο δε.
  3. Προσφέρει δυνατότητες πλοήγησης στην ιστοσελίδα. Συχνά, καθεμία από τις εικόνες του slider συνοδεύεται από αντίστοιχο button. Ο χρήστης μπορεί άμεσα με ένα κλικ και χωρίς να ρολάρει καν τη σελίδα, να μεταβεί στην υποσελίδα που περιέχει τις πληροφορίες που τον ενδιαφέρουν.
  4. Η εναλλαγή των εικόνων γίνεται με περίτεχνο τρόπο. Τα ίδια τα κείμενα ή οι εικόνες εμφανίζονται με κίνηση αιχμαλωτίζοντας τη προσοχή του επισκέπτη. Βλέπει άμεσα πως “εδώ κάτι γίνεται”, κάτι υπάρχει που αξίζει να το δει. Οι τίτλοι των βασικών υπηρεσιών της επιχείρησης εμφανίζονται με αντίστοιχες εικόνες, η πληροφορία αποτυπώνεται με πιο άμεσο τρόπο στο υποσυνείδητο του επισκέπτη.

Αυτά τουλάχιστον, λέει η θεωρία.

Τι συμβαίνει στη πράξη;  

Δείτε αυτή την ιστοσελίδα. Στο header της (το “σαλόνι” της, το πάνω μέρος της Αρχικής) περιέχει ένα ωραίο slider. Η Αρχική της σελίδα επίσης περιέχει κάτι ακόμη που έχει σχέση με το θέμα μας. Σας έχω μια ερώτηση σε λίγο.

Αν κάποιος αναζητήσει τις σύγχρονες τάσεις στο web design σε όσον αφορά το slider, θα βρει μέχρι κι επιθέσεις εναντίον του, που κατά τη γνώμη μου δεν τις αξίζει. Το slider έχει ένα σημαντικό αρνητικό μόνο, ίδιο με αυτό που έχουν όλα τα πρόσθετα προγράμματα που προσφέρουν επιπλέον λειτουργίες στην ιστοσελίδα μας. Είναι “βαρύ”: όσο πιο φαντασμαγορικός είναι ο σχεδιασμός του και όσο μεγαλύτερα τα εφέ που πραγματοποιούνται, τόσο (συνήθως) μεγαλύτερη είναι και η επιβράδυνση της ταχύτητας φόρτωσης της ιστοσελίδας. Πέρα από αυτό, τα σημαντικά του προβλήματα βρίσκονται αλλού.

Το slider είναι όμορφο. Μας αρέσει, αρέσει στον ιδιοκτήτη της ιστοσελίδας, αρέσει και στο δημιουργό της, τον κατασκευαστή της ιστοσελίδας. Αν έχουμε ήδη μια ιστοσελίδα, θα έχουμε ήδη παρατηρήσει πως, όταν δείχνουμε εμείς τη σελίδας μας σε φίλους – γνωστούς, αρέσει και σε αυτούς το slider. Και ίσως γι΄ αυτό, να μην έχουμε παρατηρήσει κάτι σημαντικό.

Ο τυχαίος επισκέπτης της ιστοσελίδας, τις περισσότερες φορές δεν βλέπει το slider.

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

Η εναλλαγή εικόνας σε ένα slider διαρκεί από 5 έως 9 δευτερόλεπτα. Ο χρήστης δεν θα μείνει στο ίδιο σημείο της οθόνης για τόσο χρόνο. Οι μετρήσεις δείχνουν ότι ένα μεγάλο ποσοστό των επισκεπτών, δεν φτάνουν ούτε μέχρι τη 2η εικόνα ενός slider.

Πόσο “κακό” είναι αυτό;  

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

Ένα μεγάλο σύνολο σημαντικών πληροφοριών, χάνεται.

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

Κάπου στο μέσον της σελίδας αυτής όμως, υπάρχει ένα δεύτερο, ίσως πιο εντυπωσιακό slider. Το προσέξατε;

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

Τα αρνητικά της ύπαρξης ενός slider

Περιεκτικά, θα μπορούσαμε να συνοψίσουμε τα αρνητικά ενός slider στη παρακάτω λίστα.

  1. Αυξάνουν τη ταχύτητα φόρτωσης της ιστοσελίδας.
  2. Δεν φτάνει το σύνολο των πληροφοριών που περιέχουν στους περισσότερους χρήστες.
  3. Απαιτείται ξεχωριστός σχεδιασμός του για τις μικρότερες οθόνες. Πολλά slider σχεδιάζονται μόνο για μεγάλες οθόνες, ενώ στις μικρότερες μπορεί να συμβαίνει το εξής.
    (α) Να γίνεται η παρουσίαση άσχημα. Οι γραμματοσειρές να είναι ή πολύ μικρές ή τεράστιες, ενώ συχνά τα όποια button ή οι επιπλέον εμφανιζόμενες εικόνες υπερκαλύπτουν τα κείμενα, δίνοντας ένα αποτέλεσμα (στις μικρές συσκευές) απογοητευτικό.
    Για να προσπεράσουν αυτό το πρόβλημα, πολλοί κατασκευαστές προτιμούν τη παρακάτω λύση:
    (β) Να μη γίνεται εναλλαγή εικόνων στις μικρότερες οθόνες, αλλά να εμφανίζεται μόνο η αρχική εικόνα με τα κείμενα που την συνοδεύουν. Με απλά λόγια, να αποκρύβουμε εσκεμμένα βασικές πληροφορίες για την επιχείρηση. 
  4. Τελικά, δεν δίνεται στον επισκέπτη η σωστή εικόνα για την επιχείρηση.

Πρέπει να απορριφθεί το slider από τις σύγχρονες τάσεις του web design; 

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

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

Οι ποσοτικές μετρήσεις δείχνουν ότι πολλοί χρήστες δεν φτάνουν στις πέραν της πρώτης εικόνες του slider, τα ποιοτικά χαρακτηριστικά όμως δεν φαίνεται να έχουν ακόμη μετρηθεί. Πολλοί σοβαροί designers καταδεικνύουν τα πλεονεκτήματα της χρήσης μιας χαρακτηριστικής εικόνας (hero image) αντί της χρήσης εναλλασσόμενων εικόνων, παρά τις όποιες δυσκολίες που μπορεί να έχει αυτό. Για παράδειγμα, προτάσσουν ότι:

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

Παρ΄ όλα αυτά, και οι παραπάνω απόψεις βρίσκονται ακόμη στο φάσμα της θεωρίας. Δεν υπάρχουν ακόμη επαρκής μετρήσεις που θα ελέγξουν την ακρίβειά τους, η όποια συζήτηση λοιπόν είναι ακόμη σε εξέλιξη.

Κι αν τελικά αποφασίσουμε να κρατήσουμε το slider; 

Αν αντί για μια hero image αποφασίσουμε ότι τελικά το slider είναι ο super ήρωάς μας, τότε η σχεδίασή του θα πρέπει να γίνει με προσοχή. Θα πρέπει να πάρουμε υπ΄ όψιν μας όλα τα παραπάνω δεδομένα. Με βάση αυτά να αναπροσαρμόσουμε τον σχεδιασμό μας και να ακολουθήσουμε με προσοχή τις παρακάτω υποδείξεις:

  1. Περιορίζουμε τον αριθμό των εναλλασσόμενων εικόνων. Ένας αριθμός μεγαλύτερος των 5 εικόνων είναι απαγορευτικός και μάταιος, φροντίζουμε να δώσουμε το μήνυμά μας με 3 έως 5 το πολύ εικόνες.
  2. Η πρώτη εικόνα του slider είναι η καθοριστική. Σε αυτή φροντίζουμε να βάλουμε είτε το βασικό αντικείμενο που θέλουμε να παρουσιάσουμε, είτε, αν είναι δυνατόν, μια συνοπτική παρουσίαση όλης της επιχείρησης.
  3. Προσέχουμε το design (χρώματα, γραμματοσειρές) που χρησιμοποιούμε. Οι χρήστες τείνουν να βλέπουν τις περίτεχνες αλλαγές και τους φαντασμαγορικούς χρωματισμούς ως διαφήμιση, έτσι η άμεση αντίδραση είναι να το προσπεράσουν. Φροντίζουμε τα χρώματα και τα κείμενα να δένουν με την υπόλοιπη ιστοσελίδα, κάνοντας το slider ως σημαντικό και κύριο συστατικό της, και όχι ως ξεχωριστό μέρος της.
  4. Κάνουμε σαφές το μήνυμά μας. Τόσο με το συνδυασμό κειμένου – εικόνας που χρησιμοποιούμε, όσο και με το μήνυμα προτροπής προς κάποια ενέργεια. Τα buttons που οδηγούν στην ενέργεια αυτή να είναι μεγάλα, να έχουν τη σωστή απόσταση μεταξύ τους και να κάνουν ξεκάθαρη τη προτροπή που θέλουμε να δώσουμε. Δείτε για παράδειγμα το slider της σελίδας της εταιρίας ergon7.
  5. Το πιο σημαντικό: σχεδιάζουμε το slider ξεχωριστά για τις μικρές οθόνες. Το μήνυμά μας πρέπει να φαίνεται σωστά, και να φαίνεται σωστά από παντού. Δεν παραμελούμε ποτέ την εμφάνιση στις κινητές συσκευές, ειδικά όταν αφορά τη slider.

Αν από την άλλη χρειάζεστε μια εταιρία να σχεδιάσει το σύνολο της ιστοσελίδας σας για εσάς; Επικοινωνήστε μαζί μας.

Εγγραφείτε στο Newsletter



Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Blog