50 Istilah Penting dalam UI Design dan Contohnya

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.

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