Nah, untuk mempermudah melihat banyaknya komponen UI design, dikelompokkanlah menjadi 4 grup
1. Input Control
Kelompok ini memungkinkan user memasukkan atau memberikan informasi ke dalam sistem. Contohnya ketika kita membutuhkan data tanggal lahir user maka aplikasi harusnya menampilkan datepicker agar user dapat memilih tanggal yang sesuai dengan tanggal lahir mereka.
Kemudian data tanggal lahir user akan terkirim ke sistem ketika mereka menekan button “Submit”. Nah action button “Submit” ini juga termasuk ke kelompok Input Controls, karena action pada button ini yang akan mengirimkan value kepada sistem.
A. Button
Button dapat berupa text, icon atau bisa berupa keduanya. Untuk styling button, kita perlu tahu siapa user aplikasi kita. Hal tersebut akan menentukan style button yang kita pakai. Pada suatu halaman, terkadang kita membutuhkan dua button sekaligus. Button-button ini harus dibedakan agar user dapat berfokus kepada satu button utama yang mewakili action utama.
Untuk text, baik pada button maupun pada komponen lain, hindari menggunakan kata yang aneh atau tidak familiar bagi user. Batasi pula jumlah text agar aplikasi tidak terkesan penuh. Untuk kata berbahasa Indonesia, pastikan spellingnya betul ya. Temen-temen bisa cek di KBBI. Tips! Download KBBI di smartphone kalian biar bisa cek spelling text.
B. TextField
Pada umumnya user memberikan atau mengirimkan value kepada sistem dengan menginputkan text pada textfield. Ini sangat sering digunakan, contohnya pada saat user melakukan login atau registrasi akun baru.
Ada banyak jenis textfield yang digunakan untuk keperluan tertentu yang harus disesuaikan berdasarkan keperluan tersebut, misalnya textfield yang memungkinkan user untuk menginputkan nomor handphone. Pada textfield jenis ini kita harus mem-provide komponen pendukung lain yang dapat membantu user dalam menginputkan value yaitu kode negara.
C. Checkbox, Radio Button, Dropdown List dan List Box
Empat komponen ini cukup mirip, karena user menginputkan value dengan memilih salah satu atau beberapa value dari daftar value yang sudah tersedia. Kita harus paham kapan kita menggunakan checkbox, radio button, dropdown list dan list box.
Bagi user akan lebih mudah dan cepat untuk memilih jenis kelamin dari checkbox dibandingkan dari dropdown list. Jadi ketika user hanya dihadapkan pada 2 hingga 3 value, lebih baik untuk menggunakan checkbox daripada dropdown list.
Untuk radio button, digunakan untuk value yang lebih bersifat “true” atau “false” dan “yes” atau “no”. Sedangkan untuk dropdown list, digunakan untuk memilih satu value dari daftar value lebih dari 4.
D. Date and Time Picker
Berdasarkan namanya, komponen ini sudah cukup jelas, bahwa komponen ini digunakan untuk memilih tanggal dan waktu. Yang perlu menjadi catatan adalah, dalam penggunaan date and time picker, kita harus membatasi date dan time yang dapat dipilih oleh user.
Contohnya ketika user menginputkan tanggal lahir dengan memilih tanggal pada date picker calendar. Tentu kita tidak akan membiarkan user memilih tahun kelahiran 1800an kaaan? Hehe.
2. Navigational Component
Komponen-komponen navigational ini membantu user untuk berpindah dari satu page ke page lain atau dari satu tab ke tab lain. Selain itu, user juga akan tahu dimana posisi dia berada. Contoh navigational component ini adalah bottom navigation atau bottom menu pada aplikasi mobile atau breadcrumb pada website.
A. Breadcrumb dan Pagination
Breadcrumb membantu user untuk mengetahui posisi mereka, serta memudahkan user untuk kembali ke page awal atau page lainnya dengan hanya satu klik. Breadcrumb umumnya berupa text yang mewakili suatu page atau berupa title page dan icon “next” yang menunjukkan flow dari page-page tersebut.
Serupa dengan breadcrumb, pagination juga membantu user untuk mengetahui posisi mereka. Pada pagination, berisi text yang lebih singkat seperti hanya nomor halaman dan diikuti dengan button “previous” dan “next” untuk membantu user berpindah ke satu halaman setelahnya atau sebelumnya.
B. Search Field
Komponen ini cukup sering kita lihat di aplikasi kan? Umumnya diletakkan pada posisi teratas suatu aplikasi. Penempatan search field harus sesuai dengan kebutuhan. Ketika search field adalah action utama pada aplikasi, lebih baik untuk menempatkannya di posisi terbawah pada screen karena akan lebih mudah diakses oleh user.
Search field ini sangat membantu user untuk mencari konten, informasi atau menu dengan langkah yang lebih singkat. User hanya perlu menginputkan keyword, kemudian menekan keyboard “enter” atau mengklik button “search”.
C. Slider atau Track Bar
Memungkinkan user untuk menginputkan atau mengatur value dengan menggeser satu atau dua bar. Pada umumnya slider atau track bar digunakan untuk menginputkan atau mengatur value bernilai numeric, namun tidak semua value numeric bisa diimplementasikan hanya dengan slider.
Pada case input atau set nominal harga, slider harus diikuti dengan textfield agar memudahkan user untuk mengatur value yang sesuai.
D. Icon
Pada kelompok komponen Input Controls kita telah membahas icon pada button. Icon ini sendiri bertujuan untuk membantu user untuk menavigasi suatu action. Icon ini harus benar-benar mensimbolkan atau mewakili suatu action terkait atau konten terkait.
Pastikan icon yang kita gunakan memiliki style yang serupa atau konsisten agar aplikasi terlihat rapi dan clean.
E. Image Carousel
Memungkinkan user untuk melihat beberapa konten dengan image dan text singkat. Biasanya image dan text bersifat clickable untuk menuju ke satu page yang berisi detail konten tersebut. Image carousel jumlahnya juga terbatas.
Pada aplikasi umumnya hanya berjumlah 3 hingga 5 konten, sehingga harus diikuti komponen lain berupa text clickable “view all” yang memungkinkan user untuk melihat seluruh konten yang tersedia.
3. Information Component
Information component memungkinkan user untuk memperoleh informasi dari suatu text atau bar. Informasi yang tertampil dapat langsung muncul pada suatu page di aplikasi atau melalui action tertentu melalui button atau text clickable.
A. Notifikasi
Notifikasi adalah informasi yang disajikan layaknya pesan yang selalu update tanpa user melakukan action tertentu. Notifikasi umumnya digunakan untuk mengindikasikan suatu kondisi atau item seperti sukses dalam pembayaran pembelian produk atau kegagalan dalam upload form pengajuan tertentu.
Notifikasi juga perlu dibuat menjadi 2 jenis yaitu notifikasi yang sudah dibaca dan notifikasi yang belum terbaca yang umumnya dicetak tebal atau bold.
B. Message Box dan Tool Tip
Dua komponen ini memiliki fungsi yang sama yaitu memberikan informasi kepada user yang tertampil dengan cara pop-up. Message Box umumnya tertampil pada window kecil yang terdiri dari title message, detail message dan action tertentu untuk melihat informasi lebih lanjut.
Sedangkan tool tip hanya informasi singkat yang terdiri dari beberapa baris dan posisinya tepat di atas atau bawah komponen lain pada aplikasi. Posisi tool tip berada diatas ketika informasi terdiri hanya 1 hingga 2 baris dan berada dibawah apabila tool tip terdiri dari 3 atau lebih baris.
C. Progress Bar
Progress bar mengindikasikan suatu posisi halaman atau step yang mewakili satu tujuan tertentu, misalnya registrasi akun baru yang terdiri dari 3 langkah, progress bar ini akan memberikan informasi kepada user bahwa registrasi terdiri dari 3 tahapan.
Masing-masing tahapan dapat disertai dengan title step register atau hanya berupa angka yang menandakan step 1 hingga 3.
4. Container
Container adalah kelompok komponen yang sering digunakan ketika informasi, konten atau sekelompok action terlalu banyak, sehingga beberapa elemen harus disembunyikan terlebih dahulu agar aplikasi tidak terkesan penuh dan user dapat fokus pada satu elemen yang sudah tertampil.
Kemudian apabila user menginginkan untuk melihat konten lain maka user dapat mengklik icon atau button “show” dan kemudian konten tersebut akan tertampil dan menyembunyikan konten lain yang sudah tidak relevan untuk dilihat.
Sumber Referensi : uiuxlibrary