Cara Membuat Prototype Produk

“A good design is made in your head, not on your computer. Your style of drawing can differ from other person’s understanding of it. That is why we need standards.”

Prototyping adalah fase pertama di mana Anda benar-benar dapat berinteraksi dengan kreasi Anda, meskipun hanya sedikit. Prototipe memungkinkan Anda untuk menjelajahi UI, menentukan elemen mana yang paling berhasil, dan memprediksi masalah kegunaan sebelum menjadi masalah.

Sebuah prototipe kerja merupakan langkah penting dalam peluncuran produk sukses atau situs web yang diimplementasikan dalam 4 tahap awal yaitu dengan membuat sketsa,wireframe, mockup,dan prototipe dalam proses desain interaksi. Berikut tahapan dalam membuat Prototyping:

1. Skecthing : Sketching merupakan coretan paling awal atau gambaran kasar di kertas untuk membuat visualisasi ide.

2. Wireframing : Membuat atau menyusun kerangka seperti bentuk kotak berwarna hitam putih dimana di dalam wireframing ini sudah terlihat adanya struktur, fungsi dan kontennya yang sudah terlihat dengan jelas.

3. Mockups : Tahap dimana di dalam tahap ini akan melengkapi kerangka dengan warna, foto dan elemen visual lainnya. Di dalam mockup ini style, colours, dan konten sudah benar-benar lengkap.

4. Prototyping :Menambahkan animasi dan di dalam tahap ini masih dalam proses pembuatan front-end dan di dalam prototying ini sudah terjadi interaksi.

5. Development : Proses atau tahap paling akhir dimana proses atau tahap ini adalah berguna pada saat akan mengubah prototipe menjadi produk akhir.

Tujuan dari setiap langkah adalah untuk memungkinkan Anda menguji fungsi-fungsi dari perangkat lunak Anda serta memperbaiki masalah dengan biaya yang lebih murah untuk memperbaikinya . Setiap tahap juga memungkinkan Anda dapat mengulangi desain Anda hingga sesuai dengan kriteria pencapaian.

Prototype Fidelity

  • Low Fidelity : tidak terlalu rinci
  • High Fidelity : lebih seperti produk jadi

METODE PROTOTYPING

1. PAPER PROTOTYPING

Paper prototyping merupakan salah satu cara untuk melakukan usability testingPaper prototyping adalah metode yang sering digunakan dalam proses mendesain berbasis pengguna, sebuah proses yang membantu pengembang untuk membangun perangkat lunak yang sesuai dengan ekspektasi dan kebutuhan pengguna.

Paper prototyping dilakukan pada tahap merancang sebuah antarmuka sebelum siap dikembangkan. Paper prototyping akan menjelaskan bagaimana sebuah aplikasi bekerja dengan baik dan intuitif. Umpan-umpan balik dari pengguna sangat dibutuhkan karena nantinya yang akan menggunakan aplikasi tersebut adalah mereka, bukan hanya pengembang aplikasi. Selanjutnya isu dan masukan dari pengguna tersebut dapat dijadikan acuan untuk membuat prototype antarmuka dalam tim desain.

Kapan Harus menggunakan Paper Prototyping?

Dalam sebuah artikel berjudul “Paper Prototyping — What is it good for? A comparison of paper and Computer-based low fidelity Prototyping” yang ditulis oleh Reinhard Sefelin dkk. pada tahun 2003, dipaparkan alasan-alasan kapan sebaiknya kita menggunakan paper prototyping:

  • saat perangkat prototyping yang tersedia tidak mendukung komponen dan ide-ide yang akan diterapkan
  • saat pengembang tidak ingin mengecualikan anggota tim desain tanpa keterampilan perangkat lunak yang memadai
  • saat pengujian prototype harus mengarahkan pada banyak gambar, yang selanjutnya dapat dibahas dalam tim desain

Sebagai contoh, saat kita membuat mockup menggunakan aplikasi komputer grafis berbasis vektor, perangkat tersebut tidak dapat menjelaskan bagaimana jika ada tombol yang di-klik atau aksi apa yang akan terjadi jika seseorang menekan dropdown list, dan sebagainya.

“Kenapa harus menggunakan Paper Prototyping, sementara saat ini membuat prototype dapat dilakukan dengan komputer?”.

Itu adalah pertanyaan yang muncul pada kursus online di Coursera dengan topik HCI. Pengajar dari Stanford University itu selalu menekankan pentingnya melakukan curah gagas (brainstorming) tentang bagaimana sebuah sistem itu bekerja sebelum dikembangkan lebih jauh. Pembuatan prototype didasarkan pada ide-ide yang alami dan manusiawi. Karena kita akan selalu berpikiran bahwa seharusnya komputer atau teknologi yang baru selain mudah digunakan, juga cepat dipahami dan tidak menimbulkan kerumitan-kerumitan yang baru.

Paper prototyping tentu lebih mudah dibuat dibanding dengan computer prototypingPaper prototyping hanya membutuhkan keahlian menggambar di atas kertas. Jika ada yang kurang sesuai maka dapat dengan segera diperbaiki.

Selain itu, hal tersebut juga dapat mengurangi kerumitan membuat prototype dalam komputer yang seringkali berhubungan dengan kemampuan menggunakan tools tertentu. Tools yang digunakan pada Paper prototyping adalah stickynote,penghapus,pensil,lem,karton,gunting,dan marker.Gambar paper prototype pun tidak perlu dibuat sebagus mungkin, yang paling penting dalam paper prototyping adalah dapat menjelaskan ide-ide visualisasi dan aksi antarmuka yang ingin diterapkan.

Teknik Paper Prototyping

Paper prototyping mempunyai beberapa teknik, ada yang disebut comps (komposisi pendek), wireframe, dan storyboardComps adalah representasi visual, umumnya situsweb, yang mendemonstrasikan berbagai aspek antarmuka, termasuk huruf, warna, dan logo. Sebuah wireframe digunakan untuk mendemonstrasikan layout halaman antarmuka. Sedangkan storyboard merupakan sekumpulan gambar yang digunakan untuk mendemonstrasikan bagaimana sebuah antarmuka bekerja. Ketiga teknik tersebut berguna dan dapat diterapkan melalui paper prototyping.

Jika saya boleh merekomendasikan, sebaiknya paper prototyping tidak dibuat dengan menggunakan tools komputer, tetapi digambar manual dengan tangan (hand-drawn)Paper prototyping biasanya dibuat dengan potongan-potongan kertas yang berukuran seragam. Ukuran potongan kertas akan lebih baik jika disesuaikan dengan seberapa lebar luasan layout antarmuka. Misalnya, jika ingin membuat paper prototyping untuk antarmuka desktop, bisa menggunakan kertas berukuran A4. Lain halnya jika ingin membuat paper prototyping untuk antarmuka smartphone, kita bisa membagi kertas A4 tersebut menjadi 8 potongan sama besar.

Contoh Paper Prototyping

Contoh Video Pengujian Paper Prototyping

2. COMPUTER PROTOTYPING

Computer prototyping memiliki satu atau lebih hotspot yang dapat digunakan, kita klik untuk melompat ke layar lain. Terkadang transisi antar layar juga melibatkan beberapa animasi untuk menunjukkan efek dinamis, seperti umpan balik.Computer prototyping menirukan lebih banyak kemampuan sistem.

– Pada umumnya hanya baru beberapa aspek atau fitur

– Dapat berpusat pada lebih banyak detail

– Bahaya: Para pemakai jadi lebih segan untuk menyarankan perubahan sekali ketika mereka melihat prototype yang lebih realistis.

Kelebihan computer prototyping:

  • Memiliki penampilan yang cukup mirip dengan produk asli.
  • Dapat mensimulasikan setiap fitur yang ada.
  • Mengetahui pergesaran kursor serta highlightnya.
  • Mengetahui seberapa cepat sistem merespon.
  • Lebih mengetahui lebih kesalahan apa yang dilakukan user.

Kekurangan computer prototyping:

  • Membutuhkan biaya yang banyak.
  • Menghabisakan banyak waktu.
  • Membutuhkan software.
  • Harus memiliki kemampuan dalam menjalankan software tersebut.

contoh computer prototyping :

Software yang dapat digunakan pada Computer prototyping yaitu Photoshop, Balsamiq Mockup, Adobe XD, dll.


Subscribe
Untuk dapat update terbaru mengenai kami

Kasus COVID - 19