Human-Computer Interaction User Interface Design

Prototyping

“Fail often, fail fast.”

Don Norman, The Design of Everyday Things

Topik bahasan:

  1. Pengantar
  2. Paper Prototyping
  3. Computer Prototyping

Penjelasan Prototyping dalam bentuk video dapat diakses pada:

PENGANTAR

Sebelum mulai pembahasan tentang Prototyping, diberikan beberapa penjelasan istilah agar tidak membingungkan. Tidak ada definisi yang benar-benar baku, tetapi perlu pemberian penjelasan agar memiliki persamaan persepsi dalam pembahasan topik ini.

Sketch

Brainstorming dengan menggambar sketsa cepat dan kasar di atas kertas.

Gambar 1 Contoh Sketsa

Wireframe

Mulai menyusun kerangka-kerangka dengan kotak dan bentuk kasar.

Gambar 2 Contoh Wireframe

Mockup

Membuatkan detail ke gambar seperti warna, tipografi, foto dan elemen desain visual lainnya.

Gambar 3 Contoh Mockup

Prototype

Menambahkan interaktivitas ke mockup dengan membuat link tiap layar pada prototipe dasar atau menambahkan animasi atau interaksi untuk prototipe tingkat lanjut.

Gambar 4 Contoh Prototype

Development

Menuliskan kode program pada bahasa pemrograman tertentu untuk mengubah prototipe menjadi produk.

Ilustrasi perbandingan Wireframe dengan Mockup dapat dilihat pada Gambar 5 dan Gambar 6.

Gambar 5 Perbandingan Wireframe vs Mockup
Gambar 6 Contoh Sketsa, WIreframe dan Mockup

Pada Gambar 7 ditunjukkan bahwa dalam pembuatan Sketsa (Sketchs) dibutuhkan waktu yang lebih singkat dibandingkan pembuatan Wireframes, Mockups dan Prototypes. Namun, Sketchs memiliki fidelity yang rendah (low fidelity), bentuknya masih kasar dan belum menyerupai produk sebenarnya. Semakin tinggi fidelity obyek yang dirancang, maka semakin banyak waktu yang diperlukan untuk membuatnya.

Gambar 7 Grafik Perbandingan Waktu Pembuatan dan Fidelity

DEFINISI PROTOTYPING

Terdapat beberapa alasan mengapa perlu melakukan Prototyping (membuat prototipe).

  1. Prototipe jauh lebih cepat dibangun daripada implementasi yang sudah selesai, sehingga kita dapat mengevaluasinya lebih cepat dan mendapatkan umpan balik lebih cepat tentang hal baik dan buruk dari suatu desain.
  2. Jika kita memiliki keputusan desain yang sulit untuk diselesaikan, kita dapat membangun beberapa prototipe yang mewujudkan berbagai alternatif keputusan.
  3. Jika kita menemukan masalah dalam desain, sebuah prototipe dapat diubah lebih mudah, karena dapat dibangun lagi dengan cepat. Prototipe lebih mudah dibentuk.
  4. Yang paling penting, jika terdapat desain yang cacat serius, prototipe dapat dibuang.

Penting untuk mengingat untuk tidak berkomitmen yang kuat kepada rancangan-rancangan ide yang dibangun pada tahap awal desain. Alasannya bahwa pada tahap awal, kemungkinan rancangan yang dibangun tidak sesuai, masih cukup besar. Jika Anda langsung membangun produknya (website atau aplikasi), menulis dan men-debug banyak kode program menciptakan sebuah komitmen psikologis yang sulit dipatahkan. Anda tidak ingin membuang sesuatu yang sudah Anda kerjakan, jadi Anda tergoda untuk menyimpan beberapa kode program, bahkan jika itu benar-benar harus dihapus. Oleh karena itu, terlebih dahulu membuat prototipe sebelum membangun produk yang sebenarnya menjadi perlu untuk dilakukan.

Fidelity Pada Prototype

Seperti yang ditunjukkan pada Gambar 7 di atas, terdapat tingkat kemiripan prototype dengan produk aslinya.

  • Low fidelity: bentuk prototipe yang menghilangkan detail, menggunakan bahan yang lebih murah, atau menggunakan teknik interaksi yang berbeda.
  • High fidelity: bentuk prototipe yang lebih seperti produk jadi.

Dimensi pada Fidelity

  • Breadth (luas): berdasarkan persentase dari fitur yang dicakup, hanya mencakup fitur untuk tugas-tugas tertentu.
  • Depth (kedalaman): berdasarkan tingkat fungsionalitas, dimana pilihan terbatas, respon terbatas, tidak ada penanganan error.
  • Look: berdasarkan penampilan, desain grafis, misalnya yang berpenampilan samar digambar dengan tangan.
  • Feel: berdasarkan metode input, misalnya pointing (menunjuk) dan menulis terasa sangat berbeda pada mouse dan keyboard.

Gambar 8 memvisualisasikan luas (breadth) dan kedalaman (depth) sebuah prototipe.

Gambar 8 Fidelity adalah Multidimensi (Jakob Nielsen, Usability Engineering)
  • Prototipe horizontal: prototipe yang semuanya luas dan sedikit kedalamannya; pada dasarnya sebuah frontend tanpa backend.
  • Prototipe vertikal: kebalikan dari prototipe horizontal, satu area interface diimplementasikan secara mendalam.
  • Skenario: menunjukkan bagaimana frontend mencari tugas konkrit. Kasus khusus terletak di persimpangan prototipe horizontal dan vertikal.

Yang menjadi pertanyaan adalah apakah harus membangun prototipe horizontal atau prototipe vertikal? Jawabannya: tergantung pada resiko apa yang coba Anda kurangi. Dalam desain User Interface (UI), prototipe horizontal lebih umum karena mengatasi resiko Usability.
Tetapi jika beberapa aspek dari aplikasi adalah implementasi yang beresiko, dimana Anda tidak yakin apakah ini dapat diimplementasikan untuk memenuhi kebutuhan, maka Anda mungkin perlu membuat prototipe vertikal untuk mengujinya.

Perbandingan fidelity sebuah prototipe pada aspek Look & Feel dapat dilihat pada Gambar 9.

Gambar 9 Fidelity pada aspek look & feel sebuah prototipe

Gambar sebelah kiri adalah prototipe dengan look & feel yang rendah, sedangkan gambar di sebelah kanan sudah menyerupai bentuk sebenarnya, tingkat look & feel-nya tinggi.

PAPER PROTOTYPING

Paper Prototype adalah pilihan yang sangat baik untuk iterasi desain awal. Paper Prototype adalah mockup fisik Interface yang sebagian besar terbuat dari kertas. Prototipe jenis ini biasanya berupa sketsa tangan pada beberapa bagian, dengan bagian yang berbeda menunjukkan menu yang berbeda, dialog box atau elemen window.

Paper Prototype benar-benar interaktif dan Anda dapat melakukan User Testing dengan Paper Prototype. Caranya adalah: berikan tugas untuk dilakukan oleh user dan perhatikan bagaimana mereka melakukannya.

Paper prototype adalah low fidelity pada look dan feel, tetapi high fidelity pada breadth dengan biaya yang sangat sedikit (hanya sketsa, yang merupakan bagian dari desain). Paper prototype bisa high fidelity pada depth dengan biaya rendah, karena manusia dapat mensimulasikan backend.

Mengapa Menggunakan Paper Prototype?

Alasan menggunakan kertas, membuat sketsa tangan dan bukan menggambar dengan aplikasi adalah:

  1. Membuat sketsa tangan di kertas lebih cepat.
    Anda dapat menggambar banyak sketsa dengan tangan, sementara ketika dengan kode program mungkin hanya menghasilkan satu Interface. Bagi kebanyakan orang, sketsa tangan lebih cepat daripada menggunakan aplikasi menggambar untuk membuat sketsa.
  2. Kertas mudah diubah.
    Anda bahkan dapat mengubah prototipe selama User Testing. Jika bagian prototipe adalah masalah bagi satu user, Anda dapat mencoretnya atau menggantinya sebelum user berikutnya tiba. Kertas lebih mudah dibentuk daripada benda digital.
  3. Prototipe dengan sketsa tangan memusatkan perhatian pada masalah yang penting dalam desain awal, tidak berfokus pada detail desain.
    Saat membuat sketsa dengan tangan, Anda tidak akan terganggu dengan detail seperti font, warna, alignment, whitespace, dll. Dalam aplikasi menggambar, Anda akan dihadapkan dengan semua keputusan ini dan Anda mungkin menghabiskan banyak waktu untuk memperhatikan detail ini. Effort Anda jelas akan terbuang percuma jika Anda harus membuang desain tersebut.
  4. Tidak diperlukan keahlian khusus untuk membuat Paper Prototype.
    Hanya kemampuan seorang anak TK yang dibutuhkan ketika membuat Paper Prototype. Desainer grafis, usability specialist dan bahkan user sendiri dapat membantu membuat Paper Prototype dan mengoperasikannya.

Tools untuk Paper Prototyping

Peralatan yang digunakan untuk membuat Paper Prototype adalah alat-alat sederhana, seperti pada Gambar 10.

Gambar 10 (dari kiri ke kanan searah jarum jam) Poster board, index card, restickable glue, coreection tape, gunting, selotip, pena, spidol
  • White poster board 11”x14”, untuk background atau bingkai window
  • Index card tidak bergaris 4”x6” dan 5”x8”, untuk menu, window content dan dialog box.
  • Restickable glue, untuk menjaga potongan kertas tidak lepas
  • White correction tape: untuk menghapus bagian teks, checkbox atau pesan pendek
  • Gunting, selotip, pena dan spidol.

Tips untuk Membuat Paper Prototype yang Baik

Terdapat beberapa tips dalam membuat Paper Prototype yang baik.

1. Paper Prototype dibuat dengan ukuran lebih besar dari ukuran sebenarnya di komputer.

Paper prototype harus dibuat lebih besar dari ukuran asli, karena:

  • Jari manusia lebih besar dari pointer mouse dan manusia biasanya menulis lebih besar dari ukuran 12pt. Jadi, akan lebih mudah untuk menggunakan Paper Prototype jika Anda memperbesar skalanya.
  • Akan menjadi lebih mudah ketika Paper Prototype dilihat dari jauh, misalnya ketika prototipe diletakkan di atas meja. Ketika melakukan pengujian, Anda menguji bersama user, dan ada beberapa observer yang hadir untuk melihat apa yang terjadi dan membuat catatan tentang itu. Anda, user dan observer dapat melihat prototipe dengan jelas.

2. Paper Prototype Dibuat dengan Warna Monokrom.

Jangan terlalu kuatir tentang warna pada prototipe Anda. Gunakan satu warna. Hal ini membuat prototipe menjadi lebih sederhana dan tidak mengalihkan perhatian dari masalah-masalah penting. Anda tidak perlu membuat setiap efek visual dalam kertas. Beberapa hal lebih mudah diucapkan dengan kertas: “bola basket berputar” atau “progress bar muncul: 20%, 50%, 75%, selesai”.

3. Ganti feedback visual yang rumit dengan deskripsi yang bisa didengar.

Hal ini berlaku pada beberapa komponen seperti tooltip, drag & drop, animasi, progress bar.

4. Gunakan folder dan amplop terbuka.

Benda ini digunakan untuk menyimpan potongan-potongan komponen prototipe agar lebih terorganisir.

Apakah Paper Prototype Harus Digambar Tangan?

Haruskan Paper Prototype dibuat dengan sketsa tangan atau digambar di komputer? Secara umum sketsa tangan lebih baik dalam desain awal, tetapi kadang gambar realistis bisa menjadi tambahan yang berguna.

Gambar 11 Paper Prototype yang didesain di komputer lalu dicetak

Gambar 11 adalah prototipe untuk Interface yang akan diintegrasikan ke program Eclipse yang sudah ada, sehingga prototipe sebagian besar dibangun dari screenshot Eclipse yang dimodifikasi. Hasilnya sangat bersih, tetapi juga terlalu kecil, sulit dibaca dari kejauhan.
Akan menjadi lebih sulit bagi user untuk fokus mengomentari bagian baru dari Interface karena fitur baru ini terlihat seperti Eclipse yang sudah ada.

Perpaduan (hybrid) antara Interface sketsa tangan dan screenshot mungkin akan bekerja lebih baik, seperti pada Gambar 12.

Gambar 12 paper Prototype yang hybrid

Gambar 12 menunjukkan prototipe hybrid, penggabungan antara sketsa tangan dengan cetak screenshot website. Prototipe ini adalah sebuah interface yang didesain untuk diintegrasikan ke dalam sebuah browser web. Screenshot aktual halaman web digunakan sebagai alat peraga untuk membuat prototipe lebih kontret dan membantu user memvisualisasikan Interface lebih baik. Karena layout dari halaman web bukan masalah yang coba dipecahkan oleh Interface, maka tidak perlu dibuat sketsa tangan, cukup screenshot saja. Sisanya yang perlu untuk diselesaikan, dibuat dengan sketsa tangan.

Gambar 13 Prototipe murni dengan sketsa tangan

Gambar 13 menunjukkan interface yang murni dengan sketsa tangan. Yang mungkin mendapat manfaat dari alat peraga semacam ini adalah photo organizer dapat menggunakan foto asli untuk membantu user berpikir tentang hal-hal yang perlu mereka lakukan dengan foto. Prototipe ini juga menggunakan bingkai window berupa sebuah poster board besar untuk dijadikan background statis.

Pentingnya menulis besar dan jelas/tebal.

Dengan tulisan yang besar dan tebal, maka prototipe akan lebih mudah dibaca, seperti pada Gambar 11.

Gambar 14 Prototipe dengan teks besar dan tebal

Lem dan plastik bening baik digunakan.

Prototipe pada Gambar 15 memiliki banyak potongan kecil yang mudah lepas. Gunakan lem untuk membantu merekatkan.

Gambar 15 Prototipe dengan banyak potongan kecil

Prototipe pada Gambar 16 sepenuhnya ditutupi plastik transparan. User dapat menulis diatasnya secara langsung.

Gambar 16 Prototipe yang dilapisi plastik

Kertas memungkinkan eksplorasi berbiaya murah.

Gambar 17 Contoh Paper Prototype

Namun, low fidelity prototype tidak harus dalam bentuk kertas, dapat berbahan lain seperti pada Gambar 18.

Gambar 18 Prototipe bukan dari kertas

Melakukan Pengujian Terhadap Paper Prototype

Pengujian terhadap Paper Prototype melibatkan beberapa untuk tim desain, yaitu:

  • Komputer
  • Fasilitator
  • Observer (pengamat)

1. KOMPUTER

Komputer adalah orang yang bertanggungjawab untuk membuat prototipe menjadi hidup. Orang ini bergerak di sekitar obyek-obyek prototipe, menuliskan respon dan melakukan segala sesuatu yang seharusnya dilakukan komputer. Orang yang berperan sebagai komputer ini tidak boleh melakukan apa yang tidak dilakukan oleh komputer sebenarnya.

2. FASILITATOR

Fasilitator adalah manusia dari tim desain dan pimpinan sesi testing. Fasilitator menjelaskan tujuan dan proses pengujian, memperoleh persetujuan penggunaan informasi user dan menyajikan tugas pada pengujian satu per satu. Ketika user mengerjakan sebuah tugas, fasilitator mencoba untuk mendapatkan feedback verbal, terutama mendorong user untuk “think aloud” dengan mengajukan pertanyaan yang menyelidiki, tetapi bukan memandu user dalam bekerja. Fasilitator bertanggungjawab menjaga semua orang disiplin dan pengujian pada jalur yang benar.

3. OBSERVER

Setiap orang di ruangan (selain user) adalah observer. Aturan paling penting tentang menjadi observer adalah menutup mulut dan memperhatikan proses pengujian yang sedang dilakukan. Jangan pernah tawarkan bantuan kepada user, meskipun mereka dengan jelas kehilangan sesuatu. Observer adalah pencatat utama, karena komputer dan fasilitator sudah memiliki tugas masing-masing.

Apakah yang Dapat Dipelajari dari Paper Prototype?

Hal-hal ini dapat dipelajari dari Paper Prototype:

  • Model konseptual: apakah user memahaminya
  • Fungsi: apakah hal ini yang dibutuhkan? Fitur apa yang hilang?
  • Navigasi dan alur tugas: bisakah user menemukan jalan? Apakah prasyarat informasi terpenuhi?
  • Terminologi: apakah user memahami label?
  • Isi layar: apa yang perlu ada di layar?
  • Jika user tidak mengerti sebuah metafora atau model konseptual dari sebuah Interface misalnya, maka keseluruhan Interface mungkin perlu dibongkar.

Paper prototype dapat mengungkapkan banyak masalah usability yang penting untuk ditemukan pada tahap awal desain.

COMPUTER PROTOTYPING

Computer Prototype memiliki beberapa ciri:

  • Merupakan simulasi software interaktif
  • High fidelity pada look dan feel
  • Low fidelity pada depth
  • Paper Prototype memiliki manusia yang mensimulasikan backend, tetapi tidak pada Computer Prototype
  • Computer Prototype mungkin horizontal, mencakup semua fitur tetapi tidak ada backend.

Apakah yang Dapat Dipelajari dari Computer Prototype?

Semua yang Anda pelajari dari Paper Prototype dapat dipelajari pada Computer Prototype, ditambah dengan:

  • Screen layout: Apakah jelas, luar biasa, mengganggu, rumit? Bisakah user menemukan elemen-elemen penting?
  • Warna, font, ikon dan elemen lainnya: Apakah dipilih dengan baik?
  • Feedback interaktif: Apakah user memperhatikan dan merespon pesan pada status bar, perubahan kursor dan feedback lainnya?
  • Isu efisiensi: Apakah kontrol terlalu besar, terlalu dekat? Scrolling terlalu panjang?

Teknik-Teknik Computer Prototype

Teknik di bawah ini dapat digunakan dalam membuat Paper Prototype:

  • Storyboard
  • Form Builder
  • Wizard of Oz

1. Storyboard

Storyboard adalah urutan grafik pada layar. Setiap screen memiliki satu atau lebih titik yang dapat Anda klik untuk berpindah ke layar lain. Terkadang transisi antar layar juga melibatkan beberapa animasi untuk menunjukkan efek dinamis, seperti feedback dari mouse-over atau drag & drop.

Storyboard dapat dibangun menggunakan aplikasi seperti Adobe Photoshop, Balsamiq atau Mockingbird. Contoh sebuah storyboard dapat dilihat pada Gambar 19.

Gambar 19 Contoh storyboard

2. Form Builder

Form builder adalah alat untuk menggambarkan Interface yang nyata dan dapat berfungsi dengan cara menyeret widget dari palet dan menempatkannya pada sebuah window. Beberapa aplikasi form builder adalah Mac Interface Builder, Qt Designer, FlexBuilder, Silverlight atau Microsoft Visual Basic.

3. Wizard of Oz

Wizard of Oz adalah sejenis penggabungan dari Computer Prototype dengan Paper Prototype. User berinteraksi dengan komputer, tetapi ada manusia di belakang layar yang mencari tahu bagaimana User Interface (UI) harus merespon.

Wizard of Oz dapat dikatakan sebagai simulasi software dengan adanya manusia untuk membantu. Cara ini sering digunakan untuk mensimulasikan teknologi masa depan.
Wizard of Oz menggunakan manusia di backend, tetapi frontend adalah sistem komputer yang sebenarnya, bukan prototipe kertas.

REFERENSI

Visits: 7658

Similar Posts