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

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

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

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

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

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”

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

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

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

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

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

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

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)

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

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

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

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

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

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

Rekabentuk UI Kawalan UI

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)

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

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

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

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

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

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

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

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

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)

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

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.

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

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.

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

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?

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

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.

Isu2 R/bentuk Output

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

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.

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

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

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

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

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.

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

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)

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

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.

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

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

Bab 7 Selesai..