Σταματήστε να αντιγράφετε παραδείγματα ιστοσελίδων. Κλέψτε τον σκελετό τους.

Σύνοψη

Οι περισσότερες συμβουλές για παραδείγματα ιστοσελίδων είναι παγίδα. Σας λένε να αντιγράψετε ό,τι λειτουργεί, οπότε κολλάτε ένα hero από SaaS σε μια ιστοσελίδα δικηγορικού γραφείου και αναρωτιέστε γιατί αποτυγχάνει. Ένα παράδειγμα είναι απόδειξη μιας απόφασης, όχι ένα πρότυπο προς αναπαραγωγή. Η διαδικασία που λειτουργεί είναι η αντίστροφη μηχανική: βγάλτε τη λογική πίσω από το hero, την απόδειξη και την παρότρυνση για δράση (call-to-action), και μετά ξαναχτίστε αυτές τις αποφάσεις για τους αγοραστές κάθε πελάτη. Αυτό το άρθρο δείχνει τι να κλέψετε από παραδείγματα SaaS, πρακτορείων (agency) και χαρτοφυλακίων, και πώς να φτιάξετε ένα swipe file αποφάσεων που κάνει το σύστημα επαναλαμβανόμενο σε κάθε πελάτη.

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

Διαβάστε το hero σαν συμβόλαιο

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

Το σλόγκαν του Calendly — «προγραμματίστε συναντήσεις χωρίς τα email πηγαινέλα» — λειτουργεί επειδή ο δημιουργός αποφάσισε ότι ο επισκέπτης είναι ένας απασχολημένος επαγγελματίας που πνίγεται στον «πινγκ-πονγκ» email. Η υπόσχεση είναι ο χρόνος που εξοικονομείται. Η παρότρυνση για δράση είναι «κλείστε μια συνάντηση». Αυτή η απόφαση μεταφέρεται σε μια επιχείρηση υπηρεσιών. Ένας πελάτης λογιστικής έχει ως επισκέπτη έναν επιχειρηματία που μισεί τη γραφειοκρατία· ο τίτλος πρέπει να υπόσχεται «κλείστε τα βιβλία χωρίς το χάος των υπολογιστικών φύλλων» και η παρότρυνση πρέπει να είναι «λάβετε δωρεάν τακτοποίηση». Ίδια απόφαση, διαφορετικές λέξεις. Το Notion στοχεύει σε μία μόνο παρότρυνση, «Get Notion free», από τον ίδιο κανόνα: μία σελίδα, μία ενέργεια, χωρίς περισπασμούς. Προσέξτε τι δεν βλέπετε — κανένα καρουζέλ, κανένα δευτερεύον κουμπί «μάθε περισσότερα», καμία φόρμα που ζητάει τηλέφωνο. Κάθε παράλειψη είναι μια απόφαση, και οι αποφάσεις παράλειψης είναι οι πιο φθηνές να αντιγραφούν επειδή δεν κοστίζουν τίποτα.

Το hero του Linear ωθεί τον ίδιο κανόνα πιο πέρα. Ένας τίτλος, ένας υπότιτλος, ένα κουμπί — καθόλου στιγμιότυπα οθόνης μέχρι να κάνετε κύλιση. Η απόφαση: «αυτό το κοινό ήδη γνωρίζει το πρόβλημα, οπότε η δουλειά μας είναι να επικοινωνήσουμε την καταλληλότητα, όχι να εκπαιδεύσουμε». Κρατήστε αυτή την απόφαση. Όταν οι αγοραστές του πελάτη σας είναι εκλεπτυσμένοι, αντιγράψτε τη συγκράτηση. Όταν δεν είναι, ξέρετε να προσθέσετε περισσότερη εξήγηση πριν ζητήσετε το κλικ. Ο αριθμός των λέξεων σε ένα hero είναι επίσης απόφαση. Ένα hero που προσπαθεί να πει τρία πράγματα δεν επικοινωνεί τίποτα. Αν ένα παράδειγμα έχει πάρα πολλές ιδέες πάνω από το fold, αντιμετωπίστε το ως προειδοποίηση, όχι ως μοντέλο.

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

Δεν είναι ο κλάδος, είναι η πρόθεση

Σταματήστε να ταξινομείτε τα παραδείγματα με βάση την ετικέτα του κλάδου. «Αυτή είναι μια ιστοσελίδα SaaS» σας λέει σχεδόν τίποτα χρήσιμο. «Αυτή είναι μια ιστοσελίδα για μια περίπλοκη απόφαση όπου ο αγοραστής συγκρίνει τρεις επιλογές πριν δεσμευτεί» σας λέει τι να κλέψετε. Ταξινομήστε με βάση την πρόθεση του αγοραστή του πελάτη σας και μετά αντιστοιχίστε τον τύπο παραδείγματος σε αυτή την πρόθεση.

Μια ιστοσελίδα SaaS κερδίζει τη μετατροπή της επειδή η πρόθεση του αγοραστή είναι «να αποφασίσω αν αυτό λύνει το πρόβλημά μου». Ο τίτλος φέρει την υπόσχεση, η δοκιμή ή το demo είναι η απόδειξη, η παρότρυνση είναι μοναδική. Μια ιστοσελίδα πρακτορείου κερδίζει τη μετατροπή της επειδή η πρόθεση του αγοραστή είναι «μπορώ να εμπιστευτώ αυτό το άτομο με τα χρήματα, το brand ή την κρίση μου;» Η απόδειξη είναι μελέτες περιπτώσεων, λογότυπα πελατών, αξιοπιστία ομάδας. Η παρότρυνση είναι συχνά μια διαβούλευση. Μια ιστοσελίδα χαρτοφυλακίου κερδίζει τη μετατροπή της επειδή η πρόθεση του αγοραστή είναι «το γούστο τους είναι τόσο καλό όσο η φήμη τους;» Η απόδειξη είναι το ίδιο το έργο, και η παρότρυνση μερικές φορές είναι κρυμμένη σχεδιασμένα.

Τύπος παραδείγματος	Πρόθεση επισκέπτη	Κλέψτε αυτό	Παραλείψτε αυτό
SaaS	«Αποφασίστε αν μου ταιριάζει»	Πειθαρχία αξίας, μοναδική παρότρυνση, κείμενο από χαρακτηριστικό σε όφελος	Κινούμενα σχέδια μόνο για το προϊόν, δομή σελίδας τιμολόγησης, παροτρύνσεις πρώτα demo
Πρακτορείο	«Μπορώ να εμπιστευτώ αυτή την εταιρεία;»	Μελέτες περιπτώσεων, αποδείξεις πελατών, ονομαστική ομάδα, σαφές μονοπάτι συνεργασίας	Μακροσκελείς σελίδες διαδικασίας, κείμενο προσέγγισης γεμάτο ορολογία
Χαρτοφυλάκιο	«Το γούστο τους είναι τόσο καλό όσο το έργο;»	Δυνατές ιστορίες έργων, πριν/μετά, συγκρατημένη παρουσίαση	Αραιά στοιχεία επικοινωνίας, κείμενο με προσωπικότητα πρώτα, κρυφές παροτρύνσεις

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

Ο πίνακας είναι εργαλείο διαλογής, όχι φυλακή. Για έναν υπεργολάβο κατασκευών που υποβάλλει προσφορές για εμπορικά έργα, η πρόθεση του αγοραστή είναι «μπορεί αυτό το συνεργείο να αποδώσει εντός χρονοδιαγράμματος και προϋπολογισμού;» Αυτό είναι εμπιστοσύνη πρακτορείου με αποδείξεις χαρτοφυλακίου. Τα υβρίδια συμβαίνουν συνεχώς. Το λάθος είναι να πιστεύετε ότι πρέπει να επιλέξετε μία μορφή. Επιλέγετε ποιο μοτίβο κυριαρχεί, όχι ποια ενιαία μορφή θα χρησιμοποιήσετε. Μια κατασκευαστική ιστοσελίδα μπορεί να δείχνει φωτογραφίες πριν/μετά (μοτίβο χαρτοφυλακίου) και παρόλα αυτά να ξεκινά με πιστοποιήσεις ασφαλείας και συμμετοχές σε συνδικάτα (μοτίβο πρακτορείου). Αποφασίστε την αναλογία με βάση την πρόθεση και μετά αφήστε τη φωνή του brand του πελάτη να καθορίσει την τελική διάταξη.

Πάρτε ένα δεύτερο σενάριο: μια συμβουλευτική fractional-CFO. Ο αγοραστής είναι ένας ιδρυτής που έχει καεί από προηγούμενο σύμβουλο. Αυτό είναι πρόβλημα πρακτορείου. Μελετήστε ιστοσελίδες πρακτορείων που κατονομάζουν πελάτες και ακριβή αποτελέσματα. Ο πελάτης σας δεν μπορεί πάντα να κατονομάζει πελάτες — NDA — οπότε η απόφαση μεταφέρεται αλλά η απόδειξη αλλάζει: ανωνυμοποιημένη «θυγατρική εταιρεία στον χρηματοοικονομικό τομέα» και γλώσσα αποτελεσμάτων αντί για λογότυπα. Γράψτε «η εμπιστοσύνη εξαρτάται από τη συγκεκριμένη απόδειξη» στο πλάνο. Τώρα ο πελάτης ξέρει γιατί υπάρχει κάθε στοιχείο.

Δανειστείτε την απόφαση, όχι το σχέδιο

Τα περισσότερα άρθρα «βέλτιστων πρακτικών» σας λένε ότι οι σχεδιαστικές επιλογές μεταφέρονται. Δεν μεταφέρονται. Ένα βίντεο hero σε πλήρη οθόνη λειτουργεί σε ένα χαρτοφυλάκιο φωτογραφίας drones επειδή η δουλειά του κοινού είναι να κρίνει εικόνες. Βάλτε το ίδιο βίντεο σε μια ιστοσελίδα υπηρεσίας νομικών εγγράφων και έχετε κρύψει το προϊόν. Η χειρότερη συμβουλή που μπορείτε να ακολουθήσετε είναι «κλέψε σαν καλλιτέχνης». Το να κλέβετε το αποτέλεσμα παράγει ομοιώματα. Το να κλέβετε αποφάσεις παράγει προσαρμοσμένη δουλειά που τυχαίνει να μετατρέπει.

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

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

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

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

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

Φτιάξτε ένα swipe file με πλαίσιο

Η μεμονωμένη έμπνευση είναι άχρηστη όταν χτίζετε πολλές ιστοσελίδες τον χρόνο. Φτιάξτε ένα swipe file που αποθηκεύει αποφάσεις, όχι στιγμιότυπα. Χρησιμοποιήστε έναν απλό πίνακα: παράδειγμα, URL, κοινό, πρόθεση, υπόσχεση, απόδειξη, παρότρυνση και «μην το χρησιμοποιήσετε για». Προσθέστε μία ακόμη στήλη για το μονολεκτικό «επειδή». Εκεί είναι που ζει η αξία.

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

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

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

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

Συμπέρασμα

Σταματήστε να μαζεύετε ιστοσελίδες. Ξεκινήστε να μαζεύετε λόγους. Την επόμενη φορά που θα λάβετε ένα σύντομο πελάτη, ανοίξτε το swipe file, βρείτε την πρόθεση που ταιριάζει με τους αγοραστές τους και κλέψτε τις αποφάσεις που ταιριάζουν. Το σχέδιο θα είναι δικό τους από ανάγκη — επειδή η αγορά, το brand και ο προϋπολογισμός τους είναι διαφορετικά. Αυτό είναι το νόημα. Μια ιστοσελίδα με αντίστροφη μηχανική μετατρέπει επειδή είναι χτισμένη από αποφάσεις που ήταν αληθινές για το κοινό κάποιου άλλου και δοκιμάστηκαν ξανά με το δικό σας.