Η απόφαση για πρότυπο που αντέχει στο demo: Ένα υπόμνημα 6 βημάτων

Σύνοψη

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

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

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

1. Γράψε την περιγραφή εργασίας πριν ανοίξεις οποιοδήποτε demo.

Η αρχή: δεν μπορείς να αξιολογήσεις ένα πρότυπο μέχρι να ξέρεις για τι προσλαμβάνεται. Το demo του αφεντικού σου έχει μια δουλειά: να μοιάζει με μια διάσημη μάρκα. Ο ιστότοπός σου έχει μια δουλειά: να φέρει έναν επιστρέφοντα πελάτη από το «το χρειάζομαι» στο «το αγόρασα» όσο το δυνατόν γρηγορότερα.

Έτσι, πριν ανοίξεις έστω και ένα θέμα, γράψε μια σύντομη παράγραφο για το βασικό σενάριο του καταστήματός σου. Για ένα μπουτίκ που πουλά δερμάτινα είδη, αυτό θα μπορούσε να είναι: «Σε ένα κινητό, ένας πελάτης που ξέρει τι θέλει θα πρέπει να μπορεί να δει την τιμή του προϊόντος και το κουμπί προσθήκης στο καλάθι χωρίς να κάνει κύλιση. Η διαδρομή από εκείνη τη στιγμή μέχρι την ολοκλήρωση αγοράς θα πρέπει να διαρκεί λιγότερο από ένα λεπτό και τίποτα δεν θα πρέπει να αναδύεται μεταξύ της σελίδας προϊόντος και της οθόνης πληρωμής.» Αυτή είναι μια δοκιμάσιμη δήλωση. Στη συνέχεια, καταγράψε τις τρεις ή τέσσερις ενέργειες που αποφέρουν τα περισσότερα έσοδα — αναζήτηση-σε-προϊόν, προϊόν-σε-ολοκλήρωση, και ίσως «αγορά ανά συλλογή» για εποχιακούς αγοραστές.

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

2. Ανακατασκεύασε το demo με το δικό σου περιεχόμενο.

Τα demos των προμηθευτών είναι στημένα με επαγγελματική φωτογραφία προϊόντων, επικεφαλίδες ακριβούς πλάτους και κείμενα γραμμένα από τον συγγραφέα του θέματος. Τα προϊόντα σου έχουν διαφορετικές αναλογίες εικόνας, οι τίτλοι των προϊόντων σου είναι προτάσεις και η σελίδα «σχετικά» είναι τρεις παράγραφοι για τη βιωσιμότητα. Το demo μπορεί να κρύψει όλα αυτά.

Πάρε λοιπόν το πρότυπο σε ένα περιβάλλον δοκιμών και αντικατέστησε το με το πραγματικό σου περιεχόμενο — όχι ένα δείγμα, αλλά ένα πραγματικό προϊόν, με το πραγματικό του όνομα και μια παράγραφο πραγματικής περιγραφής. Στη συνέχεια, δοκίμασε τις τρεις στιγμές που έχουν σημασία: τη σελίδα προϊόντος σε οθόνη πλάτους 375 pixel, τα αποτελέσματα αναζήτησης με μια μεγάλη κατηγορία και την ολοκλήρωση αγοράς με την πραγματική σου πύλη πληρωμής. Για παράδειγμα, ένα κατάστημα που πουλά χειροποίητες κεραμικές κούπες διαπιστώνει ότι οι εικόνες προϊόντων του demo είναι τραβηγμένες σε λευκό φόντο, αλλά οι δικές τους φωτογραφίες έχουν πολυάσχολο φόντο εργαστηρίου — το σκοτεινό φίλτρο του θέματος κάνει την κούπα να εξαφανίζεται. Αυτό είναι το είδος του πράγματος που το αντιλαμβάνεσαι μόνο με το δικό σου περιεχόμενο.

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

3. Μέτρησε όσα δεν δείχνει το demo.

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

Δημιούργησε έναν ιστότοπο δοκιμών με το πραγματικό σου απόθεμα και τρέξε δύο δοκιμές: πρώτα σε μια γρήγορη σύνδεση επιτραπέζιου, στη συνέχεια σε ένα πραγματικό τηλέφωνο με 4G και καθαρισμένη προσωρινή μνήμη. Κοίτα τον χρόνο μέχρι να είναι χρησιμοποιήσιμη η σελίδα, όχι μόνο πότε φαίνεται να φορτώνεται. Πολλά θέματα εμφανίζουν την επικεφαλίδα αμέσως, αλλά στη συνέχεια μπλοκάρουν τη διάταξη για δύο δευτερόλεπτα ενώ φορτώνεται ένα σενάριο slider — ένα πραγματικό πρόβλημα στα τηλέφωνα. Επίσης, κάνε μια ολόκληρη ολοκλήρωση αγοράς σε τηλέφωνο. Μερικά καλοφτιαγμένα θέματα δείχνουν μια χαρά στον επιτραπέζιο, αλλά μετατρέπουν την ολοκλήρωση στο κινητό σε μια παρουσίαση πέντε οθονών, ζητώντας τον κωδικό προσφοράς πριν από τη διεύθυνση και εμφανίζοντας μια εκτίμηση αποστολής μετά το κουμπί πληρωμής. Εδώ είναι που μια λίστα ελέγχου για κινητά γίνεται χρήσιμη — σε αναγκάζει να επαληθεύσεις την πρόσβαση με τον αντίχειρα, τα σημεία αφής και αν το κουμπί «Συνέχεια» είναι πάνω από το δίπλωμα.

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

4. Βαθμολόγησε το κόστος προσαρμογής — και να είσαι ειλικρινής για το «δωρεάν».

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

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

5. Παρουσίασε τους συμβιβασμούς εκεί που το αφεντικό σου μπορεί να τους δει.

Ένας πίνακας αξίζει όσο εκατό πισωγυρίσματα γιατί μετακινεί τη συζήτηση από το «Μου αρέσει αυτό» στο «Ορίστε τι κοστίζει αυτή η επιλογή». Εκτύπωσέ τον (ή επικόλλησέ τον στο Slack) όταν συγκρίνεις δύο φιναλίστ:

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

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

6. Γράψε ένα μονοσέλιδο υπόμνημα απόφασης που τελειώνει τη συζήτηση.

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

Το υπόμνημα είναι ένα έγγραφο πώλησης — πουλάς στο αφεντικό σου μια απόφαση που μπορεί να υπερασπιστεί στον δικό του διευθυντή. Πλαισίωσε κάθε σημείο με επιχειρηματικούς όρους. Αντί για «το κουμπί προσθήκης στο καλάθι είναι κάτω από το δίπλωμα στο iPhone SE», γράψε «στο πιο κοινό μέγεθος τηλεφώνου, οι πελάτες θα πρέπει να κυλήσουν για να προσθέσουν το προϊόν, πράγμα που αυξάνει την πιθανότητα να φύγουν». Αντί για «το θέμα χρησιμοποιεί πολλή JavaScript», γράψε «η σελίδα χρειάζεται περισσότερο χρόνο για να φορτώσει στο 4G, και οι αργές σελίδες συνδέονται με χαμηλότερη μετατροπή». Μην παραλείψεις την ενότητα «επόμενα βήματα»· καθησυχάζει το αφεντικό σου ότι δεν εγκρίνεις κάτι μόνιμο — ξεκινάς μια διαδικασία που περιλαμβάνει ρυθμίσεις μετά την κυκλοφορία.

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

Το πλαίσιο, όχι η ετυμηγορία, είναι το ζητούμενο.

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