Pernah nggak sih mikir kenapa tombol close pada window itu adanya di pojok kanan atas? dan kalau dipikir-pikir hampir semuanya sama ya nggak ada yang beda, kenapa ya? Yap, itu karena hal tersebut sudah tertanam kepada para pengguna perangkat lunak bahwa tombol close window berupa icon dengan bentuk ‘X’ dan berada di pojok kanan atas. Intinya adalah kebiasaan!
Memanfaatkan Kebiasaan
Bayangin deh kalo kalian membuka aplikasi yang tombol closenya ada di pojok kanan bawah, aneh bukan karena tidak terbiasa. Nah yang pastinya yang namanya kebiasaan itu sulit untuk di rubah karena hal tersebut sudah tersimpan di dalam alam bawah sadar. Maka dari itu dalam pengembangan perangkat lunak. alih-alih menyuruh pengguna merubah kebiasaanya, bagaimana kalau kita membuat flow aplikasi yang sesuai dengan kebiasaan penggunanya? hmm menarik bukan. Hal utama yang ingin dicapai dengan menerapkan metode ini adalah untuk mengurangi waktu penguna untuk mempelajari cara pakai dari aplikasi yang digunakan.
Menggunakan Standard Design
Secara umum terdapat beberapa kebiasaan yang universal pada tiap orang terhadap perangkat lunak. Maka dari itu terdapat pendekatan desain yang standard yang menyesuaikan kebutuhan dengan kebiasaan para peengguna secara umum.
Tentunya saya juga menerapknannya dalam proses pembuatan desain pengembangan perangkat lunak justika probono. Berikut adalah beberapa dontoh dtandard design yang saya gunakan
- Adanya Header Sebagai Pusat Kendali Serta Menu Kontol Akun pada bagian kanan header
Hampir semua situs web memiliki header pada bagian atasnya. Bagian ini umumya berfungsi sebagai pusat kendali atau navigasi terhadap fitur-fitur pada web. Selain itu apabila kita sudah login umumnya terdapat kontrol navigasi terkait dengan akun pada bagian pojok kanan atas. Website terkenal yang menggunakan metode ini antara lain Facebook, Twitter, dan bahkan Medium ini juga lho! Selain itu juga terdapat logo justika probono pada bagian kkri atas yangdapat diklik sehingga akan redirect ke halaman muka
2. Adanya Footer yang berisikan informasi dan link social media mengenai web
Apabila ingin mengetahui mengenai social media pada web pengguna umumnya terbiasa untuk mengecek bagian bawah yaitu footer. Maka dari itu saya juga membuat bagian footer ini untuk
3. Tombol Close pada popup window login terdapat di sebelah pojok kanan atas
Ini merupakan hal yang sangat umum dan sudah menajdi common sense dari pengguna perangakat lunak dari berbagai aplikasi web. Tentunya hal itu tak luput dari pembuatan desain justika probono.
4. Cukup menekan component card untuk memunculkan popup.
Pada awalnya untuk emmunculkan popup harus dilakukan klik terhadap teks readmore. Namun pada umumnya pengguna mengekspektasikan agar cardnya dapat diklik juga untuk memunculkan modal. Makad dari itu kami melakukannya.
5. Color Simplicity and Consistency
Pada web justika probono terdapat 2 warna utama yang digunakan. warna yang digunakan adalah warna biru dan juga oranye. Variasi dari kedua warna ini adalah dengan memanipulasi shadesnya. Namun selain itu ada juga warna tambahan yang digunakan untuk memaksinalkan standard desgin yang ada yaitu warna merah.
Warna tersebutpun memiliki fungsi masing-masing :
Oranye : untuk mennandai highlight dari suatu halaman dapat berupa komponen ataupun button yang penting
Biru : sebagai warna filler, menandakan bagian yang bukan merupakan highlight. Berguna juga agar warna iranye semakin kontrak dan menarik
Merah : untuk menandai komponen khususnya button yang memiliki intuisi fungsi sebagai batal, hapus, dan lain lain
5. Font Size and Formatting
Pada bagian header memiliki font yang lebih besar dibandingkan yang lainnya. Selain itu juga teks ini dibold agar dibaca perama kali pada saat pengguna melihat halaman. Standardnya suatu header harus memiliki ukuran seminimalnya 20px dan pada justika probono headernya menggunakan 32 px
Selain itu pada text field input pada standarnya seharusnya seminimalnya berukuran 16px agar mudah terbaca dan pada justika probono dipalikasikan ukuran 20px
Pada tesk paragraf sepeti pada card standardnya berukuran 13-14 px dan pada card digunakan sebesar 14 px agar terlihat perbedaan maksudn dari masing-masing teks.
