Ο σχεδιασμός email για κινητά ξεκινά από τη σειρά ανάγνωσης: ο πελάτης πρέπει να καταλαβαίνει την προσφορά, τη σημαντική προϋπόθεση και την επόμενη ενέργεια χωρίς μεγέθυνση. Ένα πλέγμα προϊόντων Shopify που φαίνεται ευρύχωρο σε υπολογιστή μπορεί στο τηλέφωνο να καταλήξει σε στοίβα μικροσκοπικών εικόνων. Σχεδιάστε πρώτα για τον μικρότερο χώρο ανάγνωσης και μετά ελέγξτε τι συμβαίνει όταν μεγαλώνει το κείμενο, αποτυγχάνουν εικόνες ή οι στήλες στοιβάζονται.
Δημιουργήστε σαφή σειρά ανάγνωσης
Χρησιμοποιήστε απλή διάταξη μίας στήλης για το κύριο μήνυμα. Βάλτε την υπόσχεση, την υποστηρικτική εξήγηση και την κύρια ενέργεια σε σειρά που εξακολουθεί να βγάζει νόημα όταν δεν εμφανίζονται εικόνες. Τα επιπλέον μπλοκ προϊόντων πρέπει να υποστηρίζουν αυτή την ενέργεια και όχι να ανταγωνίζονται γι’ αυτήν.
Κρατήστε το σημαντικό κείμενο ως κανονικό κείμενο email. Οι αναγνώστες δεν πρέπει να χρειάζεται να μεγεθύνουν διαφημιστική εικόνα για να ανακαλύψουν την προσφορά ή τους όρους της. Επιλέξτε γραμματοσειρά συμβατή με email και άνετο μέγεθος σώματος· τα 16 pixel είναι χρήσιμη αρχή, αλλά ελέγξτε την πραγματική απόδοση. Μια μεγάλη μετάφραση μπορεί να χρειάζεται περισσότερο κατακόρυφο χώρο, όχι μικρότερα γράμματα.
Σχεδιάστε την πρώτη οθόνη γύρω από μία απόφαση
Σχεδιάστε πρώτα τη στενή έκδοση πριν οργανώσετε πλέγμα για υπολογιστή. Σε μια παρουσίαση προϊόντος, η σειρά μπορεί να είναι όνομα προϊόντος, μία πρόταση για τη χρήση του, υποστηρικτική εικόνα, πληροφορίες τιμής και κουμπί. Ο αναγνώστης πρέπει να καταλαβαίνει την προσφορά ακόμη κι αν βλέπει μόνο αυτό το πρώτο τμήμα. Ένα μεγάλο διακοσμητικό banner δεν πρέπει να σπρώχνει όλες τις χρήσιμες λεπτομέρειες αρκετές οθόνες πιο κάτω.
Ξεκινήστε το κείμενο σώματος κοντά στα 16 pixel με αρκετό διάστιχο ώστε οι γραμμές να ξεχωρίζουν άνετα και μετά ελέγξτε το απεσταλμένο email. Αυτά είναι σημεία εκκίνησης σχεδιασμού, όχι κανόνας ότι κάθε ετικέτα και τίτλος πρέπει να έχει ίδιο μέγεθος. Κάντε σαφή διάκριση ανάμεσα σε σώμα και επικεφαλίδες και διατηρήστε άνετες αποστάσεις γύρω από το κουμπί κύριας ενέργειας. Η σμίκρυνση ολόκληρου του προτύπου για να χωρέσει είναι συνήθως λάθος απάντηση σε μια φορτωμένη διάταξη.
Για δύο κάρτες προϊόντων, κρατήστε εικόνα, τίτλο, τιμή και σύνδεσμο στο ίδιο στοιχείο. Όταν οι κάρτες στοιβάζονται, ο πελάτης πρέπει να βλέπει ένα ολοκληρωμένο προϊόν πριν αρχίσει το επόμενο. Αποφύγετε διάταξη που βάζει πρώτα και τις δύο εικόνες και μετά τις δύο περιγραφές· αναγκάζει τον αναγνώστη να μαντέψει ποια στοιχεία ανήκουν μαζί.
Αφήστε τα στοιχεία να προσαρμόζονται στο περιεχόμενο
Αποφύγετε πλαίσια κειμένου σταθερού ύψους και χειροκίνητες αλλαγές γραμμής που υπάρχουν μόνο για να ισορροπεί ένας τίτλος σε υπολογιστή. Αφήστε τα κουμπιά να έχουν αρκετό εσωτερικό χώρο για μεγαλύτερη ετικέτα και κάντε όλη την περιοχή κλικ άνετη για πάτημα. Αφήστε απόσταση ανάμεσα σε κοντινούς συνδέσμους ώστε ο αντίχειρας να μην επιλέξει λάθος προορισμό.
Χρησιμοποιήστε περιγραφικό εναλλακτικό κείμενο για ενημερωτικές εικόνες και μην προσθέτετε περιττό θόρυβο με διακοσμητικές εικόνες. Ελέγξτε την αντίθεση κειμένου με το πραγματικό φόντο, ακόμη και μετά από αλλαγές σκοτεινής λειτουργίας. Μια αχνή ετικέτα που φαίνεται κομψή στην οθόνη σας μπορεί έξω, σε τηλέφωνο, να είναι δυσανάγνωστη.
Χρησιμοποιήστε πίνακα προεπισκόπησης που αποκαλύπτει αδύναμα στοιχεία
Ένας χρήσιμος πίνακας περιλαμβάνει στενή προβολή μεγέθους τηλεφώνου, μεγαλύτερη προβολή, απουσία εικόνων, σκοτεινή λειτουργία όπου υποστηρίζεται και ρεαλιστικά δεδομένα πελατών. Για μεταφράσεις, συμπεριλάβετε τη μεγαλύτερη έκδοση αντί να δοκιμάζετε μόνο τη συντομότερη. Εξετάστε το μήνυμα συνολικά και έπειτα ελέγξτε τα σημεία που είναι πιθανότερο να αποτύχουν: τίτλους προϊόντων, τιμές, κουμπιά και συνδέσμους υποσέλιδου.
- Αν σπάει η ετικέτα ενός κουμπιού σε πολλές γραμμές, αφήστε το ύψος να μεγαλώσει και ελέγξτε το εσωτερικό περιθώριο· μην κόβετε τη λέξη της ενέργειας.
- Αν ένα όνομα προϊόντος ακουμπά το επόμενο μπλοκ, αφαιρέστε το σταθερό ύψος και αφήστε χώρο στο κείμενο να αναδιπλωθεί.
- Αν σημαντικές πληροφορίες χάνονται όταν δεν εμφανίζονται οι εικόνες, μεταφέρετέ τες σε κανονικό κείμενο και χρησιμοποιήστε την εικόνα υποστηρικτικά.
- Αν είναι δύσκολο να πατηθούν χωριστά κοντινοί σύνδεσμοι, αυξήστε την απόσταση ή μειώστε τις ανταγωνιστικές ενέργειες.
Δοκιμάστε σκόπιμα τις περιπτώσεις αποτυχίας
Στο Sendvio, δείτε την προεπισκόπηση του προτύπου με πραγματικά δεδομένα πελάτη και εξετάστε το σε στενό πλάτος. Δοκιμάστε μεγάλο όνομα, πεδίο εξατομίκευσης που λείπει, μεγαλύτερη τιμή και προϊόν με ασυνήθιστα μεγάλο τίτλο. Έπειτα στείλτε δοκιμές στις εφαρμογές email που χρησιμοποιούν συχνά οι πελάτες σας.
Σε προσφορά δύο προϊόντων, ελέγξτε τη στοιβαγμένη σειρά: εικόνα προϊόντος, όνομα, τιμή και ενέργεια πρέπει να παραμένουν μαζί. Αν διαχωρίζονται, απλοποιήστε το μπλοκ. Στόχος δεν είναι να αναπαράγετε τη διάταξη υπολογιστή με κάθε κόστος. Είναι να διατηρήσετε το νόημα και να κάνετε προφανή την επόμενη ενέργεια χωρίς μεγέθυνση, μαντεψιά ή οριζόντια κύλιση.
Ελέγξτε την αντίθεση στον πραγματικό συνδυασμό κειμένου και φόντου. Για συνηθισμένο κείμενο, λόγος αντίθεσης τουλάχιστον 4,5:1 είναι χρήσιμη βάση προσβασιμότητας· για αρκετά μεγάλο κείμενο, το ελάχιστο είναι 3:1. Αυτές οι τιμές δεν αντικαθιστούν πλήρη αξιολόγηση προσβασιμότητας, αλλά κάνουν τις χρωματικές επιλογές λιγότερο υποκειμενικές. Ελέγξτε τις μικρές γκρι ετικέτες όσο προσεκτικά ελέγχετε και τον κύριο τίτλο.
Αποθηκεύστε το διορθωμένο στοιχείο στο επαναχρησιμοποιήσιμο πρότυπο και δοκιμάστε το ξανά μετά από σημαντικές αλλαγές. Ένα καλό πρότυπο για κινητά δεν αποφεύγει μόνο την οριζόντια κύλιση: διατηρεί τη σειρά ανάγνωσης, τη δυνατότητα κατανόησης της προσφοράς και μια σαφή, εύχρηστη επόμενη ενέργεια στα περιβάλλοντα email που πράγματι υποστηρίζετε.