1. Antaramuka Pengguna, Rekabentuk Input & Output
Bab 7
Antaramuka Pengguna, Rekabentuk Input & Output

2. 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. 3

3. 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 3

4. Pengenalan Dalam fasa III (rekabentuk fizikal sistem)
R/bentuk UI termasuk:
Interaksi komputer-pengguna
Isu input
Isu output 4

5. Rekabentuk UI Mengandungi: H/w S/w Menu Fungsi
Fitur yg pengaruhi komunikasi
2 hala komputer-pengguna

6. 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

7. 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

8. 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”

9. Rekabentuk UI HCI Hak pengguna yg dinyatakan Dr. Karat; Perspektif
Instalasi
Compliance
Arahan
Kawalan
Maklum balas
Pergantungan
Skop
Bantuan
Penggunaan

10. 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

11. Rekabentuk UI Panduan R/bentuk UI Ikut 8 panduan asas:
Fokus kpd objektif asas
Bangunkan antaramuka yg. mudah dipelajari & mudah guna
Sediakan fitur utk. tingkat keefisienan
Mudahkan pengguna utk dapat bantuan & betulkan kesalahan
Minimumkan masalah input data
Beri maklum balas kpd pengguna
Wujudkan susun atur & rekabentuk menarik
Guna terma & imej yg biasa dilihat/digunakan

12. Rekabentuk UI
R/bentuk UI yg baik berdasarkan kombinasi ergonomik + estetika + teknologi antaramuka

13. 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

14. 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

15. 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)

16. 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

17. 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

18. 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

19. 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

20. 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

21. Rekabentuk UI Kawalan UI Bar menu Toolbar List box – scroll bar
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

22. Rekabentuk UI
Kawalan UI

23. 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)

24. Rekabentuk Input Kaedah Input dan Kemasukan Data Batch input
Online input
Masuk data atas talian
Source data automation (gabungan online + data capture dari peralatan input)
Strip data bermagnet atau pengimbas swipe
POS, ATMs

25. 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

26. Rekabentuk Input Jumlah Input Panduan mengurangkan jumlah input:
Masukkan data yg perlu
Jangan masukkan data yg boleh pengguna capai dari fail sistem atau buat kiraan dari data lain
Jangan masukkan data tak berubah(constant)
Guna kod

27. Rekabentuk Input Rekabentuk Skrin Kemasukan Data
Isi borang (kaedah paling efektif utk masuk data atas talian)
Panduan utk rekabentuk skrin kemasukan data
Hadkan capaian pengguna kpd lokasi skrin di mana perlu masukkan data
Sediakan penjelasan bg setiap ruang, tunjuk di mana perlu masukkan data & saiz maksimum satu ruang

28. Rekabentuk Input Rekabentuk Skrin Kemasukan Data
Panduan utk rekabentuk skrin kemasukan data
Paparkan contoh format (jika pengguna perlu guna format tertentu)
Perlu ending keystrokes bg setiap ruang
Pengguna tidak perlu taip leading zeroes,
Pengguna tidak perlu taip trailing zeroes bg nombor perpuluhan, 98.00
Papar nilai default, operator boleh tekan kekunci ENTER utk terima nilai yg dicadangkan

29. Rekabentuk Input Rekabentuk Skrin Kemasukan Data
Panduan utk rekabentuk skrin kemasukan data
Papar senarai nilai yg diterima bagi ruangan, dan beri mesej kesilapan yg difahami
Sediakan cara utk keluar dari skrin masuk data pada bila2 masa
Beri pengguna peluang utk sahkan ketepatan data yg dimasukkan

30. Input Design Rekabentuk Skrin Kemasukan Data
Panduan utk rekabentuk skrin kemasukan data
Sediakan cara utk pengguna bergerak dari ruang ke ruang dalam borang
Bolehkan pengguna tambah, edit, padam & lihat rekod
Sediakan cara utk pengguna cari maklumat spesifik

31. Rekabentuk Input Kesilapan Input
Kurangkan kesilapan input, kualiti data lebih baik
Periksa kesahihan data
Uji data, tolak kemasukan yg gagal ikut keperluan yg ditentukan

32. Rekabentuk Input Kesilapan Input
Sekurang2nya 8 jenis pemeriksaan kesahihan data:
Periksa aturan (sequence)
Periksa kewujudan (existence) (cth. Perlu masukkan No. Matrik sebelum simpan data)
Periksa jenis data
Periksa nilai minimum dan maksimum(range check)

33. Rekabentuk Input Periksa kebolehterimaan (reasonableness)
Periksa kesahihan (validity check)
Periksa kombinasi
Kawalan batch (jumlah utk sahkan input secara batch)

34. 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
Dokumen sumber: a form used to request & collect input data, trigger or authorize an input action and provide a record of the original transaction.
Cth: borang keahlian perpustakaan.

35. 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

36. 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
Dr. Jakod Nielson:a pioneer in Web usability design.

37. 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

38. 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?

39. 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

40. 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.

41. Isu2 R/bentuk Output

42. 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
Although digital technology has opened new horizons in business communications printed output still is the most common type of output

43. Output Bercetak Sgt.mudah alih, berguna dlm situasi tertentu
Dokumen turnaround (Cth. Bil telefon)
Although many organizations strive to reduce the flow of paper and printed reports, few firms have been able to eliminate printed output totally
Turnaround documents: output documents which later are entered back into the same or another information system. E.g telephone bill, might be a turnaround doc printed by company’s billing syst. When u return the required portion of the bill with payment, the bill is scanned into the company’s account receivable system to record the payment.

44. 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

45. 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

46. Output Bercetak Prinsip R/bentuk Laporan
Mesti menarik, profesional, mudah baca
Headers & footers laporan
Headers & footers halaman
Heading alignment kolum
Jarak antara kolum

47. Output Bercetak Turutan baris Kumpulan baris terperinci
Baris mesti dipaparkan dan dikumpulkan dlm turutan yg logikal
Kumpulan baris terperinci
Rujuk Fig. 7-36
Group header
Group footer

48. 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.

49. 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

50. 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)

51. Output Bercetak Jumlah Cetakan & Keperluan Masa
Jumlah laporan tinggi, kos tinggi
Kiraan panjang laporan
Kiraan masa cetak laporan

52. Output Bercetak Kawalan & Keselamatan Output Output mesti
Tepat
Lengkap
Terkini
Selamat
Jabatan IT bertanggungjawab ambil langkah berjaga
Diskless workstations
Diskless w/stn:a network terminal that supports full-featured UI, but limits printing or copying of data, except to certain certain network resources that can be monitored & controlled more easily.

53. 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 49

54. 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 49

55. Bab 7 Selesai..