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

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.

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)

Characteristic DescriptionWindows Multiple windows allow different information to be

displayed simultaneously on the user’s screen.Icons Icons different types of information. On some systems,

icons represent files; on others, icons representprocesses.

Menus Commands are selected from a menu rather than typedin a command language.

Pointing A pointing device such as a mouse is used for selectingchoices from a menu or indicating items of interest in awindow.

Graphics Graphical elements can be mixed with text on the samedisplay.

Proses rekabentuk antaramuka pengguna

Executableprototype

Designprototype

Produce paper-based design

prototype

Producedynamic design

prototype

Evaluate designwith end-users

Implementfinal userinterface

Evaluate designwith end-users

Analyse andunderstand user

activities

Proses rekabentuk antaramuka pengguna

Tiga perkara utama yang dapat diperhatikan dari gambarajah proses tesebut:

(1) Analisis dan pemahaman mengenai pengguna dan aktivitinya

(2) 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 (user-centered 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 DescriptionUser familiarity The interface should use terms and concepts which are

drawn from the experience of the people who willmake most use of the system.

Consistency The interface should be consistent in that, whereverpossible, comparable operations should be activated inthe same way.

Minimal surprise Users should never be surprised by the behaviour of asystem.

Recoverability The interface should include mechanisms to allowusers to recover from errors.

User guidance The interface should provide meaningful feedbackwhen errors occur and provide context-sensitive userhelp facilities.

User diversity The interface should provide appropriate interactionfacilities for different types of 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’.

Panduan pengguna (User guidance) Manual atas-talian, kemudahan bantuan

dan sebagainya perlu disediakan untuk kegunaan pengguna.

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.

Advantages and disadvantages

Interactionstyle

Mainadvantages

Maindisadvantages

Applicationexamples

Directmanipulation

Fast and intuitiveinteractionEasy to learn

May be hard toimplementOnly suitable wherethere is a visualmetaphor for tasksand objects

Video gamesCAD systems

Menuselection

Avoids usererrorLittle typingrequired

Slow forexperienced usersCan becomecomplex if manymenu options

Most general-purpose systems

Form fill-in Simple dataentryEasy to learn

Takes up a lot ofscreen space

Stock control,Personal loanprocessing

Commandlanguage

Powerful andflexible

Hard to learnPoor errormanagement

Operating systems,Libraryinformationretrieval systems

Naturallanguage

Accessible tocasual usersEasily extended

Requires moretypingNatural languageunderstandingsystems areunreliable

Timetable systemsWWWinformationretrieval systems

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

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.

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

Title

Author

Publisher

Edition

Classification

Date ofpurchase

ISBN

Price

Publicationdate

Number ofcopies

Loanstatus

Orderstatus

NEW BOOK

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

Operating system

GUImanager

Graphical userinterface

Commandlanguage

interpreter

Commandlanguageinterface

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 tobe displayed

Presentationsoftware

Display

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

Maklumat yang sama boleh dipaparkan secara teks atau grafik

0

1000

2000

3000

4000

Jan Feb Mar April May June

Jan2842

Feb2851

Mar3164

April2789

May1273

June2835

1

3

4 20 10 20

Dial with needle Pie chart Thermometer Horizontal bar

Paparan maklumat numerikyang dinamik

0 100 200 300 400 0 25 50 75 100

Pressure Temperature

Paparan maklumat bergrafik menunjukkan nilai relatif

‘Textual Highlighting’

The filename you have chosen has beenused. Please choose another name

Ch. 16 User interface design!

OK Cancel

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?

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

Faktor merekabentuk mesej ralat

Context The user guidance system should be aware of what the user isdoing and should adjust the output message to the currentcontext.

Experience As users become familiar with a system they become irritatedby long, ‘meaningful’ messages. However, beginners find itdifficult to understand short terse statements of the problem.The user guidance system should provide both types of messageand allow the user to control message conciseness.

Skill level Messages should be tailored to the user’s skills as well as theirexperience. Messages for the different classes of user may beexpressed in different ways depending on the terminology whichis familiar to the reader.

Style Messages should be positive rather than negative. They shoulduse the active rather than the passive mode of address. Theyshould never be insulting or try to be funny.

Culture Wherever possible, the designer of messages should be familiarwith the culture of the country where the system is sold. Thereare distinct cultural differences between Europe, Asia andAmerica. A suitable message for one culture might beunacceptable in another.

Jururawat telah tersilap memasukkan nama pesakit

Please type the patient name in the bo x then click on OK

Bates , J.

OK Cancel

Mesej ralat dipaparkan Yang manakah di antara dua

mesej ini telah direkabentuk dengan baik?

Error #27

Invalid patient id entered?OK Cancel

Patient J . Bates is not registered

Click on Patients f or a list of registered patientsClick on Retr y to re-input a patient nameClick on Help f or more information

Patients Help Retry Cancel

System-oriented error messageUser-oriented error message

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’

Help frame network

Top-levelentry

Entry from errormessage system

Entry fromapplication

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

Description ofservices

Functionaldescription

Systemevaluators

How to installthe system

Installationdocument

Systemadministrators

Gettingstarted

Introductorymanual

Noviceusers

Facilitydescription

Referencemanual

Experiencedusers

Operation andmaintenance

Administrator’sguide

Systemadministrators

Jenis-jenis dokumen Functional description

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

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 KebolehgunaanAttribute DescriptionLearnability How long does it take a new user to

become productive with the system?Speed of operation How well does the system response match

the user’s work practice?Robustness How tolerant is the system of user error?Recoverability How good is the system at recovering from

user errors?Adaptability How closely is the system tied to 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).