3.2 Paparan dan Reka Bentuk Skrin
Paparan dan reka bentuk skrin memainkan peranan penting dalam pembangunan program atau perisian interaktif. Bagi memenuhi keperluan pengguna, pereka bentuk membina antara muka yang mesra pengguna, mudah, fleksibel dan menyeronokkan. Proses reka bentuk paparan skrin bersifat lelaran menerusi empat aktiviti asas sehinggalah produk yang dihasilkan menepati kehendak dan jangkaan pengguna.
Objektif Pembelajaran
- Mengaplikasi proses reka bentuk interaksi dalam atur cara yang dibangunkan (3.2.1).
- Menghasilkan prototaip paparan dan reka bentuk skrin (3.2.2).
- Membincangkan laporan daripada penilaian kuantitatif terhadap paparan dan reka bentuk skrin (3.2.3).
Carta Alir Kitaran Proses Reka Bentuk Interaksi
Empat fasa utama reka bentuk interaksi disusun sebagai satu kitaran lelaran. Setiap fasa boleh kembali kepada fasa sebelumnya sehingga produk menepati keperluan pengguna.
Kitaran Empat Fasa Reka Bentuk Interaksi
Proses reka bentuk interaksi bersifat lelaran, bukan linear sekali sahaja.
Penerangan Ringkas
Konsep asas reka bentuk interaksi dan empat proses utama yang membentuk kitaran pembangunan antara muka.
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
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.
| 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 | 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
| 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.
Cuba Jawab Dulu
Cuba jawab sendiri dahulu, kemudian tekan butang untuk menyemak.
Nyatakan empat proses utama dalam reka bentuk interaksi.
Mengenal pasti keperluan interaksi, membangunkan reka bentuk alternatif, membina prototaip interaksi, dan membuat penilaian ke atas reka bentuk produk.
Apakah perbezaan antara reka bentuk konsep dengan reka bentuk fizikal dalam fasa membangunkan reka bentuk alternatif?
Reka bentuk konsep melibatkan penghasilan model konsep yang menerangkan apa yang boleh dilakukan oleh produk dan cirinya, manakala reka bentuk fizikal menitikberatkan butir perincian antara muka seperti warna, audio, imej, menu dan ikon.
Mengapakah pereka bentuk dinasihatkan agar tidak menghubungkan maksud tertentu dengan warna, contohnya menetapkan warna merah bermaksud panas?
Kerana tindakan tersebut boleh memberikan kesan negatif atau kekeliruan kepada pengguna yang mempunyai masalah penglihatan, seperti rabun warna.
Kesalahan Biasa
- Menganggap prototaip mesti sentiasa dibina terus menggunakan perisian komputer, sedangkan prototaip awal boleh dilakar di atas kertas atau kadbod untuk menjimatkan kos dan masa.
- Menganggap proses reka bentuk interaksi selesai sebaik sahaja prototaip pertama siap, tanpa melalui proses lelaran bersama pengguna.
- Membiarkan medan teks jawapan kekal boleh disunting semasa membina antara muka Java NetBeans, sedangkan ia sepatutnya dimatikan (
editable= false) bagi melindungi data paparan output.
Salah Faham Konsep
Penilaian kuantitatif dan penilaian heuristik adalah perkara yang sama.
Penilaian kuantitatif mengukur keberkesanan secara statistik dalam bentuk nombor atau peratusan melalui soal selidik/temu bual, manakala penilaian heuristik merupakan penilaian pakar berdasarkan prinsip peraturan yang dibangunkan menerusi pengalaman cuba-jaya, contohnya Jacob Nielsen's ten Heuristics.
Maklumat dinamik dan maklumat statik dipaparkan secara sama sahaja.
Maklumat dinamik ialah maklumat yang berubah semasa sesi interaksi berlaku dan dikemas kini pada skrin, manakala maklumat statik tidak mengalami sebarang perubahan sepanjang interaksi.
Ringkasan
- Reka bentuk interaksi memastikan perisian yang dibina berpusatkan pengguna menerusi empat fasa: mengenal pasti keperluan, mereka bentuk alternatif, membina prototaip, dan menilai kebolehgunaan.
- Prototaip bertindak sebagai artifak untuk menguji idea dan menyelesaikan masalah seawal mungkin.
- Melalui instrumen penilaian kuantitatif, pereka bentuk menganalisis statistik kepuasan pengguna bagi membolehkan proses lelaran dan penambahbaikan berterusan dicapai.
Aktiviti Ringkas
A. Kuiz Objektif
1 Apakah masalah yang akan timbul sekiranya aspek reka bentuk antara muka tidak diberikan perhatian yang wajar?
2 Antara komponen grafik Java Swing berikut, yang manakah digunakan untuk memaparkan teks pendek, ikon gambar kecil, atau gabungan teks dan ikon?
B. Isi Tempat Kosong
3 Penilaian yang dilakukan untuk mengukur keberkesanan sesuatu produk secara statistik dalam bentuk nombor atau peratusan dipanggil penilaian .
4 Maklumat yang berubah semasa sesi interaksi dan perubahannya dipaparkan kepada pengguna dipanggil maklumat .
C. Padankan Fasa Reka Bentuk dengan Keterangan Aktiviti
Seret fasa reka bentuk ke keterangan aktiviti yang betul. Jika menggunakan telefon, tekan pilihan jawapan dahulu, kemudian tekan kotak padanan.
