Anda di halaman 1dari 24

Matakuliah : T0593 / Interaksi Manusia dan Komputer Tahun : 2009

Prototyping Pertemuan 5

Topik Bahasan
Pengertian prototype! "lasan mem#uat prototype! Kompromi dalam pem#uatan prototype $ vertical $ horizontal %enis$&enis teknik prototype $ low fidelity $ high fidelity

Pengertian prototype ! 'alam peran(angan sistem interakti)* prototype #isa


#erupa: +erangkaian skets layar +e#uah storyboard* i,e, a cartoon-like series of scenes Powerpoint slide show -ideo yang mesimulasikan penggunaan se#uah system Model dari kayu.(ontoh, PalmPilot/ cardboard mock-up +e#uah perangkat lunak dengan )ungsionalitas ter#atas yang ditulis dengan suatu #ahasa 0 pemrograman

"lasan mem#uat prototype! 12aluasi dan umpan #alik sangat penting dalam
peran(angan Para Stakeholders dapat le#ih mudah melihat* memegang* dan #erinteraksi dengan prototype dari pada dengan dokumen atau gam#ar "nggota tim #isa #erkomunikasi se(ara le#ih e)ekti) 3e#ih mudah men(o#a ide$ide #aru Mendorong pemikiran le#ih dalam aspek peran(angan yang sangat penting, prototype mendukung peran(ang dalam memilih alternati) ran(angan

4al$hal yang harus di#uat prototype!


Te(hni(al issues 5ork )lo6* task design +(reen layouts and in)ormation display 'i))i(ult* (ontro2ersial* (riti(al areas

Dua Pendekatan dalam Pembuatan Prototype


12olutionary: the prototype e2entually #e(omes the produ(t 8e2olutionary* or thro6a6ay: the prototype is used to get the spe(s right* then dis(arded99

Horizontal prototype: broad but only top-level

Vertical prototype: deep, but only some functions

Menggunakan media yang tidak sama dengan media sistem )inal* (ontoh: paper* (ard#oard <epat* murah dan mudah diu#ah <ontoh$(ontoh: sket(hes o) s(reens* task se=uen(es* et( >Post$it? notes story#oards >5i@ard$o)$A@?

Low-fidelity Prototyping

B0

Paper prototyping

BB

Powerpoint Prototyping

Powerpoint Prototype $ebsite

Source: Kelly, Maureen. Interactive Prototypes wit PowerPoint!. ttp:""www.bo#esandarrows.com"view"interactive

B2

Form prototype
Mengutamakan tampilan 2isual 4anya dummy* )ungsi$)ungsi tidak #eker&a

Pro0ect inkwell Spark! computin& device concept

-intendo control pad mockup

Source: %u#ton, %ill. Sketc in& 'ser (#periences. Mor&an Kau)man, *++,. -intendo via .,si&nals.com blo&, ID(/.

B3

+ering di#uat menurut se#uah skenario* mem#erikan gam#aran le#ih terin(i, +erangkaian gambar/sketch yang memperlihatkan #agaimana pengguna #isa men&alankan aplikasi sesuai tugas 'ilakukan pada a6al proses peran(angan

Storyboar d

B0

Storyboard 3 prototip berbasis kertas


4lat untuk memvisualisasikan proyek anda:
-avi&asi tampilan visual 0alur10alur navi&asi Interakti)itas dalam bentuk kata1kata diatas kertas rancan&an layar 2ayout dasar, warna dasar Sketc kasar untuk key )rames, menus, etc. Storyboardin& is about conceptual t inkin&, not art.
54l %rown, Presentations ma&a6ine, 788,9

B5

Mem#uat story#oard #erdasarkan skenario

B7

Rancangan layar terinci membuat implementasi mudah dan tidak ambigu


B:

Pem#uatan +ket(h
Pem#uatan sketch sangat penting dalam pem#uatan low-fidelity prototype Tidak tergantung pada ketrampilan menggam#ar* gunakan sim#ol$sim#ol sederhana,

B;

Prototype #er#asis kartu


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

B9

Kartu Inde
Cmum dipakai dalam pengem#angan situs 6e# %uga #erguna untuk aplikasi dengan &umlah layar yang #anyak +etiap kartu me6akili se#uah layar, +angar mem#antu dalam mengorganisasikan situs 6e#, Bisa mem#antu dalam pem#uatan arsitektur in)ormasi

20

2B

!"izard-of-#z$ prototyping Pengguna mengira mereka #erinteraksi dengan komputer*


padahal seorang pengem#ang mem#erikan output se(ara manual menggantikan sistem, Biasanya dilakukan di a6al proses peran(angan untuk memahami keinginan pengguna, 5hat is >6rong? 6ith this approa(h!
'ser

:%lurb blurb :Do t is :$ y;

22

Menggunakan materi seperti produk )inal, Prototip le#ih tampak seperti sistem )inal dari pada 2ersi low-fidelity Perangkat lunak yang sering digunakan seperti Ma(romedia 'ire(tor* -isual Basi(* dan +malltalk, "da #ahaya karena #isa mengaki#atkan pengguna mengira sudah mendapatkan sistem yang sudah &adi
23

%igh-fidelity prototyping

DE"

20