Mengenal Paper Prototyping

31 Dec 2014 · by Admin Person

Ketika mengembangkan sebuah produk perangkat lunak, salah satu hal penting dalam siklus rekayasa perangkat lunak adalah melakukan pengetesan (testing). Testing dapat dilakukan melalui beberapa cara, salah satunya yaitu dengan melakukan usability testing. Usability testing berfokus pada pengguna (user-centered design) yang bertujuan untuk mengevaluasi sebuah produk dengan cara mengujicobakan produk tersebut kepada pengguna secara langsung.

Dalam studi antarmuka manusia-komputer, paper prototyping merupakan salah satu cara untuk melakukan usability testing. Paper prototyping adalah metode yang sering digunakan dalam proses mendesain berbasis pengguna, sebuah proses yang membantu pengembang untuk membangun perangkat lunak yang sesuai dengan ekspektasi dan kebutuhan pengguna.

Paper prototyping dilakukan pada tahap merancang sebuah antarmuka sebelum siap dikembangkan. Paper prototyping akan menjelaskan bagaimana sebuah aplikasi bekerja dengan baik dan intuitif. Umpan-umpan balik dari pengguna sangat dibutuhkan karena nantinya yang akan menggunakan aplikasi tersebut adalah mereka, bukan hanya pengembang aplikasi. Selanjutnya isu dan masukan dari pengguna tersebut dapat dijadikan acuan untuk membuat prototype antarmuka dalam tim desain.

Salah satu keunggulan paper prototyping yaitu setiap pengguna dapat melakukan ujicoba antarmuka dengan aksi-aksi yang nyata. Pengguna dapat menentukan sendiri aksi atau tugas apa saja yang bisa ia pahami dan lakukan ketika menggunakan aplikasi tersebut secara intuitif.

prot1.jpg Via: http://www.alexandravisconti.com/assets/uploads/2012/04/IMG_4977.jpg

Kapan Harus menggunakan Paper Prototyping?

Dalam sebuah paper berjudul “Paper Prototyping – What is it good for? A comparison of paper and Computer-based low fidelity Prototyping” yang ditulis oleh Reinhard Sefelin dkk. pada tahun 2003, dipaparkan alasan-alasan kapan sebaiknya kita menggunakan paper prototyping:

saat perangkat prototyping yang tersedia tidak mendukung komponen dan ide-ide yang akan diterapkan saat pengembang ingin melibatkan anggota tim desain tanpa keterampilan perangkat lunak yang memadai saat pengujian prototype harus mengarahkan pada banyak gambar, yang selanjutnya dapat dibahas dalam tim desain Sebagai contoh, saat kita membuat mockup menggunakan aplikasi komputer grafis berbasis vektor, perangkat tersebut tidak dapat menjelaskan bagaimana jika ada tombol yang di-klik atau aksi apa yang akan terjadi jika seseorang menekan dropdown list, dan sebagainya.

“Kenapa harus menggunakan Paper Prototyping, sementara saat ini membuat prototype dapat dilakukan dengan komputer?”

Pertanyaan tersebut adalah pertanyaan yang muncul saat saya ikut kursus online di Coursera dengan topik HCI. Pengajar dari Stanford University itu selalu menekankan pentingnya melakukan curah gagas (brainstorming) tentang bagaimana sebuah sistem itu bekerja sebelum dikembangkan lebih jauh. Pembuatan prototype didasarkan pada ide-ide yang alami dan manusiawi. Karena kita akan selalu berpikiran bahwa seharusnya komputer atau teknologi yang baru selain mudah digunakan, juga cepat dipahami dan tidak menimbulkan kerumitan-kerumitan yang baru.

Paper prototyping tentu lebih mudah dibuat dibanding dengan computer prototyping. Paper prototyping hanya membutuhkan keahlian menggambar di atas kertas. Jika ada yang kurang sesuai maka dapat dengan segera diperbaiki. Selain itu, hal tersebut juga dapat mengurangi kerumitan membuat prototype dalam komputer yang seringkali berhubungan dengan kemampuan menggunakan tools tertentu. Gambar paper prototype pun tidak perlu dibuat sebagus mungkin, yang paling penting dalam paper prototyping adalah dapat menjelaskan ide-ide visualisasi dan aksi antarmuka yang ingin diterapkan.

Mockup vs Paper Prototyping

Istilah ‘mockup’ bermakna lebih umum dibanding ‘paper prototyping’. Dalam hal membuat ‘mockup’, desainer diizinkan untuk membuat prototype dengan bantuan tools komputer. Wikipedia menjelaskan mockup sebagai:

“In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes. A mockup is a prototype if it provides at least part of the functionality of a system and enables testing of a design.”

Situsweb www.interaction-design.org menambahkan demikian:

“Mock-ups are used by designers mainly to acquire feedback from users. Mock-ups address the idea captured in a popular engineering one-liner: You can fix it now on the drafting board with an eraser or you can fix it later on the construction site with a sledge hammer.”

Apabila proses curah gagas ide-ide prototype sebuah project dalam tim sudah mendekati final, dibolehkan untuk menguatkan ide prototype tersebut ke dalam visualisasi yang lebih menarik dan rapi. Dalam hal ini, para pengembang perangkat lunak sering menyebutnya dengan istilah pembuatan ‘mockup’.

Teknik Paper Prototyping

Paper prototyping mempunyai beberapa teknik, ada yang disebut comps (komposisi pendek), wireframe, dan storyboard. Comps adalah representasi visual, umumnya situsweb, yang mendemonstrasikan berbagai aspek antarmuka, termasuk huruf, warna, dan logo. Sebuah wireframe digunakan untuk mendemonstrasikan layout halaman antarmuka. Sedangkan storyboard merupakan sekumpulan gambar yang digunakan untuk mendemonstrasikan bagaimana sebuah antarmuka bekerja. Ketiga teknik tersebut berguna dan dapat diterapkan melalui paper prototyping.

Jika saya boleh merekomendasikan, sebaiknya paper prototyping tidak dibuat dengan menggunakan tools komputer, tetapi digambar manual dengan tangan (hand-drawn). Paper prototyping biasanya dibuat dengan potongan-potongan kertas yang berukuran seragam. Ukuran potongan kertas akan lebih baik jika disesuaikan dengan seberapa lebar luasan layout antarmuka. Misalnya, jika ingin membuat paper prototyping untuk antarmuka desktop, bisa menggunakan kertas berukuran A4. Lain halnya jika ingin membuat paper prototyping untuk antarmuka smartphone, kita bisa membagi kertas A4 tersebut menjadi 8 potongan sama besar.

Contoh Paper Prototyping

prot2.jpg Via: http://michelleli.ca/assets/uploads/2012/08/paper_prototypes_2x3_1-web.jpg

prot3.jpg Via: http://melissakeizer.com/assets/uploads/2012/10/6UP.jpg

Contoh Video Pengujian Paper Prototyping

by Aditya Rizki


SHARE AND SUPPORT