Design Guideline, Mapping, Freedom — Sprint 1 Blog Azahra
Nama saya Azahra Putri Andani, anggota kelompok PPL 19. Di perkuliahan PPL ini saya mengambil peran sebagai seorang hipster. Sejujurnya, peran ini adalah peran yang paling menantang bagi saya karena saya belum pernah menyentuh bidang desain secara profesional ataupun memiliki hobi mendesain. Tetapi terdapat banyak referensi yang bisa saya gunakan untuk mempelajari desain dari internet dan beberapa teman yang dapat membantu saya memahami hal-hal esensial dari desain. Saya berharap di akhir perkuliahan PPL nanti, saya bisa mendapatkan banyak ilmu baru di bidang pemrograman pada umumnya dan di bidang desain khususnya.
Pada sprint 1 ini, saya telah selesai membuat mockup untuk beberapa halaman pada proyek kelompok saya. Proyek kelompok saya adalah situs yang bernama ConnectDot yang merupakan platform untuk mencari kerja yang ditujukan khusus untuk masyarakat yang belum mengenyam pendidikan tinggi. Bersamaan dengan pembuatan mockup, saya juga membuat design guideline yang sudah saya terapkan pada halaman-halaman di mockup ini. Selain itu, mengikuti panduan UI/UX yang disediakan oleh perkuliahan PPL, saya mencoba mengimplementasikan secara bertahap Nielsen’s 10 usability heuristics.
Mockup & Design Guideline
Hal yang saya lakukan pertama kali sebelum memulai pembuatan mockup adalah mencari referensi dari situs lain yang menawarkan layanan yang mirip dengan ConnectDot seperti situs LinkedIn, karir.com, atau whitehat.org.uk.
Warna yang digunakan oleh situs-situs tersebut pada umumnya adalah warna biru yang merepresentasikan kepercayaan dan profesionalisme. Dipadu dengan warna hijau yang product owner kami inginkan setelah beliau melihat sebuah poster di tempat pertemuan kami saat itu, akhirnya saya memilih 2 warna untuk menjadi warna dasar untuk situs ConnectDot; biru dan hijau. Untuk mengurangi kesan monoton, saya menambahkan satu warna lagi yang kontras dengan 2 warna dasar tersebut; kuning.
Gradien biru dan hijau digunakan untuk membuat pengunjung lebih tertarik dengan ConnectDot karena gradien terlihat ‘segar’. Selain untuk mengurangi kesan monoton, warna kuning umumnya akan digunakan untuk membuat pengunjung fokus ke sebuah bagian yang penting dari situs kami. Sebagai contoh, kami ingin pengunjung dengan mudah menemukan lowongan pekerjaan di situs kami. Warna kuning pada tombol Cari Kerja di halaman landing page akan menonjol dan membuat pengunjung fokus pada tombol tersebut yang akan membawanya ke daftar lowongan pekerjaan yang tersedia.
Untuk typography, saya menggunakan 2 jenis font yaitu Poppins dan Quicksand. Awalnya saya hanya menggunakan font Quicksand, tetapi kemudian product owner kami menyarankan untuk menambah jenis font lain sebagai variasi dan penggunaannya disesuaikan dengan kebutuhan.
Terdapat beberapa jenis buttons yang saya gunakan untuk desain situs ConnectDot ini. Style yang digunakan menyesuaikan dengan komponen-komponen lain yang ada di halaman yang sama dengan buttons tersebut. Diusahakan buttons terlihat menonjol agar pengunjung situs dapat dengan mudah menjelajahi situs ConnectDot.
Asset yang saya gunakan untuk pengembangan situs ini masih terbatas dan mungkin akan saya tambahkan lagi seiring berjalannya sprint. Asset yang ada berfungsi untuk mengilustrasikan pekerjaan dengan menggunakan visualisasi manusia dan gambar-gambar yang berhubungan dengan pekerjaan, seperti gedung. Asset manusia yang saya gunakan adalah dari public library “humaaans” yang tersedia di internet.
Penerapan design guideline dalam bentuk code saya lakukan di beberapa file yang ditujukan untuk styling. Berikut adalah potongan contoh styling yang saya lakukan untuk buttons:
@import './variables';@import '~bootstrap/scss/bootstrap-grid';@import url(http://fonts.googleapis.com/css?family=Poppins|Quicksand);.Button { border: none; cursor: pointer; font-family: 'Poppins'; background-color: #ffffff; &:hover { background-color: #E4E4E4; } &--small { font-size: 1.5625em; width: auto; padding-left: 10px; padding-right: 10px; @include media-breakpoint-up(xs) { min-width: 166.5px; height: 63.42px; }; @include media-breakpoint-up(sm) { min-width: 138.75px; height: 52.86px; }; @include media-breakpoint-up(md) { min-width: 111px; height: 49px; }; }}
Mapping & Freedom
Dalam Nielsen’s 10 usability heuristics, terdapat aspek mapping dan freedom. Pada post blog kali ini, saya akan membahas penerapan dari dua aspek tersebut pada mockup yang sejauh ini telah saya buat.
Mapping adalah penyesuaian antara hal-hal yang ada di dunia nyata dengan hal-hal yang disediakan oleh sistem/situs. Aspek ini menyarankan untuk menggunakan istilah-istilah yang mudah dikenal oleh pengguna atau yang biasa digunakan oleh pengguna.
Label yang kami gunakan di buttons semaksimal mungkin kami hubungkan dengan tujuan yang ingin dicapai oleh pengguna. Sebagai contoh, pada bagian desain mockup landing page di atas, button yang akan membawa pengguna ke halaman yang berisi daftar lowongan pekerjaan diberi label Cari Kerja. Label tersebut secara deskriptif membantu pengguna mencapai tujuannya.
Selain itu, kami menyadari bahwa target pasar kami adalah masyarakat yang tidak familiar dengan Bahasa Inggris sehingga kami mengusahakan untuk selalu menggunakan Bahasa Indonesia, kecuali untuk hal-hal teknis yang sudah umum dikenal seperti istilah “login”.
Freedom adalah kemampuan pengguna untuk dapat melakukan hal yang dia inginkan dengan mudah, terutama ketika terjadi kesalahan navigasi halaman oleh pengguna. Pengguna harus merasa bahwa pengguna dapat mengontrol sistem dengan memberikan akses sebesar-besarnya untuk kembali ke halaman atau aksi yang sebelumnya ketika melakukan kesalahan.
Sebagai contoh, ketika pengguna menekan tombol Cari Kerja dari landing page maka pengguna akan diantarkan ke halaman daftar lowongan pekerjaan. Ketika pengguna ingin kembali ke halaman awal, di mana misalkan terdapat informasi lain yang masih ingin pengguna lihat, maka pengguna dapat mengakses navigation bar di bagian atas halaman dan menekan tombol Beranda.
Contoh lain, saya juga menyediakan button untuk keluar dari dialog box yang muncul agar pengguna dapat kembali melanjutkan proses mencari lowongan pekerjaan yang lain setelah melihat detail dari pekerjaan yang menarik.
