Mobile Landing Pages για Native Ads: Κανόνες Σχεδιασμού που Μετατρέπουν

Το traffic από native ads είναι κατά κύριο λόγο mobile, καθώς προέρχεται από ροές περιεχομένου που οι άνθρωποι κάνουν scroll στα τηλέφωνά τους, οπότε ένας pre-lander σχεδιασμένος desktop-first και προσαρμοσμένος προς τα κάτω θα έχει χειρότερες επιδόσεις από έναν σχεδιασμένο mobile-first από την αρχή. Οι κανόνες σχεδιασμού που έχουν τη μεγαλύτερη σημασία είναι το βάρος της σελίδας, η τοποθέτηση του CTA σε θέση προσβάσιμη από τον αντίχειρα, η μονοστήλης διάταξη και η αποφυγή οτιδήποτε η επιθεώρηση συμμόρφωσης ενός δικτύου αντιμετωπίζει ως διαλειμματικό ή υποχρεωτική αλληλεπίδραση.

Γιατί η προσέγγιση desktop-first-then-adapt αποτυγχάνει τόσο συχνά#

Οι ομάδες που σχεδιάζουν έναν pre-lander πρώτα σε οθόνη desktop τείνουν να ενσωματώσουν υποθέσεις που δεν επιβιώνουν στη συρρίκνωση σε τηλέφωνο: πολυστήλες διατάξεις που συμπιέζονται τελευταία στιγμή σε μια μη αναγνώσιμη μονοστήλη, εικόνες hero που έχουν κοπεί για ευρεία αναλογία διαστάσεων και χάνουν το κεντρικό σημείο τους όταν κοπούν ξανά για στενή αναλογία, και τοποθέτηση CTA που αποφασίζεται από το τι φαινόταν ισορροπημένο σε μεγάλη οθόνη και όχι από το τι μπορεί πραγματικά να φτάσει ο αντίχειρας. Κανένα από αυτά δεν εμφανίζεται ως "bug" που θα εντοπίζατε σε μια γρήγορη ανασκόπηση στο desktop, εμφανίζονται μόνο όταν δείτε τη σελίδα όπως θα τη δει ο πραγματικός επισκέπτης σας, γι' αυτό και η δημιουργία mobile-first από το πρώτο προσχέδιο, και στη συνέχεια προαιρετική προσαρμογή προς το desktop, δημιουργεί λιγότερες εκπλήξεις από το αντίστροφο.

Σχεδιάστε για τον αντίχειρα, όχι για το ποντίκι#

Κάθε στοιχείο που απαιτεί ακριβές πάτημα κοστίζει μετατροπές σε ένα τηλέφωνο. Τα κουμπιά CTA πρέπει να είναι αρκετά μεγάλα για να πατιούνται αξιόπιστα, τοποθετημένα όπου ο αντίχειρας φτάνει φυσικά (το κάτω-μέσο έως κάτω τρίτο της οθόνης λειτουργεί καλύτερα από ένα κουμπί που απαιτεί τέντωμα προς την κορυφή), και με απόσταση από άλλα πατήσιμα στοιχεία ώστε ένα λάθος πάτημα να μην στέλνει κάποιον κάπου που δεν προορίζατε. Μια κολλώδης μπάρα CTA που παραμένει ορατή καθώς ο αναγνώστης κάνει scroll σε ένα μεγαλύτερο advertorial αφαιρεί την ανάγκη να γυρίσει πίσω μόλις πειστεί, κάτι που έχει μεγαλύτερη σημασία όσο περισσότερο τρέχει η σελίδα σας και όσο περισσότερο η μορφή σας τείνει προς μια πλήρη αφήγηση αντί για μια σύντομη σελίδα γέφυρας.

Το βάρος της σελίδας είναι μοχλός μετατροπής, όχι απλώς τεχνική ανησυχία#

Κάθε επιπλέον δευτερόλεπτο χρόνου φόρτωσης σε σύνδεση κινητού είναι μια ευκαιρία να χάσετε κάποιον που έκανε κλικ από παρόρμηση από μια ροή περιεχομένου και έχει μηδενική υπομονή για αργή σελίδα. Συμπιέστε επιθετικά τις εικόνες hero, αποφύγετε αυτόματη αναπαραγωγή βίντεο (που επίσης τείνει να προκαλεί επιθεώρηση συμμόρφωσης σε πολλά δίκτυα και καίει δεδομένα κινητού που ο αναγνώστης δεν συμφώνησε να ξοδέψει), φορτώστε lazy-load οτιδήποτε είναι κάτω από το fold και κρατήστε απλό το DOM. Αυτό συνδυάζεται με επιλογές domain και hosting· μια σελίδα που φιλοξενείται πίσω από έναν αργό, υπερφορτωμένο διαμοιρασμένο διακομιστή, ή μια που δρομολογείται μέσω μιας μη απαραίτητης επιπλέον ανακατεύθυνσης, αναιρεί την καλή δουλειά σχεδιασμού πριν από την απόδοση ενός μόνο pixel. Το καλό hosting είναι προϋπόθεση για καλό mobile σχεδιασμό, όχι ξεχωριστή ανησυχία που μπορείτε να διορθώσετε αργότερα.

Διάταξη: μονοστήλη, κάθετη ροή, χωρίς πλευρικές εκπλήξεις#

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

Τι να αποφύγετε γιατί τα δίκτυα θα το επισημάνουν#

• Υποχρεωτικά διαλειμματικά ή pop-ups που μπλοκάρουν περιεχόμενο πριν από μια γνήσια ενέργεια χρήστη. Οι πολιτικές επεξεργασίας των περισσότερων native networks τα αντιμετωπίζουν ως κακή εμπειρία χρήστη και κοινή πηγή απόρριψης δημιουργικών· ελέγξτε την τρέχουσα τεκμηρίωση του συγκεκριμένου δικτύου πριν βασιστείτε σε οποιοδήποτε διαλειμματικό μοτίβο.

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

• Ψεύτικα στοιχεία συστήματος UI (ψεύτικες προειδοποιήσεις "χαμηλή μπαταρία", ψεύτικα banners ειδοποιήσεων, ψεύτικα κουμπιά κλεισίματος που δεν κλείνουν τίποτα). Αυτά πλησιάζουν την περιοχή του cloaking στον τρόπο που τα διαβάζουν οι ομάδες συμμόρφωσης, ακόμα και όταν δεν συμβαίνει τεχνικό cloaking, επειδή εξαπατούν τον αναγνώστη για το τι βλέπει.

• Αποκάλυψη που είναι θαμμένη ή κρυμμένη πίσω από πάτημα. Οι αποκαλύψεις χορηγίας και διαφήμισης πρέπει να είναι ορατές χωρίς επιπλέον αλληλεπίδραση από τον αναγνώστη· δείτε FTC Disclosure Rules for Advertorials & Native Ads για το τι σημαίνει πραγματικά "ορατή" σύμφωνα με τις τρέχουσες κατευθυντήριες γραμμές.

Τυπογραφία και ρυθμός ανάγνωσης σε μια μικρή οθόνη#

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

Στόχοι αφής πέρα από μόνο το CTA#

Το πρωταρχικό CTA παίρνη την προσοχή του σχεδιασμού, αλλά τα δευτερεύοντα πατήσιμα στοιχεία (ένας σύνδεσμος "μάθετε περισσότερα", ένα κουμπί κλεισίματος σε οποιοδήποτε απορριπτόμενο στοιχείο, πλοήγηση εάν η σελίδα έχει) χρειάζονται το ίδιο φιλικό στο χέρι μέγεθος και απόσταση. Ένα κουμπί κλεισίματος που είναι τεχνικά παρόν αλλά πολύ μικρό για αξιόπιστο πάτημα λειτουργεί, στην πράξη, σαν να μην υπάρχει καθόλου, και διαβάζεται ως απογοητευτικό ή χειραγωγητικό από έναν αναγνώστη που προσπαθεί να απορρίψει κάτι. Οι οδηγίες σχεδιασμού κινητού της Apple και της Google καθορίζουν και οι δύο ελάχιστα μεγέθη στόχων αφής για ακριβώς αυτόν τον λόγο, και η τήρησή τους είναι μια λογική βασική γραμμή ακόμα και έξω από εφαρμογές εγγενών πλατφορμών.

Φόρμες: λιγότερα πεδία, εγγενείς τύποι εισαγωγής#

Εάν ο pre-lander ή το βήμα προσφοράς πίσω του συλλέγει οποιαδήποτε πληροφορία, κάθε επιπλέον πεδίο είναι ένα σημείο εγκατάλειψης στο κινητό, όπου το πληκτρολόγηση είναι πιο αργή και επιρρεπής σε λάθη από ό,τι στο desktop. Χρησιμοποιήστε τον σωστό τύπο εισαγωγής για κάθε πεδίο (αριθμητικό πληκτρολόγιο για αριθμούς τηλεφώνου, πληκτρολόγιο email για πεδία email) ώστε το δικό του πληκτρολόγιο του τηλεφώνου να βοηθά τον επισκέπτη αντί να τον αναγκάζει να ψάχνει για χαρακτήρες σε ένα γενικό πληκτρολόγιο. Εάν μπορείτε να αναβάλετε ένα πεδίο σε ένα μεταγενέστερο βήμα της διαδικασίας αντί να το ζητήσετε στον ίδιο τον pre-lander, κάντε το.

Λεπτομέρειες γεωγραφίας και γλώσσας που προκαλούν προβλήματα συγκεκριμένα σε mobile σελίδες#

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

Διαχείριση UI που εγχύνεται από το δίκτυο πάνω από τη σελίδα σας#

Πολλά native networks εμφανίζουν τα δικά τους στοιχεία γύρω ή πάνω από το περιεχόμενό σας, μια ετικέτα χορηγίας, ένα στοιχείο ελέγχου κλεισίματος ή επιστροφής, μερικές φορές ένα widget σχολίων ή συμμετοχής με native στυλ που ελέγχει το ίδιο το δίκτυο. Σχεδιάστε τη σελίδα σας υποθέτοντας ότι αυτή η επικάλυψη υπάρχει αντί να δοκιμάζετε μόνο σε ένα καθαρό περιβάλλον προεπισκόπησης, καθώς ένα CTA ή τίτλος τοποθετημένος ακριβώς εκεί που εμφανίζεται ένα δικό του στοιχείο UI του δικτύου σε πραγματική συσκευή είναι ουσιαστικά αόρατος στον αναγνώστη. Ελέγξτε πώς φαίνεται πραγματικά η σελίδα σας μέσα στην πραγματική απόδοση in-feed του δικτύου, όχι μόνο ως αυτόνομη URL, πριν οριστικοποιήσετε αποφάσεις διάταξης που εξαρτώνται από ακριβή κάθετη τοποθέτηση κοντά στην κορυφή της σελίδας.

Έλεγχος τι λειτουργεί ήδη σε δίκτυα με έντονο mobile traffic#

Ορισμένα δίκτυα στην πράξη έχουν περισσότερο mobile traffic από άλλα, και τα επιτυχημένα μοτίβα pre-lander διαφέρουν ανάλογα. Η ανασκόπηση ζωντανών, τρέχουσων δημιουργικών και των ανιχνευμένων landers τους στο εργαλείο κατασκοπίας native ads του OpenAdLibrary σας δείχνει ποιες επιλογές μορφής και διάταξης πραγματικά επιβιώνουν σε ένα δεδομένο δίκτυο αυτή τη στιγμή, αντί να εφαρμόζετε γενικές συμβουλές mobile UX που δεν λαμβάνουν υπόψη πώς συμπεριφέρεται το κοινό ενός συγκεκριμένου δικτύου. Τα MSN Native Ads: The Advertiser's Guide και How Taboola Ads Work καλύπτουν και τα δύο τοποθέτηση ειδική για δίκτυο και συμπεριφορά κοινού που επηρεάζει αυτές τις αποφάσεις διάταξης.

Η προσβασιμότητα επικαλύπτεται με τη μετατροπή περισσότερο από ό,τι αναμένουν οι άνθρωποι#

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

Το τεστ που έχει πραγματική σημασία#

Πριν από την τελική έκδοση οποιουδήποτε σχεδιασμού mobile pre-lander, φορτώστε τον σε ένα πραγματικό τηλέφωνο πάνω από μια περιορισμένη σύνδεση, όχι μόνο σε έναν εξομοιωτή κινητού σε πρόγραμμα περιήγησης desktop. Οι εξομοιωτές δείχνουν σωστά την προβολή αλλά σπάνια αναπαράγουν πραγματικούς χρόνους φόρτωσης, ακρίβεια στόχων πάτησης ή πώς συμπεριφέρεται ένα κολλώδες στοιχείο υπό πραγματική ορμή κύλισης. Πέντε λεπτά σε πραγματική συσκευή εντοπίζουν προβλήματα που εβδομάδες επανάληψης βασισμένης σε desktop θα χάναν εντελώς.