Usability Heuristics & UI/UX — Sprint 4 Blog Azahra
Pada sprint kali ini, kelompok kami mencoba untuk menyelesaikan sprint goal yang sudah ditetapkan oleh product owner kami dari sprint pertama. Kami mengalami beberapa kesulitan dalam menyelesaikan salah satu PBI. Namun, setelah sesi sprint review yang diadakan dengan dosen dan product owner kami minggu lalu, kami berusaha untuk mengatur ulang target dan timeline kami. Selain itu, kami juga berusaha mengatur strategi yang akan kami lakukan jika kami masih mengalami kendala.
PBI yang kami targetkan untuk selesai berkaitan dengan Login/Register dan halaman Profil dari pengguna. Saya mendapatkan task yang berkaitan dengan halaman isi profil secara frontend dan salah satu komponen di halaman lihat profil. Sebagai hipster dari kelompok, saya juga terlibat dalam pembuatan mockup dari halaman-halaman yang saya sebutkan tadi. Hal-hal yang akan saya bahas berikutnya berhubungan dengan bagaimana saya mendesain halaman-halaman tersebut dan menerapkan beberapa usability heuristics menurut grup Nielsen Norman.
Usability Heuristics
Consistency
Konsistensi menumbuhkan familiaritas. Ketika pengguna sudah terbiasa dengan sebuah tampilan atau layout tertentu, maka pengguna akan lebih mudah dan nyaman untuk berinteraksi dengan platform yang kami buat. Penerapan yang saya lakukan untuk menjaga konsistensi dalam desain platform kami salah satunya adalah penggunaan layout navigation bar yang sudah umum dipakai secara luas di situs-situs yang lain. Hal ini saya terapkan agar pengguna tidak membutuhkan waktu yang lama untuk mencari akses ke halaman yang dituju.
Layout yang secara umum digunakan pada navigation bar menempatkan tombol untuk profil pengguna di sisi paling kanan. Akses untuk beranda biasanya ditempatkan di sisi paling kiri yang merupakan nama platform atau dapat juga berbentuk logo platform. Kemudian, tombol-tombol lain diletakan secara bersebelahan dirapatkan di sisi kanan navigation bar.
Selain itu, untuk menerapkan konsistensi, saya membuat bentuk, ukuran, dan penempatan tombol yang sama untuk serangkaian alur. Sebagai contoh, halaman login, register, dan pengisian profil memiliki komponen form. Untuk memudahkan pengguna, semua tombol pada halaman-halaman tersebut memiliki bentuk, ukuran, dan letak yang sama.
Error Prevention
Seringkali pengguna melakukan kesalahan secara tidak sengaja ketika berinteraksi dengan sebuah situs. Platform kami harus dapat memberikan pesan yang sesuai jika terdapat error atau mengembalikan kondisi sebelumnya kepada pengguna. Namun, akan lebih baik lagi jika pesan error tidak perlu dimunculkan dengan cara mencegah kemungkinan error yang terjadi.
Salah satu hal yang saya lakukan untuk mencegah pengguna melakukan kesalahan adalah pesan konfirmasi yang dimunculkan ketika pengguna mencoba untuk melamar pekerjaan. Hal ini berguna ketika pengguna secara tidak sengaja menekan tombol Lamar pada salah satu lowongan pekerjaan yang sebenarnya tidak ingin dilamar.
Saya juga mencoba untuk mencegah pengguna melakukan kesalahan dengan membatasi input apa yang dapat diberikan dalam pengisian form. Pada contoh berikut, saya memberikan batasan dalam pengisian tanggal dengan input tipe date yang disediakan oleh library redux-form. Dibandingkan dengan membebaskan pengguna memasukkan tanggal dengan format yang berbeda-beda, saya membatasi jenis input langsung dengan memunculkan pilihan menggunakan kalender.
Recognition
Platform yang baik dapat meminimalisir beban ingatan pengguna. Hal ini berguna untuk menghemat waktu yang dibutuhkan pengguna dalam melakukan sesuatu. Penerapan yang kami lakukan pada platform ConnectDot salah satunya adalah input box yang memberikan sugesti bersamaan dengan masukan yang diberikan pengguna di setiap karakternya.
Satu hal lain yang saya terapkan adalah penggunaan icon sebagai penyedia informasi tambahan selain teks. Secara umum, gambar lebih cepat ditemukan dan dipahami oleh manusia dibanding teks ketika sedang mencari informasi di sebuah halaman situs. Sebagai contoh, saya menggunakan icon pada halaman lowongan pekerjaan untuk menggantikan tulisan perusahaan, lokasi, dan waktu.
Minimalism
Informasi yang disediakan di sebuah halaman seharusnya sesuai dengan tujuan halaman tersebut tanpa menampilkan terlalu banyak informasi. Salah satu hal yang saya terapkan untuk mencapai hal tersebut adalah pada halaman Login dan Register. Saya berusaha untuk menampilkan komponen yang diperlukan saja yaitu form dan sedikit ilustrasi. Dibandingkan dengan halaman yang menyediakan form bersamaan dengan informasi lain, lebih mudah untuk melihat fokus dari halaman tersebut.
Selain itu, di halaman cari kerja, saya hanya menampilkan informasi yang penting mengenai lowongan pekerjaan. Informasi yang saya tampilkan di halaman utama hanya posisi pekerjaan, perusahaan, lokasi, waktu, dan tenggat waktu pendaftaran lamaran. Informasi selengkapnya mengenai lowongan pekerjaan tersebut saya tampilkan di sebuah pop-up agar informasi yang tersedia di sebuah halaman tidak terlalu banyak.
UI/UX Awareness
Pengembangan aplikasi pada era teknologi ini memiliki arah yang fokus kepada pengguna. Perusahaan tidak lagi dapat menentukan kesuksesan dari aplikasi yang ditawarkan kecuali dengan mengetahui apa yang sebenarnya penggunanya inginkan. Tidak peduli seberapa baik sebuah perusahaan membangun aplikasinya, jika pengguna tidak dapat menggunakan aplikasi tersebut dengan baik maka bisnis tersebut tidak akan berkembang. Arah pengembangan bisnis yang semakin customer-oriented ini kemudian berkontribusi pada pentingnya User Interface (UI) dan User Experience (UX).
User Interface
UI berkaitan dengan elemen visual dari sebuah aplikasi. Elemen tersebut merupakan media bagi pengguna untuk berinteraksi dengan aplikasi. Halaman, tombol, input box, dan tampilan lain yang digunakan oleh pengguna untuk mendapatkan respon tertentu dari aplikasi merupakan contoh dari elemen UI. Seorang UI designer bertanggung jawab dalam bagaimana aplikasi tersebut dipresentasikan dan sebaik mungkin membuat aplikasi terasa responsif serta interaktif.
User Experience
UX berkaitan dengan bagaimana perasaan dan pengalaman pengguna dalam menggunakan sebuah aplikasi. UX fokus untuk menyediakan kerangka dari aplikasi seperti bagaimana alur yang akan dilalui oleh pengguna dan elemen apa saja yang akan ditampilkan ketika pengguna ingin mencapai tujuan tertentu. Dibanding dengan UI, UX lebih berkaitan dengan hal-hal yang teknis seperti usability, accessibility, dan performance.
Sebuah aplikasi dapat memiliki UI yang baik, yaitu terlihat bagus secara visual dengan desain yang menarik. Namun, jika pengguna kesulitan berinteraksi dengan aplikasi karena UX yang buruk, maka aplikasi tersebut tidak dapat membawa keuntungan.
Design Guideline
Design guideline merupakan bentuk komunikasi secara visual yang dilakukan dalam sebuah tim untuk menyampaikan tujuan dan kerangka desain. Penting bagi setiap anggota tim, baik itu developer mau designer, untuk dapat memahami dan mengimplementasikannya dengan baik. Design guideline dibuat bukan untuk membatasi kreatifitas dari designer, melainkan hanya memberikan pedoman desain agar konsistensi desain tetap terjaga sehingga product branding dapat dipertahankan.
Implementasi pada ConnectDot.
Sebagai hipster dari kelompok saya, saya membuat design guideline untuk platform ConnectDot. Lebih tepatnya, saya membuat UI design guideline di mana saya membuat pedoman mengenai komponen dan elemen yang digunakan oleh ConnectDot. Referensi yang saya gunakan untuk membuat design guideline adalah dari website designmodo.com.
Secara UX, saya berusaha untuk menerapkan usability heuristics seperti yang saya bahas di atas dan di blog saya pada sprint pertama.
Referensi:
