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

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

3. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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.

4. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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.

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

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

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

8. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

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

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

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

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

13. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

14. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

15. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

16. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 16 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

17. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

18. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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.

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

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

21. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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.

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

23. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

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

25. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

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

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

28. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

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

30. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

31. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

32. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

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

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

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

36. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

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

38. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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?

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

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

41. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

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

43. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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?

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

45. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

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

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

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

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

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

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

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

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

54. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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.

55. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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

56. PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design, 2 nd Edition Copyright 2003 © John Wiley & Sons, Inc. All rights reserved. 2 - 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.