UI UX adalah: penjelasan dasar untuk pemilik usaha yang menilai desain

UI UX adalah dua ukuran berbeda untuk satu halaman yang sama. UI (user interface) adalah bagian yang terlihat: warna tombol, ukuran huruf, jarak antar elemen, susunan foto. UX (user experience) adalah yang dirasakan pengunjung saat memakainya: apakah dia menemukan harga tanpa harus bertanya, apakah tombol WhatsApp cukup besar untuk ditekan sambil berdiri di kendaraan, apakah formulirnya selesai sebelum niatnya hilang.

Tulisan ini untuk pemilik usaha yang baru menerima kiriman desain dari vendor dan harus memutuskan satu hal: ini sudah layak tayang atau belum. Bukan untuk calon desainer. Jadi tidak ada tugas menggambar wireframe di sini, dan tidak ada permintaan supaya Anda belajar Figma dulu. Yang ada adalah delapan pertanyaan yang bisa Anda salin ke WhatsApp hari ini, dan lima keputusan UX yang paling sering mengubah jumlah pesan masuk.

Satu catatan jujur sebelum mulai. Untuk menyusun harga dan halaman kami sendiri, kami menyisir 18 vendor pembuat website di Indonesia pada 20 September 2026. Sampel itu kecil dan sifatnya kualitatif. Jadi setiap angka yang kami sebut di bawah ditulis sebagai hitungan dari 18, bukan sebagai persentase pasar, dan kami tidak akan bilang "tidak satu pun vendor" untuk hal yang cuma kami periksa di 18 halaman.

Apa itu UI UX kalau dijelaskan tanpa istilah desain

Pertanyaan "apa itu UI UX" paling gampang dijawab lewat rumah makan. UI adalah meja, kursi, penerangan, dan buku menu yang dicetak. UX adalah apakah Anda dapat parkir, apakah pesanan datang sebelum lapar berubah jadi kesal, dan apakah bayar di kasir butuh antre sepuluh menit. Rumah makan bisa punya interior paling cantik di kota dan tetap kehilangan pelanggan karena parkirnya menyiksa.

Definisi resminya lebih luas daripada yang biasa dipakai vendor. Don Norman dan Jakob Nielsen, dua orang yang memperkenalkan istilah ini, menulis di Nielsen Norman Group (tab baru):

"User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products."

Terjemahan bebasnya: pengalaman pengguna mencakup seluruh sisi interaksi orang dengan perusahaan Anda, layanannya, dan produknya. Artinya UX tidak berhenti di layar. Balasan WhatsApp yang butuh dua hari juga bagian dari UX, walaupun tidak ada desainer yang bisa memperbaikinya lewat Figma.

Halaman yang sama memberi contoh yang enak dipakai: situs ulasan film bisa punya antarmuka sempurna untuk mencari judul, tetapi pengalamannya tetap buruk kalau basis datanya cuma berisi film studio besar. Tampilan benar, isi tidak menjawab. Ini kesalahan yang paling sering kami temui saat meninjau halaman usaha kecil: desainnya rapi, tetapi pertanyaan pertama calon pembeli tidak terjawab di mana pun.

Pendapat kami, dan ini pendapat tanpa angka pendukung: sebagian vendor menjual "UI/UX" sebagai satu baris tagihan, padahal yang benar-benar diserahkan hanya UI. Bukan karena niat menipu, tetapi karena UI bisa diserahkan sebagai gambar, sedangkan UX baru kelihatan setelah orang asing memakai halamannya. Yang tidak bisa diserahkan sebagai gambar cenderung tidak dikerjakan.

UI dan UX adalah dua pekerjaan dengan bukti serah terima yang berbeda

Kalimat "UI dan UX adalah satu paket" benar sebagai konsep dan menyesatkan sebagai kesepakatan kerja. Keduanya menghasilkan barang bukti yang berbeda, dan Anda berhak meminta keduanya sebelum melunasi.

Bukti pekerjaan UI berbentuk benda yang bisa dilihat: mockup halaman, daftar warna dan ukuran huruf, serta kumpulan komponen seperti tombol, kartu, dan formulir dalam kondisi normal, ditekan, dan gagal. Bukti pekerjaan UX berbentuk keputusan yang bisa dibaca: urutan halaman, apa yang terjadi sesudah tombol ditekan, pesan apa yang muncul saat isian salah, dan alasan kenapa suatu bagian ditaruh di atas dan bukan di bawah.

Pegangan paling tua di bidang ini adalah sepuluh heuristik kegunaan susunan Jakob Nielsen, diterbitkan 24 April 1994 dan diperbarui terakhir pada 30 Januari 2024. Dua di antaranya bisa Anda pakai tanpa latar belakang desain. Heuristik pertama, visibility of system status (tab baru), berbunyi: "The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time." Terjemahannya sederhana: setelah orang menekan tombol Kirim, harus ada tanda bahwa pesannya benar-benar terkirim. Halaman yang diam setelah tombol ditekan akan membuat orang menekan tombol itu lagi, lalu kesal, lalu pergi.

Heuristik keenam, recognition rather than recall, berbunyi: "Minimize the user's memory load by making elements, actions, and options visible." Dalam bahasa pemilik usaha: jangan menyuruh pengunjung mengingat harga dari halaman sebelumnya. Kalau dia sudah sampai di formulir, nama paket dan angkanya harus masih terlihat di situ.

Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.

Tabel ini yang kami pakai sendiri waktu menyerahkan halaman. Kolom kanan itu yang sering jadi bahan perdebatan di akhir proyek kalau tidak pernah ditulis di awal.

Perbedaan UI UX yang paling terasa di halaman bisnis Indonesia

Perbedaan UI UX berhenti jadi teori begitu Anda melihat halaman usaha yang sebenarnya. Pola yang berulang kira-kira seperti ini.

• Katalog cantik tanpa satu pun angka. Foto produknya rapi, gaya hurufnya konsisten, dan harga diganti tulisan "hubungi kami". UI lulus, UX gagal, karena pertanyaan pertama pembeli justru soal harga.
• Tombol pesan cuma di paling bawah. Pengunjung yang sudah yakin di layar kedua terpaksa menggulir tujuh layar untuk menemukan cara menghubungi Anda.
• Formulir yang meminta terlalu banyak. Alamat lengkap dan nama perusahaan diminta padahal orangnya baru mau bertanya harga.
• Galeri dua puluh foto tanpa keterangan. Enak dilihat, tidak menjelaskan apa pun, dan membuat halaman berat di jaringan seluler.
• Jam buka yang hanya ada di footer. Padahal itu salah satu hal yang paling sering dicari pengunjung usaha lokal.

Ada alasan kenapa posisi sangat menentukan. Penelitian Nielsen Norman Group tentang kebiasaan menggulir dan perhatian (tab baru), yang menganalisis lebih dari 130.000 titik fiksasi mata dari 120 partisipan, menemukan 57 persen waktu melihat dihabiskan di area sebelum gulir pertama, dan 74 persen di dua layar pertama. Orang memang menggulir, tetapi perhatiannya menipis cepat.

Kesimpulan praktisnya bukan "taruh semua di atas". Itu justru bikin layar pertama penuh sesak. Yang benar: dua layar pertama memuat tiga hal saja, yaitu Anda melayani apa, kira-kira berapa harganya, dan cara menghubungi Anda. Sisanya boleh menyusul ke bawah.

Kami pernah salah di sisi ini. Pada salah satu halaman awal kami sendiri, penjelasan proses kerja kami taruh di layar kedua karena kami bangga dengan prosesnya. Ternyata yang dicari orang di posisi itu adalah angka. Bagian proses kami turunkan, blok harga kami naikkan, dan nada percakapan yang masuk berubah: dari "harganya berapa ya" menjadi "paket yang ini sudah termasuk domain belum". Itu perubahan UX, bukan perubahan UI, karena tidak ada satu pun warna yang diganti.

Delapan pertanyaan untuk menilai desain sebelum Anda menyetujuinya

Delapan pertanyaan berikut bisa dijawab tanpa latar belakang desain. Kirim apa adanya ke vendor Anda, atau jawab sendiri sambil memegang ponsel.

1. Sudah saya buka di ponsel saya sendiri atau baru di layar laptop Anda? Ini pertanyaan pertama karena Google sendiri menilai versi ponsel. Dokumentasi mobile-first indexing (tab baru) menyatakan Google memakai versi seluler dari isi situs, yang dirayapi dengan agen smartphone, untuk pengindeksan dan peringkat. Desain yang megah di layar 27 inci tidak berarti banyak kalau sesak di layar 6 inci.
2. Berapa detik sampai halaman ini terbaca, dan diukur di jaringan apa? Minta angkanya, bukan kesan. Patokan yang dipakai Google ada di Core Web Vitals (tab baru): LCP 2,5 detik atau kurang, INP 200 milidetik atau kurang, dan CLS 0,1 atau kurang, diukur pada persentil ke-75 kunjungan.
3. Di gulir keberapa harga muncul? Hitung dengan ibu jari, bukan dengan perasaan. Kalau jawabannya "harga tidak ditampilkan", itu keputusan bisnis dan bukan keputusan desain, dan konsekuensinya Anda akan menerima lebih banyak pesan bertanya harga serta lebih sedikit pesan siap pesan.
4. Apa tombol utama di layar ini, dan ada berapa tombol utama? Satu layar yang punya empat tombol sama menonjolnya sebenarnya tidak punya tombol utama sama sekali. Minta vendor menunjuk satu, lalu turunkan sisanya jadi tautan biasa.
5. Berapa isian di formulir, dan mana yang benar-benar wajib? Riset Baymard Institute (tab baru) mencatat rata-rata alur checkout memakai 11,3 isian pada 2024, turun dari 11,8 pada 2021 dan 12,7 pada 2019, padahal menurut mereka sebagian besar situs sebenarnya hanya perlu 8 isian. Itu angka untuk checkout toko online. Formulir tanya harga di halaman usaha kecil seharusnya jauh lebih pendek daripada itu.
6. Seberapa besar area yang bisa ditekan? Kriteria WCAG 2.2 butir 2.5.8 level AA (tab baru) menetapkan ukuran target untuk masukan penunjuk minimal 24 kali 24 piksel CSS. Uji cepatnya: coba tekan sambil berjalan. Kalau meleset dua kali, ukurannya kurang atau jaraknya terlalu rapat.
7. Apa yang terjadi kalau saya salah isi atau sinyal saya putus? Minta vendor menunjukkan tampilan galatnya, bukan menjelaskannya. Pesan "terjadi kesalahan" tanpa keterangan isian mana yang salah adalah tanda bagian ini belum dikerjakan.
8. Setelah tayang, bagian mana yang bisa saya ubah sendiri? Pertanyaan ini kerap terlupakan sampai harga produk berubah dan Anda baru sadar harus mengantre di antrean vendor untuk mengganti satu angka.

Pertanyaan kedelapan pantas diberi ruang sendiri. Dalam riset keluhan pembeli yang kami kumpulkan, keluhan soal tidak bisa mengedit sendiri dan jumlah revisi yang dibatasi diam-diam muncul 3 kali, dan ketiganya berasal dari satu utas diskusi yang sama. Buktinya tipis, jadi kami tidak menyebutnya masalah umum. Yang membuat kami tetap menaruhnya di sini adalah satu komentar yang menyinggung pembatasan revisi seperti hal yang biasa terjadi, bukan sebagai pengecualian. Yang membuatnya mahal bukan tagihannya, melainkan bahwa setiap perubahan kecil berubah jadi proyek kecil: kirim pesan, tunggu, revisi, tunggu lagi. Jawaban yang sehat dari vendor berbentuk daftar tegas, misalnya teks, gambar, harga, dan jam buka bisa Anda ubah sendiri, sedangkan penambahan halaman baru lewat kami. Ditambah satu video panduan yang direkam khusus untuk situs Anda, bukan tautan ke dokumentasi umum.

Lima keputusan UX yang paling sering menaikkan pesan WhatsApp masuk

Kalau waktu Anda terbatas dan hanya bisa meminta beberapa perbaikan, lima hal ini yang menurut kami paling berpengaruh pada halaman usaha kecil di Indonesia.

1. Posisi tombol di layar ponsel

Tombol utama sebaiknya berada di area yang terjangkau ibu jari, yaitu sepertiga bawah layar, dan tetap terlihat saat halaman digulir. Bukan hanya di bagian paling atas, dan bukan hanya di paling bawah. Perhatikan juga isi pesannya: tombol yang membuka WhatsApp dengan pesan kosong memaksa pengunjung mengarang kalimat pembuka, dan sebagian orang berhenti di situ. Isi otomatis dengan nama halaman atau nama produknya.

2. Panjang formulir

Tiga isian biasanya cukup untuk memulai: nama, nomor WhatsApp, dan satu kalimat kebutuhan. Sisanya ditanyakan di percakapan, saat orangnya sudah terlanjur mengobrol dengan Anda. Setiap isian tambahan adalah satu kesempatan baru untuk berubah pikiran, dan ini berlaku lebih keras di jaringan seluler yang lambat.

3. Kejelasan harga

Angka mengurangi percakapan yang tidak akan jadi apa-apa. Kami menulis harga kami terbuka: Landing Page Siap Iklan Rp2.500.000, Profil Usaha 5 Rp4.450.000, Profil Usaha 10 Rp6.950.000, dan Katalog Pesan via WhatsApp Rp5.950.000. Yang lebih jarang ditulis orang, dan justru kerap jadi sumber kaget, adalah biaya tahun berikutnya. Perpanjangan kami ditulis Rp750.000 per tahun untuk dua paket pertama dan Rp950.000 per tahun untuk dua paket berikutnya, sehingga total tiga tahun bisa dijumlahkan di depan, dan rinciannya kami pecah di uraian biaya bikin website per komponen. Dari 18 halaman harga vendor yang kami buka pada 20 September 2026, 0 menjumlahkan total biaya multi-tahun menjadi satu angka. Kalau halaman Anda bisa melakukannya, itu keunggulan UX yang tidak butuh desainer.

4. Satu ajakan per layar

Setiap layar sebaiknya meminta satu hal. Kalau di layar yang sama ada "chat sekarang", "lihat portofolio", "unduh brosur", dan "daftar newsletter", pengunjung akan memilih yang paling gampang, yaitu tidak memilih. Halaman landing page siap iklan paling terasa dampaknya di sini karena seluruh halamannya memang dibangun untuk satu tujuan tunggal. Kalau Anda belum yakin bedanya dengan website biasa, bacaan lanjutannya ada di penjelasan landing page dan kapan Anda membutuhkannya.

5. Bukti yang bisa diperiksa

Bagian yang paling sering diisi klaim kosong justru bagian bukti. Angka pengalaman tanpa dasar, testimoni tanpa nama, dan logo klien yang tidak pernah jadi klien. Lebih baik satu contoh yang diberi label contoh dan boleh diperiksa sendiri daripada sepuluh klaim yang tidak bisa dicek. Itu sebabnya halaman contoh website kami memakai label contoh dan mencantumkan standar teknis yang dipakai, tanpa nama klien karangan.

Yang tidak kelihatan di mockup: kecepatan, keamanan, dan nama di akun

Mockup tidak pernah lambat. Mockup tidak pernah kena spam. Mockup juga tidak punya tagihan perpanjangan domain. Tiga hal itu baru muncul setelah halaman benar-benar hidup, dan ketiganya bagian dari pengalaman pengguna walaupun tidak ada di gambar mana pun.

Soal kecepatan, patokan Core Web Vitals di atas bisa dipakai sebagai syarat serah terima, bukan sekadar cita-cita. Tetapi jangan berharap berlebihan. Dokumentasi page experience (tab baru) milik Google menyatakan tidak ada satu sinyal tunggal, dan hasil laporan yang baik tidak menjamin halaman Anda naik ke posisi teratas. Relevansi isi tetap yang utama. Jadi kecepatan adalah syarat perlu, bukan syarat cukup, dan vendor yang menjanjikan peringkat satu dari perbaikan kecepatan saja sedang menjual sesuatu yang tidak bisa dia kendalikan.

Soal keamanan, catatan dari riset kami perlu ditempatkan dengan hati-hati. Satu penguji keamanan menulis bahwa dari beberapa situs buatan cepat yang pernah dia uji, sebagian punya masalah keamanan dasar yang menurut dia cukup mengkhawatirkan. Itu satu pengamatan praktisi, bukan keluhan pembeli yang dirugikan, jadi kami memakainya untuk menetapkan standar dan bukan untuk menakut-nakuti. Standar minimum yang pantas Anda minta: HTTPS aktif, backup otomatis dengan jadwal yang disebut, pembaruan rutin, dan proteksi dasar pada formulir. Kalau vendor memakai bantuan AI dalam prosesnya, itu wajar hari ini. Yang tidak wajar adalah hasilnya tidak diperiksa manusia sebelum tayang. Cara kerja kami dan hal-hal yang kami tolak ada di halaman tentang kami, dan pemeliharaan setelah tayang ada di layanan maintenance.

Soal kepemilikan, ini bagian yang paling sering baru terasa di tahun kedua. Domain, hosting, Search Console, dan Analytics sebaiknya terdaftar atas nama Anda sejak hari pertama, bukan atas nama vendor. Pertanyaan ujinya satu kalimat: "Kalau tahun depan saya pindah ke pihak lain, apa yang perlu saya minta dari Anda, dan berapa biayanya?" Jawaban yang sehat adalah daftar akses beserta angka nol. Kalau jawabannya berbelit, Anda sedang menyewa, bukan memiliki.

Cara menuliskan UI dan UX ke dalam kesepakatan sebelum uang berpindah

Sebagian besar sengketa desain yang kami dengar bukan soal selera. Sumbernya satu: tidak ada yang menulis kapan pekerjaan dianggap selesai. Maka tulis empat hal ini sebelum transfer pertama.

Tabel ini lebih lebar dari layar. Geser ke samping untuk melihat seluruh kolom.

Bagian revisi yang paling sering jadi jebakan. "Revisi sampai puas" terdengar murah hati, tetapi dalam praktiknya berubah jadi rem diam-diam, karena tidak ada yang berani menyebut batasnya sejak awal. Kami memilih menulis angka: 3 ronde untuk Landing Page dan Profil Usaha 5, lalu 4 ronde untuk Profil Usaha 10 dan Katalog. Yang tidak kalah penting adalah satuannya. Satu ronde di tempat kami berarti satu daftar tertulis yang dikirim sekaligus, bukan satu permintaan perubahan tunggal. Tanpa definisi itu, angka 3 bisa berarti tiga kalimat WhatsApp dan habis dalam sehari.

Dari 18 halaman vendor yang kami baca pada 20 September 2026, 3 mencantumkan tenggat dalam hari kerja dan 3 mencantumkan angka revisi. Dua hal lain berhenti di angka 0 dari 18: definisi tentang apa yang dihitung sebagai satu revisi, dan konsekuensi bila tenggat meleset. Sekali lagi, ini bacaan atas 18 halaman pada satu tanggal, bukan gambaran seluruh industri. Tetapi untuk Anda yang sedang membandingkan penawaran minggu ini, dua kolom kosong itu layak ditanyakan.

Kalau Anda ingin melihat bagaimana keempat hal itu ditulis terbuka di halaman jual, ada di daftar harga kami. Rincian cakupan per paket ada di halaman website company profile untuk usaha yang butuh banyak halaman, dan di halaman katalog pesan via WhatsApp untuk yang berjualan produk tanpa keranjang belanja.

Kesimpulan: UI menentukan kesan pertama, UX menentukan apakah pesan masuk

Kalau semuanya diringkas jadi satu kalimat: UI UX adalah pasangan ukuran, dan menilai halaman hanya dari salah satunya akan menyesatkan. Desain yang cantik tetapi menyembunyikan harga akan terlihat mahal dan menghasilkan sedikit percakapan. Halaman yang sangat fungsional tetapi berantakan akan membuat orang meragukan kerapian usaha Anda.

Mulailah dari yang paling murah dikerjakan. Buka halaman Anda di ponsel sendiri, hitung detik sampai terbaca, hitung gulir sampai harga muncul, dan hitung isian di formulir. Tiga angka itu sudah cukup untuk memulai percakapan yang jauh lebih produktif dengan vendor mana pun dibanding kalimat "kurang sreg aja".

Kalau Anda ingin halaman usaha Anda ditinjau dulu sebelum memutuskan apa-apa, kirimkan tautannya. Minta peninjauan desain dan UX lewat WhatsApp (membuka WhatsApp di tab baru), lalu Anda menerima catatan berisi temuan beserta urutan perbaikannya, bukan tawaran paket yang langsung dikirim.

Sumber

• Don Norman dan Jakob Nielsen, The Definition of User Experience (UX) (tab baru), Nielsen Norman Group. Dipakai untuk definisi UX dan contoh situs ulasan film.
• Jakob Nielsen, 10 Usability Heuristics for User Interface Design (tab baru), Nielsen Norman Group, terbit 24 April 1994 dan diperbarui 30 Januari 2024. Dipakai untuk heuristik nomor 1 dan nomor 6.
• Nielsen Norman Group, Scrolling and Attention (tab baru). Dipakai untuk angka 57 persen waktu melihat di atas gulir pertama dan 74 persen di dua layar pertama, dari lebih dari 130.000 fiksasi mata pada 120 partisipan.
• Google, Web Vitals (tab baru). Dipakai untuk ambang LCP 2,5 detik, INP 200 milidetik, dan CLS 0,1 pada persentil ke-75.
• Baymard Institute, Checkout Flow Average Form Fields (tab baru). Dipakai untuk angka 11,3 isian pada 2024, 11,8 pada 2021, 12,7 pada 2019, dan rekomendasi 8 isian.
• W3C, Understanding SC 2.5.8 Target Size (Minimum) (tab baru), WCAG 2.2 level AA. Dipakai untuk ukuran target minimal 24 kali 24 piksel CSS.
• Google Search Central, Understanding page experience in Google Search results (tab baru). Dipakai untuk pernyataan bahwa tidak ada satu sinyal tunggal dan hasil baik tidak menjamin peringkat.
• Google Search Central, Mobile-first indexing best practices (tab baru). Dipakai untuk pernyataan bahwa Google memakai versi seluler untuk pengindeksan dan peringkat.
• Riset internal kami: pembacaan 18 halaman vendor pembuat website Indonesia pada 20 September 2026, ditambah 45 kutipan keluhan pembeli dari 17 sumber publik (utas Reddit dan Kaskus, surat pembaca, forum hosting, dan ulasan Google Maps). Sampelnya kecil dan kualitatif, jadi dikutip sebagai hitungan dari 18 halaman dan sebagai jumlah kutipan beserta jumlah sumbernya, bukan sebagai persentase pasar.