1
Fasa III
Bab 7
Antaramuka Pengguna, Rekabentuk Input & Output
22
Fasa III
Objektif Jelaskan konsep r/bentuk a/muka pengguna
(UI) & human-computer interaction (HCI) & prinsip asas r/bentuk berpusatkan pengguna.
Senaraikan panduan spesifik utk. r/bentuk UI.
Jelaskan teknik r/bentuk UI termasuk elemen skrin & kawalan.
Jelaskan konsep, teknik & kaedah rekabentuk input.
33
Fasa III
Objektif Jelaskan panduan-panduan r/bentuk skrin
kemasukan data
Guna ujian pengesahan utk kurangkan kesalahan input
Merekabentuk dokumen sumber yg efektif & kawalan input
Diskus isu rekabentuk output & pelbagai jenis output
Merekabentuk pelbagai jenis laporan bercetak, & cadang kawalan output & keselamatan
44
Fasa III
Pengenalan Dalam fasa III (rekabentuk fizikal sistem)
R/bentuk UI termasuk: Interaksi komputer-pengguna Isu input Isu output
55
Fasa III
Rekabentuk UI
Mengandungi: H/w S/w Menu Fungsi Fitur yg pengaruhi komunikasi
2 hala komputer-pengguna
66
Fasa III
Rekabentuk UI Evolusi UI
Pengurusan maklumat: pemprosesan data terpusat sistem yg. dinamik, enterprise-wide..
Fokus utama berubah — dari jabatan IT kepada pengguna sendiri
• Kumpulan IT sediakan IT, bukan sediakan maklumat (rujuk Fig.7-3 m.s. 305)
Sistem berpusatkan pengguna
Perlu kefahaman HCI & prinsip r/bentuk berpusatkan pengguna
77
Fasa III
Rekabentuk UI HCI
Jelaskan hubungan komputer manusia yg gunakan komputer utk laksana tugas berkaitan bisnes
IBM melalui tapak Almaden computer science research,• fokus kpd pengguna & bagaimana mereka
guna/alami teknologi
88
Fasa III
Rekabentuk UI HCI
IBM kesan sejarah & evolusi HCI; • Pengguna taip teks arahan berwarna hijau yg
kompleks pd skrin hitam Pengenalan kpd GUI
Dr. Clare-Marie Karat (IBM usability expert) menyatakan “in this new computer age, the customer is not only right, the customer has rights”
99
Fasa III
Rekabentuk UI HCI
Hak pengguna yg dinyatakan Dr. Karat;• Perspektif• Instalasi• Compliance• Arahan• Kawalan• Maklum balas• Pergantungan• Skop• Bantuan• Penggunaan
1010
Fasa III
Rekabentuk UI Prinsip Asas R/bentuk UI:
Faham fungsi bisnes asas Memaksimakan keefektifan grapik Profailkan pengguna-pengguna sistem Berfikir seperti pengguna Gunakan prototaip Rekabentuk antaramuka yg komprehensif Teruskan proses maklum balas Dokumen r/bentuk antaramuka
1111
Fasa III
Rekabentuk UI Panduan R/bentuk UI
Ikut 8 panduan asas:1. Fokus kpd objektif asas2. Bangunkan antaramuka yg. mudah dipelajari &
mudah guna3. Sediakan fitur utk. tingkat keefisienan4. Mudahkan pengguna utk dapat bantuan &
betulkan kesalahan5. Minimumkan masalah input data6. Beri maklum balas kpd pengguna7. Wujudkan susun atur & rekabentuk menarik8. Guna terma & imej yg biasa dilihat/digunakan
1212
Fasa III
Rekabentuk UI R/bentuk UI yg baik berdasarkan kombinasi
ergonomik + estetika + teknologi antaramuka
1313
Fasa III
Panduan Rekabentuk UI Fokus kpd objektif asas
• Bina r/bentuk yg mudah utk dipelajari & diingati
• R/bentuk antaramuka utk baiki efisiensi & produktiviti pengguna
• Gunakan arahan, tindakan,respon sistem yg konsisten & predictable
1414
Fasa III
Panduan Rekabentuk UI Bangunkan antaramuka yg. mudah dipelajari
& mudah guna• Label dgn jelas semua kawalan, butang & ikon
• Pilih hanya imej yg pengguna boleh faham dgn mudah
• Sediakan arahan yg logik, padat & jelas pd skrin
• Tunjukkan semua arahan dlm senarai item menu
1515
Fasa III
Panduan Rekabentuk UI Sediakan fitur utk. tingkat keefisienan
• Susun atur tugas, arahan & fungsi dlm kumpulan2 yg menunjukkan operasi bisnes sebenar
• Kedudukan item menu
• Sediakan shortcuts kpd pengguna berpengalaman (cth. Ctrl + C utk Copy dlm MS Word)
• Guna nilai default jika majoriti nilai bg satu ruang adalah sama (jika 90% pelanggan tinggal di Malaysia, guna Malaysia sbg nilai default dlm ruang Negara)
1616
Fasa III
Panduan Rekabentuk UI Mudahkan pengguna utk dapat bantuan &
betulkan kesalahan• Pastikan Help sentiasa tersedia (User-selected Help
& Context-sensitive Help)
• Sertakan maklumat utk dihubungi pengguna(contact information)
• Perlukan pengesahan pengguna sebelum padam data (Adakah anda pasti?)
• Sediakan sesuatu spt kekunci Undo
1717
Fasa III
Panduan Rekabentuk UI Minimumkan masalah data input
• Sediakan pemeriksaan pengesahan data
• Paparkan mesej & peringatan yg event-driven
• Wujudkan senarai dgn nilai yg dikenalpasti, yg boleh pengguna klik utk pilih
• Bina peraturan yg memastikan integriti data
• Gunakan input masks
1818
Fasa III
Panduan Rekabentuk UI Beri maklum balas kpd pengguna
• Papar mesej pd tempat yg logikal atas skrin
• Sedarkan pengguna kpd masa proses yg lama atau dilewatkan
• Mesej dikekalkan pada suatu masa utk bolehkan pengguna baca
• Beritahu pengguna jika suatu operasi berjaya atau tidak
1919
Fasa III
Panduan Rekabentuk UI Wujudkan susun atur & rekabentuk menarik
• Gunakan warna sesuai utk highlight kawasan skrin yg berbeza
• Gunakan special effects yg berpatutan
• Gunakan hyperlink utk bolehkan pengguna terus ke topik tertentu
• Kumpulkan objek & maklumat berkaitan
• Papar tajuk,mesej & arahan secara konsisten & di lokasi yg sama pada setiap skrin
2020
Fasa III
Panduan Rekabentuk UI Gunakan terma & imej yg biasa dilihat/digunakan
• Ingat, pengguna dibiasakan dgn merah=berhenti, kuning=berhati2, hijau=OK/terus
• Gunakan arahan yg familiar
• Jika pengguna biasa guna aplikasi berasaskan Windows, sediakan rupa & rasa Windows dlm r/bentuk antaramuka
2121
Fasa III
Rekabentuk UI Kawalan UI
Bar menu Toolbar Butang arahan Kotak dialog Kotak teks Toggle button
List box – scroll bar Drop-down list box Option button, or
radio button Check box Calendar control Switchboard
2222
Fasa III
Rekabentuk UI Kawalan UI
2323
Fasa III
Rekabentuk Input Teknologi input sudah banyak berubah
Obj. utama r/bentuk input: pastikan kualiti, ketepatan, pd masa yg dikehendaki/timeliness
Kualiti output adalah sekualiti inputnya Garbage in, garbage out (GIGO) Data capture (cth alat, pembaca bar kod) Kemasukan data ( cth. Dgn. klik tetikus)
2424
Fasa III
Rekabentuk Input Kaedah Input dan Kemasukan Data
Batch input• Batch
Online input• Masuk data atas talian• Source data automation (gabungan online + data
capture dari peralatan input)• Strip data bermagnet atau pengimbas swipe• POS, ATMs
2525
Fasa III
Rekabentuk Input Kaedah Input dan Kemasukan Data
Tradeoffs• Kemasukan data manual lambat, lebih mahal drpd
kemasukan secara batch. Kecuali jika guna source data automation.
• Dilaksanakan pada masa transaksi• Dilaksanakan ketika komputer amat banyak
diperlukan/digunakan
• Keputusan sama ada input secara batch atau online bergantung kpd keperluan bisnes
2626
Fasa III
Rekabentuk Input Jumlah Input
Panduan mengurangkan jumlah input:1. Masukkan data yg perlu 2. Jangan masukkan data yg boleh pengguna capai
dari fail sistem atau buat kiraan dari data lain3. Jangan masukkan data tak berubah(constant)4. Guna kod
2727
Fasa III
Rekabentuk Input Rekabentuk Skrin Kemasukan Data
Isi borang (kaedah paling efektif utk masuk data atas talian)
Panduan utk rekabentuk skrin kemasukan data
1. Hadkan capaian pengguna kpd lokasi skrin di mana perlu masukkan data
2. Sediakan penjelasan bg setiap ruang, tunjuk di mana perlu masukkan data & saiz maksimum satu ruang
2828
Fasa III
Rekabentuk Input Rekabentuk Skrin Kemasukan Data
Panduan utk rekabentuk skrin kemasukan data
1. Paparkan contoh format (jika pengguna perlu guna format tertentu)
2. Perlu ending keystrokes bg setiap ruang3. Pengguna tidak perlu taip leading zeroes, 01-08-
20044. Pengguna tidak perlu taip trailing zeroes bg
nombor perpuluhan, 98.005. Papar nilai default, operator boleh tekan kekunci
ENTER utk terima nilai yg dicadangkan
2929
Fasa III
Rekabentuk Input Rekabentuk Skrin Kemasukan Data
Panduan utk rekabentuk skrin kemasukan data
1. Papar senarai nilai yg diterima bagi ruangan, dan beri mesej kesilapan yg difahami
3. Sediakan cara utk keluar dari skrin masuk data pada bila2 masa
5. Beri pengguna peluang utk sahkan ketepatan data yg dimasukkan
3030
Fasa III
Input Design Rekabentuk Skrin Kemasukan Data
Panduan utk rekabentuk skrin kemasukan data
1. Sediakan cara utk pengguna bergerak dari ruang ke ruang dalam borang
3. Bolehkan pengguna tambah, edit, padam & lihat rekod
5. Sediakan cara utk pengguna cari maklumat spesifik
3131
Fasa III
Rekabentuk Input Kesilapan Input
Kurangkan kesilapan input, kualiti data lebih baik
Periksa kesahihan data • Uji data, tolak kemasukan yg gagal ikut keperluan
yg ditentukan
3232
Fasa III
Rekabentuk Input Kesilapan Input
Sekurang2nya 8 jenis pemeriksaan kesahihan data:
1. Periksa aturan (sequence)
3. Periksa kewujudan (existence) (cth. Perlu masukkan No. Matrik sebelum simpan data)
5. Periksa jenis data
7. Periksa nilai minimum dan maksimum(range check)
3333
Fasa III
Rekabentuk Input1. Periksa kebolehterimaan (reasonableness)
3. Periksa kesahihan (validity check)
5. Periksa kombinasi
7. Kawalan batch (jumlah utk sahkan input secara batch)
3434
Fasa III
Rekabentuk Input Dokumen sumber
Apakah dokumen sumber?
Susun atur borang yg baik:ruang yg cukup, arahan yg jelas, mudah utk dilengkapkan
Zon dokumen sumber:• Heading zone• Control zone• Instruction zone• Body zone• Totals zone• Authorization zone
3535
Fasa III
Rekabentuk Input Dokumen Sumber
Aliran maklumat dlm borang:• Kiri ke kanan & atas ke bawah
Cabaran merekabentuk borang berasaskan Web:• Cara manusia baca & interaksi dgn maklumat atas
skrin & atas kertas adalah berbeza
3636
Fasa III
Rekabentuk Input Dokumen Sumber
Dr. Jakob Nielson percaya;• Pengguna imbas 1 halaman, pilih sebghn perkataan
& ayat
Perekabentuk Web guna teks yg boleh diimbas utk ditangkap & kekalkan perhatian pengguna
Susun atur & r/bentuk penting dlm borang berasaskan Web
3737
Fasa III
Rekabentuk Input Kawalan Input
Setiap maklumat perlu boleh dijejaki semula ke data yg diinput
Jejak audit (Audit trail) Keselamatan data Polisi pengekalan/penahanan rekod(Records
retention policy) Enkripsi
3838
Fasa III
Isu2 R/bentuk Output Sebelum r/bentuk output, pastikan;
Tujuan output
Siapa perlukan maklumat, kenapa diperlukan & bagaimana digunakan?
Maklumat spesifik yg perlu disertakan
Output perlu dicetak, dilihat atas skrin atau kedua2nya?
3939
Fasa III
Isu2 R/bentuk Output Bila maklumat perlu disediakan, sekerap mana
perlu dikemaskini? Isu keselamatan atau kerahsiaan wujud?
Jwpn kpd soalan beri kesan kpd strategi r/bentuk output
4040
Fasa III
Isu2 R/bentuk Output Jenis Output
Dlm fasa r/bentuk sistem perlu r/bentuk • Laporan sebenar dlm bentuk skrin & bentuk/kaedah
penghantaran output• Penghantaran maklumat berasaskan Internet• E-mel• Audio• COLD• COM• dsbg.
4141
Fasa III
Isu2 R/bentuk Output
4242
Fasa III
Isu2 R/bentuk Output Bentuk Output yg Specialized:
Pelbagai jenis bentuk bisnes perlu pelbagai output yg specialized
Output dari sistem lain biasanya jadi input kpd sistem yg lain
Output bercetak, jenis output yg sgt banyak digunakan
4343
Fasa III
Output Bercetak Sgt.mudah alih, berguna dlm situasi
tertentu
Dokumen turnaround (Cth. Bil telefon)
4444
Fasa III
Output Bercetak Jenis Laporan
Laporan terperinci (detail reports)• Baris terperinci (rujuk Fig. 7-32)• Mungkin berjela-jela• Alternatif yg lebih baik ialah laporan
pengecualian Laporan pengecualian(exception reports)
• Sgt berguna jika pengguna mahu maklumat utk rekod yg perlu diambil tindakan
Laporan ringkasan (summary reports)
• Utk kegunaan individu pengurusan atasan
4545
Fasa III
Output Bercetak Penglibatan pengguna dlm r/bentuk
laporan Laporan bercetak cara penting sampaikan
maklumat, pengguna perlu luluskan dgn awal semua r/bentuk laporan
Guna prototaip utk pengguna lihat
4646
Fasa III
Output Bercetak Prinsip R/bentuk Laporan
Mesti menarik, profesional, mudah baca
Headers & footers laporan
Headers & footers halaman
Heading alignment kolum
Jarak antara kolum
4747
Fasa III
Output Bercetak Turutan baris
• Baris mesti dipaparkan dan dikumpulkan dlm turutan yg logikal
Kumpulan baris terperinci• Rujuk Fig. 7-36• Group header• Group footer
4848
Fasa III
Output Bercetak Contoh R/bentuk Laporan
Rujuk contoh dlm Fig. 7-36.
Memenuhi panduan, dan masih boleh diperbaiki
Jgn terlalu banyak maklumat dlm 1 halaman.
4949
Fasa III
Output Bercetak Lagi Isu2 R/bentuk:
R/bentuk piawai yg baik, hasilkan laporan yg seragam & konsisten
Jika 1 sistem hasilkan banyak laporan, setiap laporan perlu ada elemen r/bentuk yg sama/seragam
Selepas r/bentuk laporan diluluskan,dokumen r/bentuk dlm borang laporan analisis
5050
Fasa III
Output Bercetak Merekabentuk laporan berasaskan
karektor Banyak sistem hasilkan laporan ini
Bina & edit laporan ini gunakan alat tradisional, printer spacing chart (rujuk Fig. 7-40)
5151
Fasa III
Output Bercetak Jumlah Cetakan & Keperluan Masa
Jumlah laporan tinggi, kos tinggi
Kiraan panjang laporan
Kiraan masa cetak laporan
5252
Fasa III
Output Bercetak Kawalan & Keselamatan Output
Output mesti• Tepat• Lengkap• Terkini• Selamat
Jabatan IT bertanggungjawab ambil langkah berjaga
Diskless workstations
5353
Fasa III
Kesimpulan Konsep HCI & GUI Prinsip r/bentuk yg berpusatkan pengguna utk:
Faham fungsi bisnes Memaksimakan keefektifan grafik Profail pengguna sistem Fikir spt pengguna Guna prototaip R/bentuk antaramuka komprehensif Teruskan proses maklum balas pengguna Dokumen r/bentuk antaramuka
5454
Fasa III
Kesimpulan Cara efektif utk kurangkan kesilapan input
Kurangkan jumlah input
Isu r/bentuk output
Deskripsi pelbagai jenis output
Kawalan output & langkah berjaga utk capai kawalan output yg cukup utk pastikan maklumat betul, lengkap & selamat
55
Fasa III
Bab 7 Selesai..