Istilah Fidelity bukan sesuatu yang asing lagi dalam bidang user experience (UX). Dalam desain, istilah ini sering digunakan untuk menggambarkan sejauh mana sebuah prototype menyerupai produk aslinya.
Situs Mockflow mendefinisikan fidelity sebagai tingkat detail akurasi yang ada dalam representasi desain user interface (UI), baik itu wireframe, prototype, atau produk akhir. Fidelity ini dibagi ke dalam dua kategori, yakni Low Fidelity (Lo-Fi) dan High Fidelity (Hi-Fi).
Lantas, apa yang sebenarnya membedakan kedua istilah di atas? Untuk tahu lebih lanjut, simak tulisan di bawah yang akan membahas perbedaan antara Lo-Fi dan Hi-Fi beserta cara membuat, manfaat, dan komponennya!
Lo-Fi Prototype
Low Fidelity (Lo-Fi) adalah sebuah istilah untuk menggambarkan versi awal atau sederhana dari sebuah desain atau produk. Lo-Fi digunakan untuk menggambarkan konsep kasar tanpa banyak detail dan biasanya digunakan dengan bahan sederhana seperti kertas, sketsa, atau wireframe.
Prototype ini berfungsi untuk membantu tim dalam memahami ide secara efisien sehingga cocok digunakan pada tahap awal untuk menguji apakah ide dasarnya sudah sesuai dengan kebutuhan sebelum lanjut ke prototipe yang lebih canggih, yakni Hi-Fi.
Cara Membuatnya
Karena prototype ini sangat berguna untuk menghasilkan feedback sebagai bahan evaluasi ke depan, UX Designer biasanya akan menerapkan langkah berikut untuk membuat Low Fidelity:
1. Membuat User Flows
Tahapan ini memungkinkan UX Designer untuk memahami bagaimana interaksi antara pengguna dengan sistem sehingga tahu bagaimana cara pengguna mencapai tujuannya.
2. Mengenali Input dan Output
Di tahap ini, input dan output yang terkait dengan pengguna (user) akan diidentifikasi oleh UX Designer sehingga diketahui bagaimana hal tersebut berkaitan dengan perilaku dan ekspektasi pengguna.
Di tahap ini juga UX Designer akan mempertimbangkan apakah interaksi yang melibatkan user berfungsi dengan baik atau tidak.
3. Merancang Sketsa Wireframe Pertama
Pada tahap ini, UX Designer bisa menggambar sketsa user flow secara sederhana dan mengimplementasikan fungsi dari sketsa yang telah digambar dengan baik.
4. Merancang Struktur Wireframe
Sementara di tahap terakhir ini, UI/UX Designer dapat memperbaiki sketsa awal dengan lebih terstruktur seperti memasukkan konten berupa gambar, video, atau teks ke sketsa dasar dengan tujuan visualisasi, bukan untuk penggunaan sebenarnya.
Manfaat Lo-Fi
Membuat Lo-Fi prototype dapat dilakukan dengan cara yang sangat sederhana sehingga dapat dibuat dalam waktu singkat. Ini merupakan salah satu manfaat dari Lo-Fi. Berikut adalah beberapa manfaat lainnya:
1. Fokus Pada Fungsi
Karena bertujuan untuk menggambarkan desain atau produk secara sederhana, Lo-Fi dapat membantu Anda agar lebih fokus memvisualisasikan alur pengguna dan fungsi utama, bukan estetika visual.
Dengan fokus pada dua hal tersebut, Anda dapat memastikan produk benar-benar dapat memenuhi kebutuhan pengguna.
2. Hemat Waktu dan Biaya
Karena Lo-Fi prototype dapat dibuat dengan cepat tanpa membutuhkan banyak sumber daya, jenis prototype ini memungkinkan Anda menghindari pengeluaran biaya dan waktu yang banyak jika ada desain yang perlu diubah.
3. Memudahkan Uji Coba Awal
Lo-Fi prototype dapat digunakan untuk mendapat masukan dari pengguna sejak awal yang mana feedback tersebut sangat penting untuk bahan evaluasi sebelum membuat desain yang lebih detail.
Komponen Lo-Fi
Berikut adalah beberapa komponen Lo-Fi prototype:
- Sketsa atau Wireframe: Ialah representsi kasar dari sebuah halaman produk. Biasanya hanya berupa simbol kotak, garis, atau bentuk dasar untuk menunjukkan posisi elemen.
- User Flows: Merupakan gambaran sederhana tentang bagaimana user akan bergerak dari satu halaman ke halaman lain yang membantu menunjukkan hubungan antar layar.
- Elemen Dasar UI: Merupakan elemen dasar yang sering digunakan di produk digital seperti tombol dengan label ‘OK’ atau ‘Next’ atau menu navigasi yang digambarkan dengan garis atau kotak untuk menunjukkan strukturnya.
- Teks: Merupakan elemen untuk menggunakan teks sementara yang menggambarkan konten yang fokusnya bukan pada posisi dan ukuran elemen.
- Layout: Merupakan posisi elemen-elemen yang ada di halaman. Berfungsi untuk menunjukkan bagaimana informasi disusun agar mudah dimengerti oleh pengguna.
Hi-Fi
High Fidelity (Hi-Fi) merupakan jenis prototype yang dirancang dengan tingkat detail yang tinggi untuk mendekati tampilan, perilaku, dan interaksi akhir dari produk antarmuka (interface) yang dikembangkan.
Prototype ini biasanya digunakan dalam tahap uji lanjutan atau validasi desain untuk menggambarkan cara user berinteraksi dengan produk atau interface dengan lebih akurat.
Jika Lo-Fi fokus pada ide dan rancangan dasar, Hi-Fi ini bertujuan untuk menunjukkan pengalaman pengguna (UX) yang lebih lengkap. Biasanya, prototype jenis ini digunakan di tahap akhir pengembangan untuk mendapat feedback yang lebih akurat dan memastikan desain berfungsi dengan baik.
Cara Membuat Hi-Fi Prototype
Berikut adalah langkah sederhana untuk membuat Hi-Fi:
1. Tentukan Tujuan
Sebelum memulai, pastikan Anda sudah memahami apa yang ingin dicapai dengan prototype ini. Apakah untuk menguji desain visual, alur pengguna, atau fitur tertentu?
2. Kumpulkan Sumber Daya
Setelah menentukan tujuan, persiapkan alat dan materi yang dibutuhkan seperti software untuk merancang prototype, serta elemen desain yang diperlukan seperti palet warna, font, ikon, dan gambar yang mau digunakan.
3. Buat Wireframe
Namun sebelum itu, mulailah dulu dengan wireframe sederhana untuk membantu menggambarkan layout dasar tanpa detail visual. Jika sebelumnya sudah merancang Lo-Fi, Anda dapat menggunakannya untuk mengembangkan Hi-Fi.
4. Rancang Desain Visual yang Mendetail
Dalam merancang Hi-fi, selalu perhatikan elemen visual yang digunakan seperti layout, warna, font, serta ikon dan gambar untuk menciptakan desain yang profesional.
Tambahkan juga interaktivitas yang memungkinkan pengguna untuk mengklik tombol atau berinteraksi layaknya pada produk asli.
5. Uji Prototype
Sebelum diluncurkan, lakukan uji terlebih dahulu untuk memastikan tidak ada tautan atau fitur yang tidak berfungsi, desain yang dirancang mudah dan dipahami pengguna, serta UX telah sesuai harapan.
Manfaatnya
Hi-Fi merupakan jenis prototype yang mendetail hingga menyerupai produk akhir, baik dari segi visual maupun fungsinya. Oleh karena itu, Hi-Fi dapat membantu tim, klien, atau pengguna memahami seperti apa tampilan dan fungsi dari suatu produk secara nyata.
Dengan tingkat detailnya yang tinggi juga, Hi-Fi memungkinkan untuk pengujian langsung terhadap alur dan user interface sehingga pengguna bisa mencoba fitur, mengklik tombol, atau mengikui alur navigasi layaknya di aplikasi asli.
Selain itu, prototype ini juga dapat membantu mengenali masalah sejak awal, seperti desain yang tidak intuitif atau fitur yang membingungkan sehingga masalah dapat diperbaiki sebelum lanjut ke tahapan selanjutnya.
Komponen Hi-Fi
Berikut adalah beberapa komponen Hi-Fi:
- Tipografi: Merupakan komponen yang berperan dalam memilih font, gaya, ukuran, dan menciptakan user interface yang lebih menarik dan mudah digunakan.
- Warna dan Kontras: Merupakan komponen yang penting dalam desain UX Hi-Fi untuk memilih
- Animasi: Merupakan komponen yang berfungsi untuk membuat UI lebih menarik dan interaktif.
- Layout: Merupakan komponen yang dapat membantu pengguna lewat interface sehingga mudah untuk menemukan atau menggunakan fitur yang dibutuhkan.
Design Thinking dalam UX
Design thinking merupakan sebuah metode untuk memecahkan masalah yang fokus pada kebutuhan dan user experience dengan pendekatan yang kreatif.
Dalam konteks UX, metode ini penting untuk membantu desainer dalam menciptakan produk atau layanan yang tidak hanya fungsional tetapi juga mudah digunakan dan relevan bagi pengguna.
Berikut adalah tahapan design thinking yang diterapkan dalam UX:
1. Empathize
Langkah pertama yang perlu dilakukan dalam design thinking ialah memahami kebutuhan, keinginan, dan masalah pengguna. Tujuannya adalah untuk mendapat informasi lebih tentang pengalaman pengguna.
Tahap ini bisa dilakukan melalui observasi, wawancara, survei, atau dengan menganalisis tingkah laku pengguna.
2. Define
Setelah memahami kebutuhan atau masalah pengguna, Anda dapat merumuskan inti masalah yang harus diselesaikan. Tujuannya adalah untuk menyusun problem statement yang spesifik dan relevan.
3. Ideate
Di tahap ini, tim UX mulai mencari solusi kreatif untuk masalah yang telah diidentifikasi dengan tujuan menghasilkan berbagai ide sebelum dipilih mana yang paling potensial.
4. Prototype
Di tahap ini, Anda bisa membuat prototype awal (low-fi atau hi-fi) dari solusi yang telah dirancang sebelumnya. Hal ini bertujuan untuk menguji dan memvalidasi konsep sebelum pengembangan penuh.
5. Test
Setelah semua tahapan di atas telah dilalui, langkah terakhir adalah menguji prototype dengan pengguna sebenarnya untuk mendapat feedback dan memastikan bahwa solusi yang diterapkan telah sesuai dengan kebutuhan pengguna.
Kesimpulan
Memahami perbedaan Low-Fi dengan Hi-Fi menjadi langkah penting untuk menciptakan solusi yang efektif dan relevan bagi pengguna. Meski berbeda, kedua jenis prototype ini sama-sama bertujuan untuk memastikan pengalaman pengguna sesuai dengan harapan sebelum proyek dikembangkan ke tahap selanjutnya.
Dengan memahami kapan dan bagaimana menggunakan Lo-Fi atau Hi-Fi, akan membantu Anda menciptakan produk yang lebih baik, baik dari segi fungsi maupun desain. Jadi, pastikan untuk memilih pendekatan yang tepat sesuai dengan kebutuhan proyek Anda.
