UI Designer Merapat! Kenali Elemen UI Sebelum Membuat Desain

Last Updated on December 8, 2022 by

Aplikasi atau website hampir dibuka setiap hari oleh pengguna dan akan menampilkan tampilan pada aplikasi atau website tersebut. Hal-hal tersebut merupakan bagian dari User Interface (UI) atau rancang antarmuka. Pengguna dapat melihat logo, layout, button, warna yang digunakan, serta berbagai elemen UI lainnya pada aplikasi tersebut. Istilah UI pastinya sudah tidak asing lagi, apalagi dengan setiap harinya menggunakan handphone ataupun laptop. UI merupakan bagian visual dari software, hardware, website, dan aplikasi, sehingga dalam membangun website atau aplikasi tentunya tidak boleh luput adanya UI ini. UI dengan kata lain adalah jembatan penghubung interaksi antara produk dan pengguna. Jadi, tidak hanya mementingkan estetika, tetapi juga perlu memperhatikan dari segi fungsionalitasnya. Karena UI yang menarik dan indah menjadi tidak berguna jika pengguna kesulitan dan kebingungan dalam menggunakannya.

UI dikatakan baik jika memiliki karakteristik yang jelas, responsif, efisien, dan konsisten, serta familiar bagi pengguna. Sebagai UI designer, memahami elemen UI menjadi sebuah keharusan sebelum membuat desain yang user-friendly dan memudahkan pengguna berinteraksi dengan produk, serta dapat memenuhi karakteristik tersebut. Hal ini membantu dalam menyusun struktur aplikasi atau website menjadi lebih baik. Pada bahasan kali ini, Anda akan diajak menjelajah elemen-elemen UI yang sering digunakan dalam  membangun desain UI.

Pentingnya Elemen UI

Ketika menghadapi masalah, maka solusi apa yang seharusnya dipakai? Misalnya Anda dihadapkan sebuah requirement untuk menyajikan berbagai pilihan item dan pengguna dapat memilih lebih dari satu item, lalu di bawah ini terdapat beberapa elemen UI sebagai berikut.

• Radio button: memungkinkan untuk memilih satu pilihan.
• Checkbox: memungkinkan untuk memilih satu atau lebih pilihan.

Dari kedua pilihan elemen di atas, mana yang cocok untuk requirement tersebut? Tentunya checkbox yang paling tepat digunakan. Inilah yang membuat mengapa elemen UI itu penting untuk dipahami dan tidak boleh dikesampingkan agar UI yang dibangun sesuai dengan kebutuhan dan tidak hanya mementingkan estetika.

Elemen-Elemen UI

Elemen UI dibagi menjadi empat kategori yang masing-masingnya memiliki berbagai elemen. Elemen tersebut akan dijelaskan di bawah ini.

1. Input Control

Input control meng-handle berbagai input dari pengguna.  Elemen-elemen yang masuk dalam kategori ini, yaitu:

• Checkbox

Checkbox merupakan elemen dasar yang memungkinkan pengguna untuk memilih dua atau lebih pilihan secara bersamaan dengan mencentangnya atau menghapusnya. Elemen ini biasanya ditemukan ketika mengisi daftar formulir yang berbentuk kotak kecil.

• Radio Button

Hampir sama seperti checkbox, radio button juga digunakan untuk memilih, tetapi hanya satu pilihan dan berbentuk lingkaran berbeda dengan checkbox yang bentuknya kotak. Nah, misalnya ingin membuat form untuk jenis kelamin, maka elemen yang tepat adalah radio button karena pengguna hanya dapat memilih perempuan atau laki-laki.

• Dropdown List

Masih berhubungan dengan pilih-memilih, elemen ini bentuknya persegi panjang dan pilihannya tersembunyi, jika diklik akan muncul daftar item pilihan yang dapat di “dropdown”. Biasanya jika ingin menyajikan pilihan yang banyak, seperti nama provinsi bisa menggunakan elemen ini karena akan menghemat ruang.

• Button

Button umumnya berbentuk persegi panjang yang biasanya berisi label baik itu teks, icon, atau bisa juga keduanya. Button berguna untuk menangani setiap aksi pengguna seperti mengirim atau mengunggah dengan sekali klik. Misalnya, ketika ingin log in ke suatu aplikasi, setelah mengisi username dan password, di bawah form tersebut ada button yang berisi teks “log in”. Sehingga, ketika button tersebut di klik, maka akan masuk ke akun aplikasi.

• Text Field

Text field atau input field memungkinkan pengguna untuk memasukkan teks bisa dalam satu baris atau lebih. Teks yang lebih dari satu baris disebut text area.

• Toggles

Layaknya saklar lampu, elemen ini memungkinkan pengguna untuk menghidupkan atau mematikan (on/off) sesuatu. Elemen ini sering dipakai pada setting aplikasi atau website, seperti notifikasi. Jadi, toggles hanya memberikan satu pilihan saja.

2. Navigation Component

Kategori kedua adalah navigation component yang berfungsi untuk membantu pengguna dalam melakukan navigasi atau berkeliling pada produk, website, atau aplikasi dengan lebih mudah. Elemen-elemen yang masuk dalam kategori ini, antara lain:

• Navigation Bar

Umumnya, ketika membuka sebuah website, bagian yang terlihat paling atas terdiri dari berbagai pilihan navigasi. Itulah yang dimaksud dengan navigation bar, bagian dari website yang terdiri dari berbagai button navigasi dan memudahkan pengguna untuk mencari berbagai halaman atau section yang diinginkan, seperti about, profile, home, dan lainnya.

• Side Bar

Seperti namanya, list navigasi ini terletak di samping kiri atau kanan pada halaman website. Umumnya, side bars dapat di-hide atau dimunculkan jika diinginkan.

• Tab Bar

Khusus untuk smartphone, baik untuk aplikasi Android atau iOS, tab bar adalah bar navigasi yang letaknya di bawah layar yang memungkinkan pengguna untuk bolak-balik ke berbagai bagian aplikasi secara cepat.

• Accordion

Accordion merupakan elemen navigasi yang menyajikan list navigasi yang disusun vertikal. Elemen ini memungkinkan pengguna untuk memperluas dan menciutkan tiap navigasinya. Hal ini sangat membantu untuk menyajikan informasi yang banyak tetapi di ruang yang terbatas.

• Breadcrumb

Elemen ini sering dipakai yang letaknya di atas halaman. Breadcrumb memberikan pengguna jejak tautan pada situs website dan dapat diklik. Hal ini membantu memberikan informasi kepada pengguna terkait lokasi saat ini dan dapat berpindah dengan cepat ke berbagai bagian website.

• Carousel

Carousel memungkinkan pengguna untuk menelusuri lebih banyak detail konten hanya dengan mengklik gambar atau card pada website. Elemen ini umumnya menggunakan gambar yang di-hyperlink.

• Search Bar

Pada elemen ini memungkinkan pengguna untuk memasukkan kata kunci pada kotak search bar dan mendapatkan hasil relevan berdasarkan kata kunci tersebut.

• Tags

Hampir sama seperti search bar, tag membantu pengguna untuk mencari dan menemukan konten dalam kategori yang sama hanya dengan mengklik tag tersebut.

• Pagination

Elemen ini membagi konten di antara halaman yang memungkinkan pengguna untuk menelusuri halaman konten secara berurutan.

3. Informational Component

Kategori ini membantu dalam memberikan informasi kepada pengguna. Ada tiga elemen yang masuk dalam kategori ini, seperti:

• Tooltips

Tooltips sangat membantu pengguna dalam memberikan informasi, penggunaan, fungsi, atau nama suatu elemen. Informasi tersebut akan muncul ketika kursor diarahkan ke elemen yang diinginkan.

• Progress Bar

Elemen ini menunjukkan dimana pengguna berada saat melalui beberapa step dari suatu proses. Karena sebagai informasi, maka elemen ini tidak dapat diklik.

• Notification

Notification adalah elemen informasi yang memberikan pengguna pesan pemberitahuan jika terjadi perubahan, pembaruan, error, dan pesan lainnya agar pengguna dapat memeriksanya sesegera mungkin. Elemen ini biasanya dikirim secara otomatis setelah terjadi perubahan.

4. Container

Seperti namanya, container menyatukan konten-konten yang berkaitan satu sama lain sehingga dapat digunakan secara keseluruhan.

• Cards

Card merupakan elemen bagian dari container yang bentuknya persegi atau persegi panjang yang menampung informasi halaman berbeda, seperti button, teks, gambar dan lainnya, sehingga pengguna dapat menggunakannya secara bersamaan. Elemen ini membuat tata letak halaman menjadi lebih jelas. Karena itulah elemen ini populer dan dapat ditemukan di halaman web ataupun halaman aplikasi.

Itulah berbagai elemen UI yang perlu dipahami agar dapat membangun UI yang baik. Elemen-elemen tersebut tentunya disesuaikan dengan kebutuhan agar pengguna dapat dengan mudah dan nyaman meng-eksplore sebuah website ataupun aplikasi. Di samping itu, UI yang user-friendly akan meningkatkan bisnis produk.  Simak terus informasi lainnya seputar teknologi hanya di Appkey.id, ya!