Visual Design
Mendesain produk adalah pekerjaan yang harus dilakukan secara bertahap dan penuh dengan ketelitian. Kita tidak bisa mendesain sesuai dengan estetik yang kita inginkan, melainkan desain dibuat harus mempertimbangkan behaviour target pengguna aplikasi. Tentunya, membuat desain aplikasi yang memenuhi keperluan dan kenyamanan pengguna itu cukup sulit. Terdapat beberapa alat bantu yang dapat digunakan, yaitu wireframe dan mockups.
Wireframe dan MockUps
Wireframe dan mockups memiliki perannya masing-masing dalam proses mendesain produk. Perbedaan keduanya terletak pada fidelity atau seberapa mirip desain yang dibuat dengan produk finalnya. Selain itu, terdapat pula beberapa perbedaan dari segi fungsionalitas dan desainnya.
Wireframe
Wireframe adalah low-fidelity way untuk menunjukkan tampilan produk. Tampilan wireframe hanya berupa gambaran awal, tampilan dasar, dan struktur halaman (layout) yang menunjukkan penempatan komponen-komponen desain pada setiap halaman aplikasi. Pada wireframe tidak ditampilkan konten aplikasi secara detail, karena wireframe bagaikan blueprint yang berisi elemen-elemen penting dalam aplikasi.
Dengan adanya wireframe, client dan stakeholder dapat melihat gambaran umum aplikasi, sehingga feedback terkait desain dapat diberikan jika terdapat bagian yang tidak sesuai dengan requirements.
Salah satu keuntungan dari wireframe adalah mudah untuk dibuat karena wireframe mengutamakan fungsionalitas dan user experience dibanding aestheic tampilan. Oleh karena itu, feedback yang diperoleh dari client pun menjurus ke kemudahan akses dalam menjalankan task untuk mencapai tujuan pengguna menggunakan aplikasi. Dengan ini, diharapkan aspek usability dan user experience dapat dimaksimalkan dalam pengembangan aplikasi.
Contoh wireframe proyek PPL bagian detail pesanan lisensi.
Tampilan wireframe diatas masih belum mencantumkan warna dan data real detail pemesanan lisensi, data yang digunakan masih data palsu. Wireframe dibuat untuk menunjukkan struktur / layout halaman detail pemesanan lisensi dan aksesibilitas halaman tersebut, seperti peletakkan button “Edit Data”.
Mockups
Mockups adalah tampilan static high-fidelity, sehingga sudah sangat mirip dengan tampilan produk final. Mockups merepresentasikan struktur informasi, visualisasi setiap komponen, dan demonstrasi fitur-fitur dalam aplikasi secara statis.
Tidak seperti Wireframe, mockup menyajikan tampilan visual yang lebih detail, terdapat pewarnaan komponen dan tipografi yang sesuai. Dengan ini, diharapkan client dapat mendapat gambaran aplikasi final yang lebih real.
Mockups dapat menjadi jembatan ide antara designer dan stakeholders. Dengan adanya mockups yang secara tampilan lebih bisa dikomunikasikan dan dimengerti oleh stakeholders, masalah dapat ditemukan dan diatasi dengan lebih cepat.
Contoh mockup proyek PPL bagian detail pesanan lisensi.
Nielsen’s 10 Usability Heuristics with Examples
Nielsen’s 10 Usability Heuristics dikatakan sebagai guideline yang ideal untuk mengevaluasi usability suatu aplikasi/website. Berikut penerapan setiap prinsip tersebut dalam proyek PPL saya.
Visibility of System Status
Aplikasi yang baik seharusnya menunjukkan status yang terjadi saat itu kepada penggunanya. Dengan ini, pengguna dapat mengetahui progres dari task yang sedang ia lakukan, sehingga menghindari kebingungan.
Contoh penerapaannya pada proyek PPL saya:
Ketika pengguna membuka halaman beranda, agar tidak dibingungkan dengan halaman yang terlihat kosong selama beberapa detik, kami memutuskan untuk menambahkan bar “Loading data…” sehingga pengguna tidak bingung dengan apa yang terjadi pada halaman beranda tersebut.
Match Between System and Real World
Komponen dan istilah yang digunakan pada halaman aplikasi harus yang lazim atau familiar bagi orang banyak. Kita dapat menggunakan ikon, text, dan ilustrasi yang umum digunakan sehingga pengguna tidak bingung dan dapat dengan mudah mengerti hal yang disampaikan oleh komponen tersebut.
Contoh penerapaannya pada proyek PPL saya: ikon dan keterangan pada sidebar menggunakan simbol-simbol yang umum dan lazim, seperti simbol rumah untuk halaman Beranda dan simbol siluet orang untuk halaman Profil.
User Control and freedom
Pengguna perlu memegang kontrol atas seluruh sistem. Oleh karena itu, aplikasi harus membuat cara kembali untuk membatalkan aksi pengguna agar aksi yang tidak disengaja dapat diperbaiki.
Contoh penerapaannya pada proyek PPL saya:
Pada penerapan diatas, terdapat button untuk meng-edit dan membatalkan pesanan. Dengan ini, setelah pengguna membuat pesanan, ia dapat kembali untuk memperbaiki aspek dari pesanannya yang belum sesuai atau langsung membatalkan pesanan tersebut.
Consistency and Standard
Hal dasar dalam konsep desain adalah konsistensi dan standar dalam keseluruhan desain aplikasi. Konsistensi yang dapat dilakukan dalam pemberian warna dan pemilihan button yang digunakan. Selain itu, jika digunakan pop-up untuk menyelesaikan masalah, misalnya dalam pengisian form, pop-up juga harus tetap digunakan untuk menampilkan error pada pengisian form lainnya.
Contoh penerapaannya pada proyek PPL saya:
Pada halaman membuat jadwal kuliah dan mengedit pesanan lisensi di atas, digunakan gaya input field, penulisan nama label dan pewarnaan button yang konsisten.
Error Prevention
Pengguna adalah manusia, sehingga tidak terlepas dari kesalaha. Sistem harus selalu mengecek/memvalidasi input yang diberikan pengguna dan menyarankan solusi sehingga error pun dapat dihindari.
Contoh penerapaannya pada proyek PPL saya:
Pada halaman login, ketika pengguna salah memasukkan password, maka sistem akan memunculkan notifikasi penyebab gagalnya pengguna login ke aplikasi.
Recognition Rather than recall
Terlalu banyak hal yang perlu diingat dalam hidup manusia. Aplikasi yang baik harus mencoba untuk meminimalkan pengguna mengakses memorinya, seperti dengan memberi notifikasi, menampilkan informasi, atau dengan menggunakan simbol-simbol yang representatif.
Contoh penerapaannya pada proyek PPL saya:
Pada halaman pengaturan lisensi, ketika admin ingin memasukkan api-key, ia dapat melihat api-key yang tersimpan dalam sistem sehingga dapat memeriksa apakah api-key yang akan dimasukkan adalah api-key yang sudah pernah dimasukkan. Dengan ini, admin tidak perlu terus mengingat api-key apa saja yang sudah ia masukkan.
Flexibility and efficiency of use
Desain yang dibuat harus mudah untuk digunakan untuk semua target pengguna aplikasi. Jika target pengguna merupakan pemula dalam hal teknologi, desain pun harus disesuaikan sedemikian rupa memuaskan seluruh kategori target pengguna.
Penerapaannya pada proyek PPL saya adalah menggunakan istilah-istilah yang cukup umum dalam dunia computer science, seperti list pemesanan, edit pesanan, dll.
Aesthetic and Minimalist design
Desain yang estetik dan minimalis adalah desain yang tidak penuh dengan hal-hal yang tidak berguna. Fokuskan perhatian pengguna terhadap task-task yang ia dapat lakukan pada halaman tersebut. Desain dengan banyak hal yang tidak diperlukan akan membingungkan pengguna karena perhatian pengguna akan tersebar kemana-mana.
Contoh penerapaannya pada proyek PPL:
Pada halaman login hanya ditampilkan hal-hal yang penting untuk proses login saja, yaitu form pengisian username dan password.
Help users recognize, diagnose and recover from errors
Ketika pengguna dalam menjalankan task-nya menemui error, sistem hendaknya menyediakan bantuan untuk membantu pengguna menyelesaikan masalah yang ia hadapi. Contohnya adalah ketika pengguna terus menerus memasukkan password yang salah saat Login, sistem harus menyediakan cara untuk recover, seperti recover password atau forget password?. Dengan hal itu, pengguna dapat mengganti ke password yang baru dan berhasil Login ke aplikasi.
Help and Documentation
Aplikasi harus terdapat bagian/fitur help page sehingga masalah-masalah pengguna yang tidak terpikirkan dapat terselesaikan. Contoh fitur help page, yaitu terdapat bagian FAQ yang menampilkan kemungkinan eror yang terjadi dan solusi mengatasi eror tersebut.
Setelah mempelajari 10 prinsip usability di atas, saya sadari bahwa mockups yang kami buat masih terdapat kekurangan, seperti tidak ada help page dan fitur recovery. Well, dengan waktu yang cukup singkat untuk mendesain mockups dan hanya terpenuhi 8/10 prinsip usability, dapat dikatakan bahwa tim kami sudah memberikan yang terbaik untuk menyediakan UI dan UX yang berkualitas kepada pengguna aplikasi kami.
Referensi:
