Pengalaman Penerapan Prinsip UI/UX dalam pengerjaan proyek aplikasi BisaGo
Pada blog ini, saya akan menjelaskan terlebih dahulu definisi dari UI/UX, lalu tentang prinsip desain antarmuka, bagaimana prinsip tersebut diterapkan pada proyek aplikasi BisaGo, serta bagaimana pengalaman saya menggunakan prinsip ini saat mengerjakan proyek aplikasi BisaGo.
Definisi UI/UX
User interface (UI) merupakan apapun dari seseorang yang mungkin
berinteraksi dengan menggunakan produk atau layanan digital. Desain UI merupakan proses pembuat desain gunakan untuk membuat antarmuka di perangkat software, berfokus pada tampilan, warna, layout atau gaya.
User experience (UX) merupakan proses untuk menciptakan produk yang memberikan pengalaman yang berarti dan relevan untuk pengguna. Ketika terdapat pengalaman tertentu saat pengguna berinteraksi pada suatu produk, maka pengalaman mereka, baik itu positif, negatif, atau netral, mengubah bagaimana pengguna rasakan tentang interaksi-interaksi tersebut. Desain UX merupakan proses yang tim desain gunakan untuk membuat produk yang menyediakan pengalaman yang berarti dan relevan untuk pengguna. Hal tersebut meliputi aspek usability, yang berarti pengukuran seberapa pengguna secara spesifik dalam konteks spesifik dapat menggunakan produk atau desain dengan mendapatkan tujuan tertentu secara efektif, efisien, dan memuaskan.
Dalam perancangan desain UI/UX, diperlukan guideline yang membantu kita dalam membuat keputusan. Guideline ini dapat dikatakan sebagai best practice dalam pembuatan desain antarmuka. Terdapat beberapa guideline yang dapat diterapkan dengan yang paling terkenal adalah 10 Heuristics for User Interface Design (Jakob Nielsen) atau Eight Golden Rules of Interface Design (Ben Shneiderman). Untuk blog ini, saya akan menggunakan prinsip 8 Golden Rules dan menjelaskan lebih dalam tentang isi prinsip tersebut.
Prinsip 8 Golden Rules untuk Desain Antarmuka
Berikut merupakan 8 Golden Rules dari Shneiderman beserta penjelasannya untuk membuat desain antarmuka dengan strategi efektif untuk interaksi antar manusia dan komputer yang mudah digunakan untuk pengguna:
Konsistensi.
Berjuang untuk konsistensi dengan menggunakan icon yang sudah dikenal, warna-warna hierarki menu, dan alur pengguna ketika mendesain situasi yang mirip dan urutan dari aksi. Dengan membuat informasi yang sudah dikenal secara umum membuat pengguna merasa lebih nyaman karena tidak perlu mempelajari representasi baru untuk tindakan yang sama. Konsistensi ini berperan penting untuk membantu pengguna menjadi lebih terbiasa dengan aplikasi yang mereka gunakan sehingga mereka mampu mencapai tujuan mereka dengan lebih mudah.
Shortcuts.
Melakukan tindakan yang semakin sedikit diperlukan seiring penggunaan semakin sering. Sebagai contoh, untuk Windows dan Mac menyediakan pengguna dengan keyboard shortcuts untuk copy dan paste, sehingga ketika pengguna semakin berpengalaman, mereka dapat menggunakan antarmuka lebih cepat dan meminimalkan usaha.
Feedback yang memberi informasi.
Pengguna harus tahu mereka sedang di mana dan apa yang sedang terjadi kapanpun. Untuk segala tindakan, feedback yang dapat dimengerti pengguna diperlukan setiap saat. Sebagai contohnya yang bagus adalah ketika pengguna tahu mereka sedang di halaman berapa saat melakukan kuesioner dengan halaman banyak. Contoh yang buruk adalah ketika pengguna diberi pesan error dengan istilah error yang tidak dipahami oleh pengguna.
Desain dialog untuk penutupan.
Jangan membiarkan pengguna menebak. Antarmuka harus memberi tahu tindakan yang baru terjadi telah membawa pengguna ke mana. Sebagai contoh, pengguna akan menghargai pesan “Terima Kasih” dan bukti resi pembelian ketika mereka baru menyelesaikan pembelian daring.
Menyediakan error handling sederhana.
Antarmuka yang baik harus dirancang untuk menghindari error sebisa mungkin. Namun ketika error itu terjadi, sistem kita harus mampu membuat pengguna paham permasalahannya dan bagaimana memperbaikinya. Contoh cara sederhana untuk menangani error ini adalah memberikan notifikasi error yang jelas beserta petunjuk yang jelas bagaimana menyelesaikan permasalahannya.
Mudah untuk mengembalikan tindakan.
Desainer UX harus membuat segala tindakan yang jelas buat pengguna untuk membalikkan tindakan mereka. Pembalikkan ini harus mengizinkan pada poin-poin bervariasi walaupun terjadi setelah satu tindakan saja, entri data, atau tindakan-tindakan terurut yang penuh. Menurut Shneiderman, fitur ini menurunkan kekhawatiran pengguna karena mereka tahu tindakan kesalahan dapat dimundurkan, sehingga mendukung mereka untuk mengeksplorasi opsi-opsi yang tidak biasa.
Menyediakan tempat kontrol secara internal.
Hal ini membiarkan pengguna merasa mereka memegang kontrol penuh untuk kejadian yang berlangsung pada aplikasi yang digunakan. Mendapatkan kepercayaan pengguna harus sama dengan saat desainer UX membuat sistem untuk bertindak sesuai ekspektasi mereka.
Menurunkan beban ingatan jangka pendek.
Perhatian manusia itu terbatas dan pengguna umumnya hanya dapat mengingat sekitar lima hal pada ingatan jangka pendek mereka di satu waktu. Oleh karena demikian, antarmuka harus sesederhana mungkin dengan hierarki informasi yang tepat, dan memilih pengenalan daripada ingatan. Mengenal sesuatu akan selalu lebih mudah daripada mengingat karena pengenalan meliputi hal-hal yang dapat membantu pengguna mencapai ingatan luas mereka dan membiarkan informasi yang relevan kembali. Sebagai contoh, orang sering merasa soal ganda lebih mudah untuk dijawab daripada soal isian pendek. Sebab, mereka cukup mengetahui jawabannya bukan mengingat dari ingatan mereka.
Penerapan Prinsip 8 Golden Rules pada Aplikasi BisaGo
BisaGo merupakan aplikasi mobile untuk mencari fasilitas dan komunitas di tempat publik yang ramah untuk penyandang disabilitas. Berdasarkan penjelasan dari prinsip 8 Golden Rules di atas, saya akan menunjukkan beberapa poin bagaimana aplikasi BisaGo menerapkan prinsip tersebut.
- Konsistensi.
- Warna hijau dan putih digunakan sebagai warna dasar dari aplikasi ini.
- Jenis dan warna font konsisten.
2. Shortcuts.
- Karena BisaGo merupakan aplikasi mobile, maka salah satu shortcut yang dapat dilihat adalah teks dapat dilakukan pilihan cut, copy, atau paste.
3. Feedback yang memberi informasi.
- Setiap halaman memberikan judul halaman sehingga pengguna tetap mengetahui sedang berada di mana.
- Contoh di bawah adalah pengguna sedang berada di halaman Agenda Kegiatan.
4. Desain dialog untuk penutupan.
- Ketika sedang berada di halaman Edit Profile, pengguna yang berhasil melakukan edit profile diberikan notifikasi dialog, yaitu “Update profile berhasil!”.
5. Menyediakan error handling sederhana.
- Pengguna yang belum mengisi bagian form wajib diberi notifikasi agar bagian tersebut wajib diisi.
6. Mudah untuk mengembalikan tindakan.
- Terdapat opsi untuk menghapus foto profil.
- Pengguna dapat kembali ke halaman sebelumnya dengan menyentuh tanda panah atau back di mobile mereka.
7. Menyediakan tempat kontrol secara internal.
- Pengguna dapat mengurut agenda kegiatan berdasarkan opsi yang mereka pilih.
8. Menurunkan beban ingatan jangka pendek.
- Terdapat halaman Riwayat Pencarian apabila pengguna ingin melihat kembali tempat-tempat yang sudah dicari sebelumnya.
Pengalaman saya menggunakan prinsip 8 Golden Rules saat mengerjakan proyek aplikasi BisaGo
Berdasarkan pengalaman saya sendiri saat mengerjakan proyek aplikasi BisaGo, selama 4 Sprint yang dilakukan, terdapat setidaknya dua PBI di antaranya, di mana saya harus memikirkan aspek UI/UX.
Yang pertama adalah saya harus menambahkan opsi Ubah Foto Profil pada halaman Edit Profile. Sebelum membuat opsi tersebut berada di bawah foto profil, saya menanyakan kepada stakeholder apakah sebaiknya fitur baru ini mengikuti fitur ubah foto profil seperti aplikasi Instagram, di mana opsi untuk ubah foto profil berupa teks di bawah foto profil, atau Twitter, di mana opsi untuk mengubah foto profil tersebut berupa ikon foto dan + di tengah foto profil itu sendiri. Lalu, karena stakeholder memilih agar fitur tersebut lebih mendekati aplikasi Instagram, saya membuatnya menjadi teks Ubah Foto Profil di bawah foto profil itu sendiri.
Yang kedua adalah saya harus mengubah desain menu, di mana sebelumnya terdapat opsi menu ke halaman Profile menjadi foto profil dengan nama pengguna, di mana ketika diklik akan mengarah ke halaman Profile. Bersama rekan saya, kami membuat dua pilihan mockup apakah di bawah nama pengguna terdapat teks Lihat Profil atau tidak. Selanjutnya, saya kembali menanyakan hal tersebut kepada stakeholder dan beliau memilih opsi terdapat teks Lihat Profil agar fitur tersebut langsung lebih jelas untuk pengguna.
Selain itu, setelah saya menyelesaikan membuat foto profil dan nama pada menu, saya mengalami masalah. Ketika foto profil tidak diisi, maka default gambarnya adalah inisial nama pengguna berwarna putih dengan latar belakang mengikuti warna hijau dasar seperti pada gambar di bawah.
Alternasinya, saya mengubah warna foto profil default tersebut dengan meng-invert warnanya, di mana warna teksnya menjadi hijau dan warna latar belakangnya menjadi putih. Namun, salah satu rekan saya menegur saya bahwa mengubah warna tersebut membuat gambar default pada foto profil ini menjadi tidak konsisten. Sebab, pada gambar-gambar default lain, seperti untuk gambar default kegiatan adalah warna hijau sebagai latar belakang dan warna putih untuk gambarnya. Lalu solusi lainnya adalah dengan memberikan border putih pada foto profil tersebut. Dapat dilihat pada gambar di bawah, di mana saya juga memperbesar font inisial nama pada foto profilnya agar lebih mudah untuk dilihat oleh pengguna.
Referensi: