Rekabentuk Antaramuka Pengguna

1. Rekabentuk Antaramuka Pengguna • Objektif bagi bab ini adalah untuk memperkenalkan beberapa aspek dalam rekabentuk antaramuka pengguna yang pentinguntuk 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 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