Heatmap atensi FlowDx dibuat berdasarkan model DeepGaze IIE. Model ini diusulkan oleh Linardos dkk. dalam makalah ICLR 2021 berjudul "DeepGaze IIE: Calibrated prediction in and out-of-domain for state-of-the-art saliency modeling", yang berasal dari Bethge Lab Computational Neuroscience di Universitas Tübingen, Jerman. Pada MIT/Tilburg Saliency Benchmark, DeepGaze IIE menempati peringkat pertama dalam berbagai metrik, dengan korelasi hasil prediksi terhadap data pergerakan mata manusia asli melebihi 0,87.
Apa arti warna pada heatmap?
| Warna | Arti | Persentase Atensi |
|---|---|---|
| Merah | Area atensi tertinggi — pengguna melihat ke sini terlebih dahulu | 10% teratas |
| Oranye-Kuning | Atensi tinggi — pandangan akan berpindah ke sini dengan cepat | 10-30% |
| Hijau | Atensi sedang — akan diperhatikan selama proses browsing | 30-60% |
| Biru | Atensi rendah — sebagian besar pengguna akan mengabaikannya | 60-90% |
| Gelap/Tanpa warna | Titik buta atensi — hampir tidak ada yang melihat | 10% terbawah |
Pola Heatmap yang Umum
Pola 1: Fokus Tengah (Sehat)
Area merah terpusat pada informasi inti konten (wajah, judul, tombol CTA). Ini berarti hierarki visual sudah jelas, dan pengguna dapat dengan cepat memahami pesan yang ingin Anda sampaikan.
Pola 2: Tersebar (Bermasalah)
Area merah tersebar di banyak lokasi tanpa fokus utama yang jelas. Ini menunjukkan terlalu banyak elemen dalam gambar sehingga atensi terpecah. Solusi: Kurangi jumlah elemen dan bangun satu subjek visual yang jelas.
Pola 3: Meleset (Masalah Serius)
Area merah terpusat pada tempat yang tidak Anda inginkan (misalnya elemen latar belakang yang tidak relevan), sementara informasi inti Anda (judul, produk) berada di area biru atau hijau. Ini adalah pembunuh CTR.
Pola 4: Tepian (Sia-sia)
Atensi terpusat di pinggiran gambar. Ini biasanya terjadi jika subjek terlalu kecil atau terdapat terlalu banyak ruang kosong (white space). Otak akan tertarik pada area kontras tinggi di tepian (seperti batas antara gambar dan latar belakang).
Jalur Visual: "Rute Membaca" Pengguna
Selain heatmap, FlowDx juga menghasilkan Visual Path (jalur visual)—memprediksi dari mana mata pengguna mulai melihat dan urutan pemindaian gambar tersebut. Jalur visual yang ideal seharusnya:
- Dimulai dari titik jangkar atensi terkuat (biasanya wajah atau teks terbesar)
- Berpindah ke informasi pendukung (sub-judul, gambar produk)
- Berakhir pada CTA (Call to Action)
Jika jalur tersebut melewatkan informasi kunci atau tertahan di area yang tidak relevan, berarti ada masalah pada pengarahan visual Anda.
Penjelasan Skor Kognitif Lima Dimensi
FlowDx tidak hanya memberikan skor total, tetapi mengevaluasi konten Anda dari lima dimensi kognitif:
- Atensi — Apakah konten dapat menarik perhatian dalam waktu 0,3 detik
- Fokus Visual — Apakah terdapat hierarki visual dan jalur pengarah yang jelas
- Dampak Emosional — Apakah dapat memicu reaksi emosional (penasaran, antusias, resonansi)
- Dorongan Tindakan — Apakah terdapat ajakan bertindak (CTA) yang jelas
- Kekuatan Memori — Apakah pengguna dapat mengingat konten Anda setelah melihatnya
Setiap dimensi berskala 0-100 poin. Skor 70+ berarti luar biasa, 50-70 memerlukan optimasi, dan di bawah 50 terdapat masalah serius.
Mulai Diagnosis dengan Heatmap
Cara Mengoptimalkan Konten Berdasarkan Laporan Diagnosis
Setelah mendapatkan laporan diagnosis FlowDx, tangani masalah berdasarkan prioritas berikut:
Prioritas 1: Perbaiki masalah "Meleset" (Item diagnosis merah)
Jika atensi terpusat pada posisi yang salah (elemen latar belakang, detail tidak relevan), ini adalah masalah paling serius. Solusinya biasanya: kurangi bobot visual elemen pengganggu (blur, kurangi saturasi), sekaligus perkuat kejelasan informasi inti (perbesar, tambah kontras, beri bingkai).
Prioritas 2: Bangun Jalur Visual yang Jelas (Item diagnosis oranye)
Jika heatmap menunjukkan atensi yang tersebar, Anda perlu membangun hierarki visual yang jelas. Gunakan kontras ukuran (elemen terpenting dibuat paling besar), kontras warna (gunakan warna saturasi tinggi untuk informasi inti), dan panduan spasial (panah, garis, arah pandangan tokoh) untuk mengarahkan mata pengguna sesuai jalur yang Anda inginkan.
Prioritas 3: Tingkatkan Skor Kognitif Keseluruhan (Saran kuning)
Dimensi dengan skor di bawah 60 perlu mendapat perhatian khusus. Metode peningkatan yang umum:
| Dimensi Rendah | Penyebab Mungkin | Arah Peningkatan |
|---|---|---|
| Atensi < 60 | Gambar terlalu datar, kurang menonjol | Tambah kontras, masukkan wajah, gunakan warna saturasi tinggi |
| Fokus Visual < 60 | Elemen terlalu banyak dan berantakan | Kurangi jumlah elemen, bangun hierarki utama dan pendukung |
| Dampak Emosional < 60 | Konten kurang pemicu emosi | Gunakan ekspresi emosional, buat kontras, bercerita |
| Dorongan Tindakan < 60 | Kurang CTA atau petunjuk tindakan | Tambahkan panah, tombol, kata pemicu seperti "Sekarang", "Terbatas" |
| Kekuatan Memori < 60 | Konten terlalu biasa, kurang unik | Bangun simbol brand, gunakan skema warna unik, ciptakan poin memori visual |
Batasan Analisis Heatmap
Heatmap atensi adalah alat yang ampuh, tetapi memiliki batasan. Memahami batasan ini secara jujur akan membantu Anda menggunakannya dengan lebih baik:
- Memprediksi "Pengguna Rata-rata" — Heatmap mencerminkan distribusi tatapan rata-rata kelompok; jalur pandangan pengguna individu mungkin berbeda.
- Tidak Berarti Sama dengan CTR — Atensi tinggi tidak selalu berubah menjadi klik tinggi. Pengguna mungkin memperhatikan tetapi memilih untuk tidak mengklik (misalnya karena konten tampak kurang menarik).
- Bergantung pada Kualitas Gambar — Resolusi rendah atau kompresi gambar yang parah dapat memengaruhi akurasi prediksi.
- Perbedaan Budaya — Pengguna dari latar belakang budaya berbeda mungkin memiliki alokasi atensi yang berbeda terhadap warna, wajah, dan simbol.
Skor kognitif lima dimensi FlowDx dirancang justru untuk menutupi kekurangan analisis heatmap murni—dengan mempertimbangkan atensi, emosi, memori, dan dimensi lainnya secara komprehensif untuk memberikan diagnosis konten yang lebih menyeluruh.
Pertanyaan Umum (FAQ)
Apakah area merah pada heatmap selalu yang terbaik?
Tidak selalu. Merah menunjukkan area yang pertama kali dilihat pengguna, tetapi kuncinya adalah apakah area merah tersebut jatuh pada informasi yang paling ingin Anda sampaikan. Jika warna merah berada pada latar belakang yang tidak relevan, itu justru menunjukkan adanya masalah. Kondisi ideal adalah: merah menutupi informasi inti (produk, wajah, judul), dan biru menutupi area sekunder.
Berapa banyak titik fiksasi pada jalur visual yang dianggap baik?
Untuk thumbnail dan sampul, 3-5 titik fiksasi adalah rentang optimal. Terlalu sedikit (1-2 titik) menunjukkan kurangnya informasi, terlalu banyak (6+) menunjukkan atensi yang terlalu tersebar. Jalur ideal: Fokus Utama → Informasi Pendukung → CTA, membentuk garis narasi yang jelas.
Mengapa hasil heatmap saya berbeda dengan orang lain yang menganalisis gambar yang sama?
FlowDx menggunakan model deterministik (DeepGaze IIE), sehingga hasil analisis untuk gambar yang sama persis akan konsisten. Jika melihat hasil yang berbeda, kemungkinan disebabkan oleh perbedaan resolusi gambar, cara pemotongan (cropping), atau tingkat kompresi file. Disarankan menggunakan gambar dengan resolusi asli untuk analisis.
Apa perbedaan antara heatmap video dan gambar statis?
Dalam konten video, distribusi atensi berubah seiring waktu. FlowDx melakukan analisis per frame pada video, di mana setiap frame memiliki heatmap independen. Video memiliki satu dimensi tambahan dibanding gambar statis—elemen dinamis (objek bergerak, perpindahan adegan) yang sangat kuat menarik perhatian. Kunci analisis video adalah menemukan frame dengan atensi terlemah, karena itulah saat di mana pengguna paling mungkin untuk melakukan scroll atau meninggalkan video.
Mulai Diagnosis dengan Heatmap
Unggah konten Anda di FlowDx untuk mendapatkan heatmap atensi, jalur visual, dan skor lima dimensi. Lihat apa yang sebenarnya terjadi dalam otak pengguna saat melihat konten Anda.
Referensi
- Linardos, A. et al. (2021). DeepGaze IIE: Calibrated prediction in and out-of-domain for state-of-the-art saliency modeling. ICLR 2021.
- Borji, A., & Itti, L. (2013). State-of-the-art in visual attention modeling. IEEE Transactions on Pattern Analysis and Machine Intelligence, 35(1), 185-207.
- Bylinskii, Z. et al. (2019). What do different evaluation metrics tell us about saliency models? IEEE TPAMI, 41(3), 740-757.