1 / 55

Bab 7

Bab 7. Antaramuka Pengguna, Rekabentuk Input & Output. 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.

reuben
Download Presentation

Bab 7

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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,01-08-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)

More Related