School of Information Systems

Mengenal Pola Desain UI

Pola desain UI merupakan sekumpulan pola yang memiliki nilai estetika indah dan berguna bagi penggunanya. Pola UI akan menjadi solusi untuk memecahkan masalah umum dan berkorelasi langsung dengan fungsi utamanya. Dalam membuat pola desain UI, seorang desainer dapat merasa hal ini mudah, namun juga bisa dirasa rumit. Mesikpun dinamakan sebagai “pola”, bukan berarti desain UI ini berupa template yang bisa langsung digunakan tanpa disesuaikan terlebih dahulu. 

 

Landasan Pola UI: Affordances (Keterjangkauan) dan Signifiers (Penanda). 

Keterjangkauan adalah apa yang dapat dilakukan oleh produk, sedangkan penanda merupakan isyarat visual yang dibuat untuk mengisyaratkan fungsi. Pada tingkat atomic, semua pola UI terdiri dari penanda yang menginsyaratkan keterjangkauan antarmuka. Keterjangkauan suatu produk dapat diketahui oleh pengguna dengan cara memberikan suatu petunjuk yang dapat ditangkap oleh pengguna dan dimengerti sebagai suatu hal yang dapat mereka lakukan. Penanda sendiri dapat menunjukan makna, berupa kata, bentuk, warna maupun gerakan. Penanda yang konsisten digunakan oleh website maupun aplikasi lain, akan membantu mengurangi penjelasan atas website atau aplikasi yang kita buat. 

 

Pola desain UI ini akan digunakan pada: 

  • Input dan Output 

Merupakan pola yang berhubungan dengan aktivitas input yang dilakukan oleh pengguna dan aktivitas output yang dilakukan oleh sistem sebagai umpan balik dari input yang dilakukan oleh pengguna. 

  • Navigasi 

Merupakan sebuah “panduan” yang akan membantu pengguna untuk melakukan hal yang sesuai dengan arah dari proses sistem.

  • Tata Letak Konten 

Tata letak konten penting dalam pembuatan pola desain UI karena berhubungan dengan bagaimana pengguna mengakses konten utama yang ingin mereka lihat pada suatu halaman yang harus menjadi titik fokus pada halaman tersebut. Sedangkan konten lainnya yang kurang penting akan diletakkan di tempat yang bukan utama.

  • Fitur Berbagi  

Pastikan website atau aplikasi yang dibuat, memiliki fitur berbagi. Lewat fitur ini, pengguna difasilitasi untuk membagikan apa yang mereka rasa bermanfaat ke berbagai sosial media yang menunjukkan kepercayaan pengguna terhadap sistem website atau aplikasi kita.

  • Insentif 

Merupakan pola yang memotivasi pengguna untuk melakukan interaksi. Hal ini bisa dibuat dengan cara membuat progress bar maupun metode gamifikasi. Melalui cara ini, pola desain memungkinkan adanya pembuatan kebiasaan berulang yang dilakukan oleh pengguna untuk meningkatkan kepercayaan pengguna.

  • Mengurangi Kegoyahan 

Pembuatan suatu website atau aplikasi perlu menampilkan konten tanpa kegoyahan maupun beban kognitif, sehingga mampu digunakan pengguna secara cepat dan nyaman. 

 

4 Proses Menemukan Pola Desain UI untuk Digunakan: 

  1. Menentukan masalah mana yang ingin diatasi. 
  2. Melakukan eksplorasi atau penelitian mengenai bagimana orang lain memecahkan masalah yang sama. 
  3. Memeriksa solusi yang digunakan pada sistem lainnya. 
  4. Membuat detail pola yang digunakan sehingga bisa digunakan kembali. 

 

Setelah menemukan pola desain UI untuk digunakan, berikut adalah cara memutuskan pola desain UI terbaik untuk diterapkan yang telah disusun oleh Melissa Joy Kung, pemimpin redaksi Technori. 

  1. Menentukan pola UX 
  2. Menentukan pola yang dapat digunakan dengan baik 
  3. Membuat daftar masalah yang dapat dipecahkan pola desain  
  4. Mengetahui waktu yang tepat untuk menggunakan pola 
  5. Mengetahui cara menggunakan pola 

 

Referensi: 

https://uxpin.medium.com/web-ui-design-for-the-human-eye-principles-of-visual-consistency-part-3-378ff264e76 

https://www.uxpin.com/studio/blog/use-right-ui-design-patterns/  

https://appkey.id/desain/design-ui/pola-desain-ui/#4_Jenis_Utama_Pola_Desain_UI  

Michelle Andriana