SPM4342PEMBANGUNAN SISTEM 

PEMBELAJARAN BERASASKAN WEB

PRINSIP ASAS MEREKA BENTUK WEBPM. Dr. Jamalludin Harun

Norah Md NoorNorasykin Mohd Zaid

Department of Educational MultimediaFaculty of Education, UTM

PRINSIP MEREKA BENTUK WEB

• Setiap laman web tidak sempurna danmempunyai kecacatan, sama ada :– Ia mengelirukan– Reka bentuk yang terlalu rumit– Poor download time

PRINSIP MEREKA BENTUK WEB• Reka bentuk bagi medium• Reka bentuk bagi keseluruhan laman web• Reka bentuk bagi pengguna• Reka bentuk bagi paparan/skrin

REKA BENTUK BAGI MEDIUM• Apabila mereka bentuk laman web, ingat :

– Tujuannya adalah untuk komputer, bukan padacetakan.

– Bahasanya adalah hypertext, bukan linear text– Laman web adalah khas kepada skrin komputer– Perlu menitik beratkan tentang layout, warna danfont dan juga bagaimana ia akan dipaparkan.

REKA BENTUK BAGI MEDIUM• Rupa dan rasa

– Antaramuka adalah rupa dan rasa kepadasesebuah laman web

– Pengguna membaca, menekan link, melihat grafik– bergantung kepada kebebasan reka bentuk

REKA BENTUK BAGI MEDIUM• Pastikan rekaan anda portable

–Mudah untuk diakses daripada pelbagai web browser dan juga pelbagai platform komputer

– Jangan hanya membuat percubaan sekali sahajadan menganggap semua laman web sama

REKA BENTUK BAGI MEDIUM• Paparan yang jelas dan mudah untuk mengaksesmaklumat– Menyediakan link terus ke area – yang mempunyaibanyak akses

– Maklumat yang mudah dibaca– Pecahkan teks kepada beberapa segmen– Perbanyakkan headings – mudah mencari maklumatdengan cepat

– Kawal Panjang horizontal, mudah untuk baca kolum

REKA BENTUK BAGI KESELURUHAN LAMAN WEB

• Mencipta transisi yang lancer–Menyatukan seksyen yang terdapat dalampaparan laman web

–Mencipta transisi yang lancer daripada satupaparan ke satu paparan yang lain

REKA BENTUK BAGI KESELURUHAN LAMAN WEB

• Menggunakan konsep grid dalam memberikanstruktur visual – Untuk mengurus paparan ke dalam kolum danbaris

–Menggunakan table elemnts untuk membina grid pada paparan walaupun table untuk tabular data digunakan untuk struktur grid berkolum

– Reka bentuk web yang baik menggunakan table untuk memberikan konsistensi kepada strukturweb

REKA BENTUK BAGI KESELURUHAN LAMAN WEB

• Penggunaan ruang putih yang aktif– Ruang putih adalah ruang kosong pada paparanweb

– Ruang putih yang digunakan secara berhemahdipanggil ruang putih aktif

– Ruang putih pasif adalah ruang kosong yang menjadi border pada skrin

REKA BENTUK BAGI PENGGUNA• Tahu siapa audiens atau pengguna• Tahu apa pengguna mahu daripada lamanweb anda

REKA BENTUK BAGI PENGGUNA• Reka bentuk interaksi

– Bagaimana pengguna berinteraksi denganmaklumat dalam laman web – jenis isi – sama adapengguna akan baca atau hanya scan maklumat• Scan maklumat• Scrol jika perlu• Pastikan grafik di hyperlink• Mengetik teks yang berlink

REKA BENTUK BAGI PENGGUNA• Reka bentuk lokasi

– Sukar untuk menjangka laluan tumpuan pengguna– Secara amnya, maklumat di bawahmenggambarkan skrin real estate mengikut aturankepentingannya

REKA BENTUK BAGI PENGGUNA• Panduan kepada mata pengguna

– Habit membaca yang biasa, pengguna akanmengalihkan mata dari kiri ke kanan berulang kali

REKA BENTUK BAGI PENGGUNA• Panduan kepada mata pengguna

– Sebaliknya, apabila melihat paparan landscape‐based, pengguna scan maklumat secara mengikutarah jam

REKA BENTUK BAGI PENGGUNA• Pastikan hierarki yang flat

– Elakkan pengguna meneroka maklumat yang mereka mahu dengan banyak lapisan di dalamlaman web

– Struktur laman web mengandungi navigasiseksyen atau topik untuk memudahkan pengguna

– Bar navigasi yang standard : Kedudukan yang konsisten di setiap page dan memastikanpengguna tidak hilang arah

REKA BENTUK BAGI PENGGUNA• Penggunaan hypertext linking• Optimumkan maklumat di dalam paparan

REKA BENTUK BAGI SKRIN• Bentuk skrin computer• Reka bentuk paparan yang memberikankontras mencukupi

• Skrin Komputer menggunakan resolusi yang rendah daripada printed page

• Skrin bukan page

TERIMA KASIH