Optimasi Website dan Pengalaman Pengguna (UX)

Pemasaran Digital Pertemuan 3 CPL 1 & 2

Agenda Pertemuan Hari Ini

Teori (75 menit)

Prinsip desain responsif
UX dan dampaknya pada konversi
Analisis perilaku pengguna
Optimasi kecepatan & aksesibilitas

Praktik & Diskusi (75 menit)

Audit UX website studi kasus
Membaca laporan Google PageSpeed
Diskusi kasus Tokopedia & BRImo
Tugas kelompok & preview P4

Tujuan Pembelajaran

Memahami prinsip desain website yang responsif dan standar industri saat ini

Menjelaskan hubungan antara pengalaman pengguna (UX) dan tingkat konversi

Menggunakan alat analisis untuk membaca perilaku pengguna di website

Mengidentifikasi teknik optimasi kecepatan dan aksesibilitas website

Topik 1

Prinsip Desain Website yang Responsif

Apa Itu Desain Responsif?

Definisi: Desain responsif (responsive design) adalah pendekatan pengembangan web di mana tampilan dan tata letak halaman menyesuaikan diri secara otomatis dengan ukuran layar perangkat pengguna — dari desktop, tablet, hingga ponsel.

Komponen Kunci

Fluid grid: kolom menggunakan persentase, bukan piksel tetap
Flexible images: gambar menyusut sesuai kontainer
Media queries: CSS berubah di breakpoint tertentu

Konteks Indonesia

~70% pengguna internet Indonesia via mobile (estimasi Statcounter 2024)
Google memakai mobile-first indexing sejak 2021
Website non-responsif kehilangan peringkat pencarian

Breakpoint & Mobile-First Strategy

Breakpoint	Lebar Layar	Perangkat Umum	Prioritas Desain
xs (Extra Small)	< 576px	Ponsel kecil	Satu kolom, font besar
sm (Small)	576–768px	Ponsel besar / phablet	Navigasi hamburger
md (Medium)	768–992px	Tablet	2 kolom, sidebar muncul
lg (Large)	992–1200px	Laptop	3–4 kolom, full nav
xl (Extra Large)	> 1200px	Desktop/monitor	Layout penuh, sidebar lebar

Mobile-First: Mulai desain dari layar terkecil, lalu tambahkan kompleksitas — bukan sebaliknya. Ini memaksa prioritisasi konten yang benar-benar penting.

Prinsip Visual Desain Responsif

Hierarki Visual

Elemen terpenting di atas (above the fold)
Ukuran font: judul > subjudul > isi
Kontras warna membantu navigasi

Whitespace

Ruang kosong bukan pemborosan
Membantu fokus pengguna
Meningkatkan keterbacaan ~20%

Touch Target

Tombol min. 44×44px (standar Apple/Google)
Jarak antar tombol min. 8px
CTA jelas dan terbaca

Topik 2

Pentingnya UX dalam Konversi

UX dan Dampaknya pada Bisnis

Definisi UX: User Experience (UX) adalah keseluruhan persepsi dan respons pengguna saat berinteraksi dengan produk atau layanan digital — mencakup kemudahan, efisiensi, kepuasan, dan kepercayaan.

Konversi = f(UX, Relevansi Konten, Kepercayaan, Kecepatan)

Fakta Industri (estimasi umum)

Investasi UX yang baik dapat mengurangi biaya pengembangan ulang hingga ~50% (Nielsen Norman Group)
Setiap 1 detik keterlambatan loading dapat menurunkan konversi ~7% (Akamai)
~88% pengguna tidak kembali ke website dengan UX buruk (penelitian berbagai sumber)
UX yang konsisten membangun kepercayaan merek jangka panjang

Model UX: Honeycomb Peter Morville

7 Dimensi UX Morville

Useful: konten memenuhi kebutuhan nyata
Usable: mudah digunakan tanpa instruksi
Desirable: tampilan menarik, membangun emosi positif
Findable: konten mudah ditemukan (navigasi + search)
Accessible: dapat diakses penyandang disabilitas
Credible: pengguna percaya pada website
Valuable: memberikan nilai bisnis & pengguna

Funnel Konversi & Titik Gesekan UX

Tahap Funnel	Tindakan Pengguna	Titik Gesekan UX Umum	Solusi
Awareness	Menemukan website via search/iklan	Loading lambat, tampilan tidak menarik	Optimasi kecepatan, hero section jelas
Interest	Menjelajahi konten/produk	Navigasi membingungkan, konten berantakan	Menu jelas, search internal, filter produk
Desire	Membaca detail produk/layanan	Gambar buruk, deskripsi kurang, tidak ada ulasan	Foto berkualitas, deskripsi lengkap, social proof
Action	Mengisi form / checkout / daftar	Form panjang, proses checkout berlapis, error tidak jelas	Form singkat, guest checkout, pesan error informatif
Retention	Kembali lagi	Tidak ada personalisasi, email tidak relevan	Rekomendasi personal, email tersegmentasi

Topik 3

Analisis Perilaku Pengguna & Optimasi Teknis

Alat Analisis Perilaku Pengguna

Google Analytics 4 (GA4)

Metrik kunci: Bounce rate, session duration, pages/session, conversion rate
Laporan Alur: Visualisasi jalur pengguna antar halaman
Segmentasi: Perangkat, demografi, sumber traffic
Gratis — standar industri global & Indonesia

Alat Heatmap & Session Recording

Hotjar / Microsoft Clarity (gratis): Heatmap klik, scroll map, rekaman sesi
Heatmap klik: menunjukkan di mana pengguna paling sering klik
Scroll map: berapa persen pengguna mencapai bagian bawah halaman
Session recording: rekaman pergerakan mouse pengguna nyata

Coba Sendiri: Hitung Skor System Usability Scale

Isi 10 pernyataan standar SUS dengan skala 1–5 dan amati bagaimana skor akhir menempatkan sebuah website pada kategori usability tertentu.

Membaca Data: Metrik Penting

Metrik	Definisi	Benchmark Umum	Interpretasi
Bounce Rate	% pengguna yang keluar tanpa interaksi lebih lanjut	~40–60% (e-commerce)	Tinggi = relevansi rendah atau UX buruk di halaman masuk
Session Duration	Rata-rata waktu di website per sesi	2–4 menit (konten)	Rendah = konten tidak menarik atau navigasi membingungkan
Pages/Session	Rata-rata halaman yang dikunjungi per sesi	2–5 halaman	Rendah = internal linking buruk atau konten tidak relevan
Conversion Rate	% pengunjung yang menyelesaikan tindakan tujuan	1–4% (e-commerce)	Rendah = UX buruk di funnel atau proposisi nilai lemah
Exit Rate	% pengguna yang meninggalkan website dari halaman tertentu	Bervariasi per halaman	Tinggi di checkout = gesekan di tahap konversi kritis

Optimasi Kecepatan Website: Core Web Vitals

Core Web Vitals adalah serangkaian metrik Google yang mengukur pengalaman pengguna nyata — menjadi faktor peringkat pencarian sejak 2021.

LCP — Loading

Largest Contentful Paint
Waktu elemen terbesar muncul
Target: < 2,5 detik
Optimalkan: kompresi gambar, hosting cepat, CDN

INP — Interaktivitas

Interaction to Next Paint
Responsivitas saat diklik/diketik
Target: < 200ms
Optimalkan: kurangi JavaScript berat

CLS — Stabilitas

Cumulative Layout Shift
Pergeseran elemen saat loading
Target: < 0,1
Optimalkan: tentukan dimensi gambar/iklan

Coba Sendiri: Berapa Konversi Hilang Akibat Loading Lambat?

Geser durasi loading halaman dan tingkat konversi awal, lalu amati estimasi kerugian konversi memakai acuan ~7% per detik dari riset Akamai.

Studi Kasus: Optimasi UX Website Indonesia

Tokopedia — Checkout Flow

Menyederhanakan alur checkout dari 5 langkah menjadi 3
Menambahkan pengisian alamat otomatis via kode pos
Menampilkan estimasi pengiriman real-time
Hasil: penurunan cart abandonment yang terukur (belum dipublikasikan secara spesifik)

BRImo (BRI) — Mobile UX

Redesain 2022: navigasi tab bawah menggantikan hamburger menu
Fitur terpopuler (transfer, top-up) di posisi paling mudah dijangkau ibu jari
Onboarding nasabah baru dilakukan sepenuhnya via aplikasi (tanpa kantor)
Aksesibilitas: ukuran font dapat disesuaikan untuk pengguna lansia

Gojek & Telkom: Gojek menggunakan A/B testing intensif pada tampilan harga dan promo. Telkom MyIndihome menerapkan progressive disclosure — menampilkan informasi berlapis agar tidak membebani pengguna baru.

Aksesibilitas Website (a11y)

WCAG 2.1 (Web Content Accessibility Guidelines) adalah standar internasional aksesibilitas web. Level AA adalah target minimum yang direkomendasikan.

Prinsip	Contoh Penerapan
Perceivable (Dapat Dirasakan)	Alt text pada gambar, caption video
Operable (Dapat Dioperasikan)	Navigasi via keyboard, skip nav link
Understandable (Dapat Dimengerti)	Label form jelas, pesan error informatif
Robust (Kokoh)	Kompatibel screen reader, HTML semantik

Mengapa Penting untuk Bisnis?

~15% populasi dunia memiliki disabilitas (WHO) — pasar yang besar
SEO benefit: alt text, heading struktur membantu crawler Google
Kecepatan: website aksesibel umumnya lebih ringan dan cepat
Reputasi merek: inklusivitas jadi nilai tambah di mata konsumen
Indonesia: Undang-Undang No. 8/2016 tentang Penyandang Disabilitas mewajibkan aksesibilitas layanan publik digital

Coba Sendiri: Cek Rasio Kontras Warna WCAG

Masukkan warna teks dan latar, lalu amati apakah rasio kontrasnya lolos ambang WCAG 2.1 level AA/AAA.

Diagram: Siklus Optimasi UX Website

Rangkuman Pertemuan 3

Key Takeaways — Optimasi Website & UX

Desain responsif adalah keharusan, bukan pilihan — lebih dari separuh pengguna Indonesia mengakses web via mobile, dan Google mengutamakan mobile-first indexing.
UX yang baik langsung berdampak pada konversi — setiap gesekan di funnel konversi mengurangi peluang bisnis; gunakan model Honeycomb Morville sebagai kerangka evaluasi.
Analisis data adalah dasar keputusan UX — gunakan GA4 untuk metrik kuantitatif dan Microsoft Clarity (gratis) untuk heatmap dan rekaman sesi.

Core Web Vitals (LCP <2,5s, INP <200ms, CLS <0,1) adalah target teknis minimum untuk kecepatan dan pengalaman pengguna yang memenuhi standar Google.
Aksesibilitas bukan kemewahan — ia memperluas jangkauan pasar, meningkatkan SEO, dan di Indonesia mulai diwajibkan regulasi (UU No. 8/2016).

Tugas & Diskusi

Tugas Kelompok (dikumpul P5)

Pilih satu website bisnis lokal Indonesia (UMKM, startup, atau perusahaan daerah)
Lakukan audit UX menggunakan checklist 7 dimensi Morville
Uji kecepatan di pagespeed.web.dev — catat skor Core Web Vitals
Pasang Microsoft Clarity (gratis) jika memungkinkan
Buat laporan 2–3 halaman: temuan + 5 rekomendasi prioritas

Diskusi Kelas (15 menit)

Menurut Anda, website mana yang UX-nya paling baik di Indonesia dan mengapa?
Apa pengalaman UX buruk yang pernah Anda alami saat berbelanja atau bertransaksi online?
Bagaimana bisnis kecil (UMKM) bisa mengoptimalkan UX dengan anggaran terbatas?

Pertanyaan?

Silakan ajukan pertanyaan seputar materi hari ini.

Preview Pertemuan 4: Optimasi Mesin Pencari (SEO)
Bagaimana website yang sudah dioptimalkan UX-nya bisa ditemukan oleh lebih banyak orang melalui pencarian Google? Kita akan bahas keyword research, on-page SEO, dan strategi backlink yang relevan untuk konteks Indonesia.