UI/UX Awareness: Pemahaman Design Guideline LAPOR! dan Implementasinya
Halo semua! Pada blog kali ini saya akan membahas mengenai pemahaman tentang design guideline dan implementasi design guideline terhadap aplikasi LAPOR! yang sedang kami kembangkan.
Flashback: Design Guideline
Pada blog sebelumnya, saya sudah pernah membahas mengenai apa itu design guideline dan mengapa design guideline dapat bermanfaat untuk UI Designer. Singkatnya, design guideline atau panduan desain, merupakan sebuah dokumen yang mengatur ketentuan-ketentuan mengenai desain dari suatu aplikasi. Desain yang dimaksud adalah interface yang dimiliki oleh suatu aplikasi. Dokumen ini biasanya berisi penjelasan beberapa hal terkait desain, seperti color pallete, assets, icons, dan hal lainnya. Aplikasi yang kami kembangkan memiliki sebuah design guideline sederhana yang dapat dilihat pada gambar di bawah ini.
Dari manakah ide desain yang kami tawarkan berasal?
Dalam melakukan perancangan design guideline, tentunya diawali dengan sebuah ide desain. Kami memiliki beberapa referensi dalam mencetuskan ide tersebut, seperti dashboard admin pada umumnya (dapat dilihat beragam contohnya di internet) dan dari aplikasi milik Google. Keduanya memiliki nilai lebih dari segi UI maupun UX. Dari segi UI, kami merasa bahwa keduanya menghadirkan tampilan yang cukup simpel dan modern. Dari tampilan yang simpel dan modern tersebut kemudian mengarahkan kami ke segi UX yang dihadirkan, yaitu memberikan keleluasaan dan kemudahan bagi pengguna dalam memakai aplikasinya. Selain dari segi UI/UX, kami merasa bahwa dengan kami mengambil inspirasi ide dari kedua aplikasi tersebut, lalu menerapkannya ke dalam aplikasi kami, user akan merasa lebih nyaman dan lebih familiar dalam menggunakan aplikasi sehingga dapat meningkatkan usabilitas dari aplikasi ini.
Implementasi Design Guideline LAPOR!
Untuk mendukung implementasi dari design guideline tersebut, kami menggunakan Bootstrap, karena kami sudah familiar menggunakan Bootstrap. Lalu, kami juga membagi setiap komponen yang ada di dalam web menjadi komponen-komponen kecil dengan menggunakan react-component agar nantinya dapat digunakan kembali.
Dari design guideline yang sudah dijelaskan sebelumnya, kami memulainya dengan mengimplementasikan layout dan color template dari page.
Pada implementasi, ada perubahan yang terjadi, terutama di bagian header, karena setelah diimplementasikan, kami berpikir bahwa header berwarna putih akan lebih kontras, dan dapat membedakan mana area yang sidebar dan mana area yang header.
Selanjutnya, kami mengimplementasikan font style dan menggunakan icon-icon yang kami ambil dari Material.IO dan FontAwesome. Icon-icon tersebut tersedia secara gratis dan icon yang dihadirkan cukup lengkap dan deskriptif, sehingga kita bisa memilih icon yang tepat untuk menjelaskan beberapa tombol fungsionalitas.
Ada hal yang cukup mencolok dari design yang kami rancang dengan sistem LAPOR! yang sudah ada, yaitu tampilan laporan. Sebelumnya, tampilan laporan terlihat seperti gambar di bawah ini.
Tampilan tersebut menampilkan laporan secara utuh, mulai dari nama pengirim, judul laporan, isi laporan, dsb. Apabila isi laporan panjang, maka akan semakin sedikit laporan yang dimuat di dalam 1 halaman. Selain itu, dengan menampilkan detail laporan saat pertama kali page dimuat, maka dapat menimbulkan information overload, karena begitu banyak konten yang ditampilkan. Oleh karena itu, kami mengubah tampilan laporan tersebut menjadi seperti pada gambar di bawah ini.
Kami me-redisgn tampilan laporan, dengan hanya menampilkan nama pengirim, judul/isi laporan secara ringkas, dan tanggal laporan. Dengan desain seperti gambar di atas, kami berusaha agar informasi yang ditampilkan tidak terlalu banyak dan hanya menampilkan informasi yang penting saja. Dengan perubahan seperti itu, maka pengguna akan melakukan 1 step tambahan sebelum mengetahui isi dari laporan, yaitu mengklik kotak laporan yang diinginkan. Dengan tampilan yang lebih ringkas itu jugalah, jumlah laporan yang dapat dimuat dalam 1 halaman bisa menjadi lebih banyak.
Selain mengubah tampilan laporan, kami juga mengubah letak tombol fungsionalitas yang ada pada setiap laporannya. Sebelumnya, letak tombol fungsionalitas tersebut berada di bagian bawah. Kami kemudian memindahkannya ke atas dengan alasan agar lebih mudah terlihat oleh pengguna. Karena letaknya berubah, fitur form yang dipanggil oleh setiap tombol juga mengalami perubahan. Sebelumnya, form diletakkan di bagian bawah laporan, lalu setelah dilakukan perubahan, form diletakkan di dalam suatu modal.
Sekian blog dari saya, semoga bermanfaat!
