Skip to content Skip to sidebar Skip to footer

Inilah Pengertian dan Jenis-jenis Prototyping Design dalam UI/UX

Assalamu‘alaikum wr. wb.

Halo guys, Kembali lagi bersama Inzaghi's Blog! Jika kita ingin mendesain sebuah Interface, tentunya kita harus membuat Prototype terlebih dahulu. Pada kesempatan kali ini kita akan membahas tentang Prototyping.




Dalam "Design Thinking", semua jalan mengarah pada pembuatan prototipe dan pengujian. Seluruh proses berorientasi pada tindakan. Tujuan utamanya adalah untuk prototipe fast, prototipe often, dan mengujinya pada real users.

Rapid Prototyping memungkinkan praktisi untuk belajar tentang kekurangan produk tiruan dan membuat perubahan dan merangkul kesalahan untuk membuat perubahan. Terobosan inovatif datang dari kegagalan.


Cepat gagal dan sering, kemudian kembali ke papan gambar dan lakukan perbaikan di mana Anda gagal. Prototipe melalui beberapa iterasi di mana feedback dari user digabungkan dan perubahan dibuat untuk menghasilkan solusi akhir yang efektif.

Singkatnya, selama prototyping Anda ingin menguji kelayakan ide-ide Anda dan melihat apakah mereka bisa menjadi the solution. Anda ingin menciptakan pengalaman, mendapatkan feedback, menggunakan feedback untuk terus melakukan perubahan yang memperbaiki prototipe sampai Anda menemukan solusi yang lebih baik.

Anda membangun untuk user akhir. Anda ingin membuat skenario di mana user akan menangani prototipe dan mengalaminya sendiri. Pada tahap ini, keterlibatan penuh dari user akhir adalah yang paling penting untuk sukses.

A. Pengertian Prototyping

Prototyping adalah proses eksperimental di mana tim desain mengimplementasikan ide ke dalam bentuk nyata dari kertas ke digital. Tim membangun prototipe dengan berbagai tingkat ketepatan untuk menangkap konsep desain dan menguji pengguna. Dengan prototipe, Anda dapat menyempurnakan dan memvalidasi desain Anda sehingga merek Anda dapat merilis produk yang tepat.

Mengapa Prototipe?

Bangun prototipe dan serahkan ke tangan pengguna Anda untuk memastikan umpan balik awal dan teratur. Tim mengamati, mengukur, mencatat, dan mengevaluasi bagaimana pengguna berinteraksi dengan prototipe.

Pengguna mengekspresikan perasaan dan pemikiran mereka tentang hal itu, suka dan tidak suka mereka dalam hal desain, fitur dan kegunaan, memberi tahu tim apa yang berhasil dan apa yang tidak, dan masalah tersembunyi apa pun.

Pembuatan prototipe membantu tim mengajukan lebih banyak pertanyaan, mendefinisikan kembali masalah, membuat keputusan untuk meningkatkan produk, dan meningkatkan pengalaman pengguna.

Hal ini juga memungkinkan tim untuk mengejar ide-ide yang berbeda tanpa terjebak pada ide-ide sebelumnya. Gagal cepat dan murah dengan menginvestasikan lebih sedikit waktu dan uang di muka.

B. Pedoman dan Tips Prototyping

Sederhananya, Prototipe adalah mekanisme yang nyaman untuk menunjukkan fungsionalitas desain dan nilainya kepada pengguna.

Penjelasan langsung tentang fitur desain memiliki banyak manfaat yang sangat berharga bagi desainer dan perusahaan. Jika ingin melakukan Prototyping, inilah beberapa Pedoman Prototyping :
  • Jangan menunda. Mulai bangun segera.
  • Bangun dengan cepat. Jangan menghabiskan terlalu banyak waktu untuk satu prototipe. Jangan terikat secara emosional ke prototipe dengan menghabiskan terlalu banyak waktu untuk membangunnya.
  • Bangun dengan user akhir dalam pikiran.
  • Anda ingin melibatkan user. Bangun untuk menciptakan pengalaman. Bangun sesuatu yang dapat mereka lihat, sentuh, dan rasakan.
  • Sambil membangun bayangkan diri Anda sebagai user. Pikirkan tentang pertanyaan yang akan ditanyakan user. Identifikasi apa yang sedang diuji. Anda ingin mendapatkan meaning feedback.
  • Pecahkan seluruh prototipe menjadi komponen yang berbeda. Ini membantu Anda menyiapkan pertanyaan yang akan Anda tanyakan kepada user akhir setelah mereka mengalami prototipe.

Setelah Anda Membangun Prototipe, inilah hal-hal yang perlu dilakukan :
  • Bawa user akhir dan minta mereka mengalaminya.
  • Buat mereka berbicara tentang pengalaman momen demi momen mereka sehingga Anda dapat menangkap setiap detail kecil tentang bagaimana mereka mengalaminya.
  • Secara aktif mengamati dan antusias melibatkan user di seluruh pengalaman mereka.
  • Ketika pengalaman selesai, tindak lanjuti dengan user yang memiliki pengalaman dengan serangkaian pertanyaan. Pertanyaan-pertanyaan harus disiapkan terlebih dahulu.

C. Jenis-Jenis Prototype

Ada banyak metode pembuatan prototipe untuk desain UX, semuanya dengan tujuan dan fungsi yang berbeda. Namun, memahami sifat masalah yang coba dipecahkan oleh perancang akan membantu memandu jenis prototipe apa yang akan digunakan.

Melansir dari UX Planet, berikut adalah Jenis Prototipe desain UX yang dapat digunakan oleh desainer.

1. Sketches

Sketch atau sketsa adalah gambar yang mudah dan murah untuk dibuat dengan kertas dan pensil. Kebanyakan sketsa digunakan untuk mendapatkan ide-ide baru di awal proses desain.

Sketsa juga biasa digunakan untuk mengidentifikasi kekurangan desain yang memengaruhi pengalaman pengguna. Sketsa dengan contoh Kesetiaan Rendah (Low-Fidelity). Prototipe jenis ini dapat digunakan untuk mengidentifikasi keluhan pengguna dan mendapatkan ide baru untuk produk Anda, bahkan saat produk tersebut masih dalam tahap awal produksi.

Sketsa juga memungkinkan desainer dengan cepat dan murah mengubah desain mereka untuk membuat produk mereka lebih berguna.

2. Wireframes

Wireframes adalah representasi dari tata letak desain dan terutama berfokus pada tata letak konten. Kebanyakan wireframes menggunakan skala abu-abu atau hitam dan putih.

Dalam wireframing low-fidelity, desainer dapat menggunakan alat khusus untuk membuat gambar rangka skala abu-abu. Ini jauh lebih baik daripada membuat sketsa di awal proses desain.

3. Mockups

Mockups atau Maket adalah desain yang telah dibuat seluruhnya untuk menggambarkan warna, tipografi, dan detail konten desain. Jenis prototipe ini terlihat seperti produk akhir dari desain desain dan tidak mewakili interaksi produk.

D. Low Fidelity dan High Fidelity Mockup (Wireframing)

Sumber Gambar : Moqups.com

Sumber : Medium.com dan Heysalsal.com
Lainnya yang terkait : Audioviser.com

Tidak hanya Musik saja yang mengenal Lo-Fi dan Hi-Fi, dalam Desain Aplikasi juga mengenal istilah tersebut seperti Low Fidelity Mockup dan High Fidelity Mockup. Mungkin jika baru mendengarnya Lo-Fi Mockup merupakan Blueprint atau kerangka dari Desain Aplikasi yang akan dibuat nantinya.

Whoops! Bukan Lo-Fi yang ada di YouTube ini ya! Yang dimaksud di sini adalah Low-Fidelity.

Lo-Fi Mockup sendiri atau yang bisa disebut Wireframe lebih fokus pada elemen dasar antarmuka aplikasi, elemen yang dimaksud seperti tombol, navigasi, teks, dll.

Sedangkan Mockup High Fidelity atau Mockup Hi-Fi adalah desain akhir dari aplikasi yang akan dibuat. Mockup Hi-Fi adalah versi detail dari mockup Lo-Fi, detail ditambahkan ke mockup Hi-Fi seperti warna, ikon, dll.

Dan inilah Tahap-tahap untuk pembuatan Rangka sebuah Produk dari Sketching, Lo-Fi Mockup, dan Hi-Fi Wireframing.

1. Sketching


Proses Sketching roses menciptakan fitur produk pada selembar kertas. Banyak dari UI/UX Designer menggunakan sticky note karena mudah digunakan dan lugas.

Jika kita memiliki tim yang cukup besar, ide akan muncul untuk kerangka suatu produk. Oleh karena itu, untuk menyaringnya, kita perlu mengetahui ide apa saja yang muncul dari para UI/UX designer. Apa yang membuat membuat sketsa menjadi pilihan dalam kerangka kerja adalah kecepatan ide yang dihasilkan, serta fakta bahwa itu tidak menimbulkan biaya tinggi. Selanjutnya dengan membuat sketsa, kita juga bisa menyaring ide-ide yang bisa dibantah. Sketch juga tidak perlu memiliki detail yang cukup dalam membingkai produk kita sendiri.

Setelah kita mengumpulkan dan menyaring beberapa sketch yang sudah ada, maka kita akan masuk menuju sebuah kegiatan pembuatan produk yang bernama Prototyping. Prototyping adalah kegiatan membuat kerangka produk yang berisi detail yang cukup jelas dan menggambarkan apa yang ada di dalam produk yang kita miliki. Oleh karena itu Prototyping terbagi atas dua jenis yaitu lo-fi dan hi-fi Wireframing/Prototyping.

2. Lo-Fi Wireframing

Kegiatan pembuatan Lo-Fi Wireframing merupakan kegiatan menjelaskan atau merangkup apa saja yang telah dilakukan pada sketching dalam bentuk digital wireframing. Kegiatan lo-fi wireframing ini juga disebut juga dengan kegiatan pembuatan blueprint untuk produk yang akan kita desain.

Kegunaan pembuatan ini UI/UX designer akan menjelaskan bagaimana struktur dari sebuah produk, konten-koten yang berada pada produk tersebut. Selain dua hal tersebut lo-fi wireframing ini juga memiliki hierarki informasi, serta bagaimana fungsi dari produk yang kita desain nantinya.

Kegiatan tersebut tentunya bukan lagi dianggap sebagai sebuah ide yang akan muncul pada produk yang kita desain nanti. Tapi merupakan sebuah penjelasan yang memiliki informasi-informasi akhir yang mana akan muncul pada produk yang kita desain nantinya.

3. Hi-Fi Wireframing


Hi-Fi Wireframing merupakan kegiatan yang akan menyerupai tampilan akhir dari produk yang kita desain. Banyak dari mereka sudah memiliki utas yang mengharuskan pengguna untuk menjalankan.


Itulah penjelasan mengenai Prototyping Design dalam UI/UX jika kita ingin mengembangkan Aplikasi atau Website.

Terima Kasih šŸ˜„šŸ˜˜šŸ‘ŒšŸ‘ :)

Wassalamu‘alaikum wr. wb.

Ads