Praktik Pengembangan III: Interface Produk yang Profesional
Prototype yang fungsional sudah cukup untuk UTS — tapi untuk Demo Day, produkmu harus terlihat dan terasa profesional. Di sesi ini kita transformasi tampilan kasar menjadi interface yang meyakinkan investor dan pengguna.
1. Prinsip UI/UX untuk Produk AI
Produk AI punya tantangan UI/UX yang unik: pengguna tidak selalu tahu "sedang diproses" atau "ada yang salah". Empat prinsip ini wajib ada di setiap produk berbasis LLM:
🎯
Simplicity
Terlalu banyak opsi dan tombol di layar pertama
Satu aksi utama yang jelas di halaman pertama
💬
Feedback Jelas
Tombol ditekan tapi tidak ada respons visual apapun
Animasi/warna berubah saat tombol ditekan
⏳
Loading State
Layar diam selama AI berpikir — user mengira error
Spinner, dots animasi, atau skeleton saat AI memproses
⚠️
Error State
Tampilkan kode error teknis yang membingungkan
Pesan ramah + instruksi apa yang harus dilakukan
UX yang baik itu seperti lift yang profesional vs lift asal jadi. Lift profesional: tombol menyala saat dipencet (feedback), nomor lantai berubah saat bergerak (loading state), dan ada notifikasi jika rusak (error state). Lift asal jadi: pencet tombol, tidak ada reaksi, kamu tidak tahu apakah lift bergerak atau mati.
2. Anatomi Landing Page Produk AI
Landing page adalah "etalase toko" produkmu di internet. Dalam hitungan detik, pengunjung akan memutuskan apakah mau mencoba produkmu atau pergi. Klik setiap seksi untuk lihat panduan penulisannya:
🏠 Struktur Landing Page Produk AI
1
Hero Section
Kesan pertama — judul, sub-judul, CTA button
Headline: 5–8 kata yang langsung menjelaskan nilai produk. Contoh: "Balas 100 Pertanyaan WA Pelanggan dalam 1 Menit" — bukan "Platform AI Terbaik".
Sub-headline: 1–2 kalimat yang menjelaskan UNTUK SIAPA dan BAGAIMANA caranya. Contoh: "AgriBot membantu petani Indonesia mendiagnosis penyakit tanaman secara instan, tanpa perlu koneksi kuat."
CTA Button: Gunakan kata kerja aktif + benefit. "Coba Gratis Sekarang" jauh lebih kuat dari "Submit" atau "OK".
2
Social Proof / Masalah
Konfirmasi bahwa masalah ini nyata dirasakan banyak orang
Tampilkan kutipan singkat dari calon pengguna yang pernah kamu wawancara: "Saya habiskan 3 jam sehari hanya untuk jawab WA pelanggan yang sama-sama." — Budi, pemilik toko online.
Atau tampilkan angka yang relevan: "73% UMKM Indonesia kehilangan pelanggan karena respons lambat". Data membuat masalah terasa nyata.
3
Fitur Utama (3 Kartu)
Tiga keunggulan produk dengan ikon dan penjelasan singkat
Tampilkan maksimal 3 fitur utama — lebih dari itu membingungkan. Setiap kartu: ikon (emoji atau SVG), nama fitur (2–3 kata), manfaat (1 kalimat, fokus pada outcome pengguna bukan spesifikasi teknis).
Contoh yang buruk: "Menggunakan model LLaMA 3.1 8B dengan 8K context window". Contoh yang baik: "Jawab otomatis dalam 3 detik, bahkan saat kamu tidur".
4
Cara Kerja (How It Works)
3 langkah simpel bagaimana produk digunakan
Tiga langkah berurutan dengan nomor besar: 1. Hubungkan WhatsApp → 2. Atur pertanyaan & jawaban → 3. Aktifkan dan istirahat!
Ini menghilangkan ketakutan calon pengguna: "apakah ini rumit?". Tiga langkah sederhana membuat produk terasa accessible.
5
CTA Penutup
Ajakan terakhir untuk mencoba — jangan biarkan user pergi tanpa aksi
Ulangi CTA di bagian bawah halaman dengan teks yang sedikit berbeda. Contoh: "Siap hemat 3 jam sehari? Coba AgriBot 14 hari gratis — tanpa kartu kredit."
Tambahkan elemen penghilang risiko: "Tidak perlu install apapun. Cancel kapan saja." Ini mengurangi hambatan psikologis untuk mencoba.
3. Kode CSS Profesional — Responsive & Menarik
Berikut kode CSS praktis untuk elemen-elemen kunci landing page produk AI. Semua responsif dan siap pakai:
/* ── Design System: CSS Variables ─────────── */:root {
/* Warna Utama */--primary: #1a6b2a; /* Hijau utama */--primary-dark: #0d3d16;
--accent: #f0c040; /* Emas aksen */--accent-dark: #c9900a;
--bg: #f8faf8; /* Background terang */--text: #1a2e1a;
--text-muted: #6a8a6a;
/* Typography */--font-heading: 'Cinzel', serif;
--font-body: 'Raleway', sans-serif;
/* Spacing */--radius: 12px;
--shadow: 0 4px 20px rgba(0,0,0,0.08);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
}
/* Gunakan CSS vars di seluruh project agar *//* mudah diganti tema hanya dari satu tempat */button.primary {
background: var(--accent);
color: var(--primary-dark);
border-radius: var(--radius);
}
/* ── Responsive Design Breakpoints ─────────── *//* Desktop first — default styles di atas *//* Tablet (768px ke bawah) */@media (max-width: 768px) {
.hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
.features-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.nav-links { display: none; } /* Sembunyikan nav desktop */.hamburger { display: block; } /* Tampilkan hamburger */
}
/* Mobile (480px ke bawah) */@media (max-width: 480px) {
main { padding: 0 16px; }
.hero { padding: 40px 16px; }
.features-grid { grid-template-columns: 1fr; }
.hero-cta { width: 100%; text-align: center; }
}
/* Tip: gunakan clamp() untuk ukuran font yang *//* otomatis scale antara mobile dan desktop */h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
4. Loading State & Typing Effect
Dua fitur UX yang paling membedakan produk AI yang terasa "professional" vs "asal jadi" adalah loading state yang informatif dan typing effect yang membuat respons AI terasa lebih hidup.
Pilihan Loading Indicator
Spinner
Paling umum, cocok untuk loading singkat
Typing Dots
Khusus chatbot — meniru "seseorang sedang mengetik"
Skeleton
Untuk konten yang akan muncul — mengurangi "pop in"
Progress Bar
Untuk proses multi-langkah yang panjang
🔬 Lab: Typing Effect Demo
Typing effect membuat respons AI terasa lebih natural dan mengurangi kejutan visual saat teks tiba-tiba muncul sekaligus. Coba di bawah ini:
⌨️ Typing Effect Simulator
Kecepatan:
// typing_effect.js — Tampilkan teks karakter demi karakterasync functiontypeText(elementId, text, speedMs = 30) {
const el = document.getElementById(elementId);
el.innerHTML = ''; // Kosongkan dulu// Tambah kursor berkedipconst cursor = document.createElement('span');
cursor.className = 'typing-cursor';
cursor.textContent = '|';
el.appendChild(cursor);
// Ketik satu karakter per iterasifor (const char of text) {
cursor.insertAdjacentText('beforebegin', char);
el.scrollTop = el.scrollHeight; // Auto-scrollawait newPromise(r => setTimeout(r, speedMs));
}
cursor.remove(); // Hapus kursor setelah selesai
}
// Penggunaan — setelah dapat respons API:const reply = awaitgetAIResponse(userMsg);
typeText('chat-output', reply, 25);
Halo! Tanya tentang Sesi 9 — prinsip UI/UX produk AI, anatomi landing page, CSS responsive, loading state, typing effect, atau cara mempercantik tampilan produkmu. 🎨