Γιατί ο ιστότοπός σας στο WordPress πρέπει να έχει κολλώδη στοιχεία διεπαφής χρήστη και πώς να τα δημιουργήσετε

Αυτή η συνεισφορά σε κολλώδη στοιχεία διεπαφής χρήστη στο WordPress είναι της Lexie Lu.


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

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

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

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

Σημείωση συντάκτη. Έχουμε μεγαλώσει για να απολαμβάνουμε διάφορα κολλώδη στοιχεία του ιστότοπου. Το blog CodeinWP χρησιμοποιεί ένα τέτοιο στοιχείο, και έχουμε επίσης κάνει την κολλώδη πλοήγηση ένα από τα κύρια χαρακτηριστικά του Zerif – το πιο δημοφιλές θέμα μας (δείτε επίδειξη). Γιατί; Λειτουργεί μόνο για τον χρήστη. Αλλά ας ζητήσουμε από τη Lexie να το εξηγήσει λεπτομερώς:

Γιατί λειτουργούν κολλημένα στοιχεία διεπαφής χρήστη στο WordPress

Η αποτελεσματική χρήση κολλητικών στοιχείων στο WordPress μπορεί να σας βοηθήσει να μεταφέρετε σημαντικές πληροφορίες και να διευκολύνετε το ταξίδι του επισκέπτη στον ιστότοπό σας. Ένας ιστότοπος ηλεκτρονικού εμπορίου ανακάλυψε ότι η ενσωμάτωση της κολλώδους πλοήγησης συνέβαλε στην αύξηση των μετατροπών από 30% σε 33%.

Μια ξεχωριστή δοκιμή A / B που πραγματοποιήθηκε για ερευνητικούς σκοπούς διαπίστωσε ότι 100 τοις εκατό των επισκεπτών προτίμησε τα κολλώδη στοιχεία σχεδίασης – παρόλο που πολλά από αυτά δεν ήταν ακριβώς σίγουρα γιατί.

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

Ευτυχώς, υπάρχουν διάφοροι τύποι στοιχείων και προσθηκών UI για να σας βοηθήσουν να τα ενσωματώσετε στον ιστότοπό σας στο WordPress:

Κολλημένα κουμπιά κοινής χρήσης μέσων κοινωνικής δικτύωσης

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

Κατά μέσο όρο, τα μέσα κοινωνικής δικτύωσης οδηγούν 31 τοις εκατό όλης της επισκεψιμότητας σε ιστότοπους. Ενώ το ποσοστό αυτό είναι αναμφίβολα χαμηλότερο για ορισμένους ιστότοπους (και υψηλότερο για άλλους), υπογραμμίζει τη σημασία της δημιουργίας συναρπαστικού περιεχομένου.

(Διάγραμμα από Γραφήματα και γραφήματα WordPress Lite.)

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

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

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

Πειραματιστείτε με τις πολυάριθμες προσθήκες του WordPress σε όσες περισσότερες συσκευές και λειτουργικά συστήματα μπορείτε, για να βεβαιωθείτε ότι τα κουμπιά κοινωνικών μέσων συμπεριφέρονται όπως προβλεπόταν.

Υπάρχει μια λίστα με δύο μέρη με περισσότερα από 30 πρόσθετα κοινωνικών μέσων που δημοσιεύονται εδώ στο CodeinWP. Είμαι σίγουρος ότι θα βρείτε το τέλειο πρόσθετο για εσάς εκεί.

Κολλώδες πλαίσιο πληροφοριών

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

12keysrehab

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

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


Κολλώδες στοιχείο Κολλώδες στοιχείο

Συγγραφέας: Στιού Σέκενμπεργκ

Τρέχουσα έκδοση: 1.3.5

Τελευταία ενημέρωση: 26 Ιανουαρίου 2019

sticky-element.1.3.5.zip


74% βαθμολογίες


600 + Εγκαταστάσεις


Απαιτείται WP 3.0 +

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

Κολλώδη μενού

Τα κολλώδη μενού είναι ίσως το πιο απλό είδος όλων των κολλητικών στοιχείων διεπαφής χρήστη στο WordPress, αλλά είναι επίσης ένα από τα πιο χρήσιμα.

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

Αλλά μπορείτε να το εφαρμόσετε με διάφορους τρόπους:

α) Μπορείτε να πάτε για την τυπική τοποθέτηση στην κορυφή.

Αυτό έχει κάνει η ομάδα ThemeIsle με τους Θέμα Zerif, για παράδειγμα (μπορείτε να δείτε το ζωντανά demo εδώ):

Κολλώδη στοιχεία Zerif

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

mega μενού

β) Βάλτε το μενού στο πλάι.

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

Ακολουθεί ένα παράδειγμα από RichBrown.info:

RichBrown

Το μενού είναι σταθερό προς τα δεξιά καθώς κάνετε κύλιση προς τα κάτω.

γ) Βάλτε το στο κάτω μέρος.

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

Εδώ είναι ένα παράδειγμα από σφαίρα:

σφαίρα

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

Κολλώδεις εγγραφές μέσω email

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

Η δημιουργία μιας λίστας ποιότητας συνδρομητών email είναι ζωτικής σημασίας για την προώθηση της επιχείρησής σας στο επόμενο επίπεδο. Χάρη στις κολλώδεις φόρμες, η απόκτηση συνδρομητών είναι ευκολότερη από ό, τι νομίζετε.

Υπάρχουν πολλοί τρόποι για να ενθαρρύνετε έναν επισκέπτη ιστότοπου να εγγραφεί στη λίστα αλληλογραφίας σας. Μια κολλώδης φόρμα, είτε στην πλαϊνή γραμμή είτε στην κορυφή της σελίδας σας, μπορεί να είναι μεγάλη βοήθεια. Ένας ιστότοπος που το κάνει καλά είναι Δώδεκα Skip, μια εταιρεία ψηφιακών μέσων. Η παρότρυνσή τους για δράση στην κορυφή της σελίδας είναι σαφής και προσελκύει την προσοχή χωρίς να είναι υπερβολικά στο πρόσωπό σας ή να αποσπά την προσοχή.

twelveskip

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

Το CodeinWP, για παράδειγμα, χρησιμοποιεί πολλές φόρμες για αυτό το σκοπό, και πολλές από τις κολλώδεις. Σαν αυτό:

codeinwp

Κολλώδεις διαφημίσεις

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

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

χρόνος

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

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

Δημιουργικά κολλώδη στοιχεία διεπαφής χρήστη στο WordPress

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

Εδώ είναι ένα παράδειγμα, από Gavick.com:

νησί

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

Φαίνεται ότι δεν υπάρχει όριο στις δημιουργικές χρήσεις των αυτοκόλλητων στοιχείων UI στο WordPress… αφού κάποιος μπόρεσε να κάνει ένα νησί κολλώδες.

Πώς να βρείτε τη σωστή προσθήκη?

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

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

Λέξι Λου Σχετικά με τον Συγγραφέα: Ο Lexie Lu είναι ανεξάρτητος σχεδιαστής και blogger. Της αρέσει να ερευνά τις τελευταίες τάσεις και να έχει πάντα ένα φλιτζάνι καφέ πολύ κοντά. Καταφέρνει Σχέδιο ψητό και μπορεί να ακολουθηθεί στο Twitter @lexieludesigner.

Όλες οι τροποποιήσεις και οι πνευματώδεις επανεγγραφές του Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map