Bagaimana Peggy Olson Akan Mendesain untuk Interaktif

Diterbitkan: 2014-06-18

Di era Mad Men pemasar tahu persis bagaimana pekerjaan mereka akan dikonsumsi. Audiens sasaran akan melihat iklan di TV, mendengarnya di radio, melihatnya di majalah atau di papan reklame, dan mungkin akan masuk ke kotak surat (siput). Jika Anda merencanakan iklan cetak atau surat, Anda tahu persis ukuran real estat yang Anda rancang, dan Anda mengoptimalkan iklan agar sesuai dengan ruang itu. Konsumen akan melihat konten itu persis seperti yang Anda bayangkan saat Anda mendesainnya.

Jika Peggy Olson merancang iklan hari ini, dia harus mempertimbangkan konteks bagaimana iklan itu akan dilihat, dan bagaimana audiens targetnya akan berinteraksi dengannya. Tidak ada jaminan bahwa karyanya akan dilihat seperti yang dia bayangkan, jadi dia perlu mengoptimalkan tata letak dan desainnya agar berdampak tidak peduli bagaimana pun dilihat. Dia harus memastikan ajakan untuk bertindak (CTA) jelas, ringkas, dan dapat dipahami – bahkan pada layar tiga inci.

Mendesain halaman web, halaman arahan, dan email saat ini jauh lebih rumit daripada di zaman Orang Gila. Hari ini Anda memiliki dimensi tambahan dari elemen interaktif, dan tidak mengetahui di perangkat mana konten akan dilihat. Tata letak yang terlihat sempurna di layar komputer ukuran penuh bisa jadi sangat berantakan jika dilihat di tablet atau ponsel pintar. CTA yang tidak jelas atau ditempatkan di tempat yang salah dapat membunuh tingkat keterlibatan Anda.

Tiga praktik terbaik desain interaktif utama

Sebagian besar konsumen saat ini memiliki rentang perhatian nyamuk. Anda memiliki waktu sekitar dua detik untuk memikat mereka saat mereka membuka konten Anda sebelum mereka memutuskan apakah akan mengklik sesuatu yang lebih menarik atau tidak. Sangat penting bagi Anda untuk memahami ketiga konsep ini saat mendesain email, halaman arahan, atau halaman web:

  1. Bagaimana tata letak memengaruhi keterlibatan: Pelajari cara menata elemen pada halaman untuk keterlibatan maksimum
  2. Bagaimana konten memengaruhi keterlibatan: Ketahui apa yang akan mendorong saya untuk berinteraksi dengan konten Anda
  3. Betapa pentingnya waktu: Anda memiliki dua detik untuk menarik perhatian saya

Kedengarannya sederhana, bukan? Jika sesederhana itu saya tidak akan menulis ini! Saya tidak dapat memberi tahu Anda berapa banyak konten yang saya temui setiap hari yang membuat saya frustrasi hingga hanya menekan tombol Kembali. Saya berbicara tentang perusahaan besar dengan kantong yang dalam, tetapi tidak memiliki selera desain.

Jadi mari kita menjadi praktis. Baca terus untuk beberapa tip yang sangat sederhana yang akan membantu Anda mengoptimalkan tata letak halaman Anda untuk keterlibatan di platform apa pun.

Bagaimana mata memindai halaman

Hal pertama yang perlu Anda pahami adalah bagaimana mata manusia menelusuri suatu konten. Ketika saya belajar periklanan di perguruan tinggi, kami diberi tahu bahwa mata dilacak melintasi halaman dalam bentuk huruf kapital Z, dimulai dari kiri atas. Saya yakin teori ini dibuat oleh sebuah penelitian yang meminta beberapa subjek tes melihat potongan konten sementara seorang pria berjas putih mencoba menggambar pola gerakan mata di selembar kertas. Ini jauh sebelum teknologi peta panas tersedia secara luas yang digunakan untuk melihat bagaimana orang melacak halaman yang dilihat secara online. Dan, ingat, orang memindai cetakan sedikit berbeda dari konten online.

Konsensus akhir-akhir ini adalah bahwa jejak mata dalam pola F kapital saat melihat konten online, masih dimulai dari kiri atas. Mata Anda biasanya melacak secara horizontal melintasi batang atas F terlebih dahulu, lalu batang kedua F, dan terakhir dari atas ke bawah ke batang vertikal F.

f-pola untuk membaca di layar
Gambar dari N N /g, Nielsen Norman Group, produsen penelitian, pelatihan, dan konsultasi pengalaman pengguna berbasis bukti

Jadi apa artinya ini? Itu berarti CTA Anda harus berada di suatu tempat dalam pola F kapital itu, atau Anda perlu membuat kumis pada bayi. Buat keputusan desain sadar untuk menempatkan CTA utama Anda di tempat yang akan menarik perhatian pemirsa dalam dua detik pertama.

Bayi dengan kumis
Gambar dari Tobii, vendor teknologi pelacakan mata dan kontrol mata yang memungkinkan komputer mengetahui dengan tepat ke mana pengguna melihat.

Bencana desain nyata

Jadi mari kita lihat bencana desain nyata yang dibuat oleh salah satu rekan saya di sini di Act-On. Saya minta maaf untuk mengatakan bahwa contoh di bawah diambil dari konten nyata yang saya temukan online. Saya telah menggunakan perusahaan fiktif bernama Actomatic untuk menunjukkan kesalahan paling umum yang dilakukan orang, dan cara memperbaikinya.

Contoh 1: Jangan membuat saya menggulir untuk melihat CTA

Peluang terlewatkan paling umum yang saya lihat adalah konten yang tidak memiliki cara untuk berbagi atau tombol berbagi yang terkubur di bagian bawah halaman paro bawah. Lipatan adalah garis imajiner di bagian bawah layar Anda. (Istilah ini berasal dari hari-hari ketika surat kabar dilipat menjadi dua; "paro atas" adalah penempatan yang lebih baik, dengan jumlah pembaca yang lebih baik.) Pada layar laptop ukuran rata-rata, lipatannya mungkin 480 piksel dari bagian atas layar, tetapi pada iPhone mungkin 100 piksel dari atas. Waspadai hal ini saat Anda menata konten halaman Anda.

Jika kita berbicara tentang blog atau artikel multi-halaman, saya berani menebak bahwa kebanyakan orang siap untuk berbagi setelah mereka membaca tajuk utama (jika bagus) dan dua kalimat pertama dari sebuah konten, karena mereka ingin menjadi yang pertama keluar dari gerbang. Orang suka berbagi konten segar, bukan konten yang sudah mereka lihat dibagikan oleh rekan mereka sebanyak lima kali.

Saya menyarankan untuk memiliki tombol bagikan di bagian atas dan bawah konten, atau tombol bagikan yang mengapung di samping konten saat Anda menggulir.

Saya bekerja dengan perusahaan yang sangat terkenal yang menemukan, ketika mereka menambahkan tombol bagikan di bagian atas artikel dan juga di bagian bawah, tingkat pembagian naik lebih dari 400%.

Contoh 2: Oh, mataku!

Pernahkah Anda menemukan konten yang begitu sibuk sehingga Anda tidak tahu harus mencari ke mana? Mungkin ada video untuk dibagikan, formulir untuk diisi, beberapa salinan, beberapa tautan di sana-sini. Jika saya mendarat di halaman di bawah ini, saya tidak tahu harus mulai dari mana, jadi saya mungkin tidak akan terlibat sama sekali. Contoh ini tidak memberi saya indikasi apa yang paling penting di halaman ini. Anda memiliki dua detik atau kurang untuk menarik perhatian saya dan melibatkan saya, dan Anda baru saja kehilangan saya.

Jika Anda memiliki banyak CTA, jelaskan urutan logis dari elemen-elemen tersebut. Eja dengan info bernomor jika perlu. Jika saya datang ke halaman ini saya akan menanyakan pertanyaan-pertanyaan ini:

Contoh buruk dari desain halaman web

Tata letaknya terlihat tidak terencana dan ceroboh dengan spasi putih acak dan font aneh. CTA jelas berada di paro bawah.

Jika saya memberikan saran kepada Actomatic, saya akan mulai dengan menanyakan apa yang ingin mereka capai dengan halaman ini. Apa tujuannya di sini? Saya menganggap tujuan utama di sini adalah membuat orang mendaftar ke blog, dan menonton serta membagikan video pendek. Jika itu masalahnya, maka kita perlu melakukan beberapa perubahan.

  1. Pastikan CTA utama berada di paro atas. Tombol bagikan dan tombol Berlangganan ada di paro bawah.
  2. Jelaskan bahwa Anda ingin pengunjung mendaftar ke blog DAN berbagi video
  3. Tambahkan beberapa informasi tentang perusahaan

Oke langsung saja kita lihat :

Contoh halaman arahan yang baik

Versi baru dan lebih baik memiliki tata letak yang sedikit berbeda, font lebih sedikit, uraian singkat tentang perusahaan dan video, dan penghalang yang lebih rendah untuk berlangganan blog. Saya juga menambahkan tautan di bagian bawah dan tombol Kontak. Perhatikan bagaimana saya mengoptimalkan tata letak untuk memaksimalkan berapa banyak informasi yang akan dilihat pembaca dalam dua detik pertama dengan mengikuti cara mata memindai halaman secara alami. Teori pola F mengatakan ini adalah urutan di mana pemirsa akan mengambil elemen di halaman:

  1. Logo perusahaan
  2. Berita utama
  3. Tombol bagikan dan berlangganan
  4. Bagian Jelajahi di bagian bawah

Beri saya alasan untuk berinteraksi

Sekarang setelah semua tata letak Anda diurutkan, Anda perlu memberi saya alasan untuk berinteraksi dengan konten Anda. Jika Anda ingin saya mengisi formulir atau membagikan konten Anda, harus ada alasan kuat bagi saya untuk melakukannya. Jadi izinkan saya bertanya, apa untungnya bagi saya?

Jika Anda tidak tahu jawaban atas pertanyaan itu, Anda belum mengerjakan pekerjaan rumah Anda.

Alasan utama orang berinteraksi dengan konten adalah karena mereka mendapatkan semacam kepuasan secara emosional atau material. Jika konten Anda bagus, saya akan membagikannya karena itu membuat saya terlihat terinformasi dengan baik di depan rekan-rekan saya. Saya mendapat dorongan ego jika saya yang pertama mengetahui tentang widget baru yang baru saja Anda rilis, jadi tentu saja saya akan membagikan fakta bahwa saya harus melihatnya terlebih dahulu.

Mungkin Anda adalah organisasi nirlaba dan konten Anda adalah kisah menyenangkan tentang seseorang yang melakukan sesuatu yang luar biasa, saya akan membagikan konten tersebut karena membuat saya merasa baik dan dermawan. Tawarkan saya kesempatan untuk memenangkan iPad jika saya mengisi formulir dan kemungkinan besar saya akan memberi Anda informasi pribadi saya.

Kuncinya adalah mengetahui apa yang mendorong audiens Anda untuk terlibat. Apakah itu imbalan emosional, imbalan materi, atau keduanya? Tempatkan diri Anda pada posisi mereka dan buat strategi keterlibatan yang diarahkan untuk audiens Anda.

Tetap sederhana

Kaos #KeepItSimple Baru-baru ini saya berbicara di sebuah konferensi di mana saya mempresentasikan studi kasus tentang kampanye pemasaran sosial yang berhasil. Saya mengenakan T-Shirt dengan cetakan ini di bagian depan: #KeepItSimple. Saya mencoba mempraktekkan apa yang saya khotbahkan.

Saya telah bekerja dengan pelanggan yang telah membuat konten interaktif yang sangat rumit, dan orang lain yang membuatnya sangat sederhana, dan yang sederhana menang hampir setiap saat. Berikut cara membuatnya tetap sederhana:

  • Pilih tampilan font seperti Trebuchet yang mudah dibaca online.
  • Jangan mencampur terlalu banyak tampilan dan ukuran font pada halaman. Satu ukuran untuk judul, satu ukuran untuk teks isi.
  • Simpan ke satu CTA yang jelas jika memungkinkan.
  • Simpan hal-hal penting di atas flip.
  • Buat penghalang untuk masuk serendah mungkin (jangan meminta anak sulung seseorang jika yang Anda butuhkan hanyalah alamat email mereka)

Tugas pekerjaan rumah Anda

Tunggu dulu, Anda tidak pernah mengatakan akan ada pekerjaan rumah di akhir artikel ini! Jika saya memberi tahu Anda akan ada pekerjaan rumah, apakah Anda akan membaca sejauh ini? Uh huh. Saya ingin Anda melihat salah satu halaman arahan Anda dengan mata kritis dan bertanya pada diri sendiri apakah ada ruang untuk perbaikan.

  • Lihat salah satu laman landas Anda di laptop dan di perangkat seluler. Apakah Anda harus menggulir untuk sampai ke CTA? Apakah ini ditampilkan dengan baik di perangkat seluler?
  • Mintalah seorang teman yang tidak tahu apa-apa tentang perusahaan Anda untuk melihat salah satu halaman arahan Anda, dan mintalah mereka untuk memberikan umpan balik yang jujur ​​saat mereka melihatnya. Minta mereka untuk memberi tahu Anda apa yang mereka perhatikan terlebih dahulu, apa yang dilakukan perusahaan Anda, dan apa CTA utama di halaman tersebut.
  • Lihat apakah semua elemen penting berada dalam pola F.
  • Uji halaman Anda di sebanyak mungkin browser pada sebanyak mungkin platform. Safari tidak merender elemen seperti Chrome. Firefox tidak merender elemen seperti Internet Explorer (IE). Dan versi IE yang berbeda dapat menampilkan konten dengan sangat berbeda.

Anda tidak harus memiliki gelar dalam tata letak dan desain periklanan untuk melakukan ini. Tetapi Anda harus bersedia melihat konten Anda saat ini dengan mata kritis.

Ini sepadan dengan usaha.