WEBSITE

Sumber : http://www.bakawan.com/log/4-prinsip-dasar-desain/
http://febriani.staff.gunadarma.ac.id/Downloads/files/11023/Website.pdf
www.bakawan.com/log/100-tehnik-usability-website/

WEBSITE

Dalam pembuatan sebuah website seorang programmer harus mengetahui aspek-aspek yang diperhatikan agar situs yang dibuatnya bisa dinikmati oleh pengguna internet dan terlihat menarik. Adapun aspek-aspek tersebut yaitu :

Perilaku Pemakai
Perlu dicermati bahwa seorang pengguna interface website
dalam berinteraksi memiliki kebiasaan-kebiasaan yang secara
global dilakukan oleh seorang pengguna suatu interface pada
saat pengguna tersebut berada dalam internet.
Kebiasaan tersebut dijabarkan secara singkat dalam perilaku
pengguna interface di bawah ini:

Search
Pengguna interface website terbiasa untuk beraktivitas di
dalam internet dengan melakukan pencarian untuk
menemukan item tertentu, dapat berupa fakta atau
potongan informasi. Untuk contoh dalam penggunaannya
dapat dianalogikan pada saat membuka search engine,
seperti google, vivisimo, dsb.
Aktifitas lainnya yang mungkin digunakan seorang
pengguna dapat melakukan promosi, pembelian produk,
membuat riset, downloading perangkat lunak, dsb.

Browsing
Hal lainnya yang dilakukan seorang pengguna interface
website dengan membaca secara sekilas item yang
menarik, fakta atau potongan informasi. Hal tersebut terjadi
dikarenakan banyak sekali informasi yang ditampilkan
bahkan dalam satu halaman website, maka daya pikat juga
menjadi suatu peran penting. Surfing, membuat riset, dan
kegiatan lainnya.
Membangun Sebuah Situs
Untuk memulai dengan suatu rancangan situs yang baik
diperlukan beberapa hal yang harus terdapat didalamnya, antara
lain pada tahapan Proses Model

Mengidentifikasi Sasaran Akhir
Dalam membangun suatu situs tentunya diperlukan
sasaran akhir dari pemakai interface, mengapa demikian?,
karena sering suatu lokasi jaringan situs digunakan untuk
menguraikan suatu organisasi administratif, melainkan
tidak untuk memberi pemakai hal apa yang mereka
inginkan.
Menjabarkan Daftar dari Topik-topiknya
Melakukan pengungkapan pendapat apapun atau
brainstorming (pendapat yang masih mentah).
Contoh dari komputasi Perguruan Tinggi;
classes equipment awards
people directions unique points
faculty programs table of contents
students degrees index
administrators mission contact
staff undergraduates information
graduates map

Mengorganisir Isi
Kelompokan item atau materi kedalam suatu kategori:
People
Faculty
Students
Undergraduates
Graduates
Staff
Isi dari struktur yang dicontohkan tersebut dapat dilihat urutannya dilakukan dengan menyempitkan bagian dari sebuah kategori.

Menyediakan Struktur
Setelah materi diorganisir dengan baik, maka materi atau
item tersebut diuraikan dengan ringkas dengan
menempatkannya pada tingkatan-tingkatan untuk
mengikuti kategori dalam sebuah organisasi. Perubahan Bentuk Isi
Dimulai dengan melakukan transisi ke dalam sebuah
halaman, teks, gambaran, interaksi, dll. Dalam suatu situs,
gunakan sketsa/rancangan untuk mendaftar dalam
melakukan pekerjaan menggambar dan prosesi
storyboards atau rancangan kasar. Setelah proses tersebut
telah dilalui, maka akan terbentuklah suatu garis besar
yang akan sangat membantu dalam melakukan
pengorganisasian pemikiran dan rencana.
Lima Atribut/Komponen Penunjang:
Isi Textual
Isi adalah bagian yang sangat spesifik, dianjurkan untuk
memuat suatu informasi yang sesuai pada halaman suatu
situs berdasarkan temanya. Membaca informasi dalam
halaman situs membuat para pengguna situs menjadi lebih
canggung dan lebih lambat dari monitor dibanding dari
membaca melalui media catatan/kertas. Maka dibuatkanlah
bagi para penguna situs tulisan untuk mengisi halaman
web atau header dari halaman situs, selain itu dibuatkan
juga highlights untuk menyoroti teks atau paragraph yang
dibaca atau yang terpilih.
Desain grafis
Semua prinsip dalam desain grafis yang dibahas pada
kesempatan ini membahas pada tingkatan lebih awal
masih berupa metafora, clarity, consistency, alignment,
contrast, proximity.
Navigasi
Permasalah dalam kaitan dengan:
- Para pemakai interface website tidak mengetahui
daerah atau dalam hal ini lembaran-lembaran pada
situs.
- Struktur lokasi tidak dapat ditemukan.
Pemakai interface situs seharusnya diberikan suatu
pemahaman dari struktur yang menyangkut dari suatu
ruang dari informasi tersebut. Maka sebaiknya disiapkan:
- Tabel Index (Peta Lokasi)
- Index
- Navigasi
- Fasilitas Pencarian (Search)
Struktur
Hubungan, kepadatan, faktor bercabang, panjang dari
halaman, nomor dari suatu link (mata rantai). Strukturnya
dapat berupa struktur yang Linier, Hierarchy, Non-Linier,
Gabungan. Halaman utama (main/index) adalah penting,
tetapi struktur dasar untuk semua halaman yang lain juga
sangat penting, karena berkaitan dengan isi dari suatu
informasi dalam sebuah situs.
Link
Tingkat keberhasilan suatu link tergantung pada:
- Seberapa baik pengguna interface situs dapat
meramalkan arah dari link.
- Seberapa baik pengguna interface situs dapat
membedakan antara link yang satu dengan link yang
lain yang menghubungkannya.
- Isi yang sesuai pada akhir link.
Pastikan bahwa link-link tersebut berhasil.
Macam-macam link:
- Singkat, padat dan langsung pada tujuan
Contoh: Prices
- Penjelasan tekstual yang panjang bahkan mungkin
diikuti dengan klarifikasi non-link
Contoh: Listing of car prices – Current suggested
price
Rancangan Yang Buruk
- Semua teks mengunakan huruf kapital
- Gulungan menyamping
- Ukuran teks dibuat dengan ukuran yang amat kecil, terutama
di dalam huruf yang dicetak miring.
- Link/Mata rantai tidak berfungsi atau tidak tersambung
- Memberitahukan kepada penguna interface situs bagaimana
cara menetapkan browser
- Kontras terlalu rendah di dalam warna text untuk bagian
background
- Typeface besar
- Animasi berputar terus menerus tanpa henti
- Hal-hal yang kelihatan seperti tombol tetapi padahal bukan
- Ada pesan “Under construction/Di bawah konstruksi”
- Melalaikan tombol ALT untuk gambar
- Tidak menandakan ukuran gambar
- Tidak terdapat halaman home
- Tidak ada tombol untuk menuju lokasi sebelumnya atau
menuju lokasi sesudahnya.
- Situs dituntut untuk browser tingkat atas
Sebab banyak hal yang terjadi:
- Tidak mengetahui sasaran untuk pengguna situs
- Memiliki platform dengan komposisi yang lemah
- Tidak memberikan kenyamanan User Interface Standard
- Tampil dengan interface yang tidak menarik
- Isi yang ketinggalan jaman atau tidak akurat
- Isinya tidak berbobot
- Halaman yang diakses lambat
- Susah untuk dipelihara
- Tingkat keamanan yang lemah
- Strategi iklan tidak baik

Adapun menurut bakawan ada 4 prinsip dasar dalam mendesain sebuah website

Kontras (Contrast)

Maksud prinsip kontras adalah menghindari elemen desain dalam halaman yg tampak serupa. Apabila elemen (jenis tulisan, warna, ukuran, tebal tulisan, spasi, etc) tidak diingkan serupa maka buat elemen desain tsb saling membedakan. Kadang, dalam sebuah halaman, kontras menjadi visualisasi yg paling menarik perhatian. Kontras adalah penyebab awal pembaca membaca halaman tsb.

Repetisi (Repetition)

Elemen visual yg berulang dalam sebuah desain. Kamu dapat mengulang ulang warna, bentuk, teksture, ketebalan garis, jenis tulisan, ukuran, konsep grapis, etc. Pengulangan elemen visual ini mengembangkan komposisi dan memperkuat desain dalam kesatuan komposisi.

Alignment

Jangan meletakkan elemen desain apapun tanpa sebab. Setiap elemen visual harus memiliki hubungan dengan elemen visual lain yg berada dalam halaman. Penggunaan alignmen yg tepat akan melahirkan efek tampilan bersih, berkelas, dan segar.

Kedekatan (Proximity)

Setiap elemen desain yg saling berhubung seharusnya dikelompokkan bersama sama. Saat elemen desain saling berdekatan, mereka lebih terlihat sebagai satu unit visual daripada unit visual terpisah. Penggunaan promity yg tepat akan mengorganisasikan informasi, mengurangi kekacauan, dan memberikan pembaca struktur tampilan yg jelas.

Dan ada teknik dalam mendesain web

Berikut ini adalah beberapa hal yg sy tau berdasar pengalaman menjadi blogger dgn blog yg (anehnya) memiliki pembaca hahahah. Sementara ide lain berasal dari penelitian kecil kecilan via google analytic. Dan sisanya dari bacaan online dan diskusi offline dengan teman. Prinsip usability ini bersifat relatif. Jadi bisa menjadi tata cara yg benar. Akan tetapi bisa juga menjadi sesuatu yg debatable.

100 perinsip website usability yg sy yakini :

User akan melihat teks sebelum melihat gambar

Aneh memang tapi beginilah adanya psikologi pembaca online. Kebanyakan orang membuka halaman website untuk mendapatkan informasi berupa teks dan bukannya gambar.

Fokus mata user dimulai dari sudut kiri atas halaman web

Tidaklah mengherankan hal ini sebenarnya karena pada dasarnya orang orang yg menulis tulisan latin itu membaca dari kiri ke kanan. Jadi, gerakan mata saart membaca konten online juga mengikuti pattern ini. Mereka membaca sesuai gaya tulisan. Tentu saja, hal ini berlaku terbalik bila tulisan dalam huruf arab dan huruf kanji. Orang arab dan orang jepang akan mengikuti pattern baca yg berbeda pula.

Mulanya gerakan mata dimulai dari kiri atas sampai bagian atas terbaca sebelum bergerak ke bawah dan akhirnya ke samping kanan

Umumnya user itu membaca dgn cepat. Atau istilah usabilitynya, scanning. Pembaca menscan halaman web mengikuti pattern yg mirip huruf F. Dimulai dari sudut kiri dan dinajutkan menscan keseluruhan header dan akhirnya kembali ke bagian kiri dan kemudian ke samping kanan. Begitu seterusnya sampai ke bagian bawah.

Oelh karenanya, kita hrus meletakkan headline, sub headline, list daftar, highlight text pada bagian ini agar pembaca lebih mudah menemukannya.

Pembaca mengabaikan banner

Pembaca itu pintar. Mereka tau mana yg merupakan iklan dan mana sekedar promosi. Jadi bila iklan online itu adalah sumber pemasukan website, maka harus diperhatikan psikologi ini. Salah satu kesimpulan Penelitian eye tracking adalah pengunjung mengabaikan iklan dan segala yg memiliki ciri yg sama dengannya.

Teks dgn Formatting dan Fonts yg keren itu rutin diabaikan

Kebanyakan user berasumsi kalau mereka itu iklan dan tidak memiliki informasi yg mereka butuhkan.

Malah, penelitian membuktikan kalau pengunjung sukar menemukan informasi pada teks berwarna berukuran besar karena alam sadar mereka menguruh untuk mengabaikan teks tsb.visual mereka mengabaikannya. Oleh karenanya, pertahankan jalur baca imajiner situs kita dan hindari kemungkinan hal hal yg tidak penting menjadi pengalih perhatian pembaca. Siapapun pasti tidak ingin adanya distraksi saat baca kan ?

Tampilkan angka dengan angka (dan bukan huruf)

Kayaknya bagi siapapun, lebih mudah untuk menemukan informasi dalam sebuah website bila kita menulis dalam format angka dan bukannya huruf. Apalagi, umumnya user itu scanning dan bukan baca perlahan lahan. Jadi usahakan agar mereka mudah menemukan apa yg bisa membuat mereka tetap tertarik untuk membaca.

Ukuran Font mempengaruhi prilaku baca pembaca

Apakah kamu ingin mengubah psikologi baca pengunjung ? Maka ubah ukuran font. Seandainya konten memiliki font kecil maka pembaca akan lebih fokus membaca.Sementara, bila teks memiliki font besar maka pembaca cenderung scanning (membaca cepat). Tergantung kebutuhan, kamu perlu menimbang apakah konten kamu itu lebih cocok untuk dibaca perlahan atau cepat. Tapi itninya tetap sama, yaitu kamu harus menyediakan konten berkualitas.

Pengunjung sudi baca subtitle bila menarik.

Jangan membuat headline demi mentaati skema penulisan tertentu. Misalnya yg biasa ada di penulisan ilmiah yg selalu dimulai dgn title abstrak dan diakhiri dgn seubheadline referensi. Kita harus memastikan kalau subheadline kita itu menarik dan relevan.

Umumnya pembaca cuma scan bagian bawah halaman

Selalu ingat pattern F dan bukannya pola huruf E. Iser jarang menyentuh bagian bawah seperti footer. Oleh karenanya bila hendak mendesain bagian footer, kita harus memperhatikan kemudahan menemukan informasi di bagian terpojok halaman web ini.

Paragraph pendek lebih bagus daripada yg panjang

Informasi harus didesain untuk bisa dibaca cepat. Otomatis paragraph pun harus pendek pendek mengikuti tuntutan ini. Satu satunya alasan menulis panjang lebar adalah bila konteks memungkinkan.

Layout satu kolom lebih baik bagi mata daripada yg memiliki muti kolom

Jangan membombardir user dengan terlalu banyak informasi. Biasanya website yg sederhana itu lebih baik daripada yg beribet. Kolo, yg terlalu rame umumnya dihindari pembaca karena mereka sukar membacanya.

Iklan pada bagian atas dan kiri halaman web akan mendapat lebih banyak perhatian .

Bila kamu ingin menampilkan iklan maka tidak ada cara yg lebih baik daripada mengatur posisinya disebelah kiri atas karena bagian tsb biasanya mendapat perhatian paling banyak.

Tentu saja, sekali pun diletakkan di sana, bukan berarti pengunjung pasti akan mengklik iklan tsb. Sangat konyol untuk mengorbankan desain demi meletakkan iklan. Jadi pertimbangkan baik baik dimana kamu ingin memposisikan iklan tsb.

Iklan yg diletakkan disebelah konten terbaik itu lebih rutin di lihat pembaca.

Bila kamu ingin iklan yg terpasang itu terlihat dan memiliki kemungkinan diklik orang lain, maka coba buat iklan tsb menyatu dgn desain. Letakkan mereka pada bagian paling menarik dalam artikel kamu. Nantinya, pembaca masih bisa menemukan apa yg dicarinya dan kamu memperoleh keuntungan lebih melalui iklan.

Text Ads lebih mungkin diperhatikan di banding tipe iklan lain

Seperti yg dijelaskan barusan, kebanyakan user internet itu tidak ingin menghabiskan waktu membaca sesuatu yg mirip dengan iklan. Oleh karenanya, text ads itu pilihan bijak di banding yg lain.

Text ads juga lebih mudah disatukan dengan desain keseluruhan web. Jelas saja, penyatuan ini membuat iklan tidak membebani desain dan membuat pengunjung kesal :D

Gambar Ukuran besar lebih menarik Perhatian

Bila gambar abstrak itu dibenci, maka gambar yg berukuran besar itu disenangi. Kebanyakan orang lebih tertarik melihat image yg besar dimana mereka bisa melihat secara detail informasi yg disediakan. Pastikan kalau image tsb juga relean. Tp pertimbangkan trend pengguna internet yg memiliki bandwidth kecil. Umumnya mereka memblok iklan adsense.

Image yg concrete lebih cocok daripada yang gambar abstrak

Umumnya orang tidak suka sesuatu yg tidak dapat dengan mudah mereka pahami. Jadi prinsip yg sama jga berlaku dalam penggunaan image. Semakin abstrak gambar yg ita pakai, maka semakin membingungkan pesan yg hendak disampaikan.

Heading selalu mengarahkan pembaca

Headline adalah bagian pertama yg dicari user. Bila mereka berasal dari search engine, maka minimalnya redaksi headline itu harus mirip dengan apa yg tertulis di halaman SERP. Jadi pembaca yg baru dihadapkan dengan halaman web baru tidak mengalami kebingungan. Mereka dapat dengan mudah menemukan apa yg mereka cari. Oleh karenanya, pilihan nan bijak laksana bila kita mendesain headline yg warna dan ukuran font berbeda drastis dengan keseluruhan isi web.

Umumnya user mudah mengenali tombol dan menu itu sebagai bagian navigasi

User yg biasa hidup di dunia dekstop (terutama dekstop windows ) terbiasa melihat tombol dan menu. Kedua elemen ini dikenali memiliki tugas khusus. Bila klik, maa akan begini dan begitu. Intinya, bila user tertarik dgn tulisan kita maka mereka akan mencari tombol dan menu yg mereka butuhkan. Misalnya tombol berpindah ke halaman lain atau menu untuk menitip komentar.

Daftar teks menggunakan . dan

itu mampu lebih lama menarik perhatian pembaca

Salah satu tehnik memotong paragraph yg kepanjangan itu dengan menyajikan informasi dlm daftar panjang. Format list adalah tehnik HTML yg mudah untuk digunakan saat menulis dan mendesain. Format list ini bisa membuat konten kita lebih mudah diterawang sehingga user bisa menemukan informasi lebih cepat.

Paragraph panjang itu sebaiknya dihindari

Penelitian menunjukkan kalau rata rata pengunjung itu tidak punya cukup waktu untuk membaca teks teks dalam ukuran besar. Kita perlu memotong teks teks ini ke dalam paragrap yg lebih pendek atau menghilangkannya sama sekali.

Format tulisan mampu menarik perhatian

Untuk menghindari kemungkinan user cuma scimming atau menscroll mpuse dengan cepat, kita perlu memberi format tertenu pada kalimat penting dalam paragrap. Kita bisa menggunakan bold, italic, atau underline. Perlu dicatat, jangan menggunakan format yg berlebihan karena bisa membuat pembaca malas membaca nya. Efek “kontras” tulisan itu pasti menghilang an dianggap bukan sesuatu yg penting.

Space kosong itu penting

Meskipun sangat menggoda untuk memenuhi layar monitor dgn segala infomasi, kita tetap perlu membuat desing tsb berkesan clean atau elegan. Kita perlu mempertahankan space atau ruang dimana user merasa bebas mengistirahatkan mata.

Tombol navigasi itu bekerja lebih baik saat diletakkan di bagian header

Navigasi bisa diletakkan di samping kanan atau kiri dan bisa juga diletakkan di bagian bawah. Akan tetapi penelitian membuktikan kalau tempat terbaik meletakkan navigasi itu di atas. Dalam konteks wordpress, kita mengenal page navigation. Umumnya designer meretakkan di bagian bawah, akan tetapi, lebih bagus bila diletakkan di bagian atas saja dekat dengan header.

Brainstroming Kami

Sebagaimana terjemahan bahasa indonesia, istilah brainstroming itu merujuk pada pertanyaan pertanyaan belum bisa saya dan teman teman jawab. Seandainya ada yg bisa mungkin bisa memberi opini :

Apakah prinsip usability di atas berlaku juga saat konten dilihat menggunakan handphone ? iya mobi dan layar monitor mereka yg kecil ?

Apakah kekurangan eye tracking study yg rutin menjadi patokan research usability ?

Bila mereka yg menulis dgn huruf latin membangun pola scanning mirip huruf F karena mereka membaca dari kiri ke kanan. Lalu bagaimana dengan yg membaca arabic dan kanji yg memiliki pola yg sama sekali berbeda. Kira kira pattern yg terbentuk akan jadi huruf apa ?

Ada satu prinsip dalam desain, yaitu kebebasan mendobrak konvensi. Misalnya, contoh yg paling mudah, warna link url itu biasanay biru. Tp designer memilik warna pink. Untuk contoh ekstrim ialah meletakkan comment blog pada bagian header sementara keumuman diletakkan dibawah konten. Prinsip Usability cuma bisa berdiri di mentaati konvensi. Sementara design yg bagus bisa stand out bila mendobrak konvensi. Jadi apa yg harus dilakukan ?

Sy percaya “prilaku user itu berubah ubah secepat berubahnya trend dan keyword“. Jadi apa bagian website atau blog yg akan konsisten membutuhkan tehnik usability yg serupa ?

Mengenai cara baca user yg mirip huruf F, apakah ini mutlak ? Menurut artikel yg sy baca, kita bisa mempengaruhi arah baca ini bila kita memiliki kontruksi desain tertentu. Nantinya kontruksi ini adakan memandu pembaca ke dalam aliran baca tertentu. Konsekuensi F ini kan membuat sidebar berada di posisi kanan. So, harga mati kah ?