Apakah itu reka bentuk interaksi?
Reka bentuk interaksi merujuk kepada proses mereka bentuk struktur atau corak perjalanan sesebuah program atau perisian. Pereka bentuk membina antara muka yang mesra pengguna, mudah, fleksibel dan menyeronokkan.
Tiga kata kunci penting dalam reka bentuk interaksi ialah fokus kepada keperluan dan penilaian pengguna terhadap prototaip yang dibina; mengenal pasti, mendokumentasi dan bersetuju dengan kegunaan spesifik serta matlamat pengguna berdasarkan pengalaman; dan lelaran yang tidak dapat dielakkan kerana reka bentuk pertama pasti mempunyai kesilapan.
Masalah jika reka bentuk tidak diberi perhatian
Mengabaikan reka bentuk antara muka akan mengurangkan kadar produktiviti pengguna, meningkatkan masa untuk pengguna mempelajari sesuatu sistem, dan meningkatkan kadar ralat.
Kepentingan reka bentuk antara muka pengguna
Reka bentuk antara muka yang baik memudahkan dan melicinkan proses pembelajaran untuk memahami aliran navigasi program, menyediakan gaya pengemudian yang bebas, serta menyokong kandungan dan mesej.
Empat aktiviti asas reka bentuk interaksi
1
Mengenal pasti keperluan interaksi — establishing requirements.
2
Membangunkan reka bentuk alternatif.
3
Membina prototaip interaksi.
4
Membuat penilaian ke atas reka bentuk produk.
Proses 1: Mengenal pasti keperluan interaksi
Penekanan diberikan kepada keperluan produk agar mencapai matlamat pembinaan dan menyelesaikan masalah yang dikenal pasti. Pereka bentuk perlu mengetahui kumpulan sasaran, matlamat atau tujuan pengguna, membuat pemerhatian terhadap produk sedia ada, dan mengkaji penyelesaian sedia ada.
Kaedah mengumpul maklumat keperluan pengguna
Borang soal selidik, temu ramah, kajian tindakan, maklum balas, tinjauan dan pemerhatian kumpulan sasaran, serta borang tinjauan secara atas talian.
Contoh kandungan borang tinjauan/analisis keperluan bagi "Program Mengira Dua Nombor"
| Bahagian |
Perkara yang direkodkan |
| Maklumat Umum Analisis Keperluan Produk |
Tajuk produk, kumpulan sasaran (contohnya Murid Darjah 3), isu/masalah/keperluan/tujuan, cadangan penyelesaian, cadangan penyelesaian sedia ada (contoh: kalkulator ringkas, enjin carian Google). |
| Maklumat Penetapan Keperluan Interaksi |
Aktiviti fungsi utama (contoh: input dua nombor, pilih operator matematik, papar jawapan sebaik operator dipilih) dan aktiviti fungsi tambahan/khas (contoh: Reset untuk set semula input kepada "null", Keluar daripada sistem). |
Proses 2: Membangunkan reka bentuk alternatif
Reka bentuk alternatif ialah cadangan beberapa idea reka bentuk yang berbeza namun masih dapat menterjemahkan keperluan yang dikenal pasti dengan tepat. Sekurang-kurangnya dua reka bentuk alternatif perlu diwujudkan.
Sumber penjanaan idea alternatif termasuk pemerhatian ke atas produk lain, reka bentuk yang serupa, inspirasi atau kreativiti pereka, produk pesaing, atau versi terdahulu sistem. Alat fasa ini ialah papan cerita (storyboard) dan lakaran alternatif menggunakan kertas, kadbod, atau perisian komputer.
Reka bentuk konsep
Melibatkan model konsep produk serta menerangkan keupayaan produk, ciri dan gambarannya.
Reka bentuk fizikal
Menitikberatkan butir terperinci termasuk warna, audio, imej, reka bentuk menu dan ikon.
Proses 3: Membina prototaip interaksi
Prototaip ialah gambaran awal bagi produk yang ingin dibangunkan untuk membolehkan produk tersebut dikaji dan diuji serta mendapatkan maklum balas pengguna sebelum produk sebenar disebarkan kepada umum.
Medium prototaip tidak semestinya menggunakan perisian komputer; ia boleh dilakar di atas kertas, kadbod, gambaran elektronik atau video simulasi. Prototaip di atas kertas lebih cepat dan menjimatkan kos serta masa pada peringkat awal.
Tujuan prototaip
Sebagai permulaan untuk membina paparan dan reka bentuk skrin sebenar; sebagai artifak yang dianalisis untuk mengkaji masalah; sebagai artifak untuk pereka bentuk menyelesaikan masalah yang terdapat pada prototaip; dan sebagai contoh untuk menghasilkan paparan yang lebih baik.
Contoh pemilihan reka bentuk alternatif melalui tinjauan pengguna
20 responden (5 guru, 15 murid) memilih antara Alternatif 1 (30%) dan Alternatif 2 (70%). Reka Bentuk Alternatif 2 dipilih dan ditambah baik.
Contoh penambahbaikan berdasarkan komen: tukar warna latar belakang daripada kuning/kelabu cair kepada kelabu gelap; tukar warna butang kawalan kepada biru cair; pelbagaikan warna bingkai kotak teks supaya ceria dan sesuai dengan murid Darjah 3; asingkan butang Reset dan Keluar daripada butang operasi matematik (+, -, x, /); dan jajarkan tajuk di bahagian tengah sebelah atas antara muka serta tukar tulisan kepada warna hitam.
Membina prototaip dengan Java NetBeans
Java NetBeans menggunakan komponen Swing untuk membina antara muka grafik.
Komponen Swing yang digunakan dalam prototaip
| Komponen |
Fungsi |
jForm & Swing Containers Panel |
Menetapkan latar belakang dan border title. |
jLabel |
Menampilkan teks pendek atau ikon; digunakan untuk label Nombor 1, Operasi, Nombor 2, Jawapan, simbol "=". |
jTextField |
Medan input teks; sifat editable dinyahaktifkan/untick pada kotak jawapan supaya tidak boleh diubah pengguna. |
jButton |
Butang arahan untuk operasi +, -, x, / serta Reset dan Keluar. |
Jenis-jenis jButton: jButton(), jButton(ikon), jButton(String, teks), dan jButton(String, teks dan ikon).
Gaya interaksi paparan maklumat
Maklumat dinamik
Maklumat yang berubah semasa sesi interaksi dan perubahannya dipaparkan kepada pengguna.
Maklumat statik
Maklumat yang tidak berubah semasa sesi interaksi.
Prinsip penggunaan warna
Jangan gunakan warna berlebihan. Elakkan menghubungkan maksud tertentu dengan warna, contohnya merah bermaksud panas, kerana memberi kesan negatif kepada pengguna yang mempunyai masalah penglihatan.
Proses 4: Membuat penilaian ke atas reka bentuk produk
Penilaian ialah proses menentukan kebolehgunaan dan penerimaan produk atau reka bentuk oleh pengguna melalui tingkah laku yang boleh dilihat dan diukur.
Penilaian kuantitatif
Mengukur keberkesanan sesuatu produk secara statistik dalam bentuk nombor atau peratusan berdasarkan data soal selidik atau temu bual.
Penilaian heuristik
Peraturan yang dibangunkan dalam sesuatu tempoh masa hasil daripada kaedah cuba-jaya (trial and error) produk, contohnya Jacob Nielsen's ten Heuristics.
Langkah-langkah membina instrumen penilaian
1
Tentukan sasaran pengguna yang diberikan percubaan untuk menilai paparan skrin.
2
Bina soalan soal selidik yang memfokuskan perkara dalam skop dan fungsi paparan skrin sahaja.
3
Tentukan jenis maklum balas, contohnya jawapan "Ya" / "Tidak" atau Skala Likert.
Kategori kriteria penilaian kuantitatif
| Kategori |
Kriteria |
| Reka Bentuk Skrin |
Mudah/ringkas, kesesuaian warna/ikon, navigasi mesra pengguna, saiz paparan, tiada kesalahan ejaan, tidak sesat penerokaan, laras bahasa mudah difahami, tiada gangguan teknikal. |
| Interaktiviti Pengguna |
Kawalan butang operasi matematik, butang operasi mesra pengguna, ketepatan pengiraan matematik, butang "Keluar" berfungsi, butang "Reset" berfungsi. |
Analisis data dan cadangan penambahbaikan
Dapatan ditukar kepada peratusan (%) dan boleh digambarkan menerusi carta pai. Contoh: purata skor "Ya" 95.1% berbanding "Tidak" 4.9%.
Penambahbaikan masa hadapan: menambah butang operasi matematik lain seperti kuasa dua dan punca kuasa dua, menggunakan kombinasi warna pastel yang harmoni, serta membina butang pilihan menggunakan drop down menu, radio button, dan check box.
