Sebagai pereka laman web, saya menitikberatkan pengalaman pengguna melayari dan mengeksplotasi keseluruhan sistem yang dibangunkan. Di luar sana, terdapat banyak istilah-istilah yang digunakan seperti "user experience" dan "usability design" yang sering dimainkan di dada-dada blog dan laman peribadi.

Dengan menggunakan hukum-hukum ciptaan manusia yang diperoleh daripada kajian dan pengalaman mampu untuk membantu kita dalam menghasilkan satu reka bentuk yang jelas, bersih dan mudah digunakan.

Nilai estetika ini bergantung kepada pilihan kita sebagai pereka laman dan berikut adalah antara panduan dan hukum yang digunakan selama ini.

#1 Hukum Hick

Hick's Law menyatakan dengan setiap penambahan satu pilihan akan menyebabkan peningkatan dari segi masa untuk seseorang membuat pilihan tersebut. Bermakna semakin banyak pilihan (butang, pautan, gambar) dalam satu halaman akan menyebabkan satu-satu laman lebih sukar untuk digunakan. Dari sini, terbitnya satu konsep baru iaitu Simplicity.

Satu kajian dijalankan bagi menunjukkan kebenaran hukum ini pada satu kedai runcit yang menjual jem. Dua buah kedai dengan variasi 40 jem disediakan. Satu kedai hanya menyediakan 5 pilihan jem manakala satu lagi menyediakan ke semua jem (40 jem) yang boleh dicuba secara percuma. Di akhir bulan, mereka menemui bahawa kedai yang menyediakan 5 pilihan berjaya menjual jem tersebut dengan lebih banyak. Hukum alam menyatakan manusia lebih berminat kepada satu kelompok kecil berbanding keseluruhan kelompok yang lebih besar.

Jadi, dalam binaan laman web kita seharusnya menyediakan pilihan yang paling kurang kepada pengguna. Buangkan mana-mana pautan, halaman, butang dan pilihan yang tidak perlu agar rekaan tersebut lebih efektif. Ia juga selaras dengan teknik SEO.

#2 Prinsip Pareto, atau Peraturan 80/20

Pareto principal menerangkan bahawa sejumlah besar pengguna yang hadir hanya menjalankan sebilangan kecil aktiviti, tindakan atau proses pada laman. Bermaksud, pengguna yang hadir hanya akan membaca dan menjelajah sebilangan kecil ke semua halaman web kita.

Bagi aplikasi web, sebilangan besar pengguna hanya menjalankan sebilangan kecil tugasan dengan fugnsi yang disediakan.

Dengan prinsip ini, kita perlu membuat kajian untuk mengesahkan bahagian kecil yang sering digunakan oleh pengguna (pautan, menu, navigasi). Seterusnya menjadikan bahagian ini lebih menyerlah berbanding elemen lain supaya laman lebih mudah digunakan. Besar kemungkinan kita terpaksa merombak kembali struktur dan membina menu navigasi yang baru.

Ini termasuk juga ruang, fungsi dan halaman yang tidak diakses oleh pengguna. Seandainya pengguna langsung tidak menggunakan informasi ini, jangan teragak-agak untuk membuangnya. Kita hanya membazir ruang yang ada. Ia juga berkait dengan hukum Hick dan Occam Razor.

#3 Peraturan Pertiga (Rule of Third)

Only local images are allowed.Peraturan Pertiga adalah satu kaedah untuk mengatur elemen dalam kedudukan visual yang menarik dan memudahkan mata manusia untuk melakukan imbasan secara keseluruhan. Kaedah ini kebanyakkan diguna pakai oleh juru gambar bagi mendapatkan gambar yang menarik dengan susunan objek yang tertentu.

Peraturan Pertiga dilakukan dengan membahagikan satu ruangan kepada tiga bahagian secara mendatar dan menegak bagi menghasilkan 9 ruang secara grid dengan garis grid bersilang sebanyak 4 poin. Peraturan ini menerangkan bahawa mata manusia akan lebih berminat dan fokus poin bersilang. Selain itu, ianya disarankan agar meletakkan setiap elemen pada garis-garis berbanding pada ruangan kosong yang tidak mempunyai kuasa daya penarik.

Bagi elemen yang mempunyai ruang yang besar, selaraskan agar ianya memenuhi sekurang-kurang 1/3 atau 2/3 daripada ruang grid tersebut agar paparan elemen tersebut lebih menyerlah.

#4 Jarak dan ruang

Peraturan jarak dan ruang seringkali diabaikan hatta pada seorang pereka laman profesional. Peraturan ini menyatakan elemen yang disusun berdekatan adalah berkaitan. Ianya dilihat satu perkara yang mudah tetapi selalu terlepas pandang.

Apa yang penting adalah kita perlu merancang dan sentiasa berwaspada dengan susunan setiap elemen pada setiap rekaan. Beberapa elemen yang disusun berdekatan dalam satu siri memberi ekspresi kepada pengguna bahawa ia merupakan kandungan yang berkaitan.

Dalam web aplikasi, dapat kita lihat adalah beberapa elemen butang atau kawalan yang diletakkan dalam satu kumpulan sebaliknya masing-masing mempunyai fungsi yang berlainan. Akhirnya, pengguna kelihatan keliru untuk menggunakan aplikasi tersebut.

Sebagai contoh, butang Carian diletakkan berhampiran dengan butang Simpan dan Batal. Ini memberi tanggapan kepada pengguna bahawa butang simpan dan batal akan digunakan pada senarai carian. Sesetengah pengguna beranggapan butang carian berfungsi untuk mencari kandungan yang berkaitan sebelum ini.

Jarak dan ruang perlu diberi penekanan yang lebih kerana ianya cukup berkuasa untuk membantu dalam penyampaian. Satu lagi contoh mudah adalah jarak yang dekat antara tajuk dengan paragraf di bawahnya adalah berkaitan berbanding dengan paragraf sebelum tajuk. Lihat pada artikel ini sebagai contoh terdekat.

#5 Maklum balas

Maklum balas adalah senjata utama yang digunakan oleh pereka-pereka laman sejak berabad zaman. Ia membantu dan merangsang pengguna untuk mengetahui sesuatu sedang berlaku, akan berlaku dan telah berlaku. Selain itu, ia merupakan komunikasi berkesan antara pereka dan pengguna.

Bayangkan satu pembakar roti yang tidak mempunyai lampu indikasi memberitahu bahawa roti telah sempurna dibakar pada selang masa yang ditetapkan, berkemungkinan besar kita akan mendapat roti yang sudah hangus. Begitu juga dengan periuk menanak nasi.

Disebabkan pengguna akan menggunakan hampir keseluruhan fungsi dan perkhidmatan yang disediakan di laman jadi kita perlu memastikan maklum balas disediakan dengan baik. Contohnya seperti kesan khas "hover", bar pemprosesan, pautan yang telah dilawati dan mesej pemprosesan.

Kadang-kadang sebagai pereka laman, kita sering kali terlupa akan perkara ini sebaliknya mengimplementasi perkara ini memberi kesan yang sangat besar kepada pengalaman pengguna.

#6 Hukum Fitt

Fitt's Law menerangkan masa yang diperlukan untuk bergerak ke arah satu fungsi bergantung kepada saiz dan jarak fungsi itu sendiri. Kita boleh lihat satu contoh pada butang atau menu navigasi sebagai objek rujukan. Semakin besar ruang yang diperuntukan atau semakin besar satu-satu butang yang disediakan, akan lebih memudahkan pengguna untuk mengkliknya.

Only local images are allowed.

Sesetengah pereka laman menghasilkan menu navigasi yang mempunyai jarak yang sempurna bagi mengasingkan menu antara satu lain tetapi bahagian berfungsi hanya pada teks pautan sahaja. Lebih sempurna sekiranya kita masukkan atribut padding agar ruang teks lebih besar berbanding sedia ada.

Kaedah ini boleh dijalankan untuk keadaan sebaliknya. Sekiranya terdapat fungsi yang kita mahu ianya sukar dilihat dan diklik oleh pengguna, kecilkan saiz ruang fungsi tersebut (contohnya butang "Simpan" dan "Hapus"). Kaedah ini diterapkan dalam Drupal 7 pada templat Seven.

#7 Golden Ratio

Golden Ratio adalah nisbah yang wujud secara semula jadi dalam perbandingan bentuk paparan. Ianya berbeza daripada Peraturan Pertiga. Golden Ratio digunakan begitu menyeluruh dalam pembinaan arkitek, reka bentuk perkakasan dan kejuruteraan. Bahkan pada struktur manusia juga wujudnya Golden Ratio yang menjadikan manusia itu unik antara satu sama lain.

Only local images are allowed.

Golden Ratio boleh diterangkan sebagai satu elemen yang terbentuk, contohnya tinggi dan lebar mempunyai perkadaran pada nilai 0.618.

Pada rekaan laman, perkadaran ini boleh dijadikan rujukan dalam penghasilan ruangan antara kandungan. Ia mewujudkan satu keadaan ruangan tersebut kelihatan begitu semula jadi dan disenangi oleh mata pengguna.

Sekiranya rekaan laman memerlukan satu perkadaran atau sifir dalam pengiraan (sama ada dari segi susunan, jarak dan kedudukan) gunakan nilai 0.618 sebagai rujukan.

#8 Occam's Razor

Occam's Razor menerangkan "penyelesaian termudah kepada permasalahan adalah yang terbaik". Bermakna satu laman web yang sangat kompleks dari segi binaannya serta mempunyai informasi dan fungsi yang terlalu banyak akan menyukarkan proses pembinaan, implementasi dan diselenggara. Akhirnya kita beranggapan laman tersebut mampu menyediakan sistem terbaik, sebaliknya memberi kesan yang paling teruk.

Selalunya dapat kita lihat kebanyakan badan, konsesi atau syarikat meletakkan seberapa banyak maklumat mengenai mereka tetapi langsung tidak dibaca dan diendahkan oleh pengguna. Fakta menunjukkan kebanyakan pengguna hanya mengakses 20% daripada keseluruhan kandungan (rujuk Peraturan 80/20).

Ada pepatah mengatakan bahawa "Satu-satu rekaan belum siap bukan kerana masih banyak kandungan belum dimasukkan, sebaliknya masih ada kandungan yang belum dibuang". Rekaan yang mudah, bersih dan "simple" lebih mendapat tempat berbanding yang mempunyai dekorasi dengan stail yang bermacam-macam.

#9 Jujukan Fibonacci

Jujukan Fibonacci merupakan satu siri nombor yang terhasil daripada penambahan dua angka sebelumnya. Sebagai contoh kita ambil satu angka permulaan iaitu 4, maka:

4, 4, 8, 12, 20, 32, 52, 84, ...

Secara saintifiknya, jujukan dan siri penomboran ini wujud dalam rekaan klassik zaman dahulu, ditemui mempunyai jujukan secara semula jadi. Dan jujukan ini sejajar dengan Hukum Golden Ratio. Paten ini memberi satu suntikan yang tidak dapat dihuraikan dan patut digunakan dalam rekaan kita.

Siri jujukan nombor ini boleh dijadikan rujukan dalam penghasilan paten visual, reka bentuk objek, binaan grid, saiz dan jarak. Jujukan Fibonacci sangat terkenal bukan sahaja dalam matematik tetapi turut digunakan dalam bidang rekaan.

#10 Model Mental

Hukum Model Mental menerangkan ianya sangat ketara dan mudah untuk pengguna memahami dan mempelajari sesuatu yag baru sekiranya model tersebut merupakan sesuatu yang telah mereka fahami. Ini antara sebab mengapa perisian seperti Windows menggunakan istilah seperti folder, files dan desktop bagi menyamai dengan keadaan realiti di ruang tempat kerja.

Kita boleh mengasimilasi konsep ini kepada keadaan sebenar dalam mempersembahkan kandungan laman agar lebih efektif dan berkesan. Sebagai contoh mencipta laman web berkonsepkan helaian kertas pada satu buku. Setiap halaman berbeza seolah-olah pengguna membelek dan menyelak helaian seterusnya pada buku.

Penilaian: 
3
Your rating: None Average: 3 (2 votes)