Chapter 7 Instructor Slides - .: FTSM

Chapter 7 Instructor Slides - .: FTSM

Fasa III Bab 7 Antaramuka Pengguna, Rekabentuk Input & Output 1 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. 2 2 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 3 3 Fasa III Pengenalan Dalam fasa III (rekabentuk fizikal sistem)

R/bentuk UI termasuk: Interaksi komputer-pengguna Isu input Isu output 4 4 Fasa III Rekabentuk UI Mengandungi:

H/w S/w Menu Fungsi Fitur yg pengaruhi komunikasi 2 hala komputer-pengguna 5 5 Fasa III Rekabentuk UI Evolusi UI

Pengurusan maklumat: pemprosesan data terpusat sistem yg. dinamik, enterprisewide.. 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 6 6 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 7 7 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 8 8 Fasa III

Rekabentuk UI HCI Hak pengguna yg dinyatakan Dr. Karat; Perspektif Instalasi Compliance Arahan

Kawalan Maklum balas Pergantungan Skop Bantuan Penggunaan 9 9 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 10 10 Fasa III Rekabentuk UI Panduan R/bentuk UI

Ikut 8 panduan asas: 1. 2. 3. 4. 5. 6. 7. 8. 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 11 11

Fasa III Rekabentuk UI R/bentuk UI yg baik berdasarkan kombinasi ergonomik + estetika + teknologi antaramuka 12 12 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 13 13 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 14 14

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) 15 15 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 16 16 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 17 17 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 18

18 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 19 19 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 20 20 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 21 21 Fasa III Rekabentuk UI Kawalan UI 22 22 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) 23 23

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 24

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

Fasa III Rekabentuk Input Jumlah Input Panduan mengurangkan jumlah input: 1. 2. 3. 4. 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 26 26

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

27 27 Fasa III Rekabentuk Input Rekabentuk Skrin Kemasukan Data Panduan utk rekabentuk skrin kemasukan data 3. 4. 5. 6. 7. Paparkan contoh format (jika pengguna perlu guna format tertentu) Perlu ending keystrokes bg setiap ruang

Pengguna tidak perlu taip leading zeroes, 01-082004 Pengguna tidak perlu taip trailing zeroes bg nombor perpuluhan, 98.00 Papar nilai default, operator boleh tekan kekunci ENTER utk terima nilai yg dicadangkan 28 28 Fasa III Rekabentuk Input Rekabentuk Skrin Kemasukan Data Panduan utk rekabentuk skrin kemasukan data 7. Papar senarai nilai yg diterima bagi ruangan, dan beri mesej kesilapan yg difahami

8. Sediakan cara utk keluar dari skrin masuk data pada bila2 masa 9. Beri pengguna peluang utk sahkan ketepatan data yg dimasukkan 29 29 Fasa III Input Design Rekabentuk Skrin Kemasukan Data Panduan utk rekabentuk skrin kemasukan data

10. Sediakan cara utk pengguna bergerak dari ruang ke ruang dalam borang 11. Bolehkan pengguna tambah, edit, padam & lihat rekod 12. Sediakan cara utk pengguna cari maklumat spesifik 30 30 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 31 31 Fasa III Rekabentuk Input Kesilapan Input Sekurang2nya 8 jenis pemeriksaan kesahihan data: 1. Periksa aturan (sequence) 2.

Periksa kewujudan (existence) (cth. Perlu masukkan No. Matrik sebelum simpan data) 3. Periksa jenis data 4. Periksa nilai minimum dan maksimum(range check) 32 32 Fasa III Rekabentuk Input 5. Periksa kebolehterimaan (reasonableness)

6. Periksa kesahihan (validity check) 7. Periksa kombinasi 8. Kawalan batch (jumlah utk sahkan input secara batch) 33 33 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 34 34 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 35 35 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 36 36 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 37 37 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? 38 38 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 39 39 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. 40 40 Fasa III Isu2 R/bentuk Output 41 41 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 42 42 Fasa III

Output Bercetak Sgt.mudah alih, berguna dlm situasi tertentu Dokumen turnaround (Cth. Bil telefon) 43 43 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 44 44 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 45 45 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 46

46 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 47 47 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. 48 48 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 49 49

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. 740) 50 50 Fasa III

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

Kawalan & Keselamatan Output Output mesti Tepat Lengkap Terkini Selamat Jabatan IT bertanggungjawab ambil langkah berjaga Diskless workstations

52 52 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 53 53 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 54 54 Fasa III Bab 7 Selesai.. 55

Recently Viewed Presentations

  • Boundaries - mr. clark's guide to geography

    Boundaries - mr. clark's guide to geography

    Boundary Types to Understand. Physical Boundaries. Mountains. Desert. Water. Cultural Boundaries. Religion. Geometric. Language. Superimposed . Boundary: imposed by ...
  • Dr. Math Does Trigonometry

    Dr. Math Does Trigonometry

    C = 10 A 25° b B Lets do sin first we want to find angle a since we have opp and hyp we use sin C = 10 a b B A = 5 And one more sin example...
  • Butterfly I/O Ports - Binghamton

    Butterfly I/O Ports - Binghamton

    Title: Butterfly I/O Ports Author: Dick Steflik Last modified by: Dick Document presentation format: Custom Other titles: Arial Arial Unicode MS Wingdings Symbol Times New Roman Courier New Default Design AVR Programming ATmega328P I/O for our labs io.h iom328p.h sfr_defs.h...
  • Introduktion af et nyt produkt - OZ6FRS

    Introduktion af et nyt produkt - OZ6FRS

    OZ5TOR opdagede et nyt Univers Thingiverse …. "tingdeling" Og en "billig" maskine Thing-O-Matic fra Makerbot Pris ca 8000 Kr i byggeset 3 Hyggelige dage med at lakere, skrue, læse og afprøve. ... ikke prof- 2800 $ Fremtiden Hvis vi selv...
  • Le 400eme de Quebec - Acadian.org

    Le 400eme de Quebec - Acadian.org

    J'ai tant d'histoires à raconter Des grands bateaux, des conquérants De la tourmente, de la beauté Et des coeurs fous de liberté Défiant le vent J'ai tant d'histoires à raconter L'anse au Foulon, la Citadelle Quatre cents hivers, autant d'étés...
  • Relative Glycemic and Insulinemic Response of Staple Indian ...

    Relative Glycemic and Insulinemic Response of Staple Indian ...

    Water melon have . 92%. water, bread has . 37%. Based on GI, watermelon is not a suitable food for people with diabetes. Bread , not even sweet in taste, have much more starch density and therefore higher glycemic impact.
  • Jazz Dance Unit Vocabulary - Kyrene School District

    Jazz Dance Unit Vocabulary - Kyrene School District

    Ballets like Nutcracker, Swan Lake, Cinderella. Folk Dances like the Hula or some Native American ceremonial dances. Compositional Forms. Compositional Forms. AB. ABA. Call and Response. Narrative. ... Christian, Laura Company: Kyrene School District ...
  • Statistical Modeling and Data Analysis Given a data

    Statistical Modeling and Data Analysis Given a data

    The cut-off point ? can be obtained through asymptotic distribution of −2log?, which is usually ?2. ... This yields a biased selection, meaning that a model with higher number of parameters has a better chance of being selected. AIC or...