1

Fasa III

Bab 7

Antaramuka Pengguna, Rekabentuk Input & Output

22

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.

33

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

44

Fasa III

Pengenalan Dalam fasa III (rekabentuk fizikal sistem)

R/bentuk UI termasuk: Interaksi komputer-pengguna Isu input Isu output

55

Fasa III

Rekabentuk UI

Mengandungi: H/w S/w Menu Fungsi Fitur yg pengaruhi komunikasi

2 hala komputer-pengguna

66

Fasa III

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

77

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

88

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”

99

Fasa III

Rekabentuk UI HCI

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

1010

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

1111

Fasa III

Rekabentuk UI Panduan R/bentuk UI

Ikut 8 panduan asas:1. Fokus kpd objektif asas2. Bangunkan antaramuka yg. mudah dipelajari &

mudah guna3. Sediakan fitur utk. tingkat keefisienan4. Mudahkan pengguna utk dapat bantuan &

betulkan kesalahan5. Minimumkan masalah input data6. Beri maklum balas kpd pengguna7. Wujudkan susun atur & rekabentuk menarik8. Guna terma & imej yg biasa dilihat/digunakan

1212

Fasa III

Rekabentuk UI R/bentuk UI yg baik berdasarkan kombinasi

ergonomik + estetika + teknologi antaramuka

1313

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

1414

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

1515

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)

1616

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

1717

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

1818

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

1919

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

2020

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

2121

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

2222

Fasa III

Rekabentuk UI Kawalan UI

2323

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)

2424

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

2525

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

2626

Fasa III

Rekabentuk Input Jumlah Input

Panduan mengurangkan jumlah input:1. Masukkan data yg perlu 2. Jangan masukkan data yg boleh pengguna capai

dari fail sistem atau buat kiraan dari data lain3. Jangan masukkan data tak berubah(constant)4. Guna kod

2727

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. Hadkan capaian pengguna kpd lokasi skrin di mana perlu masukkan data

2. Sediakan penjelasan bg setiap ruang, tunjuk di mana perlu masukkan data & saiz maksimum satu ruang

2828

Fasa III

Rekabentuk Input Rekabentuk Skrin Kemasukan Data

Panduan utk rekabentuk skrin kemasukan data

1. Paparkan contoh format (jika pengguna perlu guna format tertentu)

2. Perlu ending keystrokes bg setiap ruang3. Pengguna tidak perlu taip leading zeroes, 01-08-

20044. Pengguna tidak perlu taip trailing zeroes bg

nombor perpuluhan, 98.005. Papar nilai default, operator boleh tekan kekunci

ENTER utk terima nilai yg dicadangkan

2929

Fasa III

Rekabentuk Input Rekabentuk Skrin Kemasukan Data

Panduan utk rekabentuk skrin kemasukan data

1. Papar senarai nilai yg diterima bagi ruangan, dan beri mesej kesilapan yg difahami

3. Sediakan cara utk keluar dari skrin masuk data pada bila2 masa

5. Beri pengguna peluang utk sahkan ketepatan data yg dimasukkan

3030

Fasa III

Input Design Rekabentuk Skrin Kemasukan Data

Panduan utk rekabentuk skrin kemasukan data

1. Sediakan cara utk pengguna bergerak dari ruang ke ruang dalam borang

3. Bolehkan pengguna tambah, edit, padam & lihat rekod

5. Sediakan cara utk pengguna cari maklumat spesifik

3131

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

3232

Fasa III

Rekabentuk Input Kesilapan Input

Sekurang2nya 8 jenis pemeriksaan kesahihan data:

1. Periksa aturan (sequence)

3. Periksa kewujudan (existence) (cth. Perlu masukkan No. Matrik sebelum simpan data)

5. Periksa jenis data

7. Periksa nilai minimum dan maksimum(range check)

3333

Fasa III

Rekabentuk Input1. Periksa kebolehterimaan (reasonableness)

3. Periksa kesahihan (validity check)

5. Periksa kombinasi

7. Kawalan batch (jumlah utk sahkan input secara batch)

3434

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

3535

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

3636

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

3737

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

3838

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?

3939

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

4040

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.

4141

Fasa III

Isu2 R/bentuk Output

4242

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

4343

Fasa III

Output Bercetak Sgt.mudah alih, berguna dlm situasi

tertentu

Dokumen turnaround (Cth. Bil telefon)

4444

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

4545

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

4646

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

4747

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

4848

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.

4949

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

5050

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

5151

Fasa III

Output Bercetak Jumlah Cetakan & Keperluan Masa

Jumlah laporan tinggi, kos tinggi

Kiraan panjang laporan

Kiraan masa cetak laporan

5252

Fasa III

Output Bercetak Kawalan & Keselamatan Output

Output mesti• Tepat• Lengkap• Terkini• Selamat

Jabatan IT bertanggungjawab ambil langkah berjaga

Diskless workstations

5353

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

5454

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

55

Fasa III

Bab 7 Selesai..