User Interface (UI) Adalah: Pengertian, Jenis & Contoh

Coba perhatikan panel di depan setang sepeda motor. Ada jarum kecepatan, lampu indikator bensin, lampu sein yang berkedip, dan tombol starter. Pengendara tidak perlu memahami sistem injeksi atau pengapian untuk memakainya. Cukup membaca panel dan menekan tombol, mesin di bawahnya menurut.

Komputer, ponsel, dan website bekerja dengan prinsip yang sama. Di balik layar ada prosesor, memori, dan jutaan baris kode yang tidak mungkin diajak bicara langsung oleh penggunanya. Jembatan di antara keduanya disebut user interface atau UI. Jadi, apa itu user interface? Secara singkat, user interface adalah bagian dari sebuah sistem yang dilihat, disentuh, didengar, atau diajak bicara oleh pengguna untuk memberi perintah dan menerima hasilnya.

Artikel ini membahas pengertian user interface, cara kerja, elemen, jenis, dan contohnya. Kita juga akan melihat UI Sistem di Android, cara antarmuka dirancang, dan cara menilai UI yang baik.

User Interface Adalah Titik Temu antara Manusia dan Mesin

User interface (UI) adalah titik tempat manusia dan sistem komputer saling bertukar informasi: pengguna memberi perintah, sistem menampilkan hasilnya. Dalam bahasa Indonesia, user interface disebut dengan istilah antarmuka pengguna. Secara harfiah, user interface artinya antarmuka bagi pengguna: user berarti pengguna dan interface berarti antarmuka. Kata "antarmuka" menggambarkan posisinya dengan tepat, yaitu berada di antara dua pihak yang tidak berbicara dalam bahasa yang sama.

Perlu diperhatikan, UI tidak terbatas pada tampilan di layar. User interface mencakup perangkat keras dan perangkat lunak. Dari sisi perangkat keras, UI berwujud keyboard, mouse, layar sentuh, tombol volume, hingga mikrofon. Dari sisi perangkat lunak, UI berwujud menu, ikon, kolom isian, dan pesan yang muncul di layar. Keduanya bekerja bersama: jari menekan kaca layar, lalu aplikasi menentukan tombol mana yang tersentuh.

Untuk memahami apa yang dimaksud dengan user interface, bedakan UI dari hal yang tidak terlihat. Saat Anda memesan tiket kereta lewat aplikasi, daftar jadwal dan tombol "Pesan" adalah UI. Proses mengecek kursi kosong, memotong saldo, dan mencatat transaksi berlangsung di belakang layar, sehingga bukan bagian dari UI. Tampilan aplikasi itu bisa dirombak total tanpa mengubah satu pun proses tersebut.

Sifat "bisa diganti tanpa mengganti mesinnya" inilah yang membuat UI layak dipelajari sebagai lapisan tersendiri. Kita akan melihat buktinya berkali-kali, dari Linux yang bisa berganti tampilan desktop sampai ponsel Android yang tampil berbeda di tiap merek.

Cara Kerja User Interface: Perintah Masuk, Umpan Balik Keluar

Setiap interaksi dengan UI, sesederhana apa pun, mengikuti siklus empat langkah yang sama:

1. Input: pengguna melakukan sesuatu, misalnya mengetuk tombol, mengetik, atau mengucapkan perintah.
2. Penerjemahan: UI mengubah tindakan itu menjadi perintah yang dipahami sistem. Ketukan di titik tertentu pada layar diterjemahkan menjadi "kirim pesan ini".
3. Pemrosesan: sistem menjalankan perintah, misalnya menyimpan data atau menghubungi server.
4. Umpan balik (feedback): UI menampilkan hasilnya, berupa tanda centang, bunyi, getaran, atau pesan galat.

Langkah keempat sering diremehkan, padahal justru paling menentukan rasa percaya pengguna. Tombol yang tidak berubah saat ditekan membuat orang ragu apakah perintahnya diterima, lalu menekan sekali lagi. Di aplikasi pembayaran, keraguan seperti ini bisa berujung pada transaksi ganda. Karena itu UI yang baik selalu memberi tanda, bahkan untuk proses yang belum selesai: ikon berputar, bilah kemajuan, atau tulisan "Memproses".

Siklus ini juga menjelaskan kenapa aplikasi bisa terasa lambat padahal servernya cepat. Kalau umpan balik baru muncul setelah pemrosesan tuntas, pengguna menatap layar yang diam selama itu. Banyak aplikasi mengatasinya dengan langsung menampilkan hasil sementara. Pesan chat, misalnya, langsung muncul di layar dengan satu centang abu-abu sebelum benar-benar terkirim.

Fungsi User Interface bagi Pengguna dan Pembuat Produk

Fungsi user interface adalah menjembatani kemampuan sistem dengan kebutuhan penggunanya, sehingga sistem bisa dipakai tanpa harus dipahami isinya. Kegunaan user interface ini terasa berbeda jika dilihat dari dua sisi.

Bagi pengguna, UI punya empat kegunaan utama:

1. Memperlihatkan apa yang bisa dilakukan: menu dan tombol menampilkan pilihan yang tersedia, sehingga pengguna tidak perlu menghafal perintah.
2. Menerima perintah dengan cara yang wajar: mengetuk, menggeser, atau berbicara, bukan menulis kode.
3. Memberi kepastian: status, notifikasi, dan konfirmasi menunjukkan apa yang sedang dan sudah terjadi.
4. Mencegah kesalahan: tombol "Hapus" yang meminta konfirmasi, atau kolom tanggal yang menolak 31 Februari.

Bagi pembuat produk, UI adalah alat kerja yang dampaknya bisa diukur:

1. Menekan salah pakai: setiap kesalahan yang dicegah UI berarti satu data keliru yang tidak perlu dibersihkan belakangan.
2. Mengurangi beban layanan pelanggan: formulir yang jelas menghasilkan lebih sedikit keluhan "kenapa gagal daftar?".
3. Menjaga identitas produk: warna, huruf, dan gaya ikon yang konsisten membuat produk mudah dikenali, bahkan hanya dari tangkapan layar.

Kedua sisi ini tidak selalu sejalan. Pembuat produk kadang tergoda memakai UI untuk kepentingannya sendiri, misalnya menyembunyikan tombol berhenti berlangganan. Sisi gelap ini kita bahas di bagian kelemahan.

Elemen User Interface dan Ukuran Minimalnya

Sebuah UI, serumit apa pun tampilannya, tersusun dari elemen yang bisa dikelompokkan menjadi lima jenis. Mengenali kelompok ini membantu Anda membaca layar mana pun dengan lebih sistematis.

1. Elemen input: tempat pengguna memasukkan data, seperti kolom teks, kotak centang (checkbox), tombol pilihan (radio button), penggeser (slider), dan menu tarik-turun (dropdown).
2. Elemen aksi: pemicu perintah, seperti tombol dan tautan.
3. Elemen navigasi: penunjuk arah di dalam aplikasi, seperti menu, bilah tab di bagian bawah layar, breadcrumb (jejak lokasi halaman), dan kolom pencarian.
4. Elemen informasi: penyampai keadaan, seperti label, ikon status, notifikasi, tooltip (keterangan yang muncul saat kursor diarahkan), dan bilah kemajuan.
5. Elemen wadah: pengelompok elemen lain, seperti kartu, jendela, dan modal (kotak dialog yang menutupi layar sampai direspons).

Di dunia pemrograman, elemen-elemen ini sering disebut widget atau komponen. Posisi masing-masing di layar diatur oleh layout atau tata letak.

Selain jenisnya, ukuran elemen juga punya standar yang bisa diukur. Tombol yang terlalu kecil membuat jari meleset ke tombol di sebelahnya. Tiga pedoman berikut paling sering dijadikan acuan:

Pedoman	Area sentuh minimal
WCAG 2.2 (level AA)	24 × 24 piksel CSS
Apple (iOS)	44 × 44 poin
Android	48 × 48 dp

Angka WCAG (Web Content Accessibility Guidelines, standar aksesibilitas web dari W3C) adalah batas bawah untuk halaman web. Angka Apple dan Android adalah rekomendasi untuk layar sentuh, dengan satuan poin dan dp (density-independent pixel) yang ukuran fisiknya tetap sama di layar berkerapatan berbeda. Kalau Anda merancang untuk ponsel, pakai 48 × 48 dp sebagai patokan aman. Ukuran itu setara sekitar 9 mm di layar, cukup untuk ujung jari orang dewasa.

Jenis-Jenis User Interface, dari Teks sampai Suara

Jenis-jenis user interface dibedakan dari cara pengguna memberi perintah. Tipe user interface yang paling umum ada tujuh:

1. Command line interface (CLI)
2. Menu-driven interface
3. Form-based interface
4. Graphical user interface (GUI)
5. Touch user interface
6. Voice user interface (VUI)
7. Natural user interface (NUI)

Ketujuhnya tidak saling menggantikan. Satu perangkat bisa memakai beberapa jenis sekaligus, misalnya ponsel yang punya layar sentuh, asisten suara, dan menu pengaturan berbentuk daftar.

Command Line Interface (CLI) dan Text-Based UI

CLI adalah antarmuka berbasis teks: pengguna mengetik perintah, sistem membalas dengan teks. Contoh yang paling dikenal adalah CMD di Windows dan Terminal di Linux atau macOS. Varian yang menampilkan menu dan kotak sederhana dari susunan karakter disebut text-based user interface atau character user interface. Contohnya layar pengaturan BIOS versi lama dan program instalasi Linux mode teks.

CLI terlihat kuno, tetapi tetap unggul untuk pekerjaan berulang dan pekerjaan jarak jauh. Satu baris perintah bisa mengganti nama seribu berkas sekaligus, dan perintah yang sama bisa disimpan sebagai skrip. Kelemahannya, pengguna harus tahu nama perintah yang tepat karena tidak ada tombol yang mengingatkan.

Menu-Driven dan Form-Based Interface

Menu-driven interface menyajikan daftar pilihan bernomor, dan pengguna cukup memilih salah satunya. Contoh yang akrab adalah menu kode USSD operator seluler saat Anda mengecek pulsa atau membeli paket data. Tampilannya hanya teks, tetapi pengguna tidak perlu menghafal apa pun karena setiap langkah menawarkan pilihan berikutnya.

Form-based interface meminta pengguna mengisi kolom-kolom yang sudah disediakan, seperti formulir pendaftaran atau pengisian SPT pajak daring. Kekuatannya ada pada validasi: sistem bisa langsung menolak NIK yang kurang dari 16 digit sebelum formulir dikirim.

Graphical User Interface (GUI)

Graphical user interface (GUI) adalah antarmuka yang memakai elemen grafis untuk berinteraksi, yaitu jendela, ikon, menu, dan penunjuk (pointer). Kombinasi keempatnya dikenal dengan singkatan WIMP (windows, icons, menus, pointer). Windows, macOS, dan desktop Linux seperti GNOME adalah contoh GUI yang dipakai sehari-hari.

Kekuatan utama GUI adalah pengguna cukup mengenali, bukan mengingat. Ikon tempat sampah langsung dipahami sebagai tempat membuang berkas, tanpa perlu tahu bahwa perintahnya di Linux adalah rm. Harga dari kemudahan ini adalah konsumsi sumber daya yang lebih besar, yang akan kita bahas di bagian kelemahan.

Touch UI di Ponsel dan Tablet

Touch user interface adalah turunan GUI untuk layar sentuh. Jari menggantikan pointer, dan gestur seperti menggeser, mencubit untuk memperbesar, atau menekan lama menggantikan klik kanan. Perbedaan pentingnya, layar sentuh tidak mengenal posisi kursor yang melayang di atas elemen (hover). Petunjuk yang di desktop muncul saat kursor diarahkan harus ditampilkan langsung di layar sentuh.

Voice User Interface dan Natural User Interface

Voice user interface (VUI) menerima perintah lewat suara, seperti Google Assistant, Siri, dan speaker pintar. Tantangan terbesarnya, pengguna tidak bisa melihat pilihan yang tersedia. Mereka harus menebak kalimat apa yang dipahami asisten, dan asisten harus mengulang perintah yang ditangkapnya sebagai umpan balik.

Natural user interface (NUI) meniru cara manusia berinteraksi secara alami, misalnya gerakan tangan, arah pandangan mata, atau gerak tubuh. Contohnya headset virtual reality yang dikendalikan dengan jari dan tatapan mata, atau konsol permainan yang membaca gerak tubuh pemainnya.

Perbedaan jenis-jenis ini paling mudah terlihat jika satu tugas yang sama dikerjakan lewat tiga antarmuka berbeda. Ambil contoh tugas mematikan Wi-Fi.

Sejarah Singkat: dari Baris Perintah ke Layar Sentuh

Perjalanan UI modern bisa diringkas dalam beberapa tonggak:

• 1963, Sketchpad: Ivan Sutherland membuat program yang memungkinkan orang menggambar langsung di layar memakai pena cahaya (light pen).
• 9 Desember 1968, demo Douglas Engelbart: di San Francisco, ia memperagakan mouse, jendela, dan tautan teks. Presentasi ini kemudian dijuluki The Mother of All Demos.
• 1973, Xerox Alto: komputer pertama yang memperagakan metafora desktop dan GUI.
• 1981, Xerox Star: produk komersial yang membawa ide Xerox PARC ke kantor, tetapi tidak laku.
• 1983 dan 1984, Apple Lisa dan Macintosh: Macintosh menjadi produk komersial sukses pertama dengan antarmuka banyak jendela.
• 1985, Windows 1.0: GUI untuk MS-DOS, yang baru benar-benar populer pada Windows 3.0 di tahun 1990.
• 2007, iPhone: mempopulerkan layar sentuh multi-touch yang dikendalikan langsung dengan jari, tanpa pointer.

Yang berganti selama enam dekade itu adalah wujud lapisannya. Siklus dasarnya tetap sama: input, penerjemahan, pemrosesan, umpan balik.

Contoh User Interface yang Anda Pakai Setiap Hari

Contoh user interface yang paling dekat dengan keseharian antara lain aplikasi ojek online, checkout marketplace, mesin kasir, gerbang KRL, dasbor mobil, dan asisten suara. Setiap halaman website yang Anda buka juga merupakan UI. Masing-masing contoh berikut memperlihatkan prinsip UI yang berbeda:

1. Aplikasi ojek online: titik jemput di peta bisa digeser dengan jari, sehingga elemen input sekaligus menjadi informasi. Setelah memesan, ikon motor yang bergerak di peta menjawab pertanyaan "driver sudah sampai mana?" tanpa pengguna perlu bertanya.
2. Checkout marketplace: ringkasan belanja, pilihan kurir, dan tombol bayar disusun berurutan dari atas ke bawah. Rincian ongkos kirim ditampilkan sebelum tombol bayar agar tidak ada kejutan di akhir.
3. Mesin EDC dan QRIS di kasir: UI-nya terbagi dua, layar untuk kasir dan kode QR atau papan tombol untuk pembeli. Bunyi "bip" saat transaksi berhasil adalah umpan balik yang bisa dikenali tanpa melihat layar.
4. Gerbang tiket KRL: UI fisik yang sangat sederhana, yakni satu area tap kartu dan lampu penanda. Dalam hitungan detik, penumpang tahu apakah boleh lewat atau tidak.
5. Dasbor mobil: memadukan jarum, layar sentuh, dan tombol fisik. Tombol fisik untuk volume dan pendingin udara tetap dipertahankan banyak pabrikan karena bisa ditekan tanpa melihat, hal yang penting saat mengemudi.
6. Asisten suara di ponsel: tidak ada tombol yang terlihat, sehingga asisten mengulang perintah yang ditangkapnya, misalnya "Menyetel alarm pukul 05.00", sebagai umpan balik.

Perhatikan bahwa hanya sebagian contoh di atas yang berupa layar. UI adalah soal cara manusia dan sistem bertukar informasi, apa pun wujudnya.

UI Sistem di Android: Fungsi, One UI, dan Pesan Error-nya

Pengguna Android sering bertemu istilah "UI Sistem" (sebagian orang menyebutnya sistem UI), entah di daftar aplikasi atau di pesan error. Bagian ini menjelaskan apa itu UI Sistem, fungsinya, dan cara menangani error-nya.

Apa Itu UI Sistem?

UI Sistem (System UI) adalah bagian antarmuka Android yang tetap tampil apa pun aplikasi yang sedang dibuka. Menurut dokumentasi Android Open Source Project, komponennya meliputi bilah status, panel notifikasi, dan Setelan Cepat (Quick Settings). Sisanya adalah layar kunci, bilah navigasi dengan tombol Kembali dan Beranda, serta layar aplikasi terbaru (Recents). Di daftar aplikasi, ia tercatat sebagai aplikasi sistem bernama "UI Sistem" dengan nama paket com.android.systemui.

Fungsi UI Sistem

Fungsi UI Sistem adalah menyediakan informasi dan kontrol tingkat perangkat yang harus selalu terjangkau. Contohnya jam, sinyal, baterai, notifikasi, serta tombol untuk kembali atau keluar dari aplikasi mana pun. Tanpa UI Sistem, setiap aplikasi harus membuat indikator baterai dan tombol kembalinya sendiri. Pengguna bisa terjebak di aplikasi yang lupa menyediakannya. Karena perannya sepenting itu, UI Sistem tidak bisa dicopot atau dinonaktifkan seperti aplikasi biasa.

One UI dan Lapisan Buatan Produsen Lain

Android yang sama bisa tampil sangat berbeda di ponsel merek lain. Samsung memakai One UI, Xiaomi memakai HyperOS, dan Oppo memakai ColorOS. Semuanya dibangun di atas Android, tetapi masing-masing produsen merancang ulang UI Sistem, ikon, menu pengaturan, dan animasinya.

Samsung memperkenalkan One UI pada 7 November 2018 di Samsung Developer Conference. Rancangannya sengaja menaruh konten yang paling sering disentuh di paruh bawah layar, supaya ponsel berlayar besar tetap nyaman dipakai dengan satu tangan. Inilah contoh paling nyata bahwa UI adalah lapisan tersendiri. Dua ponsel dengan versi Android yang sama bisa terasa seperti dua produk berbeda hanya karena lapisan antarmukanya.

Kenapa Muncul "UI Sistem Tidak Menanggapi"?

Pesan "UI Sistem tidak menanggapi" (System UI isn't responding) muncul ketika proses UI Sistem macet. Android menganggap sebuah aplikasi tidak menanggapi jika tidak merespons input selama sekitar 5 detik, lalu menawarkan pilihan untuk menunggu atau menutupnya. Pemicu yang sering dilaporkan pengguna antara lain peluncur (launcher) atau tema pihak ketiga dan widget yang bermasalah. Memori yang hampir penuh dan pembaruan sistem yang belum tuntas juga kerap menjadi penyebab.

Coba langkah berikut secara berurutan, dari yang paling aman:

1. Nyalakan ulang ponsel: sering kali cukup untuk macet yang terjadi sekali.
2. Perbarui sistem dan aplikasi: bug UI Sistem kerap diperbaiki lewat pembaruan perangkat lunak.
3. Hapus cache UI Sistem: buka Setelan > Aplikasi, tampilkan aplikasi sistem, pilih UI Sistem > Penyimpanan > Hapus cache. Pilih "Hapus cache", bukan "Hapus data".
4. Masuk Mode Aman (Safe Mode): mode ini menonaktifkan aplikasi dan tema unduhan. Jika error hilang, copot aplikasi, tema, atau launcher yang terakhir dipasang.
5. Reset semua setelan: mengembalikan pengaturan ke bawaan tanpa menghapus foto dan berkas.
6. Reset pabrik: upaya terakhir, dan hanya setelah data dicadangkan.

Nama menu di atas mengikuti ponsel Samsung. Di merek lain letaknya bisa sedikit berbeda, tetapi urutan langkahnya tetap berlaku.

Perbedaan UI dengan UX dan Sistem Operasi

UI sering disebut bersamaan dengan UX dan sistem operasi, padahal ketiganya berbeda cakupan. Dua perbandingan berikut paling sering ditanyakan.

User experience (UX) adalah keseluruhan pengalaman seseorang saat memakai produk, mulai dari mencari, belajar memakai, menyelesaikan tugas, sampai perasaan setelahnya. UI adalah salah satu penyusunnya, yaitu bagian yang dilihat dan disentuh. Ambil contoh perjalanan dengan KRL. Gerbang tap, papan jadwal, dan pengumuman stasiun adalah UI. Sementara itu, UX mencakup seluruh perjalanan: antrean, ketepatan jadwal, dan kenyamanan gerbong.

Aspek	UI	UX
Pertanyaan utama	Seperti apa tampilannya?	Apakah tujuan tercapai?
Wujud	Tombol, warna, ikon	Alur, waktu, kepuasan
Hasil kerja	Mockup, panduan gaya	Riset, peta alur

UI yang cantik tidak menjamin UX yang baik. Formulir yang rapi tetap membuat frustrasi kalau meminta data yang sama dua kali.

Perbedaan UI dan OS lebih mendasar. Sistem operasi adalah perangkat lunak yang mengelola perangkat keras dan menjalankan aplikasi. UI hanyalah salah satu lapisan di atasnya. Buktinya, server Linux umumnya berjalan tanpa tampilan grafis sama sekali, tetapi tetap merupakan sistem operasi yang utuh. Satu distribusi Linux juga bisa dipasangi tampilan desktop GNOME atau KDE, dan Android yang sama bisa tampil sebagai One UI atau HyperOS.

Bagaimana Antarmuka Dirancang: Wireframe, Mockup, Prototipe

Proses desain user interface yang baik jarang dimulai dari menggambar tampilan akhirnya. Umumnya ada lima tahap yang dilalui:

1. Memahami tugas pengguna: siapa yang memakai, apa yang ingin mereka selesaikan, dan di perangkat apa.
2. Wireframe: sketsa kasar hitam-putih yang hanya menentukan letak elemen, tanpa warna dan gambar. Prinsip tata letak paling banyak dipakai di tahap ini.
3. Mockup: tampilan statis yang sudah lengkap dengan warna, huruf, ikon, dan isi nyata.
4. Prototipe: mockup yang bisa diklik, lalu diuji ke calon pengguna sebelum satu baris kode pun ditulis.
5. Implementasi: developer membangunnya. Untuk website, strukturnya ditulis dengan HTML, tampilannya diatur dengan CSS, dan komponen interaktifnya sering dibuat dengan pustaka seperti React.

Urutan ini ada alasannya. Memindahkan tombol di wireframe cukup beberapa detik, di prototipe beberapa menit, tetapi di aplikasi yang sudah jadi bisa memakan berhari-hari kerja developer. Semakin awal masalah ditemukan, semakin murah perbaikannya.

Orang yang mengerjakan tahap kedua sampai keempat disebut UI designer. Tugasnya menentukan tata letak, warna, tipografi, ikon, dan perilaku setiap elemen. Hasilnya diserahkan ke developer dalam bentuk mockup dan design system, yaitu kumpulan aturan dan komponen baku yang dipakai berulang. Alat yang paling umum dipakai saat ini adalah Figma yang berjalan di browser, dengan alternatif sumber terbuka Penpot.

Sisi Lain Antarmuka yang Cantik: Kelemahan dan Pertimbangan

UI memudahkan, tetapi setiap kemudahan punya harga. Ada lima hal yang perlu Anda pertimbangkan, baik sebagai pengguna maupun pembuat produk:

1. GUI memakan sumber daya: menggambar jendela, animasi, dan bayangan membutuhkan RAM dan prosesor. Itulah sebabnya server umumnya dipasang tanpa GUI dan dikelola lewat CLI. Microsoft bahkan menyediakan opsi instalasi Windows Server Core yang tidak memiliki desktop.
2. Antarmuka menyembunyikan kemampuan: GUI hanya menampilkan pilihan yang disediakan pembuatnya. Pengaturan lanjutan sering hanya bisa diakses lewat baris perintah atau berkas konfigurasi.
3. Dark pattern: UI yang sengaja dirancang untuk menggiring pengguna ke keputusan yang merugikan dirinya. Contohnya tombol berhenti berlangganan yang disamarkan, kotak centang persetujuan promosi yang sudah tercentang, dan hitung mundur diskon palsu. Istilah ini dipopulerkan perancang Harry Brignull pada 2010.
4. Perubahan tampilan merusak kebiasaan: pengguna lama menghafal letak tombol, dan desain ulang bisa menghapus hafalan itu dalam semalam. Windows 8 (2012) menghilangkan tombol Start yang sudah dikenal sejak Windows 95. Tombol itu dikembalikan setahun kemudian di Windows 8.1.
5. Aksesibilitas tertinggal: teks abu-abu tipis, ikon tanpa label, dan tombol kecil menyulitkan pengguna lanjut usia atau berpenglihatan lemah. WCAG menetapkan rasio kontras minimal 4,5:1 untuk teks berukuran normal, tetapi banyak aplikasi yang tidak memenuhinya.

Poin ketiga dan kelima menunjukkan bahwa UI tidak netral. Antarmuka yang sama bisa dipakai untuk membantu atau untuk menjebak, tergantung pada niat pembuatnya.

Cara Menilai User Interface yang Baik dalam 15 Menit

Anda tidak perlu menjadi desainer untuk menilai kualitas sebuah UI. Cukup satu aplikasi, satu tugas, dan daftar periksa. Langkah berikut bisa diterapkan pada aplikasi, website, bahkan mesin fisik.

Langkah #1: Pilih Satu Tugas yang Nyata

Tulis satu tugas spesifik sebelum membuka aplikasinya, misalnya "mengganti alamat pengiriman di marketplace" atau "mengunduh bukti transfer bulan lalu". Tugas yang spesifik membuat penilaian bisa dibandingkan, sedangkan tugas yang kabur seperti "mencoba aplikasi" tidak.

Langkah #2: Kerjakan Tanpa Bantuan dan Catat Waktunya

Kerjakan tugas itu tanpa mencari tutorial. Catat berapa lama waktu yang dibutuhkan dan berapa kali ketukan. Untuk tugas sederhana seperti mengganti alamat, lebih dari 2 menit atau lebih dari 10 ketukan adalah tanda jalurnya terlalu panjang.

Langkah #3: Tandai Setiap Titik Ragu

Setiap kali Anda berhenti lebih dari 3 detik, salah ketuk, atau menekan tombol kembali, catat di layar mana hal itu terjadi. Titik ragu adalah temuan paling berharga, karena di situlah UI gagal memperlihatkan langkah berikutnya.

Langkah #4: Ukur Tombol dan Kontras

Periksa apakah tombol utama cukup besar, minimal sekitar 9 mm di layar ponsel atau setara 48 × 48 dp. Untuk teks, cek kontrasnya dengan alat gratis seperti WebAIM Contrast Checker dan pastikan rasionya minimal 4,5:1.

Langkah #5: Cocokkan dengan 10 Prinsip Nielsen

Jakob Nielsen merumuskan sepuluh prinsip usability (kebergunaan) pada 1994, dan Nielsen Norman Group terakhir memperbaruinya pada Januari 2024. Prinsip ini bisa diubah menjadi sepuluh pertanyaan ya atau tidak:

1. Status sistem terlihat: ada tanda saat proses berjalan?
2. Sesuai dunia nyata: bahasanya akrab bagi pengguna?
3. Kendali pengguna: ada tombol batal atau urungkan?
4. Konsisten: ikon yang sama selalu bermakna sama?
5. Mencegah kesalahan: input yang mustahil ditolak sejak awal?
6. Mengenali, bukan mengingat: pilihan terlihat, tidak perlu dihafal?
7. Fleksibel dan efisien: ada jalan pintas untuk pengguna rutin?
8. Estetis dan minimalis: bebas dari informasi yang tidak perlu?
9. Pesan galat membantu: galat menjelaskan cara memperbaikinya?
10. Bantuan tersedia: bantuan mudah ditemukan saat dibutuhkan?

Setiap jawaban "tidak" adalah satu masalah. Patokan praktis kami: tiga masalah atau lebih pada satu tugas sederhana berarti UI tersebut perlu diperbaiki, sebagus apa pun tampilannya.

Pertanyaan Seputar User Interface

User interface disebut juga apa?

User interface disebut juga antarmuka pengguna, atau cukup antarmuka. Dalam percakapan sehari-hari, singkatan UI lebih sering dipakai, terutama di dunia desain dan pengembangan aplikasi.

User interface mencakup perangkat keras dan apa?

User interface mencakup perangkat keras dan perangkat lunak. Keyboard, mouse, layar sentuh, dan tombol fisik termasuk UI perangkat keras. Menu, ikon, jendela, dan pesan di layar termasuk UI perangkat lunak.

Apakah UI sama dengan GUI?

Tidak. GUI adalah salah satu jenis UI, yaitu yang memakai elemen grafis seperti jendela dan ikon. CLI, antarmuka suara, dan tombol fisik juga termasuk UI meskipun tidak grafis.

Apakah UI hanya soal tampilan yang cantik?

Bukan. Warna dan ilustrasi memang bagian dari UI, tetapi fungsi utamanya adalah membuat perintah mudah diberikan dan hasilnya mudah dipahami. Tampilan yang indah tetapi tombolnya sulit ditemukan adalah UI yang buruk.

Apa bedanya UI dan front-end?

UI adalah rancangan antarmukanya, sedangkan front-end adalah kode yang mewujudkan rancangan itu di browser atau perangkat pengguna. UI designer menghasilkan mockup, lalu front-end developer menerjemahkannya menjadi HTML, CSS, dan JavaScript yang bisa dipakai.

Kesimpulan

User interface adalah lapisan penerjemah antara manusia dan mesin. Wujudnya bisa berupa baris perintah, jendela grafis, layar sentuh, suara, atau tombol fisik, dan lapisan ini bisa diganti tanpa mengganti mesin di bawahnya. Kualitas UI juga bisa diukur secara nyata, lewat umpan balik yang jelas, ukuran tombol yang memadai, kontras yang cukup, dan sepuluh prinsip Nielsen.

Pilih jenis antarmuka yang sesuai dengan penggunanya: GUI dan layar sentuh untuk pengguna umum, CLI untuk pekerjaan berulang dan server. Semoga artikel ini membantu.