← Semua artikelDesain email

Jarak antar elemen email: buat pesan lebih mudah dipindai

Waktu baca 4 menit

Jarak dalam email membantu pembaca memahami elemen mana yang saling berhubungan. Judul, penjelasannya, dan tombol perlu berdekatan dibandingkan dua cerita produk yang berbeda. Jika semua jarak sama, kampanye Shopify yang singkat sekalipun dapat terasa sesak atau terputus-putus. Gunakan skala jarak kecil yang konsisten dan pastikan kelompok informasinya tetap masuk akal saat tata letak bertumpuk di ponsel.

Kelompokkan elemen berdasarkan maknanya

Letakkan nama produk dekat dengan gambar dan harganya. Tempatkan penjelasan dekat dengan tindakan yang didukungnya. Gunakan jarak lebih besar antarbagiannya daripada jarak antara elemen terkait di dalam satu bagian. Dengan begitu, pembaca mendapat peta visual sebelum membaca semua kata.

Terapkan pola itu dalam template Sendvio yang dapat digunakan kembali. Pilih sedikit nilai jarak dan gunakan secara konsisten alih-alih mengatur setiap blok hanya dengan perkiraan mata. Template tetap perlu memberi ruang saat judul membungkus ke baris berikutnya.

Gunakan skala kecil alih-alih jarak yang tidak berkaitan

Pilih beberapa tingkat jarak dengan fungsi berbeda. Sebagai titik awal, jarak kecil dapat menghubungkan nama produk dengan harga, jarak sedang memisahkan penjelasan dari tindakannya, dan jarak lebih besar memperkenalkan bagian baru. Nilai pastinya perlu sesuai dengan template; konsistensi hubungan lebih penting daripada angka tertentu.

Sebagai contoh, Anda dapat menguji jarak 8, 16, dan 32 piksel untuk tiga tingkat tersebut, lalu menyesuaikan setelah melihat email terkirim. Jangan menggunakan jarak terbesar di antara setiap paragraf. Jika semua elemen sama jauhnya, detail terkait tak lagi tampak terhubung dan email menjadi terlalu panjang.

Jarak antarbaris memiliki fungsi berbeda. Jarak ini memisahkan baris dalam paragraf agar mata dapat mengikutinya dengan nyaman. Margin paragraf memisahkan gagasan utuh. Menambah margin besar tidak memperbaiki baris yang terlalu rapat, dan menambah tinggi baris tidak membuat dua bagian yang berbeda menjadi jelas terpisah. Sesuaikan lapisan jarak yang tepat dengan masalah yang terlihat.

Hindari ruang kosong tanpa fungsi

Ruang yang terlalu lebar dapat membuat pesan singkat terasa terputus, terutama di ponsel. Periksa apakah blok dengan tinggi tetap atau spacer yang tidak perlu mendorong tindakan utama jauh di bawah penjelasannya. Hilangkan penyebab strukturalnya, bukan mengecilkan teks demi mengisi bentuk yang janggal.

Pertahankan jarak antarbaris yang nyaman dalam paragraf dan hindari kolom teks yang terlalu lebar. Paragraf singkat lebih mudah diikuti jika barisnya tetap menyatu tanpa sesak. Pratinjau nama produk panjang dan versi bahasa lain sebelum menyatakan jaraknya sudah selesai.

Cari penyebab area kosong sebelum mengubah tipografi

Jika ada ruang kosong besar di bawah judul singkat, periksa tinggi tetap, blok spacer, serta padding pada judul dan komponen berikutnya. Dua pengaturan yang terlihat wajar dapat menumpuk menjadi jarak berlebihan. Hilangkan duplikasi itu alih-alih mengecilkan font agar ruang tampak terisi.

Saat kolom desktop ditumpuk di ponsel, pastikan spacer untuk meratakan tata letak desktop tidak tersisa di antara blok yang kini tersusun vertikal. Spacer yang dahulu meratakan tombol antarkartu dapat menjadi area kosong yang tidak perlu di bawah deskripsi produk singkat. Utamakan komponen yang mengikuti panjang konten dan urutan tumpukan yang mempertahankan setiap produk sebagai satu kelompok.

Uji pemindaian cepat lalu pembacaan penuh

Lihat email beberapa detik dan kenali janji utama serta tindakannya. Jika beberapa blok sama-sama bersaing, sederhanakan hierarkinya. Lalu baca seluruh pesan untuk memastikan pengelompokan visual sesuai dengan maknanya.

Periksa tata letak sempit setelah kolom ditumpuk. Jarak yang cocok di antara kartu berdampingan mungkin menjadi terlalu besar secara vertikal. Jarak yang baik membuat konten terasa terencana dalam dua ukuran, tanpa bergantung pada pemisah baris paksa atau jumlah teks tertentu.

Uji sistem dengan konten realistis paling singkat dan paling panjang. Judul pendek tidak seharusnya membuat tombol tampak terpisah; judul panjang tidak boleh bertabrakan dengan harga. Sertakan terjemahan, baris opsional yang kosong, dan produk tanpa gambar. Jaraknya harus mendukung variasi itu tanpa perlu merancang ulang manual setiap kampanye.

Akhiri dengan dua tahap: pemindaian cepat untuk menemukan janji dan tindakan, lalu pembacaan penuh untuk memeriksa urutannya. Jika tata letak tampak tenang tetapi tombol yang merupakan tindakan utama terpisah beberapa layar dari penjelasannya, pengelompokannya masih perlu diperbaiki. Jarak berguna karena menyampaikan hubungan antarelemen sebelum pelanggan memutuskan membaca seluruh kalimat.

Terapkan dalam praktik

Jelajahi editor email