Interface Design

1.1 DEFINISI ANTARAMUKA

Dix et al (1998)

Interaksi manusia-komputer menyediakan input yang sangat penting di dalam rekabentuk pakej pembelajaran dan merupakan sebahagian penting daripada proses rekabentuk.

Johnson (1992)

Antaramuka di antara pengguna dan komputer dan boleh melibatkan perkakasan dan perisian.

Lewis dan Rieman (1993)

Antaramuka pengguna yang asas sepatutnya termasuk perkara-perkara seperti menu, tetingkap, papan kekunci, tetikus, bunyi beep dan bunyi lain yang dihasilkan oleh komputer.

1.2 PENDAHULUAN

Interaksi manusia-komputer (Human-Computer Interaction-HCI) merupakan satu disiplin ilmu yang mengkaji tentang komunikasi atau interaksi di antara pengguna dengan sistem. Sistem yang dimaksudkan di sini tidak terhad kepada sistem-sistem berkomputer sahaja, malah apa sahaja produk-produk yang digunakan oleh pengguna seperti kenderaan, peralatan pejabat, peralatan rumah dan sebagainya. Peranan utama HCI adalah untuk menghasilkan sebuah yang sistem yang bolehguna (usable), selamat, berkesan dan efektif.

Model interaksi di antara pengguna dengan sistem melibatkan tiga komponen iaitu pengguna, interaksi dan sistem itu sendiri. Kunci utama dalam HCI adalah kebolehgunaan (usability) yang bermaksud, sesuatu sistem mestilah mudah digunakan, memberi keselesaan kepada pengguna, mudah dipelajari dan sebagainya.

1.3 ANTARAMUKA PENGGUNA

Salah satu kajian terpenting dalam bidang HCI adalah antaramuka pengguna. Antaramuka pengguna merupakan bahagian sistem yang akan dikendalikan oleh pengguna, untuk mencapai dan melaksanakan fungsi-fungsi suatu sistem. Ia juga dianggap sebagai jumlah keseluruhan keputusan rekabentuk.

Antaramuka juga secara tidak langsung, menunjukkan kepada pengguna tentang kefungsian sistem. Dengan kata lain, antaramuka bagi sesuatu sistem menggabungkan elemen-elemen daripada sistem, elemen-elemen daripada pengguna dan juga kaedah komunikasi atau interaksi di antara kedua-duanya. Pengguna hanya boleh berinteraksi dengan produk tersebut melalui antaramuka pengguna.

Sebuah sistem antaramuka pengguna merangkumi perisian itu sendiri, peranti input (seperti papan kekunci, tetikus dan skrin sesentuh), peranti output (seperti monitor, pembesar suara dan pencetak), input daripada pengguna (seperti baris-arahan, pergerakan tetikus dan bahasa tabii) dan output yang dikeluar oleh komputer (seperti grafik, bunyi dan tulisan bercetak).

Penggunaan komputer pada masa sekarang tidak lagi terhad kepada golongan yang terlibat dalam bidang komputer secara langsung. Komputer telah menjadi salah satu keperluan penting dan digunakan oleh pengguna-pengguna pada tahap kemahiran yang berbeza-beza. Kita tidak boleh lagi menganggap bahawa semua pengguna mahir menggunakan komputer. Oleh itu, antaramuka pengguna perlu direkabentuk supaya ia lebih mudah dan jelas.

Peranan antaramuka pengguna dalam kebolehgunaan suatu sistem adalah amat penting. Oleh itu, rekabentuk dan pembangunan antaramuka pengguna perlu dilihat sebagai salah satu proses utama dalam keseluruhan pembangunan sistem. Selain itu, adalah amat penting untuk memperuntukkan masa, kos dan beban kerja yang bersesuaian terhadap rekabentuk antaramuka dan kebolehgunaannya. Rekabentuk antaramuka pengguna merupakan satu proses yang kompleks. Ia memerlukan daya kreativiti yang tinggi, pengalaman, analisa tugas terperinci dan kefahaman terhadap keperluan pengguna. Antaramuka pengguna boleh direka oleh pengaturcara komputer, penganalisa sistem, pakar antaramuka pengguna atau pengguna sendiri. Walaubagaimanapun, kebanyakkan antaramuka pengguna direka dan dibangunkan oleh

pengaturcara komputer.

1.4 GENERASI ANTARAMUKA PENGGUNA

Seperti mana sistem komputer, antaramuka pengguna juga telah mengalami proses evolusi. Evolusi antaramuka pengguna adalah seiring dengan perkembangan teknologi komputer. Terdapat lima generasi antaramuka pengguna iaitu

Antaramuka Sistem Berkelompok Antaramuka Berorentasikan Baris-Arahan Antaramuka Skrin PenuhAntaramuka Pengguna Bergrafik Antaramuka Pengguna Masa Depan.

1.4.1 Antaramuka Sistem Berkelompok

Antaramuka

sistem

berkelompok

merupakan

generasi

antaramuka

pengguna

yang

mula-mula

diperkenalkan. Sistem ini bukanlah sistem yang interaktif seperti yang terdapat pada sistem-sistem pada masa sekarang. Pengguna berinteraksi dengan sistem melalui penghantaran kerja secara berkelompok. Semua arahan perlu dihantar terlebih dahulu sebelum sebarang hasil keputusan dicetak. Antaramuka sIstem berkelompok mempunyai paras kebolehgunaan yang rendah.

1.4.2 Antaramuka Berorentasikan Baris-Arahan

Antaramuka baris-arahan diperkenalkan semasa kemunculan system perkongsian-masa pada tahun 1960an. Sistem yang mula-mula menggunakan antaramuka baris-arahan adalah sebuah mesin taip yang dikenali sebagai Tele-type (TTY). Dalam antaramuka baris-arahan, pengguna berinteraksi dengan sistem dengan cara menaip arahan-arahan secara baris demi baris. Interaksi pengguna terhad kepada penggunaan arahanarahan yang berbentuk dialog soal-jawab. Namun, sesetengah bahasa baris-arahan adalah sangat berkuasa dan membenarkan penggunaan nahu arahan yang lebih kompleks.

Antaramuka baris-arahan mempunyai kebolehgunaan yang rendah. Ia tidak memberi kebebasan kepada pengguna semasa berinteraksi dengan komputer, misalnya pengguna tidak boleh bergerak disekitar skrin. Dalam hal ini komputer dikatakan lebih mengawal pengguna. Antaramuka baris-arahan juga tidak bersifat pemaaf dan membebankan ingatan pengguna. Ini kerana untuk melaksanakan sesuatu tugas, pengguna perlu mengingat arahan yang perlu ditaip dan arahan tersebut pula perlu mengikut nahu dan parameterparameter dengan tepat. Untuk meningkatkan paras kebolehgunaan, kebanyakkan sistem antaramuka baris-arahan menggunakan konvensyen penamaan yang seragam dan mengelakkan penggunaan huruf vokal. Pada hari ini, antaramuka pengguna baris-arahan masih meluas digunakan pada sistem-sistem pengoperasian DOS dan UNIX.

1.4.3 Antaramuka Skrin Penuh

Kemunculan antaramuka pengguna skrin penuh adalah seiring dengan kemajuan dalam teknologi paparan. Terdapat beberapa jenis antaramuka skrin penuh yang sering digunakan. Antaramuka pengguna yang menggunakan interaksi berbentuk pengisian borang merupakan salah satu daripadanya. Pengisian borang telah dihasilkan selepas interaksi berbentuk kekotak dialog dalam antaramuka pengguna moden. Interaksi jenis ini membolehkan beberapa medan data dipaparkan dan disunting serentak. Menu berhirarki juga merupakan satu lagi bentuk antaramuka skrin penuh, walaupun sebelum ini ia sering digunakan dalam antaramuka baris-arahan.

1.4.4 Antaramuka Pengguna Bergrafik

Antaramuka pengguna bergrafik (GUI) merupakan antaramuka pengguna yang menggunakan perwakilanperwakilan visual seperti grafik, ikon dan animasi untuk mewakili komponen-komponen antaramuka tersebut. Kemunculan antaramuka pengguna bergrafik adalah didorong oleh kemunculan teknologi-teknologi input dan paparan yang semakin canggih. Kajian terhadap antaramuka pengguna bergrafik telah lama dijalankan iaitu seawal tahun 1960-an. Namun, penggunaannya secara komersil hanya bermula pada tahun 1980-an. Antaramuka pengguna bergrafik yang pertama sekali digunakan secara komersil adalah pada sebuah sistem yang dikenali sebagai 8010 Star Information System pada tahun 1981 yang diperkenalkan oleh Xerox Corporation.

Antaramuka pengguna bergrafik menggunakan metafora dunia sebenar dan menyediakan interaksi berdasarkan kepada tetingkap, ikon, menu dan penuding (Window, Icon, Menu and Pointer -WIMP). Interaksi di dalam antaramuka pengguna bergrafik merupakan sebuah interaksi secara manipulasi langsung di mana pengguna berinteraksi dengan perwakilan-perwakilan visual objek melalui tetikus atau perantiA peranti penuding yang lain. Point and click, drag and drop dan menggerakkan objek merupakan ciri-ciri utama dalam antaramuka pengguna bergrafik.

1.4.5 Antaramuka Pengguna Masa Depan

Generasi antaramuka pengguna pada masa akan datang menuju kepada penambahan unsur-unsur animasi objek dan audio (suara dan bunyi). Unsur dimensi ketiga (dimensi spatial/ruang) juga telah ditambah kepada antaramuka pengguna moden dalam pembentukan persekitaran realiti maya. Antaramuka pengguna masa depan dijangka lebih berorientasikan-objek daripada segi pengolahan maklumat dan fungsi. Di samping itu, bentuk dialog tidak lagi berbentuk arahan. Interaksi yang akan digunakan lebih berbentuk bahasa tabii dan membenarkan penggunaan input yang tidak berformat. Antaramuka masa depan juga membolehkan komputer mencerap dan membuat analisa terhadap aktiviti-aktiviti pengguna.

1.5 KEPENTINGAN REKABENTUK ANTARAMUKA

Memudahkan dan Melicinkan Proses Pembelajaran

Perubahan antara persekitaran manual ke komputer akan lebih mudah digunakan.

Gaya Pengemudian yang Bebas

Antaramuka meniru persekitaran semulajadi

Menyokong Kandungan dan Mesej

Sekiranya mesej dan kandungan tidak diurus dengan baik, sukar dijumpai, atau pengguna berasa bosan atau sesat: aplikasi anda akan gagal mencapai objektif pembangunannya.

1.6 KRITERIA REKABENTUK ANTARAMUKA

Memahami Pengguna Sasaran

Perlulah bersesuaian dengan pengguna sasaran.

Oleh itu, keperluan pelanggan mesti dikenalpasti dengan tepat

Kenal Pasti Elemen-elemen yang Penting

o o
Penggunaan elemen-elemen yang bersesuai Pastikan aplikasi tidak terlalu sesak dengan elemen-elemen sehingga menyekat objektif aplikasi

Mengurangkan Ledakan Maklumat

o
Jumlah kandungan yang dipaparkan mesti seimbang dengan jumlah maklumat yang dapat diproses.

Pastikan kesederhanaan pada skrin antaramuka supaya maklumat dapat disampaikan dengan cepat

Menyediakan Alternatif untuk Kawalan Antaramuka

o o
Menyediakan shortcut atau kekunci alternatif pada kawalan antaramuka. Memberikan pengawalan bebas kpd pengguna

Menampung Tahap Kepakaran Pengguna yang Berbagai

Aplikasi boleh digunakan oleh semua lapisan pengguna

1.7 JENIS-JENIS REKABENTUK ANTARAMUKA

Antaramuka Bilik Berita

Untuk aplikasi yang menyampai maklumat

Metafora Penceritaan

Untuk aplikasi yang berunsurkan didikan dan mempunyai ciri hiburan

Pendekatan Permainan

Untuk aplikasi yang bertemakan pengembaraan

Metafora Buku

Untuk aplikasi yang membolehkan pengguna mengemudi aplikasi

Metafora Teknologi Tinggi

Aplikasi yang mempunyai tema yang sofistikated

Pendekatan Menu

Untuk aplikasi yang berasaskan perkhidmatan pelanggan

1.8 KOMPONEN ANTARAMUKA

Latar Belakang dan Tekstur

 o o o o o
Lapisan antaramuka yang paling asas Menyediakan latar yang menarik untuk paparan kandungan. Perlulah kelihatan menarik di mata pengguna. Sebagai simbol visual kepada kandungan Perlu sekata dengan skrin untuk membolehkan pengguna memberi tumpuan terhadap maklumat yang tertera pada skrin

Rollover dan Slider

o
Rollovers diaplikasikan kepada kursor yang diletakkan pada bahagian-bahagian yang telah ditentukan terlebih dahulu pada skrin dan menghasilkan reaksi multimedia yang berbeza.

Sliders memberi pengguna petanda tentang kedudukan semasa mereka di dalam aplikasi.

Hot Area, Highlight dan Menu

o
Hot areas mungkin grafik atau teks dan boleh dibezakan dengan objek-objek lain yang tidak interaktif dengan warna atau perubahan yang berlaku pada kursor.

Menu merupakan alternatif kepada butang dan hot areas, dan ia boleh memuatkan lebih maklumat.

Maklum Balas

o
Maklum balas berfungsi untuk memberi pengguna reaksi terhadap tindakan pengguna pada komponen-komponen antaramuka.

Maklum balas boleh tercetus dengan mengklik butang, ikon, pikon, menu dan sebagainya dan boleh menghasilkan kesan bunyi, klip video, animasi atau skrin yang memaparkan maklumat.

Maklum balas boleh digunakan untuk menggalakkan pengguna untuk meneroka aplikasi dengan lebih lanjut.

Butang, Ikon dan Pikon

 o o o o
Merupakan PERALATAN NAVIGASI Butang paling mudah direka dengan pelbagai bentuk dan saiz dan amat gemar digunakan. Ikon adalah simbol visual kecil yang menunjukkan fungsi sesuatu bahagian yang diwakilinya. Pikon ialah ikon bergambar yang boleh membawa maksud yang lebih abstrak.

1.9 PRINSIP REKABENTUK ANTARAMUKA

Kedudukan

o o
Skrin selalunya dibahagikan kepada kawasan kandungan dan kawasan navigasi. Ratio yang selalu digunakan oleh pereka ialah dua pertiga (2/3) untuk kandungan dan satu pertiga (1/3) untuk navigasi dan menu.

Pembahagian ini akan memberikan pengguna idea tentang apakah elemen pada skrin yang yang perlu diberi perhatian.

Seimbang dan Perspektif

o
Keseimbangan pada skrin merujuk kepada pengagihan nilai optikal = keupayaan elemen untuk menarik mata pengguna.

Perspektif menyediakan mata pengguna dengan posisi-posisi relatif sesuatu elemen pada skrin untuk menghalang skrin tersebut daripada menjadi mendatar.

o o

Perspektif Belakang = untuk elemen yang kurang memerlukan fokus pengguna. Perspektif Hadapan = untuk elemen yang memerlukan lebih fokus daripada pengguna

Ruang Putih

o
Merujuk kepada jumlah ruang putih yang diperuntukkan di antara teks dan grafik pada sesuatu muka surat.

Lebih banyak ruang putih di antara teks dan grafik, lebih mudah tumpuan yang boleh diberikan oleh pengguna.

Ruang putih sepatutnya digunakan juga untuk mengarah perhatian ke titik fokus sesuatu skrin.

Warna

o
Menggunakan warna adalah satu cara untuk membuatkan rekabentuk antaramuka anda lebih menarik.

Warna cerah dan terang adalah warna yang sering dipilih kerana warna-warna tersebut boleh merangsangkan otak supaya aktif

o o

Pemilihan warna yang sesuai amat dititik-beratkan di dalam membina aplikasi Contoh: Aplikasi permainan kerana sewaktu menggunakan aplikasi sebegini, pelajar biasanya mengikut gerak hati dan bermain dengan emosi.

Penal Navigasi yang Konsisten

o
Panel navigasi menyediakan pengguna dengan peralatan sokongan untuk membimbing pengguna mengemudi sesuatu skrin.

Panel navigasi perlu diletakkan di tempat yang konsisten di atas skrin untuk memudahkan pengguna melihatnya dengan segera dan menghubungkaitkan fungsi-fungsinya tanpa banyak masalah.

Keseragaman

o o
Merujuk kepada kesepaduan pelbagai elemen yang terdapat pada skrin. Keseragaman mengukuhkan mesej atau tema pada sesuatu skrin dan memberi konsisten pada keseluruhan aplikasi

Keseragaman boleh dicapai sekiranya bentuk, warna, gaya teks dan tema aplikasi adalah konsisten dan bersepadu.

Keseragaman melibatkan rekaan interaktif di mana pengguna mengemudi dari satu skrin ke skrin berikutnya.

1.10 KESALAHAN UMUM REKABENTUK ANTARAMUKA

Antaramuka yang Kompleks

o o o
Terlalu banyak butang fungsi pada skrin antaramuka Grafik yang kelihatan serupa dengan butang Tiada butang kawalan yang sepatutnya menyebabkan pengguna sukar mengemundikan skrin

Tahap Interaktiviti Terlalu Banyak

o
Tahap interaksi yang banyak menyebabkan pengguna sukar melayari aplikasi pengguna boleh sesat dalam aplikasi.

o o

Terjadi kerana tiada jalan balik back ke program asal. Penanda progres perlu disediakan utk mengatasi masalah ini

Maklumat yang Tidak Berkaitan

o
Maklumat yang sesak dan tidak disusun secara teratur sehingga menyukar pengguna untuk memperolehinya.

Menyebabkan

pengguna

memperuntukkan

banyak

masa

untuk

mendapatkan

sesuatu

maklumat yang relaven

Cara atasi dengan menyediakan menu berhirarki untuk menguruskan maklumat.

Teks yang Terlampau Banyak

o o
Antaramuka yang padat dengan teks menyebabkan pengguna merasa bosan. Cara atasi dengan letakkan grafik atau elemen lain bagi mengantikan elemen- elemen teks

Antaramuka yang berwarna Ekstrim

Elakkan dari menggunakan warna yang terlalu ekstrim kerana akan mengganggu tumpuan pengguna terhadap maklumat yang dicapai

o o

Penggunaan warna-warna harmoni amat digalakkan. Perlu ada kesesuaian warna antara elemen-elemen yang digunakan.

Tiada Kawalan untuk Audio dan Video

o
Jika memasukkan klip video ke dalam antaramuka aplikasi, pastikan kawalan untuk audio dan video diletakkan

Tujuannya supaya pengguna dapat mengawal kemasukan dan menggunakannya dengan senang.

1.11 ANTARAMUKA YANG BAIK

Menggunakan strategi pengumpulan yang baik di mana makmlumat yang berkaitan dikumpulkan di dalam satu kotak

Juga elemen kawalan diselarikan, dimana semua label diselarikan ke kanan

Tajuk setiap seksyen diletakkan di bahagian yang sama iaitu bahagian atas kiri. Tajuk ini juga tidak bersaing dengan label-label untu elemen kawalan satu strategi menarik perhatian pengguna

Juga terdapat konsep keseimbangan