Prinsip prinsip dalam merancang User Interface salah satunya adalah minimal surprise yang berarti

User Interface (UI) sangat esensial dalam interaksi manusia dan komputer. Alasannya, UI mampu membuat informasi yang disampaikan melalui sistem lebih mudah dipahami melalui bantuan tampilan.

Perancangan UI tidak bisa asal-asalan. Ada sederet prinsip dasar yang perlu diikuti. Sedap dipandang saja tidak cukup.

Suatu tampilan sistem harus benar-benar dirancang sedemikian rupa supaya bisa mengakomodasi fungsi tertentu secara maksimal.

Apa saja prinsipnya? 🤔

Enam prinsip dasar perancangan User Interface saya jelaskan berikut ini.

1. Konsistensi

Sebagai UI Designer, Anda perlu memastikan pengguna akrab dengan tampilan sistem. Konsistensi memainkan peran penting di sini.

Tiap bagian harus “berbicara” menggunakan bahasa desain yang sama. Selain terlihat konsisten karena serupa antara satu dengan lainnya, kesesuaian bisa memudahkan pengguna ketika melakukan interaksi.

Lihat contohnya pada gambar di bawah ini. Mana yang lebih baik?

Tentu sebelah kanan.

Selain lebih sedap dipandang, konsistensi bentuk dan susunan informasi seperti contoh di atas bisa mengurangi (bahkan menghilangkan) kebingungan pengguna saat melakukan interaksi dengan sistem.

Hasilnya, pengalaman pengguna pun jadi jauh lebih baik.

2. Familiarity

Secara umum, manusia mudah mengingat hal-hal yang pernah bersinggungan dengan mereka. Ingatan ini bisa Anda manfaatkan ketika merancang tampilan UI.

Caranya adalah dengan membuat desain tampilan yang memiliki elemen atau hirarki serupa tampilan sistem atau aplikasi lain.

Ingat, tujuannya bukanlah mencontek. Bukan juga ikut-ikutan.

Sebaliknya, sebagai UI Designer, Anda harus bertumpu pada pertanyaan, “Apakah pengguna cukup familiar dengan desain seperti yang saya buat?”

Jangan lupa, pastikan elemen atau hirarki yang Anda terapkan telah bekerja dengan baik ketika diaplikasikan dalam konteks lain.

Unsur kebaruan memang penting untuk dipertimbangkan. Akan tetapi, kebaruan bisa menjadi bumerang apabila pengguna merasa asing dengan tampilan yang Anda buat. Skenario terburuknya, tampilan yang harusnya memudahkan malah semakin menyulitkan pengguna.

Mari lihat contoh aplikasi Gmail dan Twitter versi mobile. Keduanya menggunakan Floating Action Button (FAB) di sudut kanan bawah untuk memudahkan pengguna melakukan tindakan.

FAB seperti ini sudah kerap diterapkan di banyak aplikasi sehingga, harapannya, pengguna tidak lagi kebingungan dengan fungsinya.

Pada Gmail, FAB digunakan untuk menulis email. Sementara itu, Twitter memanfaatkannya untuk membuat tweet baru.

3. Feedback

Dalam konteks perancangan interaksi, feedback bertujuan untuk memberi tahu pengguna akan konsekuensi dari suatu tindakan.

Fungsi ini krusial karena mampu membuat suatu desain visible dan understandable.

Semuanya menjadi jelas. Pengguna menjadi sepenuhnya paham apa yang sedang terjadi dan mampu memperkirakan apa yang akan terjadi setelah melakukan tindakan.

Mari lihat contoh pengaplikasian feedback. Misalkan Anda mengizinkan pengguna untuk mengunggah file. Anda dapat menyisipkan informasi berisi perkiraan waktu yang diperlukan untuk mengunggah file tersebut.

Contoh lain adalah ketika pengguna ingin melakukan pembatalan tindakan melalui sistem. Anda dapat menambahkan halaman pop-up konfirmasi seperti gambar di atas.

Selain konfirmasi tindakan, di sini Anda juga memberikan kesempatan pengguna mempertimbangkan kembali suatu tindakan.

4. Sederhana

Salah satu prinsip desain UI yang terdengar mudah tapi seringkali sulit dilakukan: sederhana. Singkat, padat, dan jelas.

Sebagai UI Designer, Anda perlu membuat segalanya sesederhana dan senyaman mungkin bagi pengguna. Anda harus memangkas apapun yang tidak benar-benar diperlukan.

Lihat dua contoh tampilan formulir isian berikut. Mana yang lebih baik?

Formulir pendaftaran yang berbelit-belit bisa membuat frustasi. Bukannya tertarik, pengguna malah bisa jadi tidak akan mau mengisi sama sekali.

Kecuali benar-benar diperlukan, format dan tampilan formulir isian bisa dirancang lebih sederhana.

Tidak ada pengguna yang ingin membuang waktu untuk interaksi tidak perlu. Berpeganglah pada pemikiran ini.

Karenanya, pertimbangkan informasi apa saja yang harus dimasukkan terlebih dahulu. Utamakan yang penting-penting saja.

5. Hak Kontrol Pengguna

Tempatkan pengguna sebagai pihak yang memiliki kontrol atas tindakan mereka sendiri.

Apapun yang ingin mereka lakukan pada sistem, sebisa mungkin seorang UI Designer mampu mengakomodasikannya melalui tampilan yang baik.

Perilaku pengguna harus menjadi acuan utama. Biasanya, insights terkait perilaku tersebut didapatkan dari UX Designer maupun UX Researcher.

Mari ambil contoh hak kontrol pengguna dalam skenario checkout.

Setelah memasukkan barang ke dalam shopping cart dan beralih ke halaman checkout, Anda akan melihat jumlah barang yang akan dibeli.

Di sini Anda memiliki pilihan untuk menambah kuantitas atau menghapus barang (tidak jadi membeli). Jika pun salah melakukan input, Anda masih dapat mengubahnya. Kesalahan menjadi reversible.

Tidak ada yang “terlanjur” karena Anda masih dapat mengubah rincian pesanan hingga benar-benar yakin ingin melakukan transaksi.

Angka yang menunjukkan kuantitas barang, tombol penambahan, dan tombol pengurangan ketika checkout tersebut adalah contoh penerapan hak kontrol yang baik.

Prinsip hak kontrol ini memerlukan perkiraan tindakan apa saja yang mungkin dilakukan pengguna dan meletakkan elemen desain sesuai konteks di tempat yang mudah dijangkau.

Tentu saja, perkiraan akan lebih akurat jika didukung dengan data.

Contoh lain adalah advance control.

Dalam banyak situasi, sistem yang diakses melalui piranti desktop atau laptop lebih mudah dioperasikan karena memiliki keyboard fisik.

Sebagai UI Designer, Anda dapat memanfaatkannya. Misalnya, untuk proses penyalinan teks, gambar, atau obyek.

Selain tombol tindakan berupa menu di layar tampilan, Anda dapat mengaktifkan tombol shortcut CTRL + C untuk menyalin dan CTRL + V untuk menempel.

Inilah advance control. Anda meletakkan elemen yang diperlukan pengguna sesuai dengan perilaku mereka.

6. Responsif

Ketika merancang sistem yang dapat diakses melalui beragam jenis gawai sekaligus (misalnya desktop, smartphone, dan tablet), seorang UI Designer perlu memastikan tampilan UI yang responsif.

Responsif di sini berarti desain UI harus tampil sama baiknya saat diakses dari mana saja.

Persoalan utamanya adalah screen size dan rasio resolusi. Perangkat desktop memiliki ukuran layar serta rasio resolusi yang berbeda dari smartphone. Begitu juga dengan tablet.

Rasio resolusi layar desktop saja bisa bermacam-macam. Ada yang berukuran 1366x768 pixel, ada juga yang menggunakan resolusi 1920x1080. Belum lagi macam-macam jenis smartphone dan tablet dari beragam manufaktur.

Di situasi ini, seorang UI Designer perlu memisahkan beberapa jenis layout berbeda, setidaknya untuk tiga kategori piranti utama: desktop, tablet, dan smartphone.

Semua kemungkinan harus dipikirkan tanpa kecuali. Semua jenis perangkat perlu mendapatkan perhatian yang sama.

Jika tidak, prinsip responsif ini tidak akan terpenuhi dengan baik. Atau, setidaknya, desain UI tidak akan maksimal mencapai obyektif yang diinginkan.

Serangkaian prinsip dalam perancangan tampilan User Interface tidak diciptakan untuk menyulitkan proses desain. Sebaliknya, prinsip yang ada berfungsi sebagai pedoman agar hasil desain lebih baik.

Tujuannya adalah keseimbangan antara estetika, kebutuhan sesuai perilaku pengguna, dan seberapa jauh suatu desain dapat benar-benar diimplementasikan.

Sampai jumpa di lain kesempatan! 👋