Desain UI yang Seharusnya Dihindari Tetapi Masih Digunakan

Apasih Desain User Interface itu?

Ketika mendengar tentang Desain User Interface (UI) maka hal pertama yang terbayang adalah bahwa desain UI akan mengacu pada visual elemen yang mana nantinya akan berinteraksi dengan pengguna sebuah aplikasi mobile, situs web, ataupun produk teknologi. Jadi fokus desain UI adalah tampilan atau style. Desain UI ini bertujuan untuk membuat sebuah interface (antarmuka) sebuah produk agar mudah untuk digunakan, dipahami dan pastinya juga menyenangkan saat kita menggunakan produknya :)

Menurut Interaction Design Foundation, Desain UI terbagi kedalam 3 format yaitu:

• Graphical user interfaces (GUIs) — Interaksi pengguna dengan representasi visual. Misalnya tampilan layar ponsel yang menampilkan menu, icon, tombol dan lainnya yang bisa berinteraksi dengan pengguna.
• Voice-controlled interfaces (VUIs) — Interaksi pengguna melalui suara mereka. Misalnya Siri, Google Assistant, Alexa dan yang lainnya.
• Gesture-based interfaces — Pengguna terlibat dengan ruang desain 3D melalui gerakan tubuh. Misalnya game virtual reality (VR).

Contoh Desain UI

Desain UI memiliki peran yang penting ketika kita membangun ataupun mengembangkan sebuah produk digital, kenapa begitu? Ibarat kesan pertama, maka interface inilah yang akan memberikan kesan pertama kepada pengguna. Tak hanya itu, desain UI juga menjadi tempat interaksi antara pengguna dan produk. Oleh karena itu, desain UI inilah tempat bagi para designer untuk merancang segala sesuatu yang akan membantu pengguna untuk berinteraksi dengan produk yang dipakai.

Masih menggunakan Desain UI ini?

Karena Desain UI merupakan salah satu elemen yang penting dalam pengembangan sebuah produk digital, maka Desain UI terus berkembang dan diperbaharui untuk tetap memberikan tampilan antarmuka yang mempermudah pengguna dalam berinteraksi dengan produk.

Berikut ini adalah beberapa Desain UI yang masih sering digunakan oleh para designer, tapi apakah kamu tahu kalau sebenarnya ada hal-hal yang kontra dari penggunaan UI ini. Mengapa demikian? Dan kira-kira hal apa saja yang membuat desain ini sebaiknya dihindari meskipun sering digunakan oleh para designer? Yuk kita bahas satu-persatu.

1. Long Dropdown

Dropdown digunakan ketika ada sejumlah opsi atau pilihan yang mana pengguna hanya diizinkan untuk memilih 1 pilihan saja. Dropdown sering ditemukan pada form yang harus di input oleh pengguna. Contohnya seperti gambar berikut ini:

Contoh Long Drop down

Long dropdown ini ternyata seringkali dirasa kurang begitu efisien oleh pengguna. Pengguna merasa tidak nyaman karena harus memilih dari list dropdown yang tampaknya tak terbatas. Hal ini pastinya akan membutuhkan banyak waktu, terlebih lagi kalau pengguna tidak yakin dengan apa yang mereka cari. Keberadaan long dropdown ini akan semakin buruk ketika pengguna hanya menggunakan keyboard.

Akan lebih baik apabila pada long dropdown disertakan filter ataupun pengelompokan, sehingga opsi yang ditampilkan tidak terlalu banyak. Selain menggunakan filter, bisa juga dengan menyertakan autocomplete, sehingga pengguna bisa meng-input apa yang mereka inginkan, kemudian akan muncul opsi yang dapat membantu pengguna untuk memilih berdasarkan data yang mereka input.

2. Hamburger Button

Hamburger button merupakan menu yang berisi daftar opsi. Button ini terdapat pada situs web dan aplikasi yang biasanya akan terbuka ke menu samping atau navigation drawer. Menu Hamburger pertama sekali dibuat oleh Norm Cox pada tahun 1981 untuk mempermudah berkomunikasi dengan pengguna bahwa tombol tersebut berisi daftar item.

Contoh Hamburger Button

Menu Hamburger khususnya pada aplikasi mobile telah menjadi perdebatan, ada pro dan kontra dalam penggunaannya. Menu Hamburger juga memiliki click rates dan engagement yang rendah. Hal ini dikarenakan sulit untuk dijangkau, semakin besar ukuran device maka menu hamburger ini juga semakin sulit dijangkau, mengingat posisinya selalu berada di atas (pojok kanan atau kiri).

Pengguna harus menyadari dahulu bahwa menu yang dapat membantunya tidak terlihat, sehingga hal ini akan menuntun pengguna untuk memilih menu hamburger sebagai letak menu yang tersembunyi. Apabila pengguna tidak menyadarinya, maka tombol ini tidak akan ditekan selain karena penasaran. Padahal sebuah sistem navigasi dikatakan intuitif apabila pengguna bisa dengan mudah mengetahui kemana harus pergi dan mudah untuk menemukan informasi yang mereka inginkan.

3. Carousel

Carousel memungkinkan konten yang banyak bisa menempati satu ruang saja, ruang yang sesuai dengan keinginan. Carousel sering digunakan untuk menempelkan banyak konten di sebuah halaman tanpa menghabiskan terlalu banyak ruang. Hal ini juga bisa menjadi solusi untuk permasalahan tingkat prioritas konten pada layar utama.

Contoh Carousel

Namun, Carousel sendiri juga memiliki kelemahan yakni harus diakses secara berurutan. Oleh karena itu pengguna harus melalui atau melihat semua item pada carousel satu-persatu untuk bisa sampai ke yang paling akhir dan interaksi ini tidaklah efisien.

Pengguna juga cenderung langsung melewati semua konten yang ada didalamnya, atau setidaknya hanya melihat yang pertama. Hal itu juga dapat menyebabkan kesalahpahaman, karena pengguna bisa saja mengambil kesimpulan yang salah hanya dengan melihat 1 gambar yang pertama saja.

Pengguna juga lebih sering langsung menggulir melewati semua konten yang ada didalamnya, atau setidaknya hanya melihat yang pertama. Hal itu juga dapat menyebabkan kesalahpahaman, karena pengguna bisa saja mengambil kesimpulan yang salah hanya dengan melihat 1 gambar yang pertama saja.

Penggunaan carousel untuk menghemat ruang memang sangat menggoda namun item pada carousel ini memiliki kemungkinan yang kecil untuk dilihat ataupun ditemukan. Tetapi jika tetap ingin menggunakan Carousel, berikut ini ada beberapa panduan untuk bisa membuat Carousel bekerja dengan baik menurut Kara Pernice dari Nielsen Norman Group:

1. Gunakan maksimal 5 frame dalam carousel, karena kecil kemungkinan pengguna akan mengaksesnya apabila lebih dari 5.
2. Gunakan teks dan gambar yang jelas
3. Tampilkan indikasi jumlah frame yang ada pada carousel dan frame mana yang sedang dilihat oleh pengguna
4. Pastikan kontrol navigasi muncul di dalam carousel, bukan di bawahnya atau dipisahkan.
5. Buatlah link atau button yang cukup besar untuk bisa di klik

Apakah desain-desain di atas masih sering kalian gunakan? Ataukah kalian punya pemikiran lain tentang penggunaan desain di atas? Yuk komen di bawah :) Terima kasih :)

Referensi:

User Interface Design:
https://www.interaction-design.org/literature/topics/ui-design

10 Classic UX Design Fails That Teach Us How Not To Do UX:
https://careerfoundry.com/en/blog/ux-design/10-classic-ux-design-fails/

Carousel Usability: Designing an Effective UI for Websites with Content Overload:
https://www.nngroup.com/articles/designing-effective-carousels/

What Is a Hamburger Menu Button?:
https://www.howtogeek.com/720214/what-is-a-hamburger-menu-button/

10 pros and cons of the hamburger menu (with examples):
https://www.invisionapp.com/inside-design/pros-and-cons-of-hamburger-menus/