UI Design (User Interface Design) adalah aspek penting dalam pengembangan produk digital yang menentukan bagaimana pengguna berinteraksi dengan antarmuka sebuah aplikasi atau situs web.
Dalam artikel ini, kita akan membahas 50 istilah penting seputar UI Design beserta contohnya, yang akan membantu kita memahami terminologi yang digunakan dalam UI. Yuk simak!.
Mau jadi UI Designer? Baca panduan lengkap UI Design berikut.
Daftar Isi
1. Alignment
Pengaturan elemen antarmuka secara visual agar sejajar satu sama lain. Contoh: Tombol dan teks pada sebuah form login yang diatur agar rapi secara horizontal.
2. Accessibility
Kemudahan aksesibilitas bagi pengguna dengan kebutuhan khusus, seperti tunanetra atau cacat penglihatan. Contoh: Penggunaan kontras warna yang tinggi untuk memudahkan pengguna dengan gangguan penglihatan.
3. Affordance
Karakteristik dari sebuah objek yang menunjukkan fungsinya atau cara penggunaan. Contoh: Tombol yang memiliki tampilan 3D untuk menunjukkan bahwa itu dapat ditekan.
4. Animation
Penggunaan pergerakan visual untuk meningkatkan interaksi pengguna. Contoh: Efek animasi saat menggeser layar pada aplikasi Instagram.
5. Banner
Area di bagian atas halaman web yang biasanya berisi informasi penting atau promosi. Contoh: Banner promosi untuk diskon musiman di situs e-commerce.
6. Button
Elemen interaktif yang digunakan untuk memicu tindakan tertentu. Contoh: Tombol “Kirim” pada formulir pengiriman pesan.
7. Call to Action (CTA)
Elemen yang dirancang untuk mendorong pengguna melakukan tindakan tertentu. Contoh: Tombol “Beli Sekarang” di halaman detail produk.
8. Card
Elemen antarmuka yang berisi konten yang terkait dan biasanya berdiri sendiri. Contoh: Kartu berisi gambar dan judul artikel pada halaman beranda sebuah blog.
9. Contrast
Perbedaan visual antara elemen-elemen pada antarmuka. Contoh: Penggunaan warna kontras yang tinggi antara teks dan latar belakang.
10. Drop-down menu
Menu yang muncul saat pengguna mengklik atau mengarahkan kursor ke elemen tertentu. Contoh: Menu drop-down untuk memilih negara pada formulir registrasi.
11. Feedback
Respon visual atau auditif yang diberikan oleh sistem terhadap tindakan pengguna. Contoh: Pesan sukses setelah pengguna berhasil mengirimkan formulir.
12. Grid
Kerangka atau struktur yang digunakan untuk menata elemen-elemen pada antarmuka secara konsisten. Contoh: Penggunaan grid 12 kolom untuk menyusun layout halaman web.
Mau jago Microsoft Excel? Simak panduan lengkap Excel di sini.
13. Hierarchy
Tata letak elemen-elemen berdasarkan tingkat kepentingan atau prioritas. Contoh: Penggunaan ukuran teks yang berbeda untuk menyoroti judul, subjudul, dan konten utama.
14. Icon
Simbol grafis yang mewakili fungsi atau konsep tertentu. Contoh: Icon keranjang belanja yang digunakan untuk menunjukkan halaman keranjang belanja pada situs e-commerce.
15. Input field
Area di mana pengguna dapat memasukkan atau memilih informasi. Contoh: Kotak input untuk email pada form login.
16. Interaction Design
Desain yang berkaitan dengan cara pengguna berinteraksi dengan sebuah produk digital. Contoh: Desain navigasi yang intuitif pada aplikasi mobile.
17. Interface
Titik kontak antara pengguna dan sistem, termasuk elemen-elemen visual dan interaktif. Contoh: Antarmuka pengguna pada aplikasi perbankan online.
18. Layout
Penataan visual elemen-elemen pada antarmuka. Contoh: Layout berbasis grid untuk mengatur posisi dan ukuran elemen.
19. Modal
Jendela pop-up yang muncul di atas konten utama untuk meminta tindakan pengguna. Contoh: Modal konfirmasi sebelum menghapus pesan pada aplikasi email.
20. Navigation
Sistem yang memungkinkan pengguna untuk berpindah antara halaman atau bagian dalam sebuah aplikasi atau situs web. Contoh: Menu navigasi di bagian atas
situs web yang berisi tautan ke halaman utama, produk, dan kontak.
21. Overlay
Elemen yang menutupi atau melapisi konten utama. Contoh: Overlay semi-transparan yang digunakan untuk menyoroti pesan penting pada halaman web.
22. Pagination
Pembagian konten menjadi beberapa halaman untuk mempermudah navigasi. Contoh: Tautan “Halaman Berikutnya” di bagian bawah halaman hasil pencarian.
23. Prototype
Model awal atau simulasi interaktif dari sebuah produk digital. Contoh: Prototype klik-tayang untuk aplikasi mobile yang memperlihatkan navigasi antarmuka dan fungsi interaktif.
24. Responsive Design
Desain yang menyesuaikan tampilan antarmuka sesuai dengan ukuran layar atau perangkat yang digunakan oleh pengguna. Contoh: Situs web yang menyesuaikan tata letaknya saat dilihat dari perangkat mobile atau desktop.
25. Scroll
Tindakan menggulir halaman untuk melihat konten yang tidak terlihat. Contoh: Menggeser layar ke bawah pada aplikasi berita untuk membaca lebih banyak artikel.
26. Slider
Elemen interaktif yang memungkinkan pengguna untuk memilih nilai dalam rentang tertentu. Contoh: Slider volume pada aplikasi pemutar musik.
27. Tab
Elemen navigasi yang memungkinkan pengguna untuk beralih antara konten yang terkait. Contoh: Tab “Overview”, “Reviews”, dan “Specifications” pada halaman detail produk.
28. Thumbnail
Gambar kecil yang mewakili konten yang lebih besar. Contoh: Thumbnail gambar produk pada halaman kategori e-commerce.
29. Typography
Pemilihan dan pengaturan jenis huruf pada antarmuka. Contoh: Penggunaan font sans-serif yang besar untuk judul pada situs berita online.
30. Usability
Kemudahan penggunaan dan pemahaman antarmuka oleh pengguna. Contoh: Antarmuka aplikasi yang intuitif dan mudah dinavigasi.
31. User Experience (UX)
Pengalaman keseluruhan pengguna dalam menggunakan sebuah produk digital. Contoh: Pengalaman yang lancar dan menyenangkan dalam berbelanja online.
Mau jadi UI-UX Designer? Cek panduan lengkap UI-UX Design berikut.
32. Vector Graphics
Grafik berbasis vektor yang dapat diubah ukurannya tanpa kehilangan kualitas. Contoh: Logo perusahaan yang menggunakan grafik vektor untuk fleksibilitas dalam penggunaan di berbagai media.
33. Visual Design
Estetika dan presentasi visual antarmuka. Contoh: Desain estetika yang bersih dan modern pada aplikasi pengelolaan tugas.
34. Whitespace
Area kosong atau tidak terisi di sekitar elemen-elemen antarmuka. Contoh: Penggunaan ruang kosong di antara elemen-elemen pada halaman web untuk meningkatkan keterbacaan dan fokus.
35. Wireframe
Rancangan awal yang menggunakan garis dan bentuk dasar untuk menggambarkan tata letak elemen-elemen pada antarmuka. Contoh: Wireframe halaman beranda situs web yang menunjukkan posisi header, konten utama, dan footer.
36. Gradient
Perubahan bertahap antara dua atau lebih warna. Contoh: Penggunaan gradien warna di latar belakang aplikasi mobile untuk memberikan efek visual yang menarik.
37. Favicon
Icon kecil yang muncul di browser atau tab aplikasi untuk mengidentifikasi situs web. Contoh: Icon logo perusahaan yang muncul di tab browser saat pengguna mengunjungi situs web.
38. Ghost Button
Tombol dengan tampilan transparan dan border tipis. Contoh: Tombol “Baca Lebih Lanjut” dengan latar belakang putih dan border abu-abu pada halaman artikel.
39. Gradient
Perubahan bertahap antara dua atau lebih warna. Contoh: Penggunaan gradien warna di latar belakang aplikasi mobile untuk memberikan efek visual yang menarik.
40. Hamburger Menu
Menu yang tersembunyi di sudut kiri atas atau kanan atas halaman web atau aplikasi. Contoh: Ikon hamburger menu yang memunculkan menu navigasi ketika diklik.
41. Hover
Tindakan mengarahkan kursor ke atas elemen antarmuka untuk menunjukkan interaksi. Contoh: Perubahan warna tombol saat diarahkan dengan kursor mouse.
42. Iconography
Penggunaan simbol atau gambar kecil untuk mewakili konsep atau fungsi. Contoh: Penggunaan ikon telepon untuk menunjukkan nomor kontak pada halaman web.
43. Infinite Scroll
Teknik pengguliran yang memungkinkan pengguna untuk terus menelusuri konten tanpa harus memuat ulang halaman. Contoh: Penelusuran konten di media sosial yang terus memuat postingan baru saat pengguna menggulir ke bawah.
44. Microinteraction
Interaksi kecil dan singkat antara pengguna dan antarmuka. Contoh: Animasi bintang yang muncul saat pengguna memberikan rating pada sebuah produk.
45. Motion
Penggunaan pergerakan atau animasi dalam desain antarmuka. Contoh: Efek animasi saat membuka aplikasi mobile untuk menarik perhatian pengguna.
Tertarik jadi Graphic Designer? Baca panduan lengkap Graphic Design di sini.
46. Onboarding
Proses memandu pengguna melalui fitur-fitur utama suatu aplikasi saat pertama kali digunakan. Contoh: Slideshow yang memperkenalkan fitur-fitur aplikasi saat pengguna pertama kali membuka.
47. Parallax
Efek visual di mana latar belakang bergerak dengan kecepatan yang berbeda dari elemen-elemen depan. Contoh: Efek parallax saat menggulir halaman web yang memberikan kedalaman visual.
48. Progressive Disclosure
Teknik menampilkan informasi secara bertahap untuk mengurangi kebingungan pengguna. Contoh: Menampilkan opsi tambahan saat pengguna mengklik “Lihat Detail” pada halaman produk.
49. Skeuomorphism
Penggunaan elemen desain yang meniru tampilan fisik asli. Contoh: Tombol yang dirancang untuk terlihat seperti tombol fisik yang sebenarnya.
50. Storytelling
Menggunakan narasi visual untuk menyampaikan pesan atau informasi kepada pengguna. Contoh: Penggunaan animasi atau ilustrasi berurutan untuk menjelaskan fitur-fitur produk dalam aplikasi.
Ini adalah beberapa istilah penting dalam dunia UI Design yang harus dipahami untuk mengembangkan produk digital yang sukses. Dengan memahami istilah-istilah ini dan bagaimana mereka diterapkan dalam UI Design, kita dapat menghasilkan pengalaman user yang lebih baik dan membangun produk yang lebih efektif dan menarik.
Mari terus belajar dan kembangkan skill di MySkill
Dibuat oleh tim MySkill, startup pengembangan skill dan karir terbesar di Indonesia. MySkill juga mendapatkan penghargaan dari LinkedIn sebagai Top Startup Indonesia pada 2022 dan 2023. Beberapa sumber referensi tulisan di blog MySkill seperti: Kompas, IDN Times, Forbes, Indeed, Semrush, Hubspot, AIHR, Nielsen Norman Group, Xero, Atlassian, Canva, W3, Grammarly dan sebagainya.