Tahukah kamu, apa tujuan dari pembuatan suatu situs web? Idealnya, sebuah situs web akan membantu pengunjung untuk menemukan informasi yang mereka cari. Sayangnya, masih banyak designer yang membangun website hanya dengan memakai font menarik, menu yang mereka sukai, serta button yang menurutnya paling keren. Tetapi, bagaimana jika pengunjung tidak begitu menyukainya? Di sinilah user interface masuk untuk memberikan ketertarikan terhadap para pengunjung website. Berbagai UI components harus dipertimbangkan berdasarkan proses riset dan testing ketika pembuatan website berlangsung. Elemen-elemen yang dipakai berperan sebagai core building untuk mewujudkan website maupun aplikasi terbaik di kelasnya.
User interface components merupakan elemen yang berguna untuk menambahkan aspek interaktif terhadap user interface. Selain itu, ketersediaan elemen-elemen mampu menyediakan titik kontak bagi user ketika melakukan navigasi di dalam laman web atau aplikasi. Beberapa contohnya adalah think buttons, scrollbars, checkboxes, serta menu items. Terjadi pembangunan terhadap bahasa visual untuk memastikan konsistensi dan user friendly pada seluruh aspek produk. UI perlu menjadi sarana kemudahan navigasi tanpa memberikan beban pikiran tambahan bagi user.
Sebagai UI Designer, sangat penting untuk memiliki pemahaman mendalam mengenai elemen UI dan cara user mampu berinteraksi dengan produk. Upaya ini akan membantu menyusun struktur aplikasi atau situs web yang lebih baik. Sesaat lagi, kamu akan menjelajahi beberapa elemen atau UI components yang umum dipakai sekaligus terminologi UI yang harus dipahami dengan baik oleh seluruh UI Designer.
Pembagian Kategori UI Components
Input controls
Kategori elemen ini memungkinkan user untuk memasukkan informasi ke dalam sistem. Input controls merupakan elemen interaktif yang memberikan kesempatan kepada user untuk memasukkan data menuju web atau aplikasi memakai teks maupun angka. Selain itu, user juga dapat memilih opsi berdasarkan radio buttons, checkboxes, maupun menu dropdown. Input controls juga termasuk upaya user dalam mengubah preferensi settings dan mengaktifkan atau menonaktifkan fitur tertentu.
Navigational components
Navigational components dapat membantu user untuk bergerak dan melakukan navigasi di dalam produk web atau aplikasi. Dengan begitu, mereka mampu memperoleh serangkaian detail dan informasi bermanfaat ketika menggunakan produk tersebut. Saat memulai pekerjaan pada navigasi, kamu perlu mempertimbangkan mode yang paling efektif. Misalnya, hamburger dan tab bars cenderung lebih cocok untuk perangkat seluler, namun sulit diadaptasikan menuju desktop. Berikan kemudahan pagi user yang berkunjung dalam mengidentifikasi menu dan memahami penggunaannya secara komprehensif. Beberapa contoh elemen dalam kategori ini adalah sliders, menu, tags, icons, dan search fields.
Informational components
Kategori elemen yang tergolong dalam informational components berfungsi memberitahu user mengenai berbagai hal yang sedang terjadi. Pembagian informasi ini merupakan cara efektif untuk melibatkan para user ke dalam produk tersebut. Salah satu komponen yang sering kamu temui dan bersifat sederhana adalah simple progress bar. Fungsinya adalah memberitahu waktu yang tersisa sampai suatu aktivitas produk dapat diselesaikan. Contoh lainnya dapat berupa notifications, message boxes, serta modal windows.
BACA JUGA: Mengenal 5 Design Thinking Process dalam UI/UX
Containers
Containers merupakan elemen yang berguna sebagai proses pengumpulan informasi. Kelebihan yang ditawarkan dalam aspek UI adalah menghemat ruang tanpa mengeliminasi beberapa informasi. Namun, user harus mengetahui cara untuk mengklik tab dan melihat berbagai informasi yang dimaksud. Perlu diperhatikan bahwa informasi penting sebaiknya harus dipertimbangkan secara hati-hati bila ingin dimasukkan ke dalam containers karena berpotensi tidak dibuka karena harus mengklik judul terlebih dahulu. Misalnya, penempatan promosi produk baru di halaman kedua carousel membuat user cenderung melewatkannya sehingga berdampak pada marketing campaign yang kurang menghasilkan.
Terminologi dan Glosarium UI Components
Accordion
Accordion memungkin user untuk memperluas maupun mengecilkan sections pada sebuah konten. Elemen ini membantu user dalam navigasi materi dengan cepat. Selain itu, UI Designer dapat memasukkan sejumlah besar informasi dalam ruang yang terbatas.
Bento menu
Bento menu terinspirasi dari makanan yang biasa disebut bento boxes. Elemen ini merupakan representasi dari menu yang memakai konsep item grid.
Breadcrumbs
Merupakan jejak link yang membantu user mengetahui posisi mereka pada laman produk saat ini. Breadcrumbs biasa kamu temui di bagian atas supaya halaman saat ini dan sebelumnya mudah dilihat user. Mereka juga dapat mengklik setiap subjek breadcrumbs untuk berpindah dari laman saat ini ke laman tujuan.
Button
Biasanya, button ditampilkan dengan bentuk-bentuk disertai label tertentu. Button memberitahu user bahwa mereka dapat melakukan suatu tindakan dengan mengklik objek tersebut, contohnya mengirimkan form yang sudah diisi lengkap.
Card
Merupakan elemen yang populer digunakan dalam beberapa waktu terakhir. Card merupakan modul berbentuk persegi yang berisi berbagai informasi dalam bentuk button, teks, media, dan sebagainya. Fungsinya sebagai entry point bagi user lewat penampilan berbagai konten secara berdampingan kemudian dapat diklik oleh user. Card dapat menjadi pilihan UI design yang bagus bila kamu ingin memanfaatkan ketersediaan ruang secara cerdas. Pengguna dapat menerima beberapa pilihan konten tanpa harus melakukan list scrolling.
Carousel
Carousel memungkinkan user untuk menelusuri sekumpulan konten, seperti gambar atau card. Sering kali kamu dapat memasukkan hyperlink menuju lebih banyak sources atau konten. Keuntungan yang ditawarkan oleh carousel adalah memungkinkan lebih dari satu konten untuk menempati ruang yang sama pada suatu halaman.
Checkbox
Dalam UI design, checkbox muncul berupa kotak persegi kecil yang dapat dicentang atau dihapus oleh user. Checkbox juga memungkinkan user untuk memilih lebih dari satu opsi yang tersedia dalam daftar. Biasanya, elemen ini mudah ditemui di dalam database dan formulir.
Doner menu
Pilihan tampilan menu berbentuk doner terdiri dari stacks berbentuk vertikal dari garis dengan panjang yang berbeda-beda. Ada garis terpanjang, garis lebih kecil, dan garis pendek di bagian paling bawah.
Dropdown
UI components ini memungkinkan user untuk memilih salah satu dari beberapa daftar item setelah mengkliknya.
Feeds
Feeds mampu menampilkan aktivitas user dalam urutan kronologis. Kontennya lebih bervariasi dan terdiri dari sekumpulan teks sederhana, gambar, maupun video.
Form
Elemen ini dapat mendukung user dalam memasukkan berbagai informasi terkait ke dalam sistem kemudian mengirimkannya ke sumber penyedia web atau aplikasi.
Hamburger menu
Tampilan menu yang terdiri dari tiga garis horizontal. Biasa ditemukan di bagian kiri atas aplikasi dan bila diklik akan muncul sekelompok navigation links.
Icon
Icon adalah gambar yang dapat digunakan untuk mengomunikasikan beberapa hal kepada user. Penggunaannya dapat memberikan informasi mengenai konten secara lebih baik, tidak monoton, dan mampu mendorong terjadinya tindakan tertentu.
Kebab menu
Model menu yang satu ini terdiri dari tiga titik vertikal dan merepresentasikan serangkaian pengelompokkan opsi pada laman web atau aplikasi.
Loader
Elemen loader dirancang untuk memberitahukan kepada user bahwa sistem sedang menyelesaikan suatu tindakan dan mereka harus menunggu selama beberapa saat.
Meatballs menu
Menu UI components ini terdiri dari tiga titik horizontal untuk menandakan bahwa ada lebih banyak pilihan tersedia dan bisa diketahui dengan mengklik titik menu tersebut.
Modal
Modal window adalah kotak berukuran kecil yang berisi suatu konten atau pesan. Elemen ini mengharuskan user untuk melakukan interaksi sebelum menutupnya dan kembali ke tampilan sesungguhnya. Ambil perumpamaan saat kamu ingin menghapus sebuah item dari smartphone yang sedang digunakan. Pesan konfirmasi yang muncul merupakan contoh bentuk dari modal.
BACA JUGA: Do’s and Don’ts dalam Dunia UI/UX Design
Notification
Kamu mudah menemukan elemen ini pada berbagai bentuk interface pada berbagai produk web maupun aplikasi. Notification memberikan informasi mengenai sesuatu yang baru kepada user untuk dibuka dan diperiksa. Tidak hanya pemberitahuan umum saja, elemen ini juga mampu menginformasikan adanya error occured atau proses instalasi yang tidak berhasil.
Pagination
Biasanya, UI components ini ditemukan di bagian bawah halaman web dan aplikasi. Pagination memungkinkan user mengetahui posisi laman saat ini kemudian perlu melakukan klik untuk berpindah ke halaman lainnya.
Progress bar
Progress bar mampu memberikan visualisasi posisi user dalam serangkaian langkah yang harus dikerjakan. Kamu bisa menemukannya di checkout page yang menandai berbagai tahapan untuk diselesaikan user dalam menyelesaikan pembelian berupa shipping dan billing.
Radio buttons
Sebagian masih menganggapnya sama dengan checkbox. Radio buttons merupakan elemen sirkular berukuran kecil yang memungkinkan pengguna memilih satu opsi saja di dalam daftar. Hal ini membedakannya dengan checkbox yang memberikan kesempatan untuk memilih beberapa opsi.
Slider controls
Slider adalah elemen umum dalam dunia UI design yang berfungsi untuk memilih atau menggeser rentang nilai berdasarkan preferensi user. Menggunakan slider dapat memberikan pengalaman untuk menyesuaikan sebuah nilai secara smooth dan bertahap. Contohnya adalah pengaturan volume, brightness, hingga rentang harga selama berbelanja online.
Tag
Pada UI design, tag membantu menandai dan mengkategorikan konten tertentu. Terdiri dari beberapa keyword yang relevan untuk memudahkan pengguna dalam menemukan konten paling sesuai. Tag biasa digunakan di situs web dan blog.
Penjelasan mengenai UI components di atas dapat kamu simpan dan pahami sebagai “buku saku” dalam membantu pembangunan produk web maupun aplikasi. Setiap elemen dapat dikombinasikan sesuai kebutuhan dan preferensi user. Jangan lupa untuk melaksanakan kegiatan riset dan development agar setiap aspek UI pada produk mampu menjadi solusi praktis serta efektif bagi para user di luar sana.
Ingin mempraktikkan pembangunan web atau aplikasi secara langsung menggunakan elemen-elemen menarik di atas? Belajar sekarang di Mini Bootcamp UI/UX Design dan jadilah profesional siap kerja hanya dalam 3 bulan hanya bersama Digital Skola.