PROTOTYPING ( HCI)

Pengertian Prototype

Prototype adalah rancangan yang menyerupai bentuk aslinya sebelum

suatu produk di kembangkan lebih luas atau sebelum produk tersebut
dipasarkan. Prototype penting dalam pengembangan suatu produk
agar apabila terdapat suatu kesalahan maka tidak akan mengeluarkan
banyak biaya untuk memperbaiki keseluruhan karena produk masih
dalam bentuk prototype yang masih dalam pengembangan.

Manfaat Prototype

Manfaat prototype adalah jauh lebih murah untuk mengganti produk

di awal proses pengembangan daripada membuat perubahan setelaj
mengembangakan situs.Prototyping memungkinkan developer untuk
mengumpulkan umpan balik dari user saat developer masih
merencanakan dan merancang situs Web.

Nielsen telah menemukan bahwa peningkatan terbesar dalam

pengalaman user berasal dari pengumpulan data kegunaan sedini
mungkin. Nielsen mencatat bahwa lebih murah untuk membuat
perubahan sebelum kode apa pun ditulis daripada menunggu sampai
setelah implementasi tersebut selesai.

Kunci agar model prototype berhasil dengan baik adalah dengan

mendefinisikan aturan-aturan main pada saat awal, yaitu customer
dan developer harus setuju bahwa prototype dibangun untuk
mendefinisikan kebutuhan.

Tahap-Tahapan Prototyping

· Pengumpulan Kebutuhan

Customer dan Developer bersama-sama mendefinisikan format

seluruh perangkat lunak, mengidentifikasikan semua kebutuhan, dan
garis besar sistem yang akan dibuat.

· Membangun Prototyping

Membangun Prototyping dengan membuat perancangan sementara

yang berfokus pada penyajian kepada customer.

· Evaluasi Prototyping

Evaluasi yang dimaksud disini dilakukan oleh customer apakah

prototyping yang sudah dibangun sudah sesuai keinginan/kebutuhan
customer.
· Mengkodekan Sistem

Dalam tahap ini prototyping yang ada disepakati dan diterjemahkan ke

dalam Bahasa pemrograman yang sesuai.

· Menguji Sistem

Setelah sistem sudah menjadi perangkat lunak yang siap pakai, harus
dites dahulu sebelum digunakan.

· Evaluasi Sistem

Evaluasi yang dimaksud disini adalah customer mengevaluasi apakah

sistem yang sudah jadi sudah sesuai dengan yang diharapkan.

· Menggunakan Sistem

Perangkat lunak yang telah diuji dan diterima pelanggan siap untuk
digunakan.

Keunggulan dan Kelemahan dari Prototyping

· Keunggulan Prototyping, antara lain :

1. Adanya komunikasi yang baik antara developer dan customer.

2. Developer dapat bekerja lebih baik dalam menentukan kebutuhan
customer.

3. Customer berperan aktif dalam pengembangan sistem.

4. Lebih menghemat waktu dalam pengembangan sistem.

5. Penerapan menjadi lebih mudah karena user mengetahui apa yang

diharapkannya

· Kelemahan Prototyping, antara lain :

1. Customer kadang tidak melihat atau menyadari bahwa perangkat

lunak yang ada belum mencantumkan kualitas perangkat lunak secara
keseluruhan

2. Developer biasanya ingin cepat menyelesaikan proyek.

3. Hubungan Customer dengan computer yang disediakan mungkin

tidak mencerminkan teknik perancangan yang baik.

Prototyping Tools

1. Draw/Paint Program : Menggambar setiap layar baik untuk dilihat.

Contoh : Photoshop, Coreldraw

2. Scripted Simulations/Slide Show : Dapat memberikan user catatan
yang sangat spesifik.

Contoh : PowerPoint, Hypercard, HTML,Macromedia Director

3. Interface Builders : Tools untuk menampilkan jendela, kendali, dan

lain-lainnya dari interface

Contoh : Visual Basic (VB), Delphi, UMIX

High-Fidelity dan Low-Fidelity Prototyping

· High-Fidelity

High-fidelity ini berbasiskan komputer, biasanya memungkinkan

interaksi user yang realistis,membawa ke representasi sebenarnya dari
antarmuka user, lebih efektif dalam mengumpulkan data kinerja
manusia sejati(misalnya waktu untuk menyelesaikan tugas), dan
dalam menunjukkan produk yang sebenarnya kepada
klien,manajemen, dan lainnya.

· Low-Fidelity

Low-fidelity yang dimaksud adalah berbasis kertas dan tidak

memungkinkan interaksi pengguna. Mulai dari serangkaian mock-up
yang digambar tangan hingga cetakan.
Low-fidelity memungkinkan visualisasi awal solusi desain alternative,
membantu memicu inovasi dan peningkatan.

Paper Prototyping

Paper prototyping adalah sebuah teknik menggambarkan user

interface di atas kertas sehingga memungkinkan untuk
dirancang,disimulasikan , dan diuji dengan cepat.

Gambar 2. Paper Prototyping

Cara kerja paper prototyping :

1.Menentukan tasks yang akan dicapai oleh user.

2.Screen shots atau gambar komponen user interface, seperti windows,
menu, popup messages, dan lainnya yang dapat membantu user
mencapai tasks

3. Usability test dengan satu atau dua orang developers bekerja

menjadi computer untuk simulasi cara kerja tampilan

4. user diberikan tasks untuk berinteraksi langsung dengan prototype.

Gambar 3. Cara Kerja Paper Prototyping

Salah satu keunggulan Paper Prototyping yaitu setiap user dapat

melakukan ujicoba antarmuka dengan aksi-aksi yang nyata. User
dapat menentukan sendiri aksi atau tugas apa saja yang bisa dipahami
dan lakukan ketika menggunakan aplikasi tersebut.

Paper prototyping lebih mudah dibuat dibandingkan dengan

computer prototyping, karena paper prototyping hanya membutuhkan
keahlian menggambar diatas kertas. Dan jika ada yang kurang sesuai
maka dapat dengan segera diperbaiki.
Gambar paper protoyping tidak perlu dibuat sebagus mungkin, yang
paling penting adalah dapat menjelaskan ide-ide visualisasi dan aksi
antarmuka yang ingin diterapkan.

Teknik paper Prototyping,antara lain :

1. Comps

Comps adalah representasi visual (situsweb) yang mendemonstrasikan

berbagai aspek antarmuka (huruf, warna, dan logo)

2. Wireframe

Wireframe digunakan untuk mendemonstrasikan layout halaman

antarmuka.

3. Storyboard

Storyboard adalah kumpulan gambar-gambar yang digunkan untuk

mendemonstrasikan bagaiman sebuah antarmuka bekerja.

Computer Prototyping

Tipikal Computer Prototyping adalah prototype horizontal.Dimana

manusia mensimulasikan paper prototype dapat menghasilkan konten
baru dengan cepat sebagai tanggapan terhadap tindakan user yang
tidak terduga, computer prototyping tidak.
Yang dapat dipelajari dari computer prototyping, antara lain
:

1. Tata Letak layar

2. Warna, Font, ikon, dan elemen lainnya

3. Umpan Balik interaktif

4. Masalah Efisiensi

5. Computer Prototyping membantu menangani desain grafis dan

umpan balik dinamis dari antarmuka.

Mengapa menggunakan prototyping tools ?

1. Lebih cepat daripada coding

2. Tidak ada Debugging

3. Lebih mudah untuk mengubah atau membuang

4. Jangan biarkan toolkit UI melakukan desain grafis.

5. Salah satu cara untuk membangun prototype computer adalah

dengan memprogramnya secara langsung dalam Bahasa implementasi,
seperti Java atau C++
6. Membangun antarmuka dengan alat biasanya lebih cepat daripada
pengkodean langsung dan tidak ada kode untuk di debug

7. Lebih mudah untuk mengubahnya atau bahkan membuangnya jika

desain yang dibangun ternyata salah

Teknik Computer Prototyping

1. Storyboard

Storyboard adalah urutan(grafik sebenarnya) layar tetap dan

terkadang terhubung dengan hotspot.

Setiap layar memiliki satu atau lebih hotspot yang dapat diklik untuk
melompat ke layar lain. Terkadang transisi antar layar melibatkan
beberapa animasi untuk menunjukkan efek dinamis, seperti umpan
balik.

Tools Storyboard yang digunakan adalah Photoshop, Balsamiq

Mockup, dan Mockingbird

2. Form Builder

From Builder adalah alat untuk menggambar antarmuka yang nyata

dan berfungsi dengan menyeret widget dari palet dan
memposisikannya di jendela.
Tools From Builder adalah Mac Interface Builder, Qt Designer,
FlexBuilder,Silverlight,dan Visual Basic.

3. Wizard of OZ

Wizard of OZ adalah sejenis hibrida dari computer prototyping dan

paper prototyping, user berinteraksi dengan computer, tetapi ada
manusia di belakang layar yang mencari tahu bagaimana antarmuka
user harus merespons

References:

[1] http://firnajuwi.blogspot.com/2014/12/prototype.html

[2] https://adityarizki.net/mengenal-paper-prototyping/