Rekabentuk Antaramuka Pengguna n Objektif bagi bab ini

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

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

Antaramuka Pengguna n n “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)

Antaramuka Pengguna n “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)

Antaramuka Pengguna n Berikut adalah jawapan yang biasa diberikan oleh jurutera perisian ataupun juruanalisa sistem : “you didn’t tell us that”. n n 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.

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. n

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

Antaramuka Pengguna n n 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.

Antaramuka Pengguna n n 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.

Antaramuka Pengguna n n 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.

Antaramuka Pengguna n n 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?

GUI n n 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

Ciri-Ciri GUI (WIMP)

Proses rekabentuk antaramuka pengguna

Proses rekabentuk antaramuka pengguna n (1) (2) 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

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

Prinsip rekabentuk antaramuka pengguna n 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.

Prinsip rekabentuk antaramuka pengguna n n 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.

User interface design principles

Prinsip Rekabentuk n Kebiasaan pengguna (User familiarity) n n 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) n Kekonsistenan dapat mengurangkan masa mempelajari sistem. Arahan, menu dan sebagainya perlu mempunyai format yang sama bagi keseluruhan sistem.

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

Design principles n Kebolehpulihan (Recoverability) n n 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) n Manual atas-talian, kemudahan bantuan dan sebagainya perlu disediakan untuk kegunaan pengguna.

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

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

Gaya interaksi (Shneiderman 1998) n n n 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.

Advantages and disadvantages

Gaya Interaksi n n 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

Gaya Interaksi n Pengisian borang: pengguna mengisi 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.

Gaya Interaksi n 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

Gaya Interaksi n 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’

Interaksi Pengisian Borang

Interaksi Pemilihan Menu

Interaksi Soal-Jawab

Interaksi Bahasa Tabii

Gaya Interaksi n 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.

Antaramuka pengguna berbilang

Paparan Maklumat n n 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)

Paparan Maklumat

Paparan Maklumat Statik n n Maklumat Dinamik n n Maklumat yang tidak berubah semasa sesi interaksi. 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).

Maklumat yang sama boleh dipaparkan secara teks atau grafik

Paparan maklumat numerik yang dinamik

Paparan maklumat bergrafik menunjukkan nilai relatif

‘Textual Highlighting’

Faktor paparan maklumat n n n Adakah pengguna mahukan maklumat yang terperinci ataupun hubungan di antara 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?

Faktor paparan maklumat n n 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?

Paparan maklumat n n 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

Penvisualan Data n Contoh penvisualan data: n n 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

Paparan Warna n n 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:

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

Garispanduan penggunaan warna n n n “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

Garispanduan penggunaan warna n n “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.

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

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

Peranti input dan output n n n 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

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

Mesej Ralat n n 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 (systemoriented terms) dan sebagainya.

Faktor merekabentuk mesej ralat

Jururawat telah tersilap memasukkan nama pesakit

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

Bantuan atas-talian n n 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

Bantuan atas-talian n n ‘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

‘Entry points to a help system’

Dokumentasi pengguna n n 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).

Jenis-jenis dokumen pengguna

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

Penilaian Antaramuka Pengguna n n 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.

Atribut Kebolehgunaan

Penilaian Antarmuka Pengguna n n ‘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.

Teknik penilaian mudah n n 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.

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