School of Information Systems

UI Pattern Pyramid

UI Pattern Pyramid merupakan sebuah tingkatan dalam membuat pola desain UI yang dapat membantu UI designer dalam mendesain pola desain UI. UI Pattern Pyramid sendiri dibuat oleh Anders Toxboe, yang merupakan pendiri UI Patterns.com, sehingga tak jarang nama UI Pattern Pyramid dikenal sebagai Toxboe’s UI Pattern Pyramid. Menurut Anders Toxboe, pola desain UI dapat digunakan pada beragam level, dengan cara yang berbeda. UI Pattern Pyramid sendiri dibuat berdasarkan pada Anatomy of a Design Decision yang dibuat oleh Jared Spool, yang menurut Anders Toxboe masih ada poin penting yang tidak dibahas oleh Jared Spool.

Figure 1. UI Pattern Pyramid (source: UI Patterns) 

 

UI Pattern Pyramid terbagi menjadi 3 level, dimulai dari urutan tertinggi ke terendah yaitu level context (konteks), flow (alur), dan implementation (implementasi).

  • Implementasi 

Implementasi berada pada urutan terendah dalam piramida, implementasi disini bermakna bahwa dalam setiap pembuatan pola UI, maka perlu melakukan konsistensi pada setiap halaman website maupun aplikasi. Sehingga, kesepakatan akan penerapan suatu fitur beserta dengan desain yang akan dibuat membantu perwujudan konsistensi dalam desain. Untuk mencapai konsistensi ini, bisa dibuat suatu panduan yang disepakati dan digunakan bersama oleh tim desain, sehingga tidak timbul kesalahpahaman. 

Contohnya terdapat halaman yang ingin ditambahkan kotak pencarian, maka kotak pencarian tersebut bisa disepakati peletakannya. Apabila kesepakatannya berada di bagian tengah atas, maka seluruh halaman yang akan menggunakan kotak pencarian, harus meletakannya di bagian tengah atas masing-masing halaman. Begitu pula dengan kesepakatan desain lainnya untuk mendukung konsistensi desain. 

  • Alur 

Berbeda dengan implementasi yang bersifat taktis, aliran memiliki sifat strategis dan fungsional. Dalam pola alur ini, pengguna akan dibantu proses navigasi dari satu proses ke proses lainnya secara konsisten. Pada level ini, desainer memilih di antara 2 alternatif yang ada, antara memecahkan masalah yang sama namun mempengaruhi alur atau komposisi pengalaman yang bertentangan dengan konsistensi yang ada pada tingkat implementasi. 

Contohnya, pada tahapan registrasi, sebagai pengguna tentunya tidak ingin mengisi terlalu banyak data registrasi karena rumit dan memakan waktu. Namun, di sisi lainnya, sebagai perusahaan pastinya ingin tahu siapa pengguna aktif mereka lewat data-data registrasi tersebut. Melalui adanya 2 alternatif yang bertentangan ini, pola alu menjadi perlu dipertimbangkan setelah melakukan beragam implementasi.

  • Konteks 

Pada level tertinggi ini, menggambarkan konteks seperti apa yang ingin dibangun. Apakah website atau aplikasi dibuat untuk menjadi e-commerce, museum, majalah, portal berita, dan lainnya. Hal ini dikarenakan setiap konteks memiliki komponen atau objek masing-masing yang perlu dicantumkan dalam aplikasi maupun website mereka.

Contohnya pada sebuah e-commerce wajib memiliki tampilan produk yang dijual beserta dengan keranjang belanja. Sedangkan pada museum, perlu menampilkan karya dan pembuatnya.

  • Penggabungan ketiga level 

Penggabungan ketiga level ini melalui Toxboe’s UI Pattern Pyramid, menjadi suatu cerminan realistis mengenai proses pemilihan pola desain UI. Dimulai dari level paling tinggi, yaitu Konteks, yang menentukan konsep apa yang ingin diusung dalam pembuatan aplikasi maupun website. Kemudian lanjut ke level kedua yaitu merancang pola yang memudahkan navigasi ketika pengguna mengakses aplikasi maupun website. Level terakhir yaitu implementasi menjadi tahapan paling rinci dan mudah untuk menggabungkan seluruh komponen yang sudah dibuat. 

 

Referensi: 

Michelle Andriana