Prototyping
Prototyping merupakan suatu metode dalam pengembangan sistem yang menggunakan pendekatan untuk membuat sesuatu program dengan cepat dan bertahap sehingga segera dapat dievaluasi oleh pemakai. Prototyping mewakili model produk yang akan dibangun atau mensimulasikan struktur, fungsionalitas dan operasi sistem. Dalam pembuatan prototipe kita dapat menerapkan UCD (User Centered Design). Karakteristik UCD (User-Centered Design) yaitu :
- 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.
Mengapa prototyping diperlukan?
- Prototyping jauh lebih cepat untuk dibangun daripada implementasi yang sudah selesai, sehingga kita dapat mengevaluasinya lebih cepat dan mendapatkan umpan balik terhadap produk yang kita rancang.
- Prototyping membantu kita untuk membuat desain yang baik
- Jika ada perubahan atau permasalahan pada desain, maka dapat dengan mudah didesain ulang.
- Jika perubahan terlalu banyak terhadap desain yang ingin dirancang, maka tidak akan mengeluarkan biaya sebab prototypingnya dapat dibuang
Terminologi Prototipe
Prototipe horizontal
- Mencakup seluruh antarmuka pengguna namun tanpa fungsi pokok, berupa simulasi dan belum dapat digunakan untuk melakukan pekerjaan yang sesungguhnya.
- Misal, pengguna dapat mengeksekusi seluruh navigasi dan perintah pencarian tapi tanpa memanggil informasi secara nyata.
- Mengurangi level fungsionalitas, tetapi semua fitur ada.
Prototipe vertikal
- Lebih sedikit aspek atau fitur dari interface yang disimulasikan, tetapi dilaksanakan dengan rincian yang sangat baik.
- Misal: dalam sistem informasi penerbangan, pengguna dapat mengakses suatu basisdata dengan data real dari penyedia informasi, tetapi tidak untuk keseluruhan data.
- Mempunyai performance lebih rendah daripada sistem akhir.
- Tidak dalam jaringan
Low-fidelity prototyping (prototipe dengan tingkat ketepatan yang rendah) Fidelity mengacu pada tingkat kerincian dengan produk akhir. Low fidelity mempunyai karakteristik antara lain :
- Gambaran cepat dari sistem akhir
- Mempunyai fungsi atau interaksi yang terbatas
- Lebih menggambarkan konsep, perancangan, alternatif dan layout layar dibanding model interaksi pengguna dengan sistem
- Mendemostrasikan secara umum ‘feel and look ‘ dari antarmuka pengguna.
- Tidak untuk memperlihatkan secara rinci bagaimana operasi sistem aplikasi.
- Digunakan pada awal siklus perancangan
- Memperlihatkan konsep pendekatan secara umum tanpa harus membuang banyak tenaga, biaya dan waktu.
Mid-fidelity prototyping (prototipe 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.
High-fidelity prototyping (prototipe dengan tingkat ketepatan yang tinggi) Karakteristik dari prototipe ini yaitu :
- Mempunyai interaksi penuh.
- Pengguna dapat memasukkan data ke dalam medan masukan, menanggapi pesan, memilih ikon untuk membuka window, berinteraksi dengan UI.
- Mewakili fungsi-fungsi inti dari antarmuka pengguna produk.
- Dapat mensimulasikan sebagian besar fungsi sistem akhir.
- Umumnya dibuat dengan 4GLs seperti Smalltalk atau bahasa pemrograman berbasis visual seperti Visual basic.
- Trade off kecepatan dengan ketelitian.
- Tidak secepat dan semudah membuat prototipe low-fidelity.
- Mewakili antarmuka pengguna yang akan diimplementasikan dalam produk akhir.
- Mempunyai penampilan yang sangat mirip dengan produk aktual.
Dalam perancangan prototyping ada beberapa metode yang dilakukan :
1. Paper Prototyping
Paper prototyping adalah sebuah teknik menggambarkan user interface di atas kertas sehingga memungkinkan untuk dirancang, disimulasikan, dan diuji dengan cepat. Apa sajakah manfaat paper prototyping ?
- Setiap pengguna dapat melakukan uji coba antarmuka dengan aksi-aksi yang nyata.
- Paper prototyping tentu lebih mudah dibuat dibanding dengan computer prototyping.
- Memungkinkan perubahan yang terjadi secara cepat
- Menambah kreativitas
- Tidak membutuhkan terlalu banyak keahlian
- Membutuhkan biaya dan peralatan yang praktis
2. Wireframe
Sebuah wireframe adalah struktur dasar dari sebuah website. Dalam tahap pengembangan, wireframe dapat menetapkan fungsi (sliders, tabs, dan lainnya) tanpa warna atau desain apapun, hanya structural guidelinesnya saja. Wireframing merupakan tahap yang penting dalam proses perancangan. Wireframe memungkinkan untuk mendefinisikan information hierarchy dari desain, sehingga memudahkan kita dalam perencanaan layout sesuai dengan rencana kita tentang bagaimana user dapat memproses informasi. Wireframe membantu kita untuk mengorganisir dan menyederhanakan elemen dan isi di dalam website.
Keuntungan dalam membuat wireframe adalah:
- Memberikan tampilan awal dari website (atau desain ulang)
- Menginspirasi desainer
- Memberikan gambaran jelas dari elemen tentang bagaimana developer akan melakukan coding
- Memudahkan pengadaptasian dan memperlihatkan layout dari banyak bagian dari website
3. Mockup
Berbeda dari wireframe, mockup menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup memberikan gambaran secara detail sebelum produk dibuat.
Berikut adalah beberapa kelebihan mockup:
- Mengorganisir detail dari proyek
- Menemukan error
- Menterjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders
- Menyampaikan ide kepada anggota tim
- Implementasi desain
- Perspektif user
Pengaplikasian ketiga metode prototyping tersebut dapat kita lihat dalam paper yang berjudul “Perancangan Model User Interface untuk Website E-Commerce Liliput Edu Toys dengan Metode Paper Prototyping”
Liliput Edu Toys merupakan sebuah toko mainan untuk anak-anak yang bermaksud untuk membangun sebuah e-commerce sebagai alternatif bisnis. Keberhasilan terhadap penggunaan web salah satunya dilihat dari kemudahan saat pengguna berinteraksi dengan antarmukanya. Keberhasilan untuk mencapai hal tersebut tentunya membutuhkan sebuah User Interface (UI) yang memenuhi kebutuhan pengguna, karena User Interface (UI) merupakan alasan kedua mengapa penggunaan website e-commerce gagal digunakan.
Dalam perancangan prototyping untuk website Liliput Edu Toys hal yang pertama dilakukan adalah dengan membuat sketsa storyboard yang berfungsi untuk merepresentasikan interaksi pada halaman sebagai kerangka dasar dan panduan dalam pembentukan user interface website.
Setelah sketsa storyboard selesai dibuat, untuk membuat kerangka website yang mulai terbentuk dengan jelas maka diperlukan sebuah konseptual model untuk membantu perancangan antarmukanya. Setelah menentukan konseptual model yang akan digunakan sebagai susunan desain prototype yang akan dirancang, dibentuklah layout sebagai struktur anatomi halaman website.
Setelah menentukan anatomi dalam halaman website, selanjutnya menyusun layout anatomi, navigasi serta konten menggunakan teknik wireframe untuk tahapan pengujian menggunakan paper prototyping selanjutnya. Misalnya untuk wireframe home sebagai berikut:
Setelah menentukan detail visual, langkah selanjutnya yakni membangun paper prototype yang sudah dibuat pada tahap sebelumnya menjadi sebuah bentuk user interface yang dilengkapi dengan detail visual. Berikut ini merupakan mock-up desain user interface untuk website Liliput Edu Toys:
Berdasarkan hasil penelitian yang telah dilakukan, maka kesimpulan yang dapat dirangkum adalah :
a. Melalui metode paper prototyping yang digunakan untuk merekam model UX serta feedback, dapat mengukur kepuasan pengguna yang dinilai baik
b. Melalui pengujian e-commerce usability yang diaplikasikan, memberikan hasil bahwa pengguna mendapatkan kemudahan berinteraksi melalui desain user interface Liliput Edu Toys dengan sangat baik.
Referensi :
Yeskasafitri Annisa, et.al. 2015. Perancangan Model User Interface untuk Website E-Commerce Liliput Edu Toys dengan Metode Paper Prototyping.e-Proceeding of Engineering. 2(1) : 1–6.
Sampai di sini dulu ya pembahasan kita tentang prototyping, semoga bermanfaat :):):)
