Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia

Presentasi berjudul: "Fathiah, S.T.,M.Eng Universitas Ubudiyah Indonesia"— Transcript presentasi:

1

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

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

4 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

5 Mengapa menggunakan Prototipe ?

6 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

7

8 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.

9 Keunggulan Prototipe Adanya komunikasi yang baik antara pengembang dan pelanggan Pengembang dapat bekerja lebih baik dalam menentukan kebutuhan pelanggan Pelanggan berperan aktif dalam pengembangan sistem Lebih menghemat waktu dalam pengembangan sistem Penerapan menjadi lebih mudah karena pemakai mengetahui apa yang diharapkannya.

10 Kelemahan Prototipe 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 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 . Hubungan pelanggan dengan komputer yang disediakan mungkin tidak mencerminkan teknik perancangan yang baik

11 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?

12 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.

13 Metode Pembuatan Prototyping Dengan Cepat
Non-Computer (biasanya dikerjakan lebih awal dalam proses pembuatan) vs Computer-Based (biasanya dikerjakan kemudian)

14 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.

15 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.

16 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 :

17 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.

18 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.

19 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.

20 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.

21 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.

22 Terminologi Prototipe
Early Prototyping (prototipe cepat) Late Prototyping (prototipe lambat) 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.

23 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

24 Terminologi Prototipe
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.

25 Terminologi Prototipe
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.

26 Prototyping Tools Draw/Paint Program contoh: Photoshop, Coreldraw
- Menggambar setiap layar, baik untuk dilihat. - Prototype horisontal, tipis. - Adobe Photoshop.

27 Contoh

28 Prototyping Tools 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.

29 Contoh

30 Prototyping Tools Interface Builders contoh: Visual Basic, Delphi.
- Tools untuk menampilkan jendela, kendali, dan lain-lain dari interface.

31 Contoh

32 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.

33 Pemodelan Early Late Low-fidelity High-fidelity Medium-fidelity
Sketches, mock-ups Medium-fidelity Scenarios Storyboards Slide shows High-fidelity Simulations Late

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

35 Paper prototyping

36 Powerpoint Prototyping
Powerpoint Prototype Website Source: Kelly, Maureen. “Interactive Prototypes with PowerPoint”.

37 Form prototype Mengutamakan tampilan visual
Hanya dummy, fungsi-fungsi tidak bekerja                                                                                                                                                                                                  Project inkwell “Spark” computing device concept Nintendo control pad mockup Source: Buxton, Bill. Sketching User Experiences. Morgan Kaufman, Nintendo via 37signals.com blog, IDEO.

38 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

39 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]

40 Membuat storyboard berdasarkan skenario

41 Rancangan layar terinci membuat implementasi mudah dan tidak ambigu

42 Pembuatan Sketch Pembuatan sketch sangat penting dalam pembuatan low-fidelity prototype Tidak tergantung pada ketrampilan menggambar, gunakan simbol- simbol sederhana.

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

44 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

45

46 ‘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?

47 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

48 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.

49 TUGAS Menurut Anda, Apakah manfaat menggunakan prototipe sistem? Jelaskan! Cari contoh penggunaan prototipe!

50 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