Materi 5 Prototyping Update

(1)

INTERAKSI MANUSIA DAN MESIN

(2)



_Definisi

_Prototype

_?



_{Alasan membuat}

_prototype

_?



_{Jenis-jenis teknik}

_Prototype

• _{Low fidelity}

• _{High fidelity}



_{Kompromi dalam pembuatan}

_prototype

• _Vertical

• Horizontal

2

(3)

3

 _Proses_{membangun model}_dari_{suatu sistem}_.

(4)

Dalam desain sistem interaktif,

prototype

bisa berupa:

 _Serangkaian_{sketsa 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

(5)

(6)



_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

(7)

 _{End user}_dapat_{berpartisipasi aktif}_.

 _{Penentuan kebutuhan}_lebih_mudah_diwujudkan.  _{Mempersingkat waktu}_pengembangan _Sistem.  _{Waktu pengembangan bisa berkurang.}

 _{Mengurangi biaya}_{pengembangan.}

 _{Pengembang menerima umpan balik pengguna secara terukur.}

 _{Memfasilitasi implementasi sistem karena pengguna tahu apa yang}

diharapkan.

 _{Kepuasan pengguna}_yang_{lebih tinggi}_.

 _{Menghadapkan para pengembang untuk berpotensi untuk meningkatkan}

sistem dimasa yang akan datang

7

KEUNTUNGAN MEMBUAT

(8)

 _{Proses analisis dan perancangan terlalu singkat.}  _{Mengesampingkan alternatif pemecahan masalah.}

 _{Bisanya kurang fleksible dalam mengahadapi perubahan.}  _{Protitype yang dihasilkan tidak selamanya mudah dirubah.}  _{Prototype terlalu cepat selesai.}

8

KERUGIAN MEMBUAT

(9)

1. Permintaan bermula dari kebutuhan user.

2. Bangunlah sistem prototipe untuk menemukan kebutuhan awal

yang diminta.

3. Biarkan user menggunakan prototipe. Analis harus memberikan

pelatihan, membantu dan duduk bersama-sama dengan user, khususnya untuk pertama kali. Anjurkan perubahan. User harus melihat fungsi-fungsi dan sifat dari prototipe, lihat bagaimana ia memecahkan masalah bisnis dan mengusulkan perbaikan.

4. Implementasikan saran-saran perubahan.

5. Ulangi langkah ketiga sampai user merasa puas.

6. Merancang dan membangun suatu sistem akhir seperti

sebelumnya. 9

LANGKAH - LANGKAH MEMBUAT

(10)



_{Persoalan Teknis}



_{Alur Kerja dan Rancangan Tugas}



_{Tata letak layar dan Tampilan Informasi}



_{Tingkat Kesulitan, Kontroversial, Wilayah Kritis}

10

HAL-HAL YANG HARUS DIBUAT

(11)

 _Adalah _interaktif_dan _{implementasi kerangka}_{, dalam} _kasus

tertentu dibuat dengan menggunakan algoritma yang

sederhana dan working prototipe bertujuan untuk memberikan

suatu gambaran tentang sistem yang akan dibangun.

 _Skenario_dari_{suatu prototipe}_adalah_sepertiga_{dari keseluruhan}

sistem yang akan dibangun

11

(12)

14

VERTICAL

PROTOTYPE :

(13)

15

HORIZONTAL

PROTOTYPE :

(14)

Fidelity Prototyping adalah

tingkat kerincian

sebuah prototype sistem yang tebagi menjadi 2

yaitu :

1. LOW-FIDELITY PROTOTYPING

2. HIGH-FIDELITY PROTOTYPING

16

(15)



_Menggunakan

_{media yang tidak sama}

_dengan

_{media sistem}

final

, contoh:

paper

,

cardboard



_{Cepat, murah dan mudah diubah}



_{Contoh-contoh:}

Sketsa pada layar, urutan tugas, dll

Posting Catatan Kecil

storyboards

‘Wizard-of-Oz’

17

(16)

18

(17)

19

(18)

• _{Pembuatan s}

_ketsa

_{sangat penting dalam pembuatan}

low-fidelity prototype

• _{Tidak tergantung}

_pada

_{ketrampilan menggambar}

_,

gunakan simbol-simbol sederhana.

20

(19)



_{Sering dibuat menurut}

_{sebuah skenario}

_{, memberikan}

g

ambaran lebih terinci

.



_Serangkaian

_{gambar/sketsa}

_yang

_{memperlihatkan}

bagaimana pengguna bisa

menjalankan aplikasi sesuai

tugas



_{Dilakukan pada awal proses perancangan}

21

(20)

Alat untuk memvisualisasikan proyek anda:

• _Navigasi

tampilan visual jalur-jalur navigasi

• _{Interaktifitas}

dalam bentuk kata-kata diatas kertas

• _{Rancangan layar}

Layout dasar, warna dasar

• _{Sketsa kasar}

untuk frame, menus, dll.

Storyboarding is about conceptual thinking, not art.

[Al Brown, Presentations magazine, 1997]

22

(21)

23

(22)



_{Kartu index (3 X 5 inch)}



_{Setiap kartu}

_{menggambarkan}

_{satu layar}

_atau

sebagian dari layar.



_{Sering dipakai dalam pengembangan situs web.}

24

(23)



_{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

25

(24)

26

(25)

 _{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?}

(26)

 _Menggunakan_{materi seperti produk final}_.

 _{Prototipe 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

28

(27)

Source: Kelly, Maureen. “Interactive Prototypes with PowerPoint”. http://www.boxesandarrows.com/view/interactive

29

(28)

PROTOTYPE BERBASIS DUMMY

 _{Mengutamakan tampilan visual}

 _{Hanya dummy, fungsi-fungsi tidak bekerja}

Nintendo control pad mockup

Project inkwell “Spark” computing device concept

30

(29)

31

Rancangan layar terinci

(30)



_Evolutioner

_:

Prototipe akhirnya menjadi suatu produk



_{Revolutionary}

_{, or throwaway :}

Prototipe digunakan untuk mendapatkan spesifikasi

benar, kemudian dibuang

32

DUA PENDEKATAN DALAM

(31)



_{Draw/Paint Program}



_{Scripted Simulation/Slide Show}



_{Interface Builder}

33

(32)



_{Menggambar setiap layar, baik untuk dilihat}



_{Prototipe horizontal, tipis}



_{Contoh : Adobe Photoshop, Corel Draw}

34

(33)

35

(34)



_{Meletakkan tampilan seperti storyboard dengan}

animasi perubahan diantaranya.



_{Dapat memberikan user catatan yang sangat spesifik}



_{Contoh : Powerpoint, Hypercard, Macromedia Director,}

HTML

36

(35)

37

(36)

 _{Tools untuk menampilkan jendela, kendali, dan lain-lain dari interface.}  _{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.}

 _{Contoh: Visual Basic, Delphi.}

38

(37)

39