Έχουν περάσει 10 μήνες από τότε που κυκλοφορήσαμε το Page Builder Sandwich στο κοινό. Πλέον έχουμε περίπου 6.000 ενεργές εγκαταστάσεις, και αυτό είναι ένα σημαντικό επίτευγμα για εμάς. Λάβαμε επίσης πάρα πολλά σχόλια εξαιτίας αυτού, τόσο θετικά όσο και αρνητικά. Η γενική ομοφωνία ωστόσο, είναι ότι οι χρήστες απολαμβάνουν πόσο εύκολο είναι να δημιουργούν διατάξεις και το περιεχόμενό τους σε σύγκριση με τους άλλους page builders εκεί έξω.
Ένα μεγάλο μέρος των σχολίων που λάβαμε ήταν αιτήματα για λειτουργίες, και προσθέσαμε πολλές από αυτές τις λειτουργίες τους τελευταίους μήνες. Αλλά καθώς συνεχίζαμε να το κάνουμε αυτό, αρχίσαμε επίσης σταδιακά να αλλάζουμε τη διεπαφή χρήστη στην πορεία. Και, κατά συνέπεια, αλλάζαμε επίσης την εμπειρία χρήστη… προς το χειρότερο. Είχε φτάσει όμως στο σημείο όπου έπρεπε να επανεξετάσουμε τη διεπαφή, επειδή απλά δεν λειτουργούσε πλέον ομαλά, και οι διάφορες λειτουργίες δεν ταίριαζαν καλά μεταξύ τους.
Η παρωχημένη διεπαφή
Στις προηγούμενες εκδόσεις του PBS, θέλαμε τα πάντα να έχουν τη μορφή κουμπιών. Γιατί; Επειδή τα κουμπιά είναι εύκολα στη χρήση. Απλώς… κάνετε κλικ σε αυτά. Στις παλαιότερες εκδόσεις του επιθεωρητή (η πλευρική στήλη στην παραπάνω εικόνα), κάνοντας κλικ σε ένα κουμπί αυξανόταν μια τιμή, ενώ με shift+κλικ σε ένα κουμπί μειωνόταν. Αυτό ακούγεται αρκετά εύκολο. Αλλά με την προσθήκη carousels, καρτελών, χαρτών και άλλων νέων στοιχείων και λειτουργιών, όλα αυτά τα κουμπιά έγιναν ένα συνονθύλευμα διαφορετικών εικονιδίων με διαφορετικά σχέδια, και άρχισαν κάπως να μοιάζουν περισσότερο με ιερογλυφικά παρά με μια σύγχρονη διεπαφή. Αυτό δεν ήταν πρόβλημα για τους έμπειρους χρήστες, αλλά είναι αρκετά τρομακτικό αν είστε νέος στο PBS.
Στη συνέχεια, εμφανίστηκαν μερικά προβλήματα στον επιθεωρητή. Η αρχική ιδέα ήταν να γίνουν τα πάντα απλά και διαθέσιμα μέσα στον επιθεωρητή. Και όταν λέω τα πάντα, εννοούσα τα πάντα – από τη μετατροπή κειμένου σε επικεφαλίδες, μέχρι την αλλαγή χρωμάτων φόντου, χρωμάτων γραμματοσειράς, οτιδήποτε μπορείτε να φανταστείτε. Στην τωρινή του κατάσταση ωστόσο, ο επιθεωρητής περιέχει πλέον πολλές επιλογές που θα σας αναγκάσουν να χρησιμοποιείτε συνεχώς τη ροδέλα του ποντικιού για κύλιση πάνω-κάτω. Πολύ διαφορετικό από τον επιθεωρητή που ήλπιζα αρχικά να φτιάξω για τους χρήστες.
Τέλος, πρόσφατα παρουσιάσαμε τη χαρτογράφηση shortcode για τα αγαπημένα σας πρόσθετα. Αυτή η λειτουργία απαιτούσε από εμάς να δημιουργήσουμε πεδία κειμένου, ρυθμιστικά αριθμών, πλαίσια ελέγχου και πρόσθετους νέους τύπους επιλογών που χρειάζονταν για να κάνουν την εμπειρία επεξεργασίας shortcode πιο ευχάριστη. Αρχικά, ήταν μια καλή ιδέα, και ναι, έκανε τον χειρισμό των shortcodes ευκολότερο για εσάς. Αλλά και πάλι, αυτή η λειτουργία παρεξέκλινε από τη διεπαφή μας «μόνο με κουμπιά». Εκ των υστέρων, ήταν πραγματικά αδύνατο να χρησιμοποιούμε μόνο κουμπιά για την αλλαγή χαρακτηριστικών shortcode. Τώρα, στην τελευταία έκδοση, καταλήξαμε με 2 τύπους στοιχείων ελέγχου: τα κουμπιά και τα πεδία shortcode.
Υπάρχουν μερικοί ακόμη λόγοι που μας έκαναν να αποφασίσουμε ότι η διεπαφή μας δεν ήταν πλέον αποτελεσματική (ή κατάλληλη για τις ανάγκες μας), αλλά τα παραπάνω σημεία είναι τα κυριότερα. Ένα πράγμα ήταν πάντα σίγουρο ωστόσο: γνωρίζαμε ότι έπρεπε να ανανεώσουμε τη διεπαφή.
Καθορίζοντας πώς θα έπρεπε ιδανικά να λειτουργεί ένας Page Builder
Αντί να βιαστούμε και να αλλάξουμε πράγματα αμέσως, κάναμε εκατό βήματα πίσω για να ρίξουμε μια ματιά σε ολόκληρη την εμπειρία του page builder. Θέλαμε να δώσουμε νέα πνοή στη διεπαφή. Για την ακρίβεια, δεν θέλαμε να συνεχίσουμε να την ξαναφτιάχνουμε χρόνο με τον χρόνο. Είναι εξαντλητικό και σίγουρα δεν προσφέρει ουσιαστική βοήθεια στην κοινότητα του WordPress. Αυτή τη φορά, αποφασίσαμε να κάνουμε τα πράγματα αργά και προσεκτικά. Μελετήσαμε κάθε πτυχή του Page Builder Sandwich και τι είναι αυτό που το κάνει έναν καλό page builder, και τελικά δώσαμε σάρκα και οστά σε ολόκληρη την εμπειρία επεξεργασίας σε μερικές βασικές έννοιες.
Βασική έννοια #1: Πληκτρολόγηση απευθείας στο περιεχόμενό σας για επεξεργασία στοιχείων
Ένας από τους κύριους λόγους για την εγκατάσταση ενός page builder είναι να ξεφύγετε από τους περιορισμούς του backend επεξεργαστή κειμένου του WordPress. Δεν είναι ότι ο επεξεργαστής backend δεν είναι καλός, αλλά κατά τη δημιουργία των ιστοσελίδων σας, δεν σας δείχνει αμέσως πώς θα φαίνεται η ιστοσελίδα σας στους επισκέπτες του ιστοτόπου σας, ούτε σας επιτρέπει να διατάξετε το περιεχόμενό σας έξω από μια διάταξη μίας στήλης. Μπορείτε να δείτε μόνο το κείμενό σας εκεί και μερικές εικόνες, αλλά κανένα από τα πιο σύνθετα στοιχεία (π.χ. φόρμες επικοινωνίας). Μπορείτε να προσθέσετε shortcodes, ναι, αλλά δεν θα εμφανίζονται στην τελική τους μορφή*.
* Υπάρχουν πρόσθετα που δημιουργήθηκαν από άλλους για την αντιμετώπιση αυτού, όπως το Shortcake UI, αλλά αυτό δεν είναι το ζητούμενο.
Εδώ ακριβώς έρχονται οι frontend page builders. Μεταφέρουν την εμπειρία επεξεργασίας από το backend στο frontend, με εσάς να επεξεργάζεστε τον ιστότοπό σας όπως ακριβώς θα τον έβλεπαν οι επισκέπτες σας. Όπως θα το διατύπωνε ο Pippin: Ό,τι βλέπετε είναι αυτό που παίρνετε (WYSIWYG).
Ένα άλλο καλό στοιχείο ενός frontend επεξεργαστή είναι ότι σας επιτρέπει να επεξεργάζεστε το κείμενό σας απευθείας. Η πληκτρολόγηση σε επικεφαλίδες και παραγράφους προσφέρει την ευκολία χρήσης ενός συνηθισμένου επεξεργαστή κειμένου στην κατασκευή ιστοτόπων. Τα κουμπιά και οι ετικέτες καρτελών θα πρέπει επίσης να μπορούν να αλλάξουν κάνοντας απλώς κλικ πάνω τους και πληκτρολογώντας.
Αυτός είναι ο τομέας στον οποίο οι περισσότεροι άλλοι page builders δεν αποδίδουν καλά. Οι περισσότεροι από αυτούς σας αναγκάζουν να πληκτρολογείτε μέσα σε ένα πεδίο κειμένου για να επεξεργαστείτε τα πάντα. Και πάλι, αυτό δεν θα έπρεπε να συμβαίνει στους πραγματικούς frontend page builders. Η άμεση πληκτρολόγηση και επεξεργασία κειμένου υπήρξε δυνατό σημείο του Page Builder Sandwich από την έκδοση 2, και φροντίσαμε αυτό να διατηρηθεί και στην έκδοση 3.
Βασική έννοια #2: Αξιοποίηση του ποντικιού για γρήγορες ρυθμίσεις
Το ποντίκι είναι ένα ισχυρό εργαλείο που συχνά παραμελείται στους page builders. Συχνά, οι page builders το χρησιμοποιούν για να επιτρέπουν στους χρήστες να σύρουν στοιχεία και να τα αποθέτουν σε διαφορετικές θέσεις, ή να κάνουν κλικ σε κουμπιά ή πεδία εισαγωγής. Ενώ αυτό είναι εντάξει, υπάρχουν τόσα πολλά περισσότερα που μπορείτε να κάνετε με το ποντίκι όσον αφορά την κατασκευή σελίδων.
Καταρχάς, υπάρχει εξαιρετική οπτική ανατροφοδότηση στη χρήση του ποντικιού ως εργαλείου κατά την επεξεργασία της σελίδας, ειδικά στην προσαρμογή οπτικών ιδιοτήτων όπως περιθώρια (margins), εσωτερικά περιθώρια (paddings) και μεγέθη. Τώρα, η μικρορύθμιση των στοιχείων σας γίνεται μια φυσική εμπειρία.
Στην έκδοση 3 του PBS, θα μπορείτε να προσαρμόσετε διάφορα πράγματα χρησιμοποιώντας το ποντίκι σας. Μπορείτε να ρυθμίσετε τα εξωτερικά περιθώρια/αποστάσεις μεταξύ μεμονωμένων στοιχείων, τα εσωτερικά περιθώρια μέσα στις στήλες σας, καθώς και τα μεγέθη εικόνων, εικονιδίων και χαρτών. Αντικαταστήσαμε επίσης τα κουμπιά που σας επιτρέπουν να αλλάζετε αριθμητικές τιμές με ρυθμιστικά (sliders).
Βασική έννοια #3: Το κείμενο πρέπει να μορφοποιείται εύκολα
Αν κάνετε ένα βήμα πίσω από την οθόνη σας, θα παρατηρήσετε ότι το μεγαλύτερο μέρος αυτού που προσθέτετε στις ιστοσελίδες σας είναι περιεχόμενο κειμένου. Ναι, έχουμε εικόνες και εικονίδια για να το συνοδεύουν – και τον τελευταίο καιρό τείνουμε να προσθέτουμε μεγαλύτερες εικόνες στους ιστοτόπους μας. Αλλά η πλειονότητα του σημαντικού περιεχομένου είναι κείμενο: επικεφαλίδες, λίστες με κουκκίδες, παράγραφοι, παραθέσεις κ.λπ. Παράλληλα, υπάρχει και ο τρόπος με τον οποίο μορφοποιούμε το κείμενό μας ώστε να ταιριάζει με τα σχέδιά μας. Είτε αλλάζουμε τα μεγέθη και τα χρώματά τους, είτε τα κάνουμε έντονα ή πλάγια. Αυτό γίνεται ώστε το περιεχόμενό μας να είναι πιο ευανάγνωστο, σχετικό και ελκυστικό για τους αντίστοιχους αναγνώστες μας.
Επειδή μορφοποιούμε συχνά το κείμενο, τα κουμπιά που μας επιτρέπουν να αλλάζουμε στυλ θα πρέπει να είναι πολύ εύκολα προσβάσιμα. Δεν θα πρέπει να είναι κρυμμένα μέσα σε ένα αναδυόμενο παράθυρο που πρέπει πρώτα να ανοίξουμε. Οι περισσότεροι page builders υποφέρουν από αυτή την ασθένεια. Προκειμένου η διεπαφή χρήστη τους να χαρακτηριστεί «χωρίς ακαταστασία», ακόμη και οι πιο συχνά χρησιμοποιούμενες επιλογές αποκρύπτονται από την κοινή θέα.
Για να το λύσουμε αυτό, ρίξαμε μια ματιά στους πιο συνηθισμένους επεξεργαστές κειμένου. Παρατηρήσαμε ότι συνήθως έχουν μια σειρά με πολλά κουμπιά κοντά στο επάνω μέρος της οθόνης που χρησιμοποιούνται για τη μορφοποίηση κειμένου και αντιγράψαμε την ίδια διάταξη για την έκδοση 3. Τώρα έχουμε μια σειρά από όλα τα κουμπιά μορφοποίησης κειμένου πάντα παρούσα στο επάνω μέρος της οθόνης σας. Αυτό κάνει τη μορφοποίηση πραγματικά γρήγορη και απόλυτα φυσική στην επεξεργασία κειμένου.
Βασική έννοια #4: Οι προηγμένες επιλογές στυλ πρέπει να είναι ευέλικτες αλλά και κατανοητές
Η ουσία με έναν page builder είναι ότι πρέπει να επιτρέπει στους χρήστες να δημιουργούν εντυπωσιακά σχέδια εύκολα. Αυτό σημαίνει ότι πρέπει να παρέχουμε πολλές διαφορετικές ρυθμίσεις και επιλογές χωρίς να επιβαρύνουμε με μια δύσκολη καμπύλη εκμάθησης. Το να μπορείτε να προσαρμόζετε εξωτερικά και εσωτερικά περιθώρια και να μορφοποιείτε κείμενο είναι εξαιρετικό, αλλά αυτά μπορούν να κάνουν τόσα μόνο. Θα χρειαστείτε πολύ πιο περίπλοκες επιλογές για να ολοκληρώσετε τη δουλειά, επιλογές όπως εικόνες φόντου, μοτίβα, περιγράμματα, σταθερά φόντα και άλλα. Η συσσώρευση όλων αυτών των διαφορετικών ρυθμίσεων μπορεί να γίνει κάπως συντριπτική, επομένως απλοποιήσαμε μερικές από αυτές και τις οργανώσαμε σε κατηγορίες για να κάνουμε τα πράγματα πιο φιλικά στην έκδοση 3.
Βασική έννοια #5: Υποστήριξη Shortcode
Τέλος, ας μην ξεχνάμε ότι ο page builder μας βασίζεται στο WordPress. Πρέπει να αγκαλιάσουμε την πλατφόρμα και τις δυνατότητές της και να μην τις περιορίζουμε ή να παρεκκλίνουμε από αυτές. Ένα τεράστιο χαρακτηριστικό που παρέχει το WordPress είναι τα shortcodes. Αυτό δεν σημαίνει ότι ολόκληρο το περιεχόμενο θα πρέπει να αποτελείται από shortcodes – αυτό θα ήταν χαοτικό – αλλά αντίθετα θα πρέπει απλώς να είμαστε συμβατοί με αυτά. Πολλά πρόσθετα και θέματα χρησιμοποιούν shortcodes, και θα ήταν μεγάλη απώλεια αν τα αγνοούσαμε όλα. Στην πραγματικότητα, τα shortcodes δίνουν στους χρήστες τη μέγιστη ευελιξία όσον αφορά τη δημιουργία σελίδων.
Παρουσιάσαμε πριν από λίγες εβδομάδες το σύστημα χαρτογράφησης shortcode μας, και χάρη σε αυτό έχουμε χαρτογραφήσει εκατοντάδες shortcodes από εκατοντάδες πρόσθετα. Έχουμε δώσει προτεραιότητα στα πιο δημοφιλή πρόσθετα που βρίσκονται στον κατάλογο προσθέτων του WordPress, επομένως είναι πολύ πιθανό να τα συναντήσετε στους δικούς σας ιστοτόπους. Αυτό ενισχύθηκε ακόμη περισσότερο στην έκδοση 3, και θα συνεχίσουμε να το βελτιώνουμε στο μέλλον.
Συμπέρασμα
Πήραμε όλες αυτές τις βασικές ιδιότητες παραπάνω και τις ενσωματώσαμε στο Page Builder Sandwich έκδοση 3. Είναι ο καλύτερος page builder που έχουμε κατασκευάσει για το WordPress μέχρι στιγμής. Είναι πιο διαισθητικός και πιο φυσικός στη χρήση, αποδίδει ταχύτερα, είναι πιο εύκολος στη χρήση και πιο φιλικός από ποτέ.
Αν έχετε οποιεσδήποτε σκέψεις σχετικά με κάποιο βασικό χαρακτηριστικό ενός page builder, ενημερώστε μας σχολιάζοντας παρακάτω.