PROTOTYPING

Fathiah, S.T.,M.Eng
Universitas Ubudiyah Indonesia
fathiah@uui.ac.id

2016
 Topik Bahasan
•Pengertian prototype?
•Alasan membuat prototype?
•Kompromi dalam pembuatan prototype
- vertical
- horizontal
•Jenis-jenis teknik prototype
- low fidelity
- high fidelity

3
 Pengertian prototype?
Dalam perancangan sistem interaktif, prototype bisa berupa:
• Serangkaian skets layar
• Sebuah storyboard, i.e. a cartoon-like series of scenes
Powerpoint slide show
• Video yang mesimulasikan penggunaan sebuah system
• Model dari kayu(contoh. PalmPilot)
• cardboard mock-up
• Sebuah perangkat lunak dengan fungsionalitas terbatas yang
ditulis dengan suatu bahasa pemrograman

4
Mengapa menggunakan Prototipe ?
 Alasan membuat prototype?
• Evaluasi dan umpan balik sangat penting dalam
perancangan
• Para Stakeholders dapat lebih mudah melihat,
memegang, dan berinteraksi dengan prototype dari pada
dengan dokumen atau gambar
• Anggota tim bisa berkomunikasi secara lebih efektif
• Lebih mudah mencoba ide-ide baru
• Mendorong pemikiran lebih dalam aspek perancangan
yang sangat penting.
• prototype mendukung perancang dalam memilih
alternatif rancangan

6
 Karakteristik dalam Proses UCD
• Memahami user dan kebutuhannya.
• Fokus pada user pada tahap awal desain dan
mengevaluasi hasil desain.
• Mengidentifikasi, membuat dokumentasi dan
menyetujui kegunaan dan tujuan pengalaman
user.
• Perulangan hampir dapat dipastikan. Para
perancang tidak pernah berhasil hanya dalam
satu kali proses.
 Keunggulan Prototipe
1. Adanya komunikasi yang baik antara pengembang
dan pelanggan
2. Pengembang dapat bekerja lebih baik dalam
menentukan kebutuhan pelanggan
3. Pelanggan berperan aktif dalam pengembangan
sistem
4. Lebih menghemat waktu dalam pengembangan
sistem
5. Penerapan menjadi lebih mudah karena pemakai
mengetahui apa yang diharapkannya.
 Kelemahan Prototipe
1. Pelanggan kadang tidak melihat atau menyadari bahwa
perangkat lunak yang ada belum mencantumkan kualitas
perangkat lunak secara keseluruhan dan juga belum
memikirkan kemampuan pemeliharaan untuk jangka waktu
lama
2. Pengembang biasanya ingin cepat menyelesaikan proyek.
Sehingga menggunakan algoritma dan bahasa
pemrograman yang sederhana untuk membuat prototyping
lebih cepat selesai tanpa memikirkan lebih lanjut bahwa
program tersebut hanya merupakan cetak biru sistem .
3. Hubungan pelanggan dengan komputer yang disediakan
mungkin tidak mencerminkan teknik perancangan yang baik
 Dimensi Prototype
1. Penyajian
 Bagaimana desain dilukiskan atau diwakili?
 Dapat berupa uraian tekstual atau dapat visual dan
diagram.

2. Lingkup
 Apakah hanya interface atau apakah mencakup
komponen komputasi?
 Dimensi Prototype
3. Executability (Dapat dijalankan)
Dapatkah prototype tersebut dijalankan?
Jika dikodekan, akan ada periode saat prototype
tidak dapat dijalankan.

4. Maturation (Pematangan)
Apakah tahapan-tahapan produk ini mengikuti?
- Revolusioner: mengganti yang lama.
- Evolusioner : terus melakukan perubahan pada
perancangan yang sebelumnya.
 Metode Pembuatan Prototyping
Dengan Cepat
Non-Computer
(biasanya dikerjakan lebih awal dalam proses pembuatan)

vs

Computer-Based
(biasanya dikerjakan kemudian)
 Metode Non-Computer (Manual)
Tujuan
Ingin menyatakan gagasan desain dan mendapatkan
dengan mudah dan cepat pendapat atas sistem.

Deskripsi Desain
Dapat berupa deskripsi tekstual dari suatu desain sistem.
- Kelemahan yang nyata adalah seberapa jauh dari sistem
yang sebenarnya.
- Tidak dapat melakukan suatu pekerjaan yang mewakili
aspek dari interface.
 Metode Non-Computer (Manual)
Sketsa, Mock-ups
- Paper-Based “menggambarkan” interface.
- Baik untuk mengungkapkan pendapat.
- Difokuskan pada orang dengan desain tingkat
tinggi.
- Tidak terlalu baik untuk menggambarkan alur
dan rinciannya.
- Murah dan cepat umpan balik sangat
menolong.
 Metode Non-Computer (Manual)
Storyboarding
Pensil dan simulasi catatan atau walkthrough
dari kemampuan dan tampilan sistem.
- Menggunakan urutan diagram/gambar.
- Menunjukkan kunci snap shots.
- Cepat dan mudah.
Contoh :
 Metode Non-Computer (Manual)
Skenario
Hipotesis atau imajinasi penggunaan.
- Biasanya menyertakan beberapa orang,
peristiwa, lingkungan dan situasi.
- Menyediakan konteks operasi.
- Terkadang dalam format naratif, tetapi juga
dapat berupa sketsa atau bahkan video.
 Metode Non-Computer (Manual)
Utilitas Skenario
- Menjanjikan dan menarik.
- Mengijinkan perancang untuk melihat masalah
dari pandangan orang lain.
- Memudahkan umpan balik dan pendapat.
- Dapat sangat kreatif dan modern.
 Metode Non-Computer (Manual)
Teknik Lain
Tutorial dan Manual
- Mungkin menuliskannya lebih berguna daripada
disimpan dalam kepala.
- Memaksa perancang untuk membuat keputusan
dengan tegas.
- Menulis/meletakkannya di atas kertas jauh lebih
berharga.
 Metode Komputer
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.
 Terminologi Prototipe
1. Prototype Horisontal
Sangat luas, mengerjakan atau menunjukkan
sebagian besar interface, tetapi tidak
mendalam.
2. Prototype Vertikal
Lebih sedikit aspek atau fitur dari interface yang
disimulasikan, tetapi dilaksanakan dengan
rincian yang sangat baik.
 Terminologi Prototipe
3. Early Prototyping (prototipe cepat)
4. Late Prototyping (prototipe lambat)
5. Low-fidelity Prototyping (prototype dengan tingkat ketepatan yang
rendah)
Contoh (1) storyboard:
- Digunakan di awal desain.
- Biasanya digunakan dengan skenario, lebih terinci, dan
dapat diputar ulang.
- Kumpulan dari sketsa/frame individual.
- menyajikan urutan inti cerita.
- menunjukkan bagaimana kemungkinan user dapat mengalami
peningkatan melalui setiap aktifitas.
 Terminologi Prototipe
Contoh (2) sketsa:
- Sketsa sangat penting untuk low-fidelity prototyping.
- Jangan takut dengan kemampuan menggambar.
- Menyajikan “tampilan” cepat dari interface, konsep
desain, dll.

Contoh (3) “wizard-of-oz”:

- Digunakan tampilan maket dan berinteraksi dengan
pemakai
- Baik untuk mensimulasikan sistem yang sulit dibuat
 Terminologi Prototipe
6. Mid-fidelity prototyping (prototype dengan
tingkat
ketepatan sedang)
- Form skematik.
- Navigasi dan fungsi yang disimulasikan
biasanya berbasis pada apa yang tampil pada
layar
atau simulasi layar.
Contoh tools yang digunakan: powerpoint,
illustrator, dll.
 Terminologi Prototipe
7. High-fidelity prototyping (prototype dengan
tingkat ketepatan yang tinggi)
- Hi-fi prototype seperti sistem akhir.
- Menggunakan bahan baku yang sama seperti
produk akhir.
Tools umum yang digunakan: Macromedia
Director, Visual Basic, Flash.
 Prototyping Tools
1. Draw/Paint Program
contoh: Photoshop, Coreldraw
- Menggambar setiap layar, baik untuk dilihat.
- Prototype horisontal, tipis.
- Adobe Photoshop.
Contoh
 Prototyping Tools
2. Scripted Simulations/Slide Show
contoh: Powerpoint, Hypercard, Macromedia
Director, HTML.
- Letakkan tampilan seperti storyboard dengan
(animasi) perubahan diantaranya.
- Dapat memberikan user catatan yang sangat
spesifik.
- Macromedia Director.
Contoh
 Prototyping Tools
3. Interface Builders
contoh: Visual Basic, Delphi.
- Tools untuk menampilkan jendela, kendali,
dan
lain-lain dari interface.
Contoh
 Kelebihan
 Mudah dikembangkan dan memodifikasi layar.
 Mendukung jenis interface yang dikembangkan.
 Mendukung berbagai macam device Input/Output.
 Mudah untuk memodifikasi dan menghubungkan
layar.
 Mengijinkan memanggil prosedur eksternal dan
program.
 Mengijinkan mengimpor teks, grafik, media lain.
 Mudah untuk dipelajari dan digunakan.
 Dukungan yang baik dari vendor.
 Pemodelan

Low-fidelity

Sketches,
mock-ups
Scenarios Medium-fidelity
Storyboards

Slide shows
High-fidelity
Simulations
 Low-fidelity Prototyping
• Menggunakan media yang tidak sama dengan media
sistem final, contoh: paper, cardboard
• Cepat, murah dan mudah diubah
• Contoh-contoh:
sketches of screens, task sequences, etc
‘Post-it’ notes
storyboards
‘Wizard-of-Oz’

34
Paper prototyping

35
 Powerpoint Prototyping

Powerpoint Prototype Website

36
Source: Kelly, Maureen. “Interactive Prototypes with PowerPoint”. http://www.boxesandarrows.com/view/interactive
 Form prototype
• Mengutamakan tampilan visual
• Hanya dummy, fungsi-fungsi tidak bekerja

Project inkwell “Spark” Nintendo control pad mockup

computing device concept
37
Source: Buxton, Bill. Sketching User Experiences. Morgan Kaufman, 2007. Nintendo via 37signals.com blog, IDEO.
 Storyboard
•Sering dibuat menurut sebuah skenario,
memberikan gambaran lebih terinci.
•Serangkaian gambar/sketch yang
memperlihatkan bagaimana pengguna bisa
menjalankan aplikasi sesuai tugas
•Dilakukan pada awal proses perancangan

38
Storyboard = prototip berbasis kertas
Alat untuk memvisualisasikan proyek anda:
• Navigasi
tampilan visual jalur-jalur navigasi

• Interaktifitas
dalam bentuk kata-kata diatas kertas

• rancangan layar
Layout dasar, warna dasar

• Sketch kasar
untuk key frames, menus, etc.

Storyboarding is about conceptual thinking, not art.

[Al Brown, Presentations magazine, 1997]
39
Membuat storyboard berdasarkan
skenario

40
Rancangan layar terinci membuat implementasi mudah dan tidak ambigu
41
 Pembuatan Sketch
• Pembuatan sketch sangat penting dalam
pembuatan low-fidelity prototype
• Tidak tergantung pada ketrampilan
menggambar, gunakan simbol-simbol
sederhana.

42
 Prototype berbasis kartu
• Kartu index (3 X 5 inches)
• Setiap kartu menggambarkan satu
layar atau sebagian dari layar.
• Sering dipakai dalam pengembangan
situs web.

43
 Kartu Index
• Umum dipakai dalam pengembangan situs web
• Juga berguna untuk aplikasi dengan jumlah layar yang
banyak
• Setiap kartu mewakili sebuah layar.
• Sangar membantu dalam mengorganisasikan situs web.
• Bisa membantu dalam pembuatan arsitektur informasi

44
45
 ‘Wizard-of-Oz’ prototyping
• Pengguna mengira mereka berinteraksi dengan komputer, padahal
seorang pengembang memberikan output secara manual menggantikan
sistem.
• Biasanya dilakukan di awal proses perancangan untuk memahami
keinginan pengguna.
• What is ‘wrong’ with this approach?

User

>Blurb blurb
>Do this
>Why?

46
 High-fidelity prototyping
• Menggunakan materi seperti produk final.
• Prototip lebih tampak seperti sistem final dari pada versi
low-fidelity
• Perangkat lunak yang sering digunakan seperti
Macromedia Director, Visual Basic, dan Smalltalk.
• Ada bahaya karena bisa mengakibatkan pengguna
mengira sudah mendapatkan sistem yang sudah jadi

47
 Rangkuman
• Prototipe merupakan suatu metode dalam pengembangan
sistem yang menggunakan pendekatan untuk membuat
sesuatu program dengan cepat dan bertahap
• Tahapan prototipe yaitu identifikasi kebutuhan pemakai,
membuat prototipe, menguji prototipe, memperbaiki
prototipe, mengembangkan versi produksi.
• Dimensi prototipe terdiri dari penyajian, lingkup,
executability dan maturation.
• Metode prototipe dibedakan menjadi metode non-
computer dan metode computer-based.
 TUGAS
1. Menurut Anda, Apakah manfaat menggunakan
prototipe sistem? Jelaskan!
2. Cari contoh penggunaan prototipe!
 Daftar Pustaka
• Surbakti, Irfan; Santosa, Insap; Interaksi Manusia Dan
Komputer, Edisi Jurusan Teknik Informatika-ITS, 2006
• Sudarmawan; Ariyus, Dony; Interaksi Manusia dan
Komputer, Andi Offset Yogyakarta, 2007