1. Rekabentuk Antaramuka Pengguna
Objektif bagi bab ini adalah untuk memperkenalkan beberapa aspek dalam rekabentuk antaramuka pengguna yang penting untuk jurutera perisian.

2. Topik-topik yang dibincangkan
Pengenalan:
- antaramuka pengguna
- GUI
- proses merekabentuk antaramuka
Prinsip rekabentuk antaramuka pengguna
Gaya Interaksi
Persembahan maklumat
Sokongan pengguna
Penilaian antaramuka

3. Antaramuka Pengguna
“Why can’t I view the customer’s past ordering history when I entering a new order?
(here the user cannot access all the information needed)
“Sometimes I don’t know the code of a new product off the top of my head. Is there a key I can hit to see the codes on the screen rather than having to refer to my codes printout? I tried Shift-C for Codes but it didn’t work!”
(the user expects the system to behave in certain ways)

4. Antaramuka Pengguna
“You know the screen where I can page back and forth through deliveries; well, sometimes the deliveries I want to see are split across two pages. Is there a way where I can move one up at a time, rather than page forward, so that I eventually have all the ones I need on the one screen?
(the user cannot access information in small chunks)

5. Antaramuka Pengguna
Berikut adalah jawapan yang biasa diberikan oleh jurutera perisian ataupun juruanalisa sistem : “you didn’t tell us that”.
Masalah-masalah yang ditunjukkan di atas adalah akibat dari rekabentuk antaramuka yang tidak efektif/baik dan bukannya yang disebabkan oleh spesifikasi keperluan.
Kurangnya pemahaman pada juruanalisa dan jurutera perisian mengenai pengguna dan bagaimana pengguna melaksanakan tugasnya.

6. Antaramuka Pengguna
Contoh-contoh lain bagi antaramuka yang tidak baik:
‘when an application doesn’t work properly or crashes’
‘when a system doesn’t do what the user wants it to do’
‘when a user’s expectations are not met’
‘when a system does not provide sufficient information to let user know what to do’
‘when error messages pop-up that are vague or condemning’ , etc.

7. Jurang di antara pengguna dan perisian
Jurang berlaku apabila pengguna tidak merasa selesa atau efektif menggunakan sesuatu sistem.

8. Antaramuka Pengguna
Antaramuka pengguna adalah pusat utama bagi hubungan di antara pengguna dan sistem komputer. Ianya adalah bahagian sistem di mana pengguna nampak, dengar, sentuh dan berhubung dengannya.
Pengguna berinteraksi dengan sistem komputer bagi melaksanakan tugas-tugas mereka.

9. Antaramuka Pengguna
Rekabentuk antaramuka pengguna yang baik adalah kritikal bagi kejayaan sesuatu sistem perisian.
sebab..
Pengguna umumnya menilai sesuatu sistem perisian itu mengikut antaramukanya berbanding dengan kefungsiannya.

10. Antaramuka Pengguna
Masalah yang timbul dari rekabentuk yang tidak baik termasuklah:
- mengurangkan kadar produktiviti pengguna
- meningkatkan kadar masa mempelajari sistem
- meningkatkan kadar berlakunya ralat
- dan sebagainya
Kesemua masalah di atas akan menyebabkan kepada ‘user frustration’ dan ‘user rejection’ bagi sistem yang telah dibangunkan.

11. Antaramuka Pengguna
Merekabentuk antaramuka pengguna bagi sesuatu sistem adalah profesion seorang perekabentuk antaramuka (interface designer).
Mengapakah di sesetengah syarikat (umumnya di Malaysia) tanggungjawab ini juga diberikan kepada jurutera perisian?

12. GUI
Kebanyakkan sistem pada hari ini menggunakan antaramuka pengguna bergrafik (GUI). Ianya mudah dipelajari dan digunakan walaupun bagi pengguna yang kurang biasa dengan sistem komputer.
Ciri-Ciri GUI – seperti di jadual

13. Ciri-Ciri GUI (WIMP)

14. Proses rekabentuk antaramuka pengguna

15. Proses rekabentuk antaramuka pengguna
Tiga perkara utama yang dapat diperhatikan dari gambarajah proses tesebut:
Analisis dan pemahaman mengenai pengguna dan aktivitinya
Rekabentuk antramuka pengguna melibatkan pembangunan beberapa prototaip, bermula dengan prototaip berasaskan-kertas (paper prototyping) seterusnya prototaip berasaskan-skrin yang mensimulasikan interaksi pengguna

16. Proses rekabentuk antaramuka pengguna
(3) Kaedah berasaskan-pengguna (user-centered approach) yang mana pengguna adalah terlibat secara aktif dalam proses rekabentuk.

17. Prinsip rekabentuk antaramuka pengguna
Prinsip antaramuka pengguna adalah dinyatakan secara umum. Prinsip umumnya adalah berdasarkan kepada keupayaan manusia dari segi mental dan fizikal (physical and mental capabilities). Dan mengambilkira bahawa manusia membuat kesilapan.

18. Prinsip rekabentuk antaramuka pengguna
Terdapat banyak jenis prinsip antaramuka yang telah dihasilkan. Satu contoh prinsip antaramuka adalah seperti yang dinyatakan dalam jadual.
Prinsip antaramuka bagi web juga telah dihasilkan. Prinsip yang biasa digunakan adalah ‘Top ten mistakes in web design’ oleh Jakob Nielsen.

19. User interface design principles

20. Prinsip Rekabentuk Kebiasaan pengguna (User familiarity)
Antaramuka perlu berdasarkan kepada istilah dan konsep yang biasa kepada pengguna bagi sistem tersebut dan bukannya mengikut apa yang biasa kepada perekabentuk (designer)
Kekonsistenan (Consistency)
Kekonsistenan dapat mengurangkan masa mempelajari sistem. Arahan, menu dan sebagainya perlu mempunyai format yang sama bagi keseluruhan sistem.

21. Prinsip Rekabentuk ‘Minimal surprise’
Perekabentuk perlu memastikan arahan yang sama (comparable actions) mempunyai kesan/perlakuan yang sama.

22. Design principles Kebolehpulihan (Recoverability)
Antaramuka pengguna perlu mengandungai kemudahan-kemudahan yang dapat membantu pengguna pulih dari kesilapan yang dibuat. Contohnya kemudahan ‘undo’ dan ‘confirmation of destructive actions’.
Panduan pengguna (User guidance)
Manual atas-talian, kemudahan bantuan dan sebagainya perlu disediakan untuk kegunaan pengguna.

23. Design principles Kepelbagaian pengguna (User diversity)
Kemudahan interaksi bagi kegunaan pelbagai pengguna sistem tersebut perlu disediakan. Contohnya, ‘first-time user’, ‘more experienced user’ berkehendakkan kepada kemudahan interaksi yang berlainan.

24. Interaksi pengguna-sistem
Dua isu berkaitan dengan interaksi pengguna-sistem:
Bagaimanakah maklumat daripada pengguna dapat diberikan kepada sistem komputer?
Bagaimanakah maklumat daripada sistem komputer dapat dipersembahkan kepada pengguna?
Gaya interaksi adalah diperlukan.

25. Gaya interaksi (Shneiderman 1998)
Manipulasi terus (Direct manipulation)
Pemilihan menu (Menu selection)
Pengisian borang (Form fill-in)
Bahasa arahan (Command language)
Bahasa tabii (Natural language)
Kebaikan dan keburukan bagi setiap gaya interaksi adalah seperti di jadual.

26. Advantages and disadvantages

27. Gaya Interaksi
Manipulasi Terus: pengguna berinteraksi terus dengan objek di skrin. e.g. to delete a file, a user drag it to a trashcan.
Pemilihan menu: pengguna memilih arahan daripada senarai menu.
e.g. to delete a file, the user selects the file, then selects the delete command

28. Gaya Interaksi
Pengisian borang: pengguna mengisi medan-medan di borang. Sesetengah medan mempunyai menu pilihan. Borang mempunyai ‘action button’ yang mana akan melaksanakan sesuatu arahan.
e.g. to delete a file, it would involve filling in the name of the file, then pressing a delete button.

29. Gaya Interaksi
Bahasa Arahan: pengguna memberikan arahan dan parameter yang berkaitan bagi sistem melaksanakan sesuatu tugas.
e.g. to delete a file, the user issues a delete command with the filename as a parameter

30. Gaya Interaksi
Bahasa Tabii: pengguna menyatakan arahan kepada sistem dengan menggunakan bahasa biasa (bahasa malaysia, inggeris, cina, dan sebagainya).
e.g. To delete a file, the user types ‘delete the file named xxx’

31. Interaksi Pengisian Borang

32. Interaksi Pemilihan Menu

33. Interaksi Soal-Jawab

34. Interaksi Bahasa Tabii

35. Gaya Interaksi
Sesuatu sistem itu boleh menggunakan beberapa gaya interaksi.
e.g. Microsoft windows supports direct manipulation of the iconic representation of files and directories, menu-based command selection, for some commands such as configuration commands, the user must fill-in a special purpose form that is presented to them.

36. Antaramuka pengguna berbilang

37. Paparan Maklumat
Maklumat boleh dipaparkan secara terus (e.g. text in a word processor) ataupun ditukar ke sesuatu bentuk paparan (e.g. in some graphical form)
Dengan mengasingkan sistem paparan dengan data, maklumat pada skrin pengguna boleh diubah ke bentuk paparan yang dikehendaki (seperti gambarajah)

38. Paparan Maklumat

39. Paparan Maklumat Maklumat Statik Maklumat Dinamik
Maklumat yang tidak berubah semasa sesi interaksi.
Maklumat Dinamik
Maklumat yang berubah semasa sesi interaksi dan perubahan tersebut perlu dipaparkan kepada pengguna sistem
Teks mengambil ruang skrin yang kurang, tetapi tidak memberikan gambaran mengenai maklumat dengan sekali pandang (at a glance).

40. Maklumat yang sama boleh dipaparkan secara teks atau grafik

41. Paparan maklumat numerik
yang dinamik

42. Paparan maklumat bergrafik menunjukkan nilai relatif

43. ‘Textual Highlighting’

44. Faktor paparan maklumat
Adakah pengguna mahukan maklumat yang terperinci ataupun hubungan di antara nilai-nilai data yang berbeza?
Berapa cepat nilai maklumat berubah? Adakah perubahan perlu dimaklumkan serta merta?
Adakah pengguna perlu mengambil sebarang tindakan ke atas perubahan tersebut?

45. Faktor paparan maklumat
Adakah pengguna perlu berinteraksi dengan maklumat yang dipaparkan menggunakan antaramuka manipulasi terus?
Adakah maklumat yang perlu dipaparkan dalam bentuk teks ataupun numerik? Adakah nilai relatif bagi maklumat penting?

46. Paparan maklumat
Penvisualan maklumat (information visualization) adalah teknik bagi memaparkan maklumat yang banyak (large amounts of information)
Penvisualan dapat menunjukkan hubungan entiti dengan tren di dalam data

47. Penvisualan Data Contoh penvisualan data:
Weather information collected from a number of sources
The state of a telephone network as a linked set of nodes
Chemical plant visualised by showing pressures and temperatures in a linked set of tanks and pipes
A model of a molecule displayed in 3 dimensions

48. Paparan Warna
Warna dapat digunakan dalam beberapa cara pada antaramuka sistem. Warna juga apabila disalahgunakan boleh mengakibatkan antaramuka yang tidak baik – ‘visually unattractive’.
Dua kesalahan biasa dalam penggunaan warna pada antaramuka adalah:

49. Paparan Warna
(1) Menghubungkan maksud dengan warna contohnya merah menunjukkan ‘panas’.
Memberi kesan kepada mereka yang mempunyai masalah ‘colour blind’.
Interpretasi maksud yang berlainan. Kepada pemandu lori merah bermaksud ‘bahaya’.
(2) Penggunan warna yang berlebihan pada paparan maklumat

50. Garispanduan penggunaan warna
“Limit the number of colours used and be conservative how these are used”
gunakan di antara 3 – 4 warna pada satu skrin.
“Use colour change to show a change in system status’ (colour highlighting)
apabila warna berubah, ia menandakan sesuatu peristiwa telah berlaku. Penting bagi sistem yang kompleks dimana beratus entiti yang berbeza perlu dipaparkan.
“Use colour coding to support the task which users are trying to perform”
e.g. Microsoft word, warna merah menandakan kesilapan ejaan

51. Garispanduan penggunaan warna
“Use colour coding in a thoughtful and consistent way”
sekiranya satu bahagian sistem menggunakan warna merah untuk menggambarkan mesej ralat, maka dibahagian-bahagian lain juga perlu menggunakan warna yang sama bagi mesej ralat
“Be careful about colour pairings”
masalah ‘eyestrain’ adalah akibat utama dari pasangan warna yang tidak baik. Pasangan warna yang tidak tepat juga boleh menyebabkan maklumat sukar dibaca.

52. Peranti input dan output
Contoh-contoh bagi peranti input:
- text entry: keyboard, speech and
handwriting
- pointing: mouse, trackball, joystick,
touchscreen, light pen, digitizing tablet,
touch pad
- 3D interaction devices: dataglove, virtual
reality helmets, whole-body tracker

53. Peranti input dan output
Contoh-contoh bagi peranti output –
- display screen, printer, audio output, scanner

54. Peranti input dan output
Peranti input dan output apakah yang akan anda gunakan bagi aplikasi sistem di bawah:
Tourist information system?
Touchscreen.
Portable word processor?b
LCD screen – low power requirement
trackball or stylus for pointing
real keyboard
small, low-power bubble-jet printer

55. Sokongan pengguna Sokongan pengguna termasuklah: - mesej ralat
- bantuan atas-talian (online help)
- dokumentasi pengguna

56. Mesej Ralat
Mesej perlulah sopan, ringkas lagi padat, konsisten dan membina (polite, concise, consistent and constructive).
Dan bukannya yang berbentuk negatif seperti menggunakan bunyi ‘beep’, menggunakan istilah yang sukar difahami oleh pengguna (system-oriented terms) dan sebagainya.

57. Faktor merekabentuk mesej ralat

58. Jururawat telah tersilap memasukkan nama pesakit

59. Mesej ralat dipaparkan
Yang manakah di antara dua mesej ini telah direkabentuk dengan baik?

60. Bantuan atas-talian Dua jenis bantuan maklumat adalah:
1. ‘Help’ bermaksud ‘help I want information”
2. ‘Help’ bermaksud `I'm in trouble”. (iaitu apabila pengguna mendapat mesej ralat dan perlukan maklumat lanjut mengenai ralat tersebut)
Kedua-dua keperluan ini perlu diambilkira dalam rekabentuk sistem bantuan

61. Bantuan atas-talian
‘Multiple entry points to a help system’ adalah diperlukan supaya pengguna dapat mencapai bantuan tersebut di beberapa tempat – dicapai dari bahagian atas hierarki mesej; dicapai dari mesej ralat; dicapai disesuatu bahagian aplikasi.
Lihat gambarajah

62. ‘Entry points to a help system’

63. Dokumentasi pengguna
Dokumentasi pengguna memberikan maklumat lebih lanjut berbanding dengan bantuan atas-talian. Ianya bukanlah bahagian yang mesti ada bagi rekabentuk antaramuka pengguna tetapi elok diadakan kemudahan ini.
Ianya boleh digunakan oleh beberapa kategori pengguna (from inexperienced to experienced users).

64. Jenis-jenis dokumen pengguna

65. Jenis-jenis dokumen Functional description Introductory manual
Brief description of what the system can do
Introductory manual
Presents an informal introduction to the system
System reference manual
Describes all system facilities in detail
System installation manual
Describes how to install the system
System administrator’s manual
Describes how to manage the system when it is in use

66. Penilaian Antaramuka Pengguna
Penilaian adalah satu proses bagi menilai kebolehgunaan (usability) antaramuka tersebut dan menyemak antaramuka tersebut memenuhi keperluan pengguna.
Sebaiknya penilaian dilaksanakan berbanding dengan atribut kebolehgunaan. Atribut kebolehgunaan ditakrif sebelum penilaian dibuat. Contoh atribut kebolehgunaan diberikan di jadual.

67. Atribut Kebolehgunaan

68. Penilaian Antarmuka Pengguna
‘Full scale evaluation’ iaitu yang melibatkan makmal kebolehgunaan (usability lab) dan pakar kognitif adalah memakan belanja yang besar.
Simple evaluation techniques sesuai bagi syarikat yang kecil.

69. Teknik penilaian mudah
Questionnaires for user feedback
Video recording of system use
Observation of users at work with the system, looking at the facilities used and the errors made.
The inclusion in the software of code which collects information about the most-used facilities and the most common errors.

70. Rekabentuk antaramuka pengguna
Bab seterusnya adalah Pemprototaipan Perisian (Software Prototyping).