Ο Έλεγχος Προτύπων Ιστοτόπων: Ένας επαναλήψιμος τρόπος για να ελέγχετε τα πρότυπα σε όλους τους πελάτες

Σύνοψη

Πώς επιλέγετε ένα πρότυπο για έναν πελάτη όταν η επιλογή πρέπει να αντέξει την επαφή με έναν δεύτερο πελάτη, και έναν τρίτο, και μια ντουζίνα ακόμη; Το πρώτο πρότυπο είναι εύκολο: βρίσκετε κάτι που φαίνεται σωστό, το δείχνετε στον πελάτη και προχωράτε. Το δέκατο πρότυπο είναι εκεί που το μοτίβο σπάει. Μέχρι τότε έχετε κληρονομήσει ένα σωρό μικρούς συμβιβασμούς — μια διάταξη που πολεμά το περιεχόμενο, μια λειτουργία που ο πελάτης δεν χρειάζεται, μια προσαρμογή που έσπασε στην επόμενη ενημέρωση. Η λύση δεν είναι να σταματήσετε να χρησιμοποιείτε πρότυπα· παραμένουν ένας γρήγορος, οικονομικός τρόπος να ξεκινήσετε έναν επαγγελματικό ιστότοπο. Η λύση είναι να αντιμετωπίζετε το πρότυπο όπως μια ομάδα μηχανικών αντιμετωπίζει μια εξάρτηση τρίτου μέρους: ελέγξτε το πριν το υιοθετήσετε, καταγράψτε τι βρίσκετε και κάντε τον έλεγχο επαναλήψιμο για κάθε πελάτη.

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

Η πρώτη ένσταση: «Δεν έχουμε χρόνο για να ελέγξουμε τα πρότυπα, ο πελάτης χρειάζεται τον ιστότοπο άμεσα»

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

Η επιφάνεια αλλαγών είναι κάθε σημείο όπου θα χρειαστεί να πειράξετε το πρότυπο για να ταιριάξει με το περιεχόμενο και την ταυτότητα του πελάτη. Σκεφτείτε μια κατασκευαστική εταιρεία που ζητά μια μοντέρνα βιομηχανική εμφάνιση. Βρίσκετε ένα πρότυπο με σκούρο hero, έντονη τυπογραφία και μια φωτογραφία γερανού. Φαίνεται τέλειο στην προεπισκόπηση του marketplace. Στη συνέχεια προσπαθείτε να προσθέσετε μια γκαλερί έργων με μεγάλες περιγραφές και ανακαλύπτετε ότι το μπλοκ χαρτοφυλακίου υποστηρίζει μόνο σύντομες λεζάντες, και το κουμπί «ζητήστε προσφορά» είναι σκληρά κωδικοποιημένο σε μια μόνο διεύθυνση email. Τώρα γράφετε παρακάμψεις για πράγματα που το πρότυπο θα έπρεπε να είχε εμφανίσει ως επιλογές.

Πριν υπογράψει ο πελάτης οτιδήποτε, κάντε μια δοκιμή σε περιβάλλον δοκιμών (staging). Τραβήξτε το πρότυπο σε ένα φρέσκο, κενό περιβάλλον. Καταγράψτε τα μη διαπραγματεύσιμα χαρακτηριστικά του πελάτη και αντιστοιχίστε το καθένα σε μια ρύθμιση του προτύπου. Δοκιμάστε τις τρεις αλλαγές που είναι πιο πιθανό να κάνετε: αλλάξτε το λογότυπο, αλλάξτε το βασικό χρώμα, ξαναγράψτε το κείμενο της αρχικής σελίδας. Σημειώστε ποιες αλλαγές ήταν ρυθμίσεις και ποιες απαιτούσαν επεξεργασία κώδικα. Αυτό δεν είναι ένας βαθύς τεχνικός έλεγχος· είναι μια εστιασμένη άσκηση είκοσι λεπτών που σας λέει αν το πρότυπο είναι ένα σημείο εκκίνησης ή ένα έργο από μόνο του.

Η δεύτερη ένσταση: «Κάθε πελάτης είναι διαφορετικός, οπότε μια τυπική αξιολόγηση δεν θα λειτουργήσει»

Ένας εμπορικός προμηθευτής υδραυλικών και ένα εξειδικευμένο κατάστημα τροφίμων μπαίνουν στην ομάδα σας. Δεν έχουν σχεδόν τίποτα κοινό οπτικά. Ο πελάτης υδραυλικών χρειάζεται κατηγορίες προϊόντων, φύλλα προδιαγραφών και ροή εργασίας για αιτήματα προσφοράς. Το κατάστημα τροφίμων χρειάζεται λίστες προϊόντων, πληροφορίες παράδοσης και μια διαδρομή παραγγελίας. Διαφορετικά πρότυπα του κλάδου θα ταιριάξουν — τα marketplaces προτύπων προσφέρουν σχέδια συγκεκριμένου κλάδου, συχνά με δυνατότητες όπως κατάλογοι προϊόντων, συστήματα κρατήσεων ή προθήκες χαρτοφυλακίου. Αλλά οι ερωτήσεις ελέγχου παραμένουν ίδιες και για τους δύο: Μπορώ να μετακινήσω το λογότυπο χωρίς να πειράξω κώδικα; Μπορώ να αλλάξω τη σειρά πλοήγησης; Μπορώ να αντικαταστήσω τα προσωρινά στοιχεία επικοινωνίας σε ένα σημείο; Η ενσωματωμένη λειτουργία ταιριάζει με το πώς αυτός ο πελάτης λαμβάνει πραγματικά παραγγελίες ή αιτήματα;

Η φράση «κάθε πελάτης είναι διαφορετικός» είναι ακριβώς ο λόγος που μια τυπική αξιολόγηση έχει σημασία. Σας εμποδίζει να κάνετε το ίδιο ακριβό λάθος με νέο ένδυμα.

Να πώς φαίνεται η αξιολόγηση του demo σε σύγκριση με ό,τι πραγματικά ελέγχει ο έλεγχος:

Τι δείχνει το demo στο marketplace	Τι πραγματικά ελέγχει ο έλεγχος
Μια γυαλισμένη αρχική σελίδα σε μεγάλη οθόνη επιτραπέζιου υπολογιστή	Πώς συμπεριφέρεται το πρότυπο σε πλάτη τηλεφώνου, tablet και επιτραπέζιου, και πώς συμπτύσσεται η πλοήγηση
Φωτογραφίες στοκ και σύντομα, τακτοποιημένα προσωρινά κείμενα	Πώς συμπεριφέρονται τα μπλοκ διάταξης με ρεαλιστικά μήκη περιεχομένου, συμπεριλαμβανομένων μεγάλων ονομάτων προϊόντων ή πυκνών στοιχείων επικοινωνίας
Ομαλά εφέ hover και κινούμενα σχέδια	Αν οι αλληλεπιδράσεις είναι προσβάσιμες και αν καθυστερούν την πρώτη απόδοση σε μια τυπική σύνδεση
Ένα εικονίδιο λειτουργίας όπως «προσθήκη στο καλάθι» ή «κράτηση τώρα»	Αν η λειτουργία είναι διαμορφώσιμη, αν στέλνει δεδομένα κάπου όπου ο πελάτης έχει τον έλεγχο, και αν ταιριάζει με την πραγματική ροή εργασίας του πελάτη
«Εύκολη προσαρμογή» στην περιγραφή	Ποιες αλλαγές μπορείτε να κάνετε στον οπτικό επεξεργαστή και ποιες απαιτούν επανεγγραφή στυλ ή markup

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

Η τρίτη ένσταση: «Το demo δείχνει καλό, οπότε ξέρουμε ήδη τι χρειαζόμαστε»

Ανοίξτε το demo σε ένα παράθυρο ιδιωτικής περιήγησης και αλλάξτε το μέγεθος από 320 pixels σε 1440 pixels πριν κάνετε κλικ στο κουμπί που λέει κάτι σαν «Ξεκινήστε με αυτό το πρότυπο». Κάντε το αργά. Παρατηρήστε πού συμπτύσσεται η πλοήγηση, πού κόβονται οι εικόνες και πού το κείμενο αρχίζει να ξεχειλίζει από το κοντέινερ του. Αυτή η μόνη άσκηση θα σας πει περισσότερα από έναν φάκελο με στιγμιότυπα.

Εδώ είναι όπου τα βαρετά κριτήρια σε κάθε περιγραφή προτύπου — ανταπόκριση, φιλικότητα προς το SEO, ταχύτητα φόρτωσης, εμπειρία χρήστη — γίνονται συγκεκριμένα. Το demo του marketplace σχεδόν σίγουρα τρέχει στη δική του φιλοξενία, με ένα καθαρό σετ εικόνων και χωρίς σενάρια αναλυτικών στοιχείων. Ο ιστότοπος του πελάτη σας θα τρέχει στον δικό του host, με το δικό του λογότυπο, τα πραγματικά του κείμενα και μερικές ετικέτες τρίτων. Αν το πρότυπο εξαρτάται από μια τεράστια εικόνα banner για να δείχνει σωστό, αυτό είναι ένα πρόβλημα απόδοσης που επιλέγετε σήμερα.

Δοκιμάστε επίσης τη λειτουργία που σας έκανε να κοιτάξετε το πρότυπο. Ένας πελάτης διαχείρισης πρακτικής μπορεί να έλκεται από ένα πρότυπο με widget κρατήσεων. Φαίνεται γυαλισμένο στο demo. Στη συνέχεια ανακαλύπτετε ότι το widget αποθηκεύει τις υποβολές σε έναν λογαριασμό demo, προτρέπει τους επισκέπτες με τη φόρμα του συγγραφέα του προτύπου ή δεν συνδέεται καθόλου με το ημερολόγιο του πελάτη. Ο έλεγχος πρέπει να απαντήσει: πού καταλήγουν τα δεδομένα; Μπορεί ο πελάτης να δει τις υποβολές; Η λειτουργία είναι μέρος του κώδικα του προτύπου ή εξαρτάται από μια υπηρεσία τρίτου μέρους που μπορεί να αλλάξει τιμολόγηση αργότερα; Αν οι κατατάξεις αναζήτησης είναι μέρος της απόφασης, αξίζει να ελέγξετε τους κοινούς μύθους SEO για τα πρότυπα πριν δεσμευτείτε.

Η τέταρτη ένσταση: «Η προσαρμογή θα διορθώσει οποιαδήποτε έλλειψη, οπότε ας διαλέξουμε ένα και ας το προσαρμόσουμε»

Ας πούμε ότι ο πελάτης ζητά μια μικρή προσαρμογή στο μέγεθος γραμματοσειράς για κινητά. Βρίσκετε το στυλ επικεφαλίδας του προτύπου ορισμένο σε πολλά σημεία στα breakpoints. Για να κάνετε μια συνεπή αλλαγή γράφετε μια χούφτα παρακάμψεις. Δουλεύουν. Τρεις μήνες αργότερα, έρχεται μια ενημέρωση· μία από αυτές τις δηλώσεις τώρα συγκρούεται· η επικεφαλίδα του πελάτη ξαφνικά πηδά σε ένα μη αναμενόμενο μέγεθος στα τηλέφωνα. Αυτό είναι το πραγματικό κόστος του «θα το προσαρμόσουμε αργότερα».

Η προσαρμογή δεν είναι ένα μεμονωμένο γεγονός· είναι μια σχέση συντήρησης. Τη στιγμή που παρακάμπτετε κάτι στο υποκείμενο CSS ή markup του προτύπου, δημιουργείτε μια έκδοση του προτύπου που δεν είναι πλέον ακριβώς αυτό που συντηρεί ο συγγραφέας. Η επόμενη ενημέρωση θα γραφτεί έναντι του πρωτοτύπου, και κάθε παράκαμψη είναι ένα σημείο όπου μια μελλοντική ενημέρωση μπορεί να σπάσει σιωπηλά το σχέδιο του πελάτη. Όσο περισσότερο προσαρμόζετε, τόσο περισσότερο γίνεστε ο de facto συντηρητής του προτύπου — και εκεί εμφανίζονται τα κοινά λάθη προσαρμογής.

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

Η πέμπτη ένσταση: «Το να διαλέγεις με το ένστικτο είναι πιο γρήγορο, και οι πελάτες μας εμπιστεύονται το γούστο μας»

Αντικαθιστά ένας πίνακας βαθμολογίας την κρίση σχεδιασμού; Όχι — και γι' αυτό είναι χρήσιμος. Σκεφτείτε δύο πρότυπα για τον ίδιο πελάτη θεραπευτή. Και τα δύο σκοράρουν «ναι» σε κάθε κατηγορία ελέγχου. Το ένα έχει μια πιο ήρεμη τυπογραφική κλίμακα· το άλλο έχει ένα πιο εκφραστικό σύστημα χρωμάτων. Ο πίνακας βαθμολογίας σας λέει ότι είναι λειτουργικά ίσα, και η κρίση σχεδιασμού σας επιλέγει αυτό που ταιριάζει στην προσωπικότητα του πελάτη. Αυτό είναι το γούστο που κάνει τη δουλειά στην οποία είναι πραγματικά καλό, αντί να του ζητείται να προβλέψει τη συμπεριφορά ενημερώσεων, τη διαχείριση δεδομένων και τη διάταξη για κινητά.

Κρατήστε τον πίνακα βαθμολογίας απλό. Για κάθε πρότυπο, βαθμολογήστε τα πέντε πράγματα που χαλάνε τα έργα: επιφάνεια αλλαγών, διαδρομή ενημέρωσης, ταίριασμα λειτουργιών, συμπεριφορά σε διάφορα μεγέθη οθόνης και απόδοση/φιλικότητα προς SEO. Χρησιμοποιήστε μόνο «ναι», «εν μέρει» ή «όχι». Όταν λαμβάνετε περισσότερα από ένα «όχι», έχετε μια συζήτηση, όχι μια ετυμηγορία. Αυτή η συζήτηση γίνεται ένα επαναλαμβανόμενο μέρος της αιτιολογίας προς τον πελάτη: «Δεν επιλέξαμε αυτό το πρότυπο γιατί η λειτουργία κρατήσεων θα απαιτούσε αντικατάσταση μέσα σε μήνες». Αυτό είναι πιο εύκολο να υπερασπιστεί κανείς από το «δεν μου φαινόταν σωστό».

Συμπέρασμα: Ας κάνουμε τον έλεγχο το πράγμα που επαναλαμβάνουμε

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

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