1. Systems Analysis and Design, 2nd Edition
Alan Dennis and Barbara Haley Wixom John Wiley & Sons, Inc.
Slides by Roberta M. Roth
University of Northern Iowa
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

2. Reka bentuk Struktur Antara Muka Pengguna
Chapter 10
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

3. Definisi Utama
Antara muka pengguna mendefinisikan bagaimana sistem akan berinterkasi dengan entiti luaran.
Antara muka sistem mendefinisikan bagaimana sistem bertukar maklumat dengan sistem lain.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

4. Definisi Utama
Mekanisma navigasi menyediakan cara untuk pengguna memberitahu sistem apa yang perlu dilakukan.
Mekanisma input menakrifkan cara sistem menangkap maklumat.
Mekanisma output menakrifkan cara sistem menyediakan maklumat kepada pengguna atau sistem lain.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

5. Definisi Utama
Antara muka grafik pengguna adalah antara muka yang paling banyak digunakan secara peribadi dan untuk membangunkan sistem.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

6. PRINSIP UNTUK REKA BENTUK ANTARAMUKA PENGGUNA
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

7. Prinsip untuk reka bentuk antara muka pengguna
Bentangan
Kesedaran kandungan
Aesthetics
Pengalaman pengguna
Konsisten
Usaha pengguna yang minima
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

8. Konsep Bentangan Skrin terbahagi kepada tiga kotak
Kawasan navigasi (atas)
Kawasan status (bawah)
Kawasan kerja (tengah)
Maklumat boleh dipersembahkan dalam berbilang kawasan
Kawasan yg sama patut dikumpulkan sekali
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

9. Konsep Bentangan
Kawasan dan maklumat perlu meminimakan pergerakan pengguna
Sepatutnya, kawasan adalah konsisten dari segi
Saiz
Bentuk
Tempat kemasukan data
Laporan
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

10. Contoh bentangan 1
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

11. Contoh bentangan 2
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

12. Contoh bentangan 3
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

13. Kesedaran kandungan Semua antaramuka mempunyai tajuk Menu menunjukkan
di mana anda berada
dari mana asal anda
Maklumat apa dalam kawasan mana perlu jelas
Medan dan label medan perlu dipilih dengan cermat
Gunakan tarikh dan nombor versi untuk membantu pengguna sistem
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

14. Aesthetics Antara muka perlu berfungsi dan menraik untuk digunakan
Hindarkan dari memasukkan terlalu banyak, khasnya untuk pengguna novice
Reka bentuk teks dengan cermat
Beri perhatian kepada fon dan saiz
Hindari dari gunakan semua huruf besar
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

15. Aesthetics Warna dan corak patut digunakan dengan cermat
Uji kualiti warna dengan mencuba antaramuka pada monitor hitam/putih
Gunakan warna untuk mengasingkan atau mengkategori sesuatu
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

16. Bagaimana mudah untuk mempelajari aturcara?
Pengalaman Pengguna
Bagaimana mudah untuk mempelajari aturcara?
Bagaimana muda untuk pakar menggunakan aturcara?
Tambahkan shortcuts untuk pakar
Di mana terdapat pertukaran pekerja yang rendah, latihan boleh mengurangkan kesan antara muka yang kurang tepat
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

17. Konsisten Membolehkan pengguna meramal apa yang akan berlaku
Mengurangkan lengkok pembelajaran
Mengambil kita perkara dlm aplikasi dan merentasi aplikasi
Libatkan banyak tahap
Kawalan navigasi
Terminologi
Reka bentuk laporan dan borang
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

18. Meminimakan usaha Petua 3 klik
Pengguna boleh pergi dari menu utama kepada maklumat atu tindakan yang mereka mahukan dalam tidak lebih dari 3 klik tetikus atau kekunci.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

19. PROSES REKA BENTUK ANTARAMUKA PENGGUNA
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

20. Proses 5 Langkah
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

21. Guna Pembangunan Senario
Gambaran langkah untk melaksanakan kerja
Dipersembahkan dgn penerangan ringkas berkaitan RAD yang terlibat
Mendokumenkan laluan umum menerusi penggunaan use case supaya reka bentuk antara muka mudah untuk digunakan daalam situasi tertentu.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

22. Giliran anda
Visit the Web site for your university and navigate through several of its Web pages.
Develop two use scenarios for it.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

23. Reka bentuk Struktur Anatara muka
A diagram showing how all screens, forms, and reports are related
Shows how user moves from one to another
Similar to DFD in using boxes and lines
Boxes denote screens
Lines show movement from one to another
Different from DFD in having no standard rules or format
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

24. Contoh Rajah Struktur Antara muka
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

25. Rekabentuk Piawai Antara muka
Elemen asas yang sama dalam skrin, borang dan laporan dalam sesuatu aplikasi
Metafor antara muka
Atas meja, buku cek, kereta sorong membeli belah
Antara muka objek
Antaramuka tindakan
Antaramuka ikon
Antaramuka templat
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

26. Prototaip Reka bentuk Antara muka
Mock-up atau simulasi skrin, borang, atau laporan
Kaedah biasa termasuk
Kertas
Papan cerita
Prototaip HTML
Prototaip bahasa
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

27. Contoh Papan Cerita
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

28. Kaedah Penilaian Antara muka
Penilaian heuristik
Bandingkan reka bentuk kepada senarai semak
Penilaian walkthrough (penelusuran?)
Kumpulan lakukan simulasi gerakan menerusi komponen
Penilaian interaktif
Pengguna mencuba sistem
Pengujian kebolehgunaan formal
Mahal
Gunakan pengujian makmal khas
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

29. REKA BENTUK NAVIGASI
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

30. Prinsip Asas Reka bentuk Navigasi
Andaikan pengguna
Tidak membaca manual
Tidak menghadiri latihan
Tidak mempunyai pertolongan dari luar
Semua kawalan sepatutnya jelas dan boleh difahami dan terletak di lokasi khas pada skrin
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

31. Prinsip Asas Reka bentuk Navigasi
Mengelakkan kesilapan
Kurangkan pilihan
Tidak paparkan suruhan yang tidak boleh digunakan(atau “dipudarkan”)
Sahkan tindakan yang sukar atau tidak boleh dibatalkan
Memudahkan pemulihan dari kesilapan
Guna turutan nahu yang konsisten
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

32. Jenis Kawalan Navigasi
Bahasa
Bahasa suruhan
Bahasa tabii
Menu
Broad shallow menu
Gunakan “hot keys”
Manipulasi terus
Digunakan dengan ikon untuk memulakan aturcara
Digunakan untuk membentuk dan mensaizkan objek
Tidak sesuai untuk semua suruhan
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

33. Menu Tradisional dalam sistem UNIX
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

34. Jenis Menu Biasa
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

35. Jenis Menu Bila akan anda gunakan setiap jenis menu ini? Jenis menu
Menu Palang
Drop-down menu
Pop-up menu
menu
Tab Toolbar
Peta imej
Bila akan
anda
gunakan
setiap jenis
menu ini?
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

36. Tip Mesej Patut jelas, tepat, dan, lengkap
Nahu betul dan bebas dari jargon dan kependekan (kecuali jika pengguna mahir)
Elakkan perkara negatif dan lawak
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

37. Jenis Mesej Bila akan anda gunakan setiap jenis mesej ini? Jenis mesej
Mesej ralat
Mesej pengesahan
Mesej acknowledgment
Mesej lewat
Mesej bantuan
Bila akan
anda
gunakan
setiap jenis
mesej ini?
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

38. Giliran anda
Bayangkan anda sedang mereka bentuk antara muka baru utk sistem perkhidmatan kerjaya di UKM.
Bagaimana akan anda terapkan prinsip asas reka bentuk input ke dalam reka bentuk antara muka?
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

39. REKA BENTUK INPUT
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

40. Prinsip asas Reka bentuk Input
Matlamat utk memudahkan tangkapan maklumat untuk sistem
Menunjukkan sifat input
Mencari cara untuk memudahkan pengumpulan
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

41. Pemprosesan atas talian VS kelompok
Pemprosesan atas talian merekodkan transaksi dengan segera di dalam pangkalan data yg sesuai
Pemprosesan kelompok mengumpul input dalam tempoh tertentu dan memasukkan input ke dalam sistem secara satu batch pada satu masa
Pemprosesan kelompok memudahkan komunikasi data dan proses lain, fail utama tidak dikemaskini dalam masa nyata
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

42. Tangkap Data di sumber Kurangkan kerja berulang
Kurangkan masa pemprosesan
Kurangkan kos
Kurangkan kebarangkalian ralat
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

43. Automasi Data Sumber
Boleh didapati dengan menggunakan teknologi berikut:
Pembaca kod bar
Pengecaman aksara optik
Pembaca jalur magnetik
Kad pintar
Bagaimana internet boleh digunakan untuk automasi data sumber?
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

44. Meminimakan Keystrokes
Jangan tanyakan maklumat yang boleh didapati dengan cara lain
Lookups
Dropdown lists
Default values
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

45. Jenis Input Item data dipautkan ke medan Teks Nombor Kotak pilihan
Check boxes
Radio buttons
On-screen list boxes
Drop-down list boxes
Combo boxes
Sliders
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

46. Jenis Borang Input
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

47. Jenis Kotak Pilihan Bila akan anda gunakan setiap jenis kotak ini?
Check box
Radio button
On-screen list box
Drop-down list box
Combo box
Slider
Bila akan
anda
gunakan
setiap jenis
kotak ini?
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

48. Jenis Pengesahan Input
Completeness check
Format check
Range check
Check digit check
Consistency check
Database checks
Bila akan
anda
gunakan
setiap jenis
pengesahan
input ini?
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

49. REKA BENTUK OUTPUT
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

50. Prinsip Asas Memahamkan penggunaan laporan Menguruskan beban maklumat
Rujukan atau cover-to-cover?
Kekerapan?
Laporan masa nyata atau kelompok?
Menguruskan beban maklumat
Semua memerlukan maklumat, tidak lagi
Minimakan bias
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

51. Bias dalam Graf
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

52. Jenis Laporan Bila akan anda gunakan setiap jenis laporan ini?
Laporan terperinci
Laporan ringkasan
Dokumen turnaround
Graf
Bila akan
anda
gunakan
setiap jenis
laporan ini?
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

53. Media laporan Elektronik Lwn Kertas
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

54. Ringkasan
Antara muka pengguna sepatutnya direka bentuk untuk membuatkan kerja pengguna lebih mudah dan berkesan.
Prinsip utk reka bentuk antara muka yang baik termasuk pertimbangan kandungan dan konteks utk navigasi menerusi aktiviti, pertimbangan estetik,bantuan untuk novis dan pakar, konsisten, dan meminimakan usaha pengguna.
Proses reka bentuk berfokus kepada tindakan pengguna, merajahkan struktur, buat templat dan piawai dan menilai reka bentuk antaramuka.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

55. Ringkasan
Matlamat utama reka bentuk navigasi untuk memudahkan sistem untuk digunakan
Matlamat mekanisma input ialah untuk menangkap maklumat yang tepat dengan mudah
Matlamat mekasnisma output ialah untuk menyediakan maklumat yang tepat kepada pengguna untuk meminimakan bebanan maklumat dan bias
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.

56. Copyright © 2003 John Wiley & Sons, Inc.
All rights reserved. Reproduction or translation of this work beyond that permitted in Section 117 of the 1976 United States Copyright Act without the express written permission of the copyright owner is unlawful.
Request for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.
The purchaser may make back-up copies for his/her own use only and not for redistribution or resale.
The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2nd Edition
Copyright 2003 © John Wiley & Sons, Inc. All rights reserved.