UI/UX Awareness: Pemahaman dan Implementasi Pedoman Desain

Prinsip dan Pedoman Desain Pengalaman Pengguna Untuk Mencapai Tujuan Kegunaan

Arga Ghulam Ahmad
AdHub Team
4 min readApr 17, 2019

--

Kini, desain merupakan salah satu aspek penting bagi pengembangan perangkat lunak. Desain merupakan salah satu aspek yang menentukan kesuksesan perangkat lunak. Desain bertujuan untuk membentuk dan meningkatkan pengalaman pengguna dalam menggunakan suatu aplikasi. Desain visual dapat diterapkan melalui ilustrasi, fotografi, layout, warna, efek, dan space. Desain bertanggung jawab pada kemudahan penggunaan produk dan tampilan yang aesthetics.

Design Guideline

Dalam mengembangkan aplikasi, tim pengembang harus mengikuti design guideline. Design guideline yang baik harus dapat memfasilitasi alur kerja yang kompleks, memungkinkan pengguna untuk memahami dan mengelola data yang kompleks, dan mengakomodasi berbagai peran, kebutuhan, dan proses. Oleh karena itu, design guideline berisi palet warna, aset, ikon, dan sebagainya. Design guideline berguna dalam menstandarisasi tampilan aplikasi, menjaga konsistensi, dan mengatur tata letak aplikasi.

Desain pada Aplikasi AdHub

Pedoman desain kami memanfaatkan bootstrap sebagai CSS framework. Bootstrap merupakan CSS framework open source yang diarahkan ke pengembangan web front-end yang responsive dan mobile-first. Bootstrap berisi CSS dan template desain berbasis JavaScript untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya. Dengan adanya bootstrap, Kami bisa menggunakan kembali komponen-komponen yang sudah disediakan oleh bootstrap. Sehingga, pengembangan aplikasi menjadi lebih mudah dan cepat.

Penerapan Desain Aplikasi Web pada Aplikasi AdHub

Dalam beberapa waktu terakhir, terdapat beberapa prinsip desain UX aplikasi web yang menjadi tren. Prinsip-prinsip desain UX aplikasi web yang telah diterapkan pada aplikasi AdHub yaitu

Sistem Navigasi Aplikasi AdHub

Pengguna harus selalu tahu posisi mereka saat ini di dalam aplikasi

Hal ini penting diterapkan pada aplikasi. Tujuannya adalah membuat pengguna aplikasi merasa nyaman. Cara untuk mengarahkan pengguna Anda melibatkan item menu yang disorot dan heading.

Sistem navigasi tetap konsisten

Sistem navigasi haruslah konsisten agar pengguna tidak bingung dalam menggunakan aplikasi. Bayangkan bila sistem navigasi tidak konsisten, tentu, pengguna akan frustrasi dalam menggunakan aplikasi.

Tangkapan layar fitur yang menunjukan bahwa sistem memandu pengguna untuk melakukan suatu tindakan.

Tindakan yang Dipandu

Dmitry Fadeyev points out that guided action can be used on a more subtle level by emphasizing key functions, controls, and buttons.

Secara umum, pengguna terbuka terhadap saran. Hal tersebut merupakan kabar baik, karena Kami dapat membuat aplikasi yang mendorong keterlibatan, interaksi, dan bahkan umpan balik yang lebih dalam. Pada aplikasi AdHub, kami memberikan petunjuk kepada pengguna apa yang dapat mereka lakukan pada setiap fitur. Dengan begitu, mereka akan lebih nyaman dalam menggunakan aplikasi ini.

Penerapan Guideline yang dibuat sendiri oleh Hipster AdHub

Tiga contoh dari berbagai pedoman desain AdHub
Hasil terapan pedoman desain AdHub

Dari gambar hasil terapan pedoman desain AdHub, Kita dapat melihat penerapan pedoman desain AdHub aplikasi AdHub. Sebagai contoh, tipografi diterapkan dengan baik sesuai dengan kebutuhannya. Seperti headline “Pasang Iklan” yang menggunakan h1 , title “Platform Iklan” yang menerapkan h2, dst. Dilihat dari segi warna, warna juga diterapkan dengan baik sesuai dengan yang ada pada pedoman desain. Pada progress menu, kita dapat melihat step menu yang sudah diisi berwarna hijau tua. Sedangkan. step menu yang belum diisi berwarna hijau muda.

--

--