Seputar UI/UX Awareness.
UI/UX Awareness
Jika diterjemahkan secara kasar, arti dari UI/UX awareness yaitu pengetahuan atau kesadaran terkait UI/UX. Sederhananya UI/UX awareness bertujuan untuk memaksimalkan intuisi kita terhadap UI/UX yang bagus dan dapat membuat pengguna merasa nyaman.
Menurut pandangan saya, hal ini berkaitan erat dengan psikologi pengguna terhadap suatu produk. Sehingga, kita sebagai pengembang tidak perlu meneliti tentang hal ini, kita hanya butuh mengimplementasikan UI/UX yang bagus dan dapat membuat pengguna merasa nyaman.
Cara untuk mengimplementasikan hal tersebut adalah dengan mengikuti aturan desain (design guidelines) yang telah ada. Di internet banyak terdapat material-material yang mengacu pada suatu design guidelines, contohnya: MUI, MaterializeCSS, MaterialApp Flutter, dan lain-lain.
Design Guidelines
Design guidelines adalah kumpulan rekomendasi tentang cara menerapkan prinsip-prinsip desain untuk memberikan pengalaman pengguna yang positif dan menyenangkan serta konsisten pada setiap desain proyek yang berkaitan. Desainer menggunakan design guidelines tersebut untuk menilai bagaimana mengadopsi prinsip-prinsip seperti intuisi, kemampuan belajar, efisiensi dan konsistensi sehingga mereka dapat membuat desain yang menarik dan memenuhi dan melampaui kebutuhan pengguna.
Design guidelines biasanya dibuat oleh para ilmuwan psikologi yang belajar tentang memahami psikologi pengguna terkait suatu produk. Biasanya pada design guidelines mengatur tentang hal-hal yang berkaitan tentang: style, tata letak, komponen user interface, teks, aksesibilitas, dan lain-lain. Design guidelines disini hanya sebagai rekomendasi pemilihan komponen-komponen diatas bukan sebagai pedoman wajib lagi khusus.
Referensi:
Implementasi Pada Proyek Trique
Implementasi design guidelines pada proyek Trique kelompok Bismillah A! mengacu kepada dua design guidelines. Untuk aplikasi Trique yang berbasis web, kami menggunakan Material yang difasilitasi oleh React JS, yaitu: MUI dan design guidelines lainnya menggunakan MaterializeCSS. Kemudian, untuk aplikasi Trique yang berbasis mobile, kami menggunakan MaterialApp yang difasilitasi oleh Flutter. Berikut beberapa screenshot implementasi pada proyek Trique kelompok Bismillah A!:
Logo
Trique hanya memiliki satu logo pada akhirnya (karena sebelumnya yang diusulkan ada 2 logo). Logo final-nya bertuliskan siluet tulisan Trique, dengan huruf T-nya memiliki makna yang lebih dalam. Huruf T tersebut dapat bermakna seperti dua orang yang saling berhubungan, namun dihubungkan dengan antrian, karena bentuknya seperti pembatas tiang antrian. Hal tersebut sesuai dengan tujuan proyek Trique, yaitu menghubungkan pengguna dengan antrian yang dipermudah.
Color Palette
Pada proyek Trique, kami menggunakan warna-warna yang “lembut” dan nyaman dilihat, karena memang proyek ini mengedepankan simplisitas yang biasanya hanya menggunakan warna-warna yang “lembut” dan tidak terlalu banyak menggunakan warna-warna lainnya. Dan untuk proyek Trique basis warnanya adalah Vintage Red, tidak ada alasan spesifik untuk memilih Vintage Red, pemilihan Vintage Red murni karena alasan simplisitas yang telah disebutkan di atas.
Button
Pada proyek Trique, button yang digunakan mengikuti material yang difasilitasi oleh React JS, yaitu: MUI. Hal tersebut didasari karena material-material tersebut enak dan nyaman dilihat mata, apalagi sebagai pengembang, kita sangat mudah untuk menggunakan material tersebut. Sehingga kami putuskan untuk reuse material dari MUI.
Typography
Pada proyek Trique, font yang digunakan adalah Roboto dan Open Sans. Font Roboto digunakan pada deskripsi dan judul section dari proyek, sedangkan font Open Sans digunakan pada header card dari proyek. Alasan penggunaan font Roboto didasari dari tren penggunaan font Roboto yang kian menaik pada industri, mungkin alasannya karena font Roboto lebih menggambarkan font yang user-friendly. Kemudian, alasan penggunaan font Open Sans didasari dari kesan serius yang tergambar jelas oleh font Open Sans.
Penyempurnaan (Berkaitan Dengan Individual Review PPL)
Guideline Layouting
Guideline layouting merupakan adalah konsep desain yang digunakan untuk mengatur dan menjaga konsistensi dan struktur elemen desain dan tata letak dari suatu aplikasi aplikasi. Jadi, guideline layouting, dapat saya sederhanakan menjadi aturan-aturan yang mengatur struktur elemen (termasuk prinsip dapat diprediksi, konsisten, dan responsif) dan mayoritas aturan-aturan tersebut berkutat di sekitar margin & padding (walaupun tidak semua).
Implementasi pada proyek Trique
Untuk implementasi guideline layouting proyek Trique, sebenarnya tidak ada aturan khusus yang dibahas oleh kelompok untuk masalah ini, namun, sehubungan dengan kita menggunakan material yang telah difasilitasi oleh ReactJS, maka sebisa mungkin tampilan proyek kami mengikuti guideline layouting yang sudah tertera pada web material.io ini. Alasan menggunakan guideline layouting tersebut agar lebih serasi dengan material-material yang kita pakai.
Referensi: