Anda di halaman 1dari 70

Rekabentuk Antaramuka Pengguna

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

Topik-topik yang dibincangkan

Pengenalan:
- antaramuka pengguna - GUI - proses merekabentuk antaramuka

Prinsip rekabentuk antaramuka pengguna Gaya Interaksi Persembahan maklumat Sokongan pengguna Penilaian antaramuka

Antaramuka Pengguna

Why cant I view the customers past ordering history when I entering a new order? (here the user cannot access all the information needed) Sometimes I dont 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 didnt work! (the user expects the system to behave in certain ways)

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)

Antaramuka Pengguna

Berikut adalah jawapan yang biasa diberikan oleh jurutera perisian ataupun juruanalisa sistem : you

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

Antaramuka Pengguna
Contoh-contoh lain bagi antaramuka yang tidak baik: when an application doesnt work properly or crashes when a system doesnt do what the user wants it to do when a users 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.

Jurang di antara pengguna dan perisian

Jurang berlaku apabila pengguna tidak merasa selesa atau efektif menggunakan sesuatu sistem.

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.

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.

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.

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?

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

Ciri-Ciri GUI (WIMP)


Characteris ti c Win dows Icon s Men us Po int ing Graph ics Des cripti on Multiple windows allow different information t o be displayed simult aneously on th e users screen. Icon s differen t ty pes of informationOn some sy st ems, . icon s represent files; on ot hers, icon s represen t processes. Co mmands are select ed fro m a menu rat her than t yped in a command lan guage. A point ing device such as a mo use is used for select ing ch oices from a men u or indicat ing it ems o f in terestin a window. Graph ical elemen ts can be mix ed wit h text on t he same display.

Proses rekabentuk antaramuka pengguna


Analyse and understand user activities Produce paperbased design prototype Evaluate design with end-users

Design prototype

Produce dynamic design prototype

Evaluate design with end-users

Executable prototype

Implement final user interface

Proses rekabentuk antaramuka pengguna


(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

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

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


Principle User familiarity Consistency Minimal su rprise Recoverability User guidan ce User dive rsity Description The interface should us e terms and con cepts which are drawn from the experience of the people who will make most use of the system. The interface should b e consistent in that, wh erever possibl e, comparable operations should b e activated in the same wa y. Users should n ever be surp rised by th e behaviour of a system. The interface should in clude mechanisms to allo w users to recover from errors. The interface should provid e meaningful f eedback when errors occur and provide context-sensitive user help facilities. The interface should provid e appropriate interaction facilities for di fferent types o f system user.

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.

Prinsip Rekabentuk

Minimal surprise

Perekabentuk perlu memastikan arahan yang sama (comparable actions) mempunyai kesan/perlakuan yang sama.

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. Manual atas-talian, kemudahan bantuan dan sebagainya perlu disediakan untuk kegunaan pengguna.

Panduan pengguna (User guidance)

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.

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.

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.

Interaction style Direct manipulatio n

Main advantages Fast and intuitive interaction Easy to learn

Menu selection

Avoids user error Little typing required Simple data entry Easy to learn Powerful and flexible Accessible to casual users Easily extended

Form fill-in Command language Natural language

Main disadvantages May be hard to imple ment Only suitable where there is a visual metaphor for tasks and objects Slow for experien ced users Can become complex if many menu options Takes up a lot of screen space Hard to learn Poor error management Requires more typing Natural language understanding systems are unreliab le

Application examples Video g ames CAD systems

Most generalpurpose systems

Stock control, Personal loan processing Operating systems, Library information retriev al systems Timetable systems WWW information retriev al systems

Advantages and disadvantages

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

Gaya Interaksi

Pengisian borang: pengguna mengisi medanmedan 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

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

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


NE W BOOK Title Author Publisher Edition Classification Date of purchase ISBN Price Publication date Number of copies Loan status Order status

Interaksi Pemilihan Menu

Interaksi Soal-Jawab

Interaksi Bahasa Tabii

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.

Antaramuka pengguna berbilang


Gr aphical user interface Command language interface

GUI manager

Command language interpreter

Operating system

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)

Paparan Maklumat
Information to be displayed Presentation software

Display

Paparan Maklumat

Maklumat Statik

Maklumat yang tidak berubah semasa sesi interaksi. Maklumat yang berubah semasa sesi interaksi dan perubahan tersebut perlu dipaparkan kepada pengguna sistem

Maklumat Dinamik

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


Jan 2842 4000 Feb Mar 2851 3164 April 2789 May 1273 June 2835

3000

2000

1000

0 Jan Feb Mar April May June

Paparan maklumat numerik yang dinamik


1 4 3 2 0 10 20

Dial with needle

Pie chart

Thermometer

Horizontal bar

Paparan maklumat bergrafik menunjukkan nilai relatif


Pressure 0 100 200 300 400 0 25 T emper atu re 50 75 100

Textual Highlighting

The filename you have chosen h as been used. Please choose an other name Ch. 16 User interface design OK Cancel

Faktor paparan maklumat

Adakah pengguna mahukan maklumat yang terperinci ataupun hubungan di antara nilainilai 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

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

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

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

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:

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

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

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

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

Peranti input dan output

Contoh-contoh bagi peranti output - display screen, printer, audio output, scanner

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

Sokongan pengguna

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

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

Faktor merekabentuk mesej ralat


Context Experience The user guidance system should be aware of what the user is doing and should adjust the out put message t o t he current cont ext . As users become familiar with a system t hey become irrit at ed by long, meaningful messages. However, beginners find it difficult to understand short t erse statement s of t he problem. The user guidance system should provide bot ht ypes of message and allow the user t o control message conciseness. Messages should be tailored t o t he users skills as well as their experience. Messages for the different classes of user may be expressed in different ways depending on he terminology which t is familiar t o the reader. Messages should be positive rat her than negative. They should use t he active rat her t han t he passive mode of address. They should never be insult ing or t ry t o be funny. Wherever possible, thedesigner of messages should be familiar with t he culture of t he count ry where t he system is sold. There are distinct cult ural differences between Europe, Asia and America. A suit able message for one cult ure might be unacceptable in another.

Skill level

St yle Cult ure

Jururawat telah tersilap memasukkan nama pesakit


Please type t patient name in t bo he he Bates , J. x the c lick onOK n

OK

Cancel

Mesej ralat dipaparkan

Yang manakah di antara dua mesej ini telah direkabentuk dengan baik?
User -o rien ted er ror messag e

System-or iented err or messag e

?
OK

Er ror #27 Invalid patient id entered

Patient J . Bates is n ot r egistered Clic k onP atien f or a lst of register patie ts i ed nts Click on Retr to re-input a patient name y Click on Help f r more information o Patients Help Retry Cance l

Cancel

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

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

Entry points to a help system


Top-level entry Entry from application

Entry from error message system

Help frame network

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

Jenis-jenis dokumen pengguna


System evaluators System administrators Novice users Experienced users System administrators

Functional description

Installation document

Introductory manual

Reference manual

Administrators guide

Description of services

How to install the system

Getting started

Facility description

Operation and maintenance

Jenis-jenis dokumen

Functional description

Brief description of what the system can do

Introductory manual

Presents an informal introduction to the system


Describes all system facilities in detail Describes how to install the system Describes how to manage the system when it is in use

System reference manual

System installation manual

System administrators manual

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.

Atribut Kebolehgunaan
Attribute Learnability Speed of operat ion Robust ness Recoverability Adapt ability Des cripti on How long does it t ake a new user to become product ive with t he system? How well does t he system response match t he users work practice? How t olerant is the syst em of user error? How good is t he syst em at recovering from user errors? How closely is t he system t ied t o a single model of work?

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.

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.

Rekabentuk antaramuka pengguna

Bab seterusnya adalah Pemprototaipan Perisian (Software Prototyping).