B7ts2923 Shelly
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

B7ts2923 Shelly

on

  • 889 views

 

Statistics

Views

Total Views
889
Views on SlideShare
889
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

B7ts2923 Shelly Presentation Transcript

  • 1. 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. 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
  • 4. Pengenalan
    • Dalam fasa III (rekabentuk fizikal sistem)
    • R/bentuk UI termasuk:
      • Interaksi komputer-pengguna
      • Isu input
      • Isu output
  • 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
      • 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
        • 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
  • 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, 0 1- 0 8-2004
        • 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
  • 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
  • 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
  • 43. Output Bercetak
    • Sgt.mudah alih, berguna dlm situasi tertentu
    • Dokumen turnaround (Cth. Bil telefon)
  • 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
        • 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
  • 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
  • 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
  • 55. Bab 7 Selesai..