Tombol WhatsApp di Header Saya Diganti Entri Tanya AI
Pill konsultasi WhatsApp dihapus dari header dan fitur Tanya AI naik jadi entri navigasi. Pelajaran soal kontrak tempat CTA eksternal versus fitur internal.
Ringkasan
Pill konsultasi WhatsApp dihapus dari header karena hanyalah aksi sekali-pakai, bukan fitur permanen. Perannya digantikan entri Tanya AI di navigasi utama, cukup ditambahkan lewat navbar.json dan label dua bahasa via next-intl. Pelajarannya: fitur masuk menu, aksi jadi tombol kontekstual di halaman relevan, jangan tumpuk semuanya di header.
Pagi itu saya buka pratinjau staging, dan ada yang hilang dari header: pill hijau konsultasi WhatsApp. Tombol kecil ber-ikon gelembung chat yang nongkrong di pojok kanan atas itu kini tinggal kenangan. Di desktop, yang tersisa hanya ikon sparkle untuk AI, ditambah toggle locale dan tema yang memang sudah ada. Setelah menelusuri tiga commit terakhir, saya sadar ini bukan sekadar ganti tombol. Fitur Tanya AI naik ke navigasi utama sebagai entri permanen, sementara pintu konsultasi eksternal ditutup dari header.
Dugaan pertama saya: ini kosmetik belaka. Ternyata dugaan itu meleset. Yang terjadi adalah perpindahan kontrak tempat. Tombol WhatsApp adalah call to action eksternal, aksi sekali-pakai yang melempar pengunjung keluar situs. Entri navigasi adalah alamat tetap di peta situs, tempat fitur yang ingin selalu terlihat. Keduanya tidak bisa tertukar tempat.
Satu Benang, Tiga Commit
Di Navbar.tsx, jejak commit pertama menunjukkan pill konsultasi dihapus dari baris aksi desktop, lengkap dengan gradient hijau dan bayangannya. Pemindahan MessageCircle diimpor tak lagi dibutuhkan. Menariknya, slot konsultasi di menu mobile tidak dihapus, melainkan diganti peran: tombol yang sama dengan gaya gradient hijau sekarang membuka halaman /ai lewat router.push, hanya saja ikonnya diganti sparkle.
- import { MessageCircle, ... }
+ import { Sparkles, ... }
- <a href="https://wa.me/..." className="... bg-gradient-to-r
- from-[#238636] to-[#2ea043] ...">
- <MessageCircle /> {t("Navbar.consultation")}
- </a>
+ <button onClick={() => router.push("/ai")}
+ className="... bg-gradient-to-r from-[#238636] to-[#2ea043] ...">
+ <Sparkles /> {t("AiSearch.openLabel")}
+ </button>Commit kedua memindahkan fitur ini dari tombol aksi terpisah ke navigasi tersegmentasi. Daftar nav di proyek saya JSON-driven, jadi menambah entri cuma soal menambah satu baris di navbar.json:
[
{ "labelKey": "Nav.home", "href": "/" },
{ "labelKey": "Nav.about", "href": "/about" },
{ "labelKey": "Nav.activity", "href": "/activity" },
{ "labelKey": "Nav.portfolio", "href": "/portfolio" },
{ "labelKey": "Nav.blog", "href": "/blog" },
{ "labelKey": "Nav.ai", "href": "/ai" }
]Commit ketiga melengkapi labelnya lewat berkas pesan next-intl [4]. Kunci ai di namespace Nav diisi Tanya AI untuk locale Indonesia dan Ask AI untuk Inggris. Satu kunci, dua bahasa, tanpa menyentuh komponen.
Kenapa Nav, Bukan Tombol Lagi
Alasannya sederhana: navigasi utama adalah peta fitur situs, dan peta harus jujur. Riset Nielsen Norman Group menempatkan menu navigasi primer di header untuk situs desktop, karena ruang yang cukup sebaiknya dipakai menampilkan navigasi, bukan menyembunyikannya di balik hamburger; yang tak terlihat cenderung tak diingat [1]. Panduan yang sama mengingatkan label menu harus jelas mendeskripsikan konten atau fitur, bukan istilah internal yang hanya dipahami pembuatnya [1]. Tanya AI memenuhi dua syarat itu: fitur yang ingin sering dipakai, dengan label yang menjelaskan dirinya sendiri.
Kontras ikut menentukan. Teks link menu harus langsung terbedakan dari latarnya supaya mudah ditemukan [1], dan standar WCAG menarik garisnya di rasio kontras teks minimal 4,5:1, kecuali teks besar yang cukup 3:1 [3]. Aksen emerald yang saya pilih untuk entri ini lolos ambang itu di latar terang maupun gelap, dan inilah bedanya aksen warna untuk identitas dengan warna asal kontras.
Sisi aksesibilitasnya juga punya kontrak halus. Elemen <nav> membentuk navigation landmark untuk pembaca layar, dan bila satu halaman punya lebih dari satu landmark navigasi, masing-masing wajib diberi label unik agar tidak membingungkan [2]. Header situs saya punya nav utama tersegmentasi dan nav kecil di footer; label berbeda membuat keduanya mudah dibedakan.
Yang Berubah Sebenarnya Bukan Tempatnya
Yang hilang bersama pill WhatsApp bukan cuma tombol, melainkan opsi "ngobrol dengan manusia" dari halaman mana pun. Sebagai gantinya, pengunjung sekarang punya jalur bantuan yang berhenti di situs sendiri: bertanya ke AI, tanpa lompat aplikasi pesan. Bagi situs personal, pertukaran ini masuk akal; percakapan tetap tercatat di sistem sendiri, dan satu pintu bantuan (AI) lebih mudah dirawat daripada dua pintu dengan janji berbeda.
Polanya bisa dipinjam siapa pun yang sedang menata ulang header. Kelompokkan dulu apa yang benar-benar fitur dibanding aksi sekali-pakai; fitur masuk navigasi, aksi boleh jadi tombol kontekstual di halaman yang relevan. Tahan godaan menaruh semuanya di header, karena header yang penuh sama saja dengan header yang tak terbaca. Pengalaman menata layout chat setinggi penuh dulu mengajarkan hal serupa: keputusan tempat yang kecil dampaknya besar pada rasa memakai situs.
Kini tiap kali saya membuka situs, entri Tanya AI duduk rapi setelah Blog dengan ikon sparklenya. Header yang lebih tenang, peta fitur yang jujur, dan pintu bantuan yang selalu terlihat. WhatsApp-nya pergi, tapi kemampuan untuk bertanya tidak; ia cuma pindah alamat.