Matakuliah : T0593 / Interaksi Manusia dan Komputer

Tahun : 2009

Prototyping
Pertemuan 5
 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
 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

5
Hal-hal yang harus dibuat prototype?
•Technical issues
•Work flow, task design
•Screen layouts and information display
•Difficult, controversial, critical areas

6
Dua Pendekatan dalam Pembuatan
Prototype

• Evolutionary:
the prototype eventually becomes the product

• Revolutionary, or throwaway:
the prototype is used to get the specs right,
then discarded!!

7
 Horizontal prototype:
broad but only top-level

8
 Vertical prototype:
deep, but only some functions

9
 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’

10
Paper prototyping

11
 Powerpoint Prototyping

Powerpoint Prototype Website

Source: Kelly, Maureen. “Interactive Prototypes with PowerPoint”. [Link]

12
 Form prototype
• Mengutamakan tampilan visual
• Hanya dummy, fungsi-fungsi tidak bekerja

Project inkwell “Spark”

              

                                 
                                 
                                 
                                 
                                 
Nintendo control pad mockup
computing device concept               

Source: Buxton, Bill. Sketching User Experiences. Morgan Kaufman, 2007. Nintendo via [Link] blog, IDEO. 13
 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

14
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]
15
Membuat storyboard berdasarkan skenario

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

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

19
 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

20
21
 ‘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?

22
 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

23
Q&A

24