SlideShare a Scribd company logo
1 of 40
Download to read offline
USABILITY
Desain Website
dari Sudut Pandang Man-Machine Interface
as3pupun
1 | T I P S W E B D E S I G N | U S A B I L I T Y
PENGANTAR
ekedar coba-coba, mungkin itulah alasan pembuat situs amatiran. Kalau
bagus, ya diteruskan. Jika sebaliknya, mungkin ditinggalkan. Maklum, jika
tanpa panduan, membuat situs web bisa makan waktu lebih dari
seminggu, sebulan, atau bahkan tak terselesaikan.
Semestinya hal semacam itu tak perlu terjadi. Apalagi sekarang banyak
bertebaran tutorial/ebook tentang website di internet. Anda bisa
mempraktikan langsung cara mendesain web, membuat halaman template,
bikin toko online, sampai menayangkan web Anda di internet.
Harapan saya, ebook ini bisa menambah wawasan Anda, sehingga Anda
bisa mewujudkan membangun website dengan hasil yang hebat.
S
Tank’s to :
Puji syukur ke hadirat Allah SWT yang telah memberikan
kekuatan bagi terwujudnya buku ini. Sholawat serta salam
kepada Nabi Muhammad SAW yang telah membawa
Islam ke muka bumi. Sehingga menjadi Islam sebagai semangat
bagi hamba-hamba yang beriman untuk selalu berkarya.
Orang tua, Anak (Ahmad Riyad Firdaus) dan Istri (Ai
Yuliyawantini) tercinta yang senantiasa memberikan
perhatian, kasih sayang dan doanya dalam setiap langkahku.
Anda diperbolehkan untuk
memberikan buku
elektronik ini kepada siapa
saja, selama anda tidak
mengubah/mengedit isinya
dan format digitalnya.
Anda dapat men-donlot
ebook ini di http://
punpage.blogspot.com
as3pupun
2 | T I P S W E B D E S I G N | U S A B I L I T Y
Siap Tayang
Saatnya mempertonton-
kan situs Anda kepada
dunia. Berikut cara terbaik
untuk mempromosikan-
nya dan menarik
perhatian banyak orang.
Prinsip-Prinsip
Desain Web
 Seni Desain Cantik
 Keseimbangan
 Kontras
 Konsistensi
 Ruang Kosong
Desain Web
nan Hebat & Memikat
Ada cara yang tak sulit
untuk menjadikan situs
web Anda menarik,
sehingga pengunjung
betah berlama-lama di
dalamnya.
USABILITY :
Desain yang Brilian
Penutup
Dasar-dasar
Desain Web
 Warna
 Tipografi
 Bentuk
 Layout (Tata Letak)
Pendahuluan
desain website yang
semakin lama semakin
mudah dibuat dan
menarik karena fasilitas
perangkat lunak yang
semakin bagus dan …
3 | T I P S W E B D E S I G N | U S A B I L I T Y
PENDAHULUAN
esain website yang semakin lama semakin mudah
dibuat dan menarik karena fasilita sperangkat lunak
(software) yang semakin bagus dan bermacam-
macam belum tentu dapat menarik banyak
pengunjung, atau memikat pengunjung sehingga
mau kembali ke situs tersebut.
Faktor informasi yang ditawarkan (content)
jelas merupakan faktor terpenting, akan tetapi ada
faktor-faktor lain yang seringkali lupa
dipertimbangkan pada saat mendesain suatu
website. Website yang baik juga harus di desain
berdasarkan prinsip interaksi manusia-komputer
(man-machine interface) yang benar.
Tulisan ini menyajikan beberapa prinsip desain
website yang penting untuk diperhatikan dari sudut
pandang tersebut.
D
4 | T I P S W E B D E S I G N | U S A B I L I T Y
P R I N S I P - P R I N S I P D E S A I N W E B
Seni Desain Cantik
Desain yang bagus adalah hasil kreasi seni yang
tinggi. Seni adalah salah satu cara bago seseorang
untuk berkomunikasi dan mengekspresikan dirinya.
Seni memerlukan keretampilan (skill/bakat),
pengetahuan tentang estetika, dan kemampuan
untuk berkomunikasi.
Estetika adalah kenyamanan bagi pengguna
secara visual. Estetika merupakan keindahan dan
kecantikan dalam suatu desain. Untuk menjiwai
estetika memerlukan latihan dan perjuangan.
Semua seni pada dasarnya harus dapat
berkomunikasi, karena setap pemilihan baik itu
warna, bentuk, tata letak dan lainnya, semuanya
mempunyai arti yang berbeda yang akan
mempengaruhi sebuah produk yang dihasilkan.
Prinsip atau pegangan utama sebuah desain
adalah kualitas atau karakteristik bawaan dalam
berbagai bentuk seni, seperti keseimbangan,
keserasian, kontras,konsistensi, variasi, ruang
kosong dan gerak. Prinsip ini biasanya dipakai pada
desain untuk menghasilkan desain yang baik dan
efektif, walaupun tidak harus semuanya digunakan.
Keseimbangan
Sebuah objek yang tidak seimbang, tentulah
tidak enak dipandangm seperti ada sesuatu yang
kurang dan ganjil dalam objek tersebut. Misalnya
pertarungan tinju antara Mike Tyson (kelas berat)
melawan Mike Low (kelas ringan), tentu
pertarungannya tidak menarik disaksikan, karena
mungkin dengan sekali pukul Mike Low sudah KO
tanpa perlawanan.
5 | T I P S W E B D E S I G N | U S A B I L I T Y
P R I N S I P - P R I N S I P D E S A I N W E B
Secara umum dapat didefinisikan,
keseimbangan adalah hasil susunan satu atau lebih
elemen dari desain yang sama antara yang satu
dengan yang lainnya. Jika diperhatikan, setiap objek
di alam mempunyai keseimbangan yang terstruktur,
misalnya bentuk simetri pada bunga dan garis pada
kulit rumah siput.
Ada satu cara yang sederhana untuk
menentukan keseimbangan elemen dalam suatu
halaman, yaitu dengan membandingkan area yang
satu dengan area lainnya, ini sangat membantu
untuk menganalisa dan menentukan ruang dalam
suatu area yang belum seimbang. Dengan cara ini,
kita bisa melihat dengan jelas bobotnya dan
menentukan intensitas dan posisinya sehingga
mengetahui berapa ruang yang masih tersisa.
Kontras
Keberadaan kontras terlahir dari kombinasi
yang saling bertolak belakang (berlawanan), seperti
hidup-mati, terang-gelap, pria-wanita, baik-buruk,
hitam-putih, dan sebagainya.
Kontras dalam dunia desain adalah suatu
prinsip yang mudah dipahami, yaitu dengan melihat
dari dua objek yang berlainan, sehingga membuat
kesan tampilan desain yang menonjol dan menarik
perhatian.
Pemberian kontras pada suatu objek haruslah
kontras positif, karena jika kontras yang diberikan
negatif, objek tersebut menjadi samar-samar atau
tidak terlihat, terserap oleh backgroud, misalnya
objek berwarna biru tua, background-nya berwarna
hitam, apakah objek tersebut masih bisa terlihat
dengan baik.
Ketika sebuah halaman itu seimbang, elemen-eleman dan halaman menjadi satu kesatuan yang
utuh, sehingga memudahkan pengunjung dalam membaca dan menikmati penjelajahannya dari
halaman yang satu ke halaman lainnya.
6 | T I P S W E B D E S I G N | U S A B I L I T Y
P R I N S I P - P R I N S I P D E S A I N W E B
Konsistensi
Jika kontras bisa membuat desain menjadi lebih
menggairahkan, konsistensi dapat membuat
pengunjung merasa nyaman seperti berada di
rumah sendiri. Hal ini karena ketika pengunjung
membuka suatu halaman situs yang konsisten, dia
langsung tahu ke mana harus pergi mencari apa
yang diinginkannya dengan cepat dan dia tahu
berada di mana. Intinya, konsistensi membuat
pengunjung menjelajahi situs dengan lebih mudah
dan tidak membingungkan.
Konsistensi dapat diterapkan pada margin, tata
letak, huruf, warna dan terutama pada navigasi.
Pengunjung situs bisa dibingungkan jika dihalaman
utama navigasi diletakkan di kiri atas, tapi di
halaman berikutnya di bagian bawah. Jadi, ketika
membuat navigasi di bagian kiri atas halaman,
seharusnya pada halaman-halaman lainnya juga
diletakkan di bagian kiri atas, inilah yang disebut
konsistensi.
Dalam kasus lain, misalnya penggunaan huruf
sebaiknya gunakan satu sampai tiga jenis saja,
meskipun kita mempunyai ribuan jenis huruf dalam
komputer kita. Begitu juga dengan warna, gunakan
tiga sampai empat warna sudah cukup.
Konsistensi biasanya sangat efektif digunakan
untuk membangun brand suatu perusahaan.
Misalnya, ketika melihat huruf M dengan warna
kuning, apa yang ada dipikiran kita? Mc Donalds.
Atau, ketika kita melihat buah apel dengan warna
pelangi, itu adalah kepunyaan Apple Computer. Jadi,
gunakanlah gambar (logo) dan tata letak yang sama
pada setiap halaman, ini akan membantu
pengunjung untuk mengingatnya.
Ruang Kosong
Ruang kosong biasanya disebut dengan ruang
negatif, suatu istilah yang menggambarkan suatu
ruang terbuka di antara elemen-elemen desain. Ini
bisa ditemukan di antara kata, paragraf, huruf dari
teks, bisa juga di antara gambar dan elemen di
halaman web. Ini membantu dalam mengarahkan
mata pembaca dari satu titik ke lainnya.
Ruang kosong merupakan teknik tata letak
yang penting, oleh karena tanpa jumlah ruang
kosong yang memadai, maka teks tidak bisa terbaca
dengan baik, gambar akan kehilangan
keindahannya, dan elemen-elemen dalam halaman
tersebut akan kehilangan keseimbangan. Terutama,
7 | T I P S W E B D E S I G N | U S A B I L I T Y
P R I N S I P - P R I N S I P D E S A I N W E B
ruang kosong akan membuat tata letak lebih menarik dengan menghilangkan “kegaduhan” pada halaman,
mudah dibaca dan menambah kekuatan pesan yang ingin disampaikan.
8 | T I P S W E B D E S I G N | U S A B I L I T Y
D A S A R - D A S A R D E S A I N W E B
ada saat seseorang memasuki sebuah situs, kesan pertama sangatlah penting artinya. Cara
paling jitu untuk menarik perhatian pengunjung adalah mengandalkan seorang desainer
yang mampu menghadirkan desain yang baik.P
9 | T I P S W E B D E S I G N | U S A B I L I T Y
D A S A R - D A S A R D E S A I N W E B
Dasar dari desain yang baik setidaknya
mencakup hal-hal berikut ini :
 Tata letak (layout) yang rapi
 Pewarnaan yang baik
 Bentuk-bentuk yang menarik
 Tipografi yang menarik
 dan yang paling penting aksesnya cepat.
Tata letak dapat digunakan untuk menata
elemen-elemen dalam sebuah halaman agar lebih
enak dilihat dan dibaca. Warna digunakan untuk
penerangan dalam situs, informasi dan produk yang
dimiliki. Tipografi (seni penggunaan huruf)
digunakan untuk berkomunikasi dengan
pengunjung. Bentuk digunakan untuk membentuk
sebuah citra dan mengekspresikan sebuah
informasi.
Warna
Warna adalah sebuah sensitivitas yang
berhubungan dengan indera kita, seperti halnya
rasa dan bau. Sensitivitas warna dihasilkan dari
interaksi antara warna dengan indera sensitif warna
yang ada pada kita.
10 | T I P S W E B D E S I G N | U S A B I L I T Y
D A S A R - D A S A R D E S A I N W E B
Penggunaan warna yang benar
akan memberikan pengaruh yang kuat
pada kejelasan pesan yang ingin
disampaikan.
Sebaiknya, pilihlah warna yang
sesuai dengan tujuan situs yang di buat.
Warna terdapat di sekeliling kita. Kemana pun
kita pergi akan melihat dunia ini penuh warna.
Dunia tanpa warna, maka hilanglah keindahannya.
Warna dapat merebut perhatian kita, menarik,
menolak, menggemaskan, bahkan warna bisa
mempengaruhi emosi kita setiap saat.
Peranan warna dalam mendesain web
sangatlah penting, karena warna adalah hal yang
pertama dilihat oleh pengunjung sebelum mereka
mulai membaca isi dari situs. Jadi, warna merupakan
elemen yang sangat penting untuk dipertimbangkan
sebelum membuat situs, baik dari segi psikologi
maupun dari segi kombinasi keserasian antara satu
warna dengan warna yang lain.
Tipografi
Tipografi adalah seni dalam huruf yang meliputi
pemilihan huruf, penentuan ukuran yang tepat,
dimana teks dapat diputus, sepasi jarak, dan
bagaimana teks dapat dengan mudah dibaca.
Dalam desain web, huruf yang kita gunakan
tidak bisa sembarangan dan seenaknya, karena
kebanyakan ditentukan oleh web browser. Apabila
huruf yang kita sediakan tidak tersedia di komputer
10
11 | T I P S W E B D E S I G N | U S A B I L I T Y
D A S A R - D A S A R D E S A I N W E B
pengunjung, akan merusak desain kita. Oleh karena
itu, gunakanlah huruf yang standar (default),
misalnya Times New Roman, Helvetica, Arial, dan
lain-lain.
Prinsip yang harus dipakai dalam tipografi
adalah huruf atau teks yang ditampilkan harus
mudah dibaca oleh pengunjung. Ada beberapa tips
agar huruf dapat mudah dibaca dan enak dilihat,
yaitu :
 Buatlah kontras yang tinggi antara teks dengan
background atau antara teks dengan gambar
 Pilihlah jenis huruf yang mudah dibaca, biasanya
jenis serif dan sans-serif
 Aturlah spasi antar baris teks dan spasi antar
huruf
 Gunakanlah huruf standar yang terdapat pada
semua komputer atau browser, seperti Times
New Roman, Helvetica, Arial, dan Verdana
Bentuk
Elemen berikutnya yang digunakan untuk
menarik perhatian pengunjung adalah bentuk.
Penggunaan bentuk yang efektif akan memberikan
motivasi, inspirasi, dan tantangan kepada
pengunjung, walaupun ini terjadi tanpa disadari.
Banyak bentuk yang dapat ditemukan dalam
desain, tapi jika kita amati dengan seksama, hanya
ada beberapa bentuk saja sebagai dasar dari
bentuk-bentuk yang dibuat. Bentuk-bentuk dasar
tersebut meliputi lingkaran, persegi/kotak dan
segitiga. Apabila Anda sering memperhatikan dalam
menggunakan program aplikasi pengolah grafik,
bentuk-bentuk dasar ini pasti tersedia, dan dari
bentuk dasar ini nanti akan terbentuk bentuk
lainnya.
Biasanya, bentuk dikombinasikan dengan
bentuk lain untuk memberikan kesan yang kuat
pada pengunjung, misalnya lingkaran
dikombinasikan dengan segitiga menghasilkan kesan
energik dan dinamik, atau lingkaran dikombinasikan
dengan persegi menghasilkan kesan kehangatan dan
kenyamanan.
12 | T I P S W E B D E S I G N | U S A B I L I T Y
D A S A R - D A S A R D E S A I N W E B
Layout (Tata Letak)
Layout adalah proses penataan dan pengaturan
teks atau grafik pada halaman. Teks atau grafik bisa
ditempatkan di mana sajadengan berbagai cara.
Namun, tata letak dan susunan yang baik dapat
membuat halaman tampil lebih cantik dan
seimbang, terutama enak dilihat dan mudah dibaca.
Layout meliputi penyusunan, pembagian
tempat dalam suatu halaman, pengaturan jarak
spasi, pengelompokan teks dan grafik, dan
penekanan pada suatu bagian tertentu.
Sebagai catatan, yang terpenting dalam
merancang tata letak gunakan prinsip
keseimbangan, bagaimana suatu objek baik itu teks
atau grafik dapat terlihat seimbang dalam sebuah
halaman. Agar tidak terkesan terlalu monoton atau
membosankan, gunakan keseimbangan asimetris.
13 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
Ada cara yang tidak sulit
untuk menjadikan situs
web Anda menarik,
sehingga pengunjung
betah berlama-lama di
dalamnya.
14 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
Mengintip dan Meriset
Ketika hendak membuat sebuah situs yang
tidak untuk tujuan iseng, tentu Anda perlu
merancangnya dengan lebih serius. Untuk itu,
carilah sebanyak mungkin informasi untuk
mematangkan gagasan Anda, sehingga hasilnya
kelak sesuai dengan yang Anda impikan.
Anda perlu menyediakan waktu untuk
merumuskan dan menentukan tujuan situs Anda.
Rasanya perlu juga untuk sedikit riset, setidaknya
browsing di internet. Cari apa? Mencari situs-situs
yang sekiranya serupa dengan yang ingin Anda
kembangkan. Intiplah data-data semacam siapa
yang menjadi target situs tersebut, bagaimana
membuat kelompok demografis itu tertarik, dan
sebagainya.
Ketika tiba saatnya merancang desain situs
Anda, ambilah secarik kertas dan pensil. Corat-
coretlah, termasuk tulisan semua elemen yang
hendak Anda sertakan dalam situs, seperti gambar,
teks, animasi, sampai buku tamu. Juga pikirkan
tentang navigasi yang mudah bagi pengunjung.
Lalu, buatlah sketsa untuk setiap halaman web
Anda, kemudian buatlah bagan yang
menggambarkan alur serta keterkaitan antar
halaman. Anda perlu merancangnya sedemikian
rupa sehingga pengunjung tidak bingung ketika
menjelajah.
Kebutuhan untuk update di masa mendatang
juga perlu Anda pikirkan sejak awal. Pastikan
agar setiap elemen-elemen pada setiap
halaman gampang di edit.
Jika sudah terstruktur dengan
baik, saatnya Anda menggabung-
kan seluruh elemen dan ornamen
lain yang diperlukan, seperti grafik, logo, database,
teks, file, elemen flash dan lainnya. Kesemuanya itu
tentu dibuat untuk menarik minat pengunjung situs.
“Banyak desainer modern kelewat kreatif, membuat desain yang kadang-kadang rumit, mulai dari
navigasi, teks sampai grafisnya. Maksudnya sih pamer kehebatan. Tapi apa gunanya hebat
menurut diri sendiri, sementara pengunjung dibuat bingung?”
15 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
Grafik dan Desain
Setelah merinci semuanya, kini saatnya Anda
bermain-main dengan elemen visual. Membuat
desain yang tepat juga bisa lumayan menguras
pikiran.
Yang paling penting adalah bagaimana
membuat pengunjung terkesan pada tampilan situs
Anda, ketika petama kali membukanya. Kemudian,
bagaimana membuat mereka betah menjelajah di
dalamnya.
Ketika memikirkan layout halaman secara
keseluruhan, Anda perlu mempertimbangkan empat
komponen inti suatu situs, yaitu isi, bentuk, fungsi
dan tujuan. Seimbangkan keempatnya, maka Anda
akan memperoleh situs yang menarik.
Banyak desainer modern kelewat kreatif,
membuat desain yang kadang-kadang rumit, mulai
dari navigasi, teks sampai grafisnya. Maksudnya sih
pamer kehebatan. Tapi apa gunanya hebat menurut
diri sendiri, sementara pengunjung dibuat bingung?
Tetaplah berprinsip sederhana dan demi
kepentingan pengunjung situs.
Sekali lagi, galilah info atau data sebanyak
mungkin untuk memperkaya tampilan dan isi situs
Anda. Jangan ragu untuk melihat-lihat karya seni
dari berbagai sumber, seperti situs, majalah, galeri
seni, dan sebagainya.
Batasan Desain
Bagi para pemula, Anda perlu memperhatikan
ukuran kanvas. Ingatlah bahwa situs Anda dapat
diamati pada berbagai ukuran monitor mulai dari
PDA hingga tampilan jumbo. Tidak mungkin kita
dapat membuat situs yang tampil menarik pada
semua browser untuk semua resolusi.
Salah satu cara mengatasi masalah ini adalah
menggunakan ukuran layar relatif dengan memakai
tag <TABLE WIDTH = “100%”>, yang akan
mengecilkan teks agar dapat masuk seluruhnya ke
suatu halaman. Jika ragu, coba gunakan situs
pemeriksa ukuran browser seperti
www.applythis.com/browsersizer atau
www.codo.com/browserola.
Perbedaan utama lainnya antara desain web
dengan desain tradisional adalah Anda dibatasi oleh
palet warna. Agar warna tampil secara benar pada
PC atau Mac, Anda harus tetap menggunakan 256
web-safe colours. Untungnya, pada program seperti
16 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
 Tips dari Pakar
OLI SHAW, DEVELOPER SENIOR DI NOWWASHYOUR-
HANDS (WWW.NOWWASHYOURHANDS.COM),
MEMBERI SARAN TENTANG MERANCANG NAVIGASI
HALAMAN WEB YANG EFEKTIF.
“Ada beberapa pertanyaan mendasar yang harus Anda
tanyakan pada diri sendiri sebelum memulai menyiapkan
content atau memprogram halaman. Mula-mula, Anda
harus menentukan untuk apa situs tersebut – apakah ini
halaman pribadi, atau dimaksudkan untuk menyediakan
informasi atau layanan? Lalu tentukan siapa yang akan
menggunakannya, dengan mengira-ngira apa yang
pengguna akan lakukan pada halaman ini. Mungkin hal
terpenting yang harus dipikirkan adalah navigasi. Tiga
pertanyaan yang harus Anda jawab dilihat dari sudut
pandang pengguna adalah : di mana saya saat ini, dimana
saya sebelumnya, dan ke mana saya akan melangkah?
Harus ada sesuatu yang dapat memberitahu penggun di
mana mereka saat itu pada suatu situs, dan sebaiknya
pengguna juga perlu tahu bagian situs yang telah
dikunjunginya, dengan membuat link. Navigasi juga harus
jelas menunjukkan kepada pengguna ke mana mereka
selanjutnya.”
Dreamweaver disertakan dengan color picker, yang
membantu Anda dalam memilih warna agar bisa
ditampilkan secara akurat.
Ketika menggunakan image atau grafik pada
situs, hal terpenting yang perlu Anda perhatikan
adalah agar ukurannya tetap kecil. Jika besar,
pengunjung pasti bosan menunggu loading gambar
Anda sampai tampil penuh.
Tentukan sendiri batas ukuran file sekitar 100
KB untuk setiap halaman, yang kira-kira sama
dengan waktu tunggu 10 detik bila menggunakan
modem 56K. Selalu gunakan grafik terkompresi
dalam format JPEG, GIF atau PNG.
Jika Anda perlu menggunakan gambar
berukuran besar, setidaknya ingatkan pengunjung
Anda tentang hal ini, dengan menambahkan link ke
gambar tersebut yang menerangkan total ukuran
file tersebut.
Kemudahan Penggunaan dan
Aksesibilitas
Dengan menyuguhkan gambar (kecil) yang
cepat tersaji dan memastikan bahwa browser
apapun akan menampilkan secara benar, Anda telah
melakukan sebagian hal menyangkut usability atawa
kemudahan penggunaan.
17 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
Begitulah memang seharusnya situs. Ia mudah
digunakan dan dijelajahi. Elemen-elemen lain yang
perlu diperhatikan antara lain link, kontras antara
teks dan latar belakang, minimalisasi penggulungan
layar baik horizontal maupun vertikal, serta navigasi
yang simpel dan mudah.
“Pengguna tentulah lebih berpengalaman
dalam menjelajah situs-situs lain, sehingga mereka
pun menjadi punya standar dan ekspektasi terhadap
performa sebuah situs”, tutur Nielsen.
Aksebilitas juga menjadi jargon penting di
antara para pengunjung web. Kemudahan di akses
juga menjadi unsur penting dalam membangun situs
seperti halnya usability, jangan sampai hal tersebut
terabaikan.
Anda harus selalu memastikan agar navigasi
dan content pada situs Anda jelas dan sesederhana
mungkin. Gunakan tag Alt untuk menambahkan
keterangan pada semua gambar situs dan
“Flash menjadi penting ketika menyangkut masalah content interaktif, dan
sangat cocok untuk memainkan online gaming, animasi, dan
elemen navigasi.
18 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
menghindari ketergantungan berlebihan pada
elemen visual. Peselancar dengan gangguan
penglihatan sering kali menggunakan perangkat
lunak pembaca layar khusus atau browser suara
untuk mengakses online content, dan perangkat ini
akan memperhatikan teks pada halaman web.
Sebaiknya menggunakan skema warna yang jelas
seperti merah dan hijau agar dapat dilihat semudah
mungkin oleh pengunjung yang menderita buta
warna.
Tentu saja, selain itu masih banyak yang perlu
dilakukan agar situs dapat diakses, dan ada
sejumlah situs bermanfaat yang membahas topik ini
secara lebih detail. Jakob Nielsen telah
mencurahkan kehidupan profesionalnya untuk
mendidik para pengembang situs mengenai seluk-
beluk usability dan Anda dapat membaca lebih
banyak tentang teorinya pada situs www.useit.com.
Situs lainnya yang patut dilihat, yaitu
usability.gov/guidelines dan usableweb.com.
Daya Pikat
Kini Anda telah membuat situs yang
terorganisasi dengan baik, terlihat indah, dan user-
 Tips dari Pakar
DR JAKOB NIELSEN DARI ORACLE MENJELASKAN
TENTANG RESIKO KEHILANGAN PENGUNJUNG, BILA
ANDA GAGAL MEMBUAT WEB YANG MUDAH
DIJELAJAHI.
□ “Jika situs Anda tidak user friendly, tentulah para
pengunjung atau pengguna enggan berkunjung lagi.
Mereka akan berpaling ke situs lain yang mereka temu-
kan lewat search engine (mesin pencari). Penggunaan
yang menurut Anda sudah begitu mudah, belum tentu
demikian bagi pengguna. Bahkan bisa saja mereka
merasa bahwa situs Anda sangat membingungkan.
Keterangan yang menurut Anda sudah jelas, seringkali
tetap tidak bisa dipahami oleh pengguna. Inilah yang kian
memantapkan keputusan mereka untuk meninggalkan
situs Anda. Makanya, yang perlu Anda perhatikan benar-
benar adalah masalah kemudahan penggunaan.
Bagaimana Anda bisa tahu desain situs Anda gampang
digunakan oleh calon pengguna? Lakukan saja semacam
tes. Mintalah beberapa pengguna yang representatif
untuk menjelajah situs tersebut, setidaknya selama tiga
hari. Amati dan lakukanlah evaluasi.”
friendly. Pekerjaan selesai? Tunggu dulu.
Anda perlu memikirkan cara agar para
pengunjung mau kembali berkunjung. Dengan
19 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
demikian, situs Anda mesti punya semacam perekat, atau sebut saja daya pikat. Ini jelas berkaitan dengan
masalah kandungan situs, yang membuat orang menjadi ketagihan untuk membukanya.
Lantas seperti apa daya pikat itu? Barangkali agak panjang-lebar untuk menjabarkannya. Makanya,
langsung saja Anda lihat dua contoh konkret situs yang berdaya pikat, yakni eBay (www.ebay.com) dan Friends
Reunited (www.friendsreunited.com). Perekat pada keduanya adalah adanya content yang tak bisa dilewatkan
oleh para pengunjungnya.
Kerekatan juga bisa dipupuk sejak prosedur registrasi, lalu pengunjung dilibatkan dengan meminta mereka
aktif berpartisifasi pada situs tersebut. Dapat pula dilakukan dari halaman Home dengan menyediakan buku
tamu, ruang diskusi, dan forum online, sehingga menimbulkan adanya rasa kebersamaan pada situs Anda.
Pengguna pun merasa dirinya menjadi bagian dari sesuatu yang istimewa
20 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
Menambah Interaktivitas
Kandungan interaktif seperti game, suguhan
multimedia, dan kuis juga dapat menjadi daya pikat
situs Anda. Portal seperti Blueyonder
(www.blueyonder.co.uk) bisa menjadi contoh yang
baik untuk tipe content tersebut. Online game-nya
bikin ketagihan dan sajian audio-video yang sungguh
menarik, mampu membuat penonton singgah lebih
lama.
Tidaklah sulit untuk menyertakan unsur-unsur
interaktif pada halaman situs Anda. Teka-teki dan
kuis dapat disusun dengan menggunakan DHTML
atau JavaScript. Flash menjadi hal pokok ketika
menyangkut masalah isian interaktif, bahkan
pengunjung pun bakal bisa dibuat terhibur.
Panduan lebih lanjut tentang pemrograman
untuk mengembangkan interaktivitas, silahkan
kunjungi situs Flashkit (www.flashkit.com) atau
Flash Zone (www.flashzone.org).
Dan jangan lupa, aspek lain yang juga krusial
pada suatu situs adalah orisinalitasnya. Ada tawaran
informasi bru yang Anda sodorkan, sehingga netter
merasa ada yang kurang bila tak mengunjungi situs
Anda. Tanpa itu, situs canggih yang tercipta pun
akan sia-sia.
 Tips dari Pakar
TODD YARD, PROGRAMMER FLASH TERKEMUKA DI EGO
7 (WWW.EGO7.COM) MENUANGKAN GAGASAN
TENTANG PENTINGNYA MENAMBAHKAN
INTERAKTIVITAS PADA HALAMAN ANDA.
□ “Interaktivitas pengguna menjadi jantung web. Pada
mulanya, web hanya menawarkan situs berbasis teks.
Disertakannyahyperlink dalam bentuk teks merupakan
satu langkah lebih maju ketimbang versi cetaknya.
Dengan beragam opsi multimedia yang kini tersedia,
Anda dapat menawarkan berbagai cara pada pengguna
untuk berinteraksi, mencari tahu dan menjelajahi content
Anda. Gunakan umpan balik grafik untuk menginformasi-
kan pengguna tentang elemen interaktif, seperti status
tombol yang bergulung. Sertakan suara sebagai bentuk
umpan balik tambahan agar content tidak terlihat
membosankan. Juga perlu dipertimbangkan pemakaian
animasi untuk menerangkan elemen penting, atau untuk
meminta keikutsertaan pengunjung. Web merupakan
medium yang unik karena kemampuannya untuk
berinteraksi dengan pengguna dan menyajikan banyak
informasi. Jadi, manfaatkanlah dan berpikirlah
melampaui kekangan yang dialami oleh medium lain.”
21 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
 Hindarilah
Lima hal utama yang harus Anda hindari dalam mendesain web
× Hindari judul menu yang tak jelas. Jangan gunakan kata-kata yang arti tidak jelas, dan selalu tempatkan
teks pada latar belakang yang kontras.
× Jangan semata-mata tergantung pada Flash sebagai bentuk navigasi. Selalu sertakan alternatif HTML
pada apapun yang Anda sajikan yang memerlukan plug-in.
× Jangan penuhi halaman web dengan gambar berukuran besar. Halaman mungkin akan terlihat bagus,
tetapi waktu download menjadi kian lama.
× Jangan membuat desain yang rumit. Mungkin Anda menganggap desain yang rumit itu menunjukan
kepiawaian Anda, tapi apa gunanya bila pengunjung menjadi jengkel karenanya.
× Ingatlah untuk selalu meng-update situs Anda. Jangan anggap bahwa hanya karena situs Anda terlihat
bagus, pengunjung lantas mengabaikan kebaruan informasinya.
22 | T I P S W E B D E S I G N | U S A B I L I T Y
D E S A I N W E B nan H e b a t & M e m i k a t
Nama situs : eBay
URL : www.ebay.com
Jika Anda mencari situs yang dapat
membuat pengunjung lengket
padanya, maka eBay merupakan
contoh yang sangat jelas. Di sini
pengguna menjelajah untuk melihat
barang yang dilelang pada pasar
online terbesar di dunia, lalu kembali
berulang kali untuk memeriksa
penawaran yang mereka buat.
Nama situs : RNIB
URL : www.rnib.org.uk
Dirancang khusus agar dapat diakses
oleh mereka yang menderita
gangguan penglihatan. Situs RNIB
memeragakan bagaimana
menyediakan content bagi semua
pihak. Situs ini dioptimalkan untuk
alat pembaca layar, dan pengguna
dapat mengubah setelan browser
untuk mengganti font, ukuran, style,
dan warna.
Nama situs : Google
URL : www.google.com
Untuk melihat navigasi situs
sederhana terbaik, Anda hanya perlu
mengamati mesin pencari favorit
semua orang. Antarmuka Google
merupakan bukti mengapa navigasi
yang sederhana mempermudah
pengguna.
Nama situs : Atom Films
URL : http://atomfilms.shockwave.
com
Penuh dengan interaktivitas. Atom
Films mewakili contoh bagaimana
begitu banyak elemen flash dan
content multimedia dapat digunakan
untuk memikat para pengunjung.
Bentuk webnya mudah dijelajahi,
bersahabat pula dalam hal
bandwidth-nya.
23 | T I P S W E B D E S I G N | U S A B I L I T Y
USABILITY : Desain yang Brilian
stilah usability ditemukan oleh Jakob Nielsen,
yang sekarang disebut-sebut Bapaknya
usability. Di dalam situsnya (www.useit.com),
usability didefinisikan sebagai suatu pengalaman
pengguna dalam berinteraksi dengan aplikasi atau
situs web sampai pengguna dapat
mengoperasikannya dengan mudah dan cepat.
Dalam dunia web, usability lebih mengacu pada
desain web itu sendiri, yaitu desain dari situs
tersebut harus memenuhi lima syarat untuk
mencapai tingkat usability yang ideal, antara lain :
 Mudah untuk dipelajari
Agar mudah dipelajari, letakkan isi yang paling
penting pada bagian atas halaman, sehingga
pengunjung dapat melihat apa yang mereka cari
dengan cepat. Pelajarilah kemungkinan-
kemungkinan tentang kebiasaan pengunjung,
mengapa mereka berada di situs Anda dan apa
yang mereka cari. Jangan sampai membuat
pengunjung bingung dan menebak apa yang
harus mereka lakukan ketika berada di situs
Anda.
 Efisiensi dalam penggunaan
Situs yang efisien dapat menyajikan informasi
dengan cepat. Jangan membuat link yang terlalu
I
24 | T I P S W E B D E S I G N | U S A B I L I T Y
USABILITY : Desain yang Brilian
banyak, sediakan seperlunya dan hantarkan
pengunjung untuk mencapai informasi yang
mereka perlukan dengan mudah dan cepat.
 Mudah untuk diingat
Agar mudah diingat, sebuah situs sebaiknya
jangan terlalu banyak melakukan perubahan-
perubahan yang mencolok. Misalnya, pada
navigasi, jangan terlalu sering melakukan
penggantian tampilannya, pengunjung nanti
akan perlu waktu untuk menyesuaikan dan
mempelajarinya kembali.
 Tingkat kesalahan rendah
Jangan sampai ada link yang tidak berfungsi
(broken link) atau halamannya masih dalam
proses pembuatan (under construction).
Sebaiknya, periksalah kembali link-link yang tidak
bisa berfungsi dengan baik dan jangan
cantumkan link tersebut jika belum ada isinya,
karena ketika menemukan halaman yang kosong,
mereka bisa kecewa.
 Kepuasan pengguna
Kepuasan adalah hal yang paling penting
diinginkan oleh setiap pengguna, situs dapat
dengan mudah digunakan dan dipelajari,
pengguna dapat menemukan apa yang mereka
cari dengan cepat, mengetahui dimana mereka
berada dan bisa pergi ke mana saja dalam
sebuah situs, dan dapat dengan mudah
memberitahukan situs tersebut kepada teman-
teman mereka.
Pentingkah Usability dalam Desain
Web?
Usability penting dalam desain web. Mengapa?
Mungkin banyak situs yang terlihat bagus, tapi kalau
memerlukan waktu yang lama untuk
menampilkannya atau terlalu sulit dipahami,
tentunya pengunjung akan kabur dan pindah ke
situs lainnya. Ini jelas sangat merugikan, karena
akan menurunkan dan mengurangi pesan penting,
produk, pelayanan dan terutama konsumen. Jadi,
pengunjung hanya ingin mencari informasi yang
mereka butuhkan, jika mereka tidak
menemukannya dengan mudah dan cepat,
mereka akan mencarinya di situs lain.
Desain web yang bagus
bukan hanya tentang situs web yang
cantik, tapi juga tentang cara untuk dapat
berkomunikasi dengan pengunjung, itulah
tujuannya. Jika Anda mau memikirkan tentang
25 | T I P S W E B D E S I G N | U S A B I L I T Y
USABILITY : Desain yang Brilian
usability sebelum memulai mendesain proyek
desain yang baru, dan memasukkannya ke dalam
desain di tingkat pengembangannya, keduanya akan
terlihat bagus dan mudah dioperasikan.
Perhatikanlah pengunjung terlebih dahulu, karena
kebanyakan pengunjung akan memperhatikan
betapa bagusnya suatu situs kalau mereka tidak
membuang-buang waktu untuk mempelajarinya
dengan rumit.
Di sisi lain, suatu situs yang di desain dengan
jelek akan mengakibatkan :
 Frustasi, karena pengunjung menunggu terlalu
lama akses sebuah situs.
 Bingung, karena pengunjung hanya bisa
menebak di mana mereka berada dan mau ke
mana, disebabkan sistem navigasi yang rumit.
 Kabur atau pergi dan memilih ke situs yang lain.
 Parahnya lagi, jika mereka memberitahukan
kepada orang lain bahwa betapa jeleknya situs
Anda.
Tips Usability
Usability memang penting, namun yang perlu
diingat dan diperhatikan adalah untuk siapa Anda
membuat situs? Siapa target pengunjungnya? Apa
tujuan dari situs Anda? Semuanya tetap berpulang
pada pertimbangan-pertimbangan tersebut karena
untuk memenuhi semua syarat usability sangat sulit.
Berikut ini ada beberapa tip yang dapat membantu
sebuah situs untuk mencapai tingkat usability, yaitu:
1. Navigasi
Navigasi merupakan aspek yang paling penting
dalam mendesain web, pengunjung dapat
melakukan interaktivitas. Navigasi dapat membantu
pengunjung untuk menemukan jalan yang mudah
ketika menjelajahi sebuah situs web, memberitahu
di mana mereka berada, ke mana mereka bisa pergi,
sehingga mereka dapat menemukan apa yang
mereka cari dengan cepat dan mudah.
Berikut ini ada beberapa tip untuk membuat
navigasi yang baik, yaitu :
 Buatlah navigasi yang jelas dan ringkas.
 Umumnya navigasi diletakkan di sebelah kiri atau
di atas dari sebuah halaman web.
 Navigasi bisa berbentuk teks atau grafik. Apabila
navigasi berbentuk grafik sertakan pula teks pada
grafik tersebut.
 Beri sedikit ruang dan jarak antar navigasi,
jangan terlalu rapat.
26 | T I P S W E B D E S I G N | U S A B I L I T Y
USABILITY : Desain yang Brilian
 Hindari pemakaian frame untuk navigasi, karena
kebanyakan menimbulkan link yang tidak
berfungsi dan membuat desain terlihat statis.
 Jaga konsistensi. Letakkan pada tempat yang
sama di tiap halaman, gunakan warna yang
sama, dan tempatkan pada tempat yang mudah
untuk di lihat.
2. Link
Bagi pengunjung, link adalah struktur dari
halaman web. Pengunjung tidak peduli situs siapa
yang mereka masuki, karena yang mereka butuhkan
hanyalah informasi yang terdapat dalam situs
tersebut.
Berikut ini ada beberapa tip untuk membuat
link yang standar, yaitu :
 Gunakanlah selalu garis bawah untuk menandai
sebuah link. Jangan sekali-kali menggaris bawahi
teks yang bukan link, karena pengunjung akan
menganggapnya sebagai link.
 Umumnya sebuah link yang belum pernah
dikunjungi atau belum di klik berwarna biru,
sedangkan link yang sudah dikunjungi berwarna
merah atau ungu.
27 | T I P S W E B D E S I G N | U S A B I L I T Y
USABILITY : Desain yang Brilian
 Jangan sampai ada link yang tidak berfungsi
(broken link), Apabila di dalam link belum
terdapat isinya, sebaiknya jangan dicantumkan.
 Gunakan breadcrumb untuk mempermudah
pengunjung menjelajahi situs dengan cepat.
Misalnya : Home > eBook > Desain > Photoshop
Pada breadcrumb di atas, pengunjung
mengetahui di mana mereka berada (Photoshop)
dan untuk kembali ke halaman sebelumnya
(Desain atau eBook) lebih mudah atau kembali
ke halaman depan lebih cepat.
3. Warna Buta
Warna buta adalah kombinasi warna yang
jelek, sehingga menghasilkan warna yang
menyilaukan, mengaburkan, samar-samar, dan tidak
terlihat. Ini bisa menyebabkan teks tidak bisa
terbaca, navigasi tidak terpakai, dan elemen tidak
terlihat.
Berikut ini ada beberapa tip yang perlu
diperhatikan untuk menghindari warna buta, yaitu :
 Kebanyakan orang tidak bisa membedakan
antara bayangan warna merah dan warna hijau.
 Hindari menggunakan hanya warna merah dan
warna hijau saja dalam desain.
 Jangan menggunakan warna sebagai petunjuk.
Gunakanlah petunjuk lain yang lebih dimengerti,
misalnya dalam navigasi, gunakanlah panah
untuk menghantarkan pengunjung ke halaman
selanjutnya.
 Buatlah kontras yang tinggi antara teks dengan
background-nya.
 Bacalah literatur tentang pewarnaan yang baik.
4. Grafik
Grafik biasanya berupa gambar atau foto.
Disamping membuat halaman lebih cantik dengan
gambar-gambar yang menarik, grafik juga bisa
memperlambat akses dengan memperbesar ukuran
file.
Berikut ini ada beberapa tip untuk memper-
cepat akses grafik dalam sebuah situs, yaitu :
28 | T I P S W E B D E S I G N | U S A B I L I T Y
USABILITY : Desain yang Brilian
 Gunakan grafik dengan hemat atau secukupnya.
Ini akan menambah kecepatan akses
pemanggilan sebuah situs.
 Jaga ukuran grafik agar berukuran kecil, kalau
perlu gunakan fasilitas optimize pada aplikasi
pengolah grafik.
 Gunakan gambar dalam format GIF, karena
format ini didukung oleh semua browser, ukuran
file-nya lebih kecil, dan mempercepat akses.
Namun, apabila gambar yang digunakan
menggunakan warna yang kompleks seperti foto,
gunakanlah format JPEG karena jika
menggunakan format yang salah, bisa kelihatan
titik-titiknya dan warna foto bisa kelihatan kabur.
Apabila warna dalam suatu gambar di bawah 256
warna, gunakanlah format GIF.
 Jangan gunakan grafik untuk navigasi yang
menggunakan beberapa bahasa yang berlainan,
karena sulit untuk pemeliharaan dan
pengembangannya.
 Gunakan atribut width dan height dalam tag img
scr, ini akan mempercepat akses karena browser
tidak perlu mendeteksi lagi berapa ukuran grafik
yang akan ditampilkan. Tag img scr berfungsi
untuk menampilkan grafik di halaman web.
Misal : <img width=100 height=100 border=0
scr=gambar.gif>
 Gunakan juga atribut border=0 pada tag img scr
karena beberapa browser akan menampilkan
border biru di sekeliling gambar apabila gambar
dipakai sebagai link.
 Gunakan atribut alt dalam tag img scr karena
tidak semua pengunjung memiliki browser yang
dapat menampilkan grafik, dengan adanya
atribut alt akan memberikan keterangan dari
grafik yang tidak bisa ditampilkan.
Misal : <img scr=tombol.gif alt=ini adalah
gambar tombol>
29 | T I P S W E B D E S I G N | U S A B I L I T Y
USABILITY : Desain yang Brilian
5. Kesederhanaan
Kesederhanaan adalah kunci untuk mencapai
tingkat usability. Ada beberapa hal yang membuat
situs terlihat sederhana, yaitu :
 Gunakan judul dan sub judul untuk memisahkan
bagian teks.
 Gunakan ruang kosong secukupnya. Salah satu
caranya adalah dengan membatasi bahwa dalam
satu baris tidak lebih dari 12 kalimat.
 Tulis isi dengan ringkas dan singkat, jangan
berbentuk seperti karangan yang bertele-tele.
 Berikan tanda terang pada kalimat yang dianggap
penting dan memerlukan perhatian yang lebih.
 Gunakan background yang gelap dengan teks
yang terang atau sebaliknya.
 Hindari warna yang tidak serasi, gunakan
kombinasi yang enak dilihat dan mudah dibaca.
 Jangan membuat situs yang sangat bergantung
pada teknologi yang baru, karena user akan
kehilanagn waktunya untuk mengakses plug-in
terbaru.
6. Konsistensi
Konsistensi berati tetap. Desain yang buruk
membuat pengunjung bingung dan berpikir keras
ketika berada di dalam situs. Di sinilah pentingnya
konsistensi untuk membuat pengunjung merasa
nyaman dalam menjelajah dari halaman yang satu
ke halaman lainnya. Beberapa hal yang membuat
konsistensi pada situs, yaitu :
 Pastikan untuk menjaga letak elemen desain
berada di lokasi yang sama (konsisten) pada tiap
halaman, misalnya navigasi, logo, judul dan
lainnya. Ini akan mempercepat prose belajar
pengunjung, karena mereka hanya perlu belajar
sekali saja.
 Kebanyakan situs meletakkan logonya di ujung
atas sebelah kiri halaman.
 Warna untuk link yang belum dikunjungi (klik)
berwarna biru dan yang sudah dikunjungi
berwarna merah atau ungu.
 Pergunakan jenis huruf yang sama. Gunakan satu
atau dua jenis huruf saja (maksimal tiga jenis
huruf).
 Pergunakan jenis huruf standar, misalnya roman,
verdana, arial dan helvetica.
 Link seharusnya mempunyai garis bawah dan
mempunyai warna yang sama.
 Jangan memakai terlalu banyak warna yang
berbeda, selain terlihat norak juga membuat
mata alergi.
30 | T I P S W E B D E S I G N | U S A B I L I T Y
USABILITY : Desain yang Brilian
Usability terus berkembang seiring dengan pengalaman pengunjung dalam berinteraksi dengan
situs. Di samping itu, perkembangan teknologi yang semakin maju juga sangat berpengaruh,
sehingga muncul istilah accesibility, yang berarti bahwa halaman web harus bisa dipakai oleh setiap
orang, baik anak-anak, tua dan muda. Halaman web harus dapat ditampilkan oleh semua
komputer, browser, platform, sistem operasi, plug-in, dan lain-lain. Jadi, halaman web dapat
terlihat bagus pada komputer Macintosh maupun PC, browser Internet Explorer atau Netscape,
monitor dengan resolusi 800x600 atau 1024x768, dan sebagainya.
31 | T I P S W E B D E S I G N | U S A B I L I T Y
S I A P T A Y A N G
Siap
Tayang
Saatnya mempertontonkan
situs Anda kepada dunia.
Berikut cara terbaik untuk
mempromosikannya dan
menarik perhatian banyak orang.
Pada akhir tahun 1990-an, ketika Anda
menguasai dasar-dasar HTML, Anda dapat
membujuk insvestor untuk menghabiskan banyak
uang untuk Anda. Demikianlah optimisme yang
timbul pada dunia internet yang baru berkembang
saat itu.
Posisi desainer web sedang naik daun kala itu.
Dengan pengetahuan dan keahliannya, mereka bisa
mengeruk penghasilan yang lumayan besar. Urusan
online memang baru menjadi primadona.
Meskipun demikian, e-enterpreneur tidaklah
segampang dan seoptimistik yang kita bayangkan.
32 | T I P S W E B D E S I G N | U S A B I L I T Y
S I A P T A Y A N G
Web hanyalah sebuah alat bantu untuk melakukan
bisnis. Membuat situs web yang berhasil pun bisa
dibilang setara dengan mengembangkan bisnis
secara offline. Diperlukan perhatian yang besar
untuk memastikan Anda membuat sesuatu yang
dapat memenuhi kebutuhan, dan dapat menarik
minat orang-orang untuk mengunjunginya.
Jika Anda membangun sendiri situs yang patut
mendapat perhatian, maka Anda harus
mengimplementasikan strategi promosi terstruktur.
Di sini, dijelaskan beberapa langkah sederhana
untuk menjadikan situs Anda menarik dan
selanjutnya bisa menjadi mesin uang bagi Anda.
Menentukan Nama
Membuat situs mirip dengan melahirkan
seorang bayi. Salah satu yang perlu Anda lakukan
setelah bayi itu lahir ke dunia, adalah memberikan
nama yang cocok.
Nama domain yang mudah diingat tentu
menjadi nilai plus untuk menarik pengunjung. Jadi
coba deh Anda pikirkan masak-masak tentang nama
tersebut.
Sebisa mungkin nama tersebut mencerminkan
situs atau bisnis Anda. Menamai situs sesuai nama
domain-nya merupakan cara yang tepat.
Pengunjung akan lebih mudah mengingat alamat
situs Anda.
Mendapatkan domain sendiri, yang
menggunakan akhiran com, tentulah butuh biaya.
Mahal atau tidaknya, itu relatif. Namun kalau Anda
tak ingin yang berbayar, carilah paket hosting yang
menawarkan domain gratis.
Memilih Host
Tawaran web hosting gratisan memang
menggiurkan. Janganlah terjebak oleh iming-iming
layanan gratis, karena hal itu seringkali tidak handal.
Untuk keperluan yang lebih serius, Anda perlu
melanggani host yang cepat dan menyediakan
fasilitas pembayaran yang aman. Pastikan pula
33 | T I P S W E B D E S I G N | U S A B I L I T Y
S I A P T A Y A N G
bahwa layanan tersebut didukung teknologi
scripting terbaru.
Jika Anda khawatir hanya akan mendapatkan
paket hosting di bawah standar, periksalah
kontraknya sebelum mendaftar. Beberapa host
memperbolehkan Anda menghentikan kontrak
kapan pun. Ini berarti Anda tidak perlu harus
meneruskan pemakaian layanan yang tidak Anda
senangi.
Mendapatkan Peringkat lebih Tinggi
Begitu Anda telah menetapkan nama dan
mantap dengan situs Anda, kini saatnya Anda
menyebarluaskannya. Tempat terbaik agar situs
Anda diperhatikan di web adalah meletakkannya
pada mesin pencari (search engine), karena di
sinilah orang-orang mulai meminta informasi online.
Dengan membuat situs Anda tercantum
setinggi mungkin pada mesin pencari yang populer,
kemungkinan besar Anda akan mampu menarik
perhatian banyak orang. Pasalnya, content yang
Anda tawarkan bakal relevan dengan yang mereka
cari.
Dengan milyaran halaman di internet, Anda tak
bisa berharap banyak pada situs-situs pencari
sepertiGoogle, Alta Vista dan Ask Jeeves, apalagi
memberikan tingkat expose yang memadai untuk
situs Anda. Hasil dari suatu pencarian biasanya
sangat banyak, dan yang paling relevan dari yang
dicari paling-paling hanya 10 biji. Inilah yang muncul
di halaman pertama hasil pencarian.
Makanya, sangatlah penting untuk
mengoptimalkan situs Anda, supaya dapat muncul
di bagian awal di halaman depan. Ada sejumlah
taktik yang dapat Anda terapkan untuk itu.
Anda harus menggunakan tag Meta untuk
menyisipkan keyword target secara strategis ke
dalam halaman web Anda, agar automated crawler
yang digunakan oleh mesin pencarian
mengambilnya. Setelah Anda menentukan keyword,
maka keyword ini harus muncul pada lokasi penting
di halaman Anda.
Sebagian besar mesin pencari
utama menggunakan analisis link
sebagai bagian dari sistem penentuan
peringkat. Cara ini berguna bagi
mereka untuk memutuskan halaman
mana yang cocok untuk topik tertentu.
34 | T I P S W E B D E S I G N | U S A B I L I T Y
S I A P T A Y A N G
Halaman yang dihubungkan
oleh situs yang berperingkat
tinggi kemungkinan besar akan
diminati pengunjung. Jadi, mesin
pencarian akan memberi perhatian lebih padanya.
Kunjungilah mesin pencarian utama untuk
melakukan pencarian bagi keyword target Anda.
Perhatikanlah halaman yang muncul pada bagian
atas hasil pencarian. Kunjungi halaman ini dan
mintalah pemilik situs untuk membuat link ke situs
Anda. Mereka mungkin menyetujui permintaan
Anda, khususnya jika sebagai imbalannya Anda
setuju untuk membuat link ke situsnya.
Dalam upaya untuk mendaftarkan situs Anda,
Anda dapat menggunakan perangkat lunak seperti
Axandra (www.axandra.com), TrafficSeeker
(www.trafficseeker.com) atau Netrics
(www.netrics.com); atau daftarkan pada
perusahaan yang mengkhusus diri melakukan hal
ini, seperti www.businessnet.freesavers.com.
Dengan banyaknya mesin pencarian besar
seperti Google, Lycos dan Yahoo!, Anda perlu
mengajukan halaman Anda secara manual. Isilah
detail tentang situs Anda pada mesin pencari itu.
Anda juga boleh mempertimbangkan link
bersponsor, seperti layaanan “AdWords” Google. Ini
dimaksudkan agar halaman Anda tercantum pada
bagian utama mesin pencarian. Anda harus
membayar untuk setiap klik (pay-per-click basis).
Menyebar Berita
Membuat pengunjung datang ke situs Anda
adalah satu hal, membuat mereka kembali lagi
adalah hal lain. Asalkan Anda memiliki situs dinamis
yang di-update secara teratur, Anda dapat membuat
pelanggan Anda kembali dan melihat content baru.
Anda dapat menggunakan iklan berbasis web
untuk meningkatkan
awareness terhadap
brand (merek) Anda.
Tetapi, banner dan pop-
up cenderung menjeng-
kelkan pengguna.
Untuk itu, sebaiknya
Anda mencoba merumuskan
metode untuk menjangkau
pelanggan.
Salah satu cara untuk
menyampaikan pesan Anda secara pribadi ke
35 | T I P S W E B D E S I G N | U S A B I L I T Y
S I A P T A Y A N G
target-target tertentu adalah langsung
menyampaikan content ke inbox pengguna melalui
commercial newsletter atau melalui media social
networking semisal facebook atau twitter.
Mempersiapkan Keberhasilan
Anda perlu berbincang dengan para pelanggan
secara teratur, agar mereka tahu tentang perkem-
bangan terbaru situs Anda. Dan, doronglah mereka
untuk menyebarluaskannya kepada teman-
temannya.
Bergabunglah dengan forum tempat berkumpulnya
para pelanggan potensial, dan bangun reputasi
Anda dengan memajang pesan bantuan dan
dukungan, dengan meninggalkan link ke situs Anda
setiap kali Anda memajang pesan. Jika ini adalah
komunitas yang sedang berkembang, berita ini akan
segera tersebar dan Anda akan berhasil meraih
perhatian pengunjung.
Bila situs Anda sudah menjadi terkenal jangan-
lah terburu berpuas diri. Kunci keberhasilan situs
terletak pada upaya mendengarkan para pelanggan
dan mengembangkan situs Anda, sesuai dengan
kebutuhan yang terus berubah.
Hanya karena Anda telah membangun situs
hebat, yang tampaknya akan banyak dilirik orang,
jangan anggap ini akan berlangsung seterusnya.
Anda harus terus memperbaharui content dan
desain halaman Anda, karena inilah yang
membedakan antara sukses sesaat dan sukses
online yang berkesinambungan.
36 | T I P S W E B D E S I G N | U S A B I L I T Y
S I A P T A Y A N G
Nama : Search Engine Watch
URL : www.searchenginewatch.com
Situs ini ideal bagi Anda yang ingin mencari tahu
seluk beluk mesin pencarian (search engine) dan
memuat panduan lengkap untuk mendapatkan
peringkat setinggi mungkin pada mesin pencari
utama.
Nama : Zeus Internet Marketing Robot
URL : www.cyber-robotics.com
Bertukar link dengan situs-situs web serupa dan
langsung melonjak ke puncak daftar halaman hasil
pencarian. Situs ini mengotomasi proses
perdagangan link, membantu Anda untuk
menjangkau banyak orang dengan usaha seminimal
mungkin.
37 | T I P S W E B D E S I G N | U S A B I L I T Y
Penutup
khirnya, semuanya tetap berpulang pada internet
itu sendiri karena internet adalah komunikasi antar
individu. Ini tentang pertukaran informasi, ide,
pemikiran, pengalaman dan berbagai peristiwa.
Dengan mengetahui aturan dari desain web,
setiap orang dapat berkomunikasi dengan baik,
menyampaikan berbagai pesan dan berinteraksi
dengan banyak orang (komunitas). Perhatikanlah
kebutuhan dan kebiasaan pengunjung tersebut
(memandang dari kacamata pengunjung). Ada
empat hal untuk mewujudkannya, yaitu
komunikasi, isi (content), konsistensi dan kontras.
Informasi lebih lanjut tentang usability pada
desain web dan contoh buruk desain web dapat
Anda peroleh setidaknya di alamat-alamat berikut
ini :
 www.useit.com
 www.webpagesthatsuck.com
 www.usableweb.com
 http://usability.gov/guidelines/
 http://ijhcs.open.ac.uk/
A
Usability

More Related Content

Viewers also liked (7)

Membangun jaringan komputer
Membangun jaringan komputerMembangun jaringan komputer
Membangun jaringan komputer
 
Unidad 2: Dimensiones de la Logistica
Unidad 2: Dimensiones de la LogisticaUnidad 2: Dimensiones de la Logistica
Unidad 2: Dimensiones de la Logistica
 
Derecho romano ii
Derecho romano iiDerecho romano ii
Derecho romano ii
 
Glaciares en el Mundo
Glaciares en el MundoGlaciares en el Mundo
Glaciares en el Mundo
 
Цалин хэрхэн боддог вэ?
Цалин хэрхэн боддог вэ?Цалин хэрхэн боддог вэ?
Цалин хэрхэн боддог вэ?
 
Marc 21
Marc 21Marc 21
Marc 21
 
Unidad 4 almacenes e inventarios
Unidad 4 almacenes e inventariosUnidad 4 almacenes e inventarios
Unidad 4 almacenes e inventarios
 

Similar to Usability

Slide pengajaran asas grafik
Slide pengajaran asas grafikSlide pengajaran asas grafik
Slide pengajaran asas grafikFathdzelly Jaya
 
Panduan mengenaldesaingrafis readandshare
Panduan mengenaldesaingrafis readandsharePanduan mengenaldesaingrafis readandshare
Panduan mengenaldesaingrafis readandshareGilang Creative Center
 
52402201 tutorial-desain-grafis-lengkap
52402201 tutorial-desain-grafis-lengkap52402201 tutorial-desain-grafis-lengkap
52402201 tutorial-desain-grafis-lengkapGodamt Sutandi
 
Desain Grafis 5 - Good Graphic Design
Desain Grafis 5 - Good Graphic DesignDesain Grafis 5 - Good Graphic Design
Desain Grafis 5 - Good Graphic DesignNur Fadli Utomo
 
Teknologi Pendidikan-Asas Grafik
Teknologi Pendidikan-Asas GrafikTeknologi Pendidikan-Asas Grafik
Teknologi Pendidikan-Asas Grafikartventure ipkt
 
Layout media cetak dan digital (Materi Workshop LPMN)
Layout media cetak dan digital (Materi Workshop LPMN)Layout media cetak dan digital (Materi Workshop LPMN)
Layout media cetak dan digital (Materi Workshop LPMN)Happy Prasetiya
 
The Principles Of Design Presentation (1).pptx
The Principles Of Design Presentation (1).pptxThe Principles Of Design Presentation (1).pptx
The Principles Of Design Presentation (1).pptxAqomaInamorta
 
2021 - PRINSIP DASAR DAN UNSUR DESAIN.pptx
2021 - PRINSIP DASAR DAN UNSUR DESAIN.pptx2021 - PRINSIP DASAR DAN UNSUR DESAIN.pptx
2021 - PRINSIP DASAR DAN UNSUR DESAIN.pptxtanpanama790353
 
MEMBUAT PPT YANG MENARIK.pptx
MEMBUAT PPT YANG MENARIK.pptxMEMBUAT PPT YANG MENARIK.pptx
MEMBUAT PPT YANG MENARIK.pptxGezaPramanta
 
Prinsip Dasar WebSite dalam Mendesain Web
Prinsip Dasar WebSite dalam Mendesain WebPrinsip Dasar WebSite dalam Mendesain Web
Prinsip Dasar WebSite dalam Mendesain WebSuparno20
 
E-Site DESIGN
E-Site DESIGNE-Site DESIGN
E-Site DESIGNjojonael
 
Prinsip dan Elemen Dasar dalam Desain Grafis
Prinsip dan Elemen Dasar dalam Desain GrafisPrinsip dan Elemen Dasar dalam Desain Grafis
Prinsip dan Elemen Dasar dalam Desain GrafisBambang Herlandi
 
persentasi melalui power point
persentasi melalui power pointpersentasi melalui power point
persentasi melalui power pointfitriafadhilahh
 
Media Pembelajaran RI 4.0 Universitas Negeri Medan Prodi PTO
Media Pembelajaran RI 4.0 Universitas Negeri Medan Prodi PTOMedia Pembelajaran RI 4.0 Universitas Negeri Medan Prodi PTO
Media Pembelajaran RI 4.0 Universitas Negeri Medan Prodi PTONurBasuki5
 
Materi DDG-UNSUR TATA LETAK PADA DESAIN GRAFIS.ppt
Materi DDG-UNSUR TATA LETAK PADA DESAIN GRAFIS.pptMateri DDG-UNSUR TATA LETAK PADA DESAIN GRAFIS.ppt
Materi DDG-UNSUR TATA LETAK PADA DESAIN GRAFIS.pptMtsAlJauhar
 

Similar to Usability (20)

Slide pengajaran asas grafik
Slide pengajaran asas grafikSlide pengajaran asas grafik
Slide pengajaran asas grafik
 
Panduan mengenaldesaingrafis readandshare
Panduan mengenaldesaingrafis readandsharePanduan mengenaldesaingrafis readandshare
Panduan mengenaldesaingrafis readandshare
 
52402201 tutorial-desain-grafis-lengkap
52402201 tutorial-desain-grafis-lengkap52402201 tutorial-desain-grafis-lengkap
52402201 tutorial-desain-grafis-lengkap
 
Desain Grafis 5 - Good Graphic Design
Desain Grafis 5 - Good Graphic DesignDesain Grafis 5 - Good Graphic Design
Desain Grafis 5 - Good Graphic Design
 
Teknologi Pendidikan-Asas Grafik
Teknologi Pendidikan-Asas GrafikTeknologi Pendidikan-Asas Grafik
Teknologi Pendidikan-Asas Grafik
 
Layout media cetak dan digital (Materi Workshop LPMN)
Layout media cetak dan digital (Materi Workshop LPMN)Layout media cetak dan digital (Materi Workshop LPMN)
Layout media cetak dan digital (Materi Workshop LPMN)
 
The Principles Of Design Presentation (1).pptx
The Principles Of Design Presentation (1).pptxThe Principles Of Design Presentation (1).pptx
The Principles Of Design Presentation (1).pptx
 
Jual poster
Jual posterJual poster
Jual poster
 
2021 - PRINSIP DASAR DAN UNSUR DESAIN.pptx
2021 - PRINSIP DASAR DAN UNSUR DESAIN.pptx2021 - PRINSIP DASAR DAN UNSUR DESAIN.pptx
2021 - PRINSIP DASAR DAN UNSUR DESAIN.pptx
 
Ui designer 101
Ui designer 101Ui designer 101
Ui designer 101
 
Web desain
Web desainWeb desain
Web desain
 
MEMBUAT PPT YANG MENARIK.pptx
MEMBUAT PPT YANG MENARIK.pptxMEMBUAT PPT YANG MENARIK.pptx
MEMBUAT PPT YANG MENARIK.pptx
 
Prinsip Dasar WebSite dalam Mendesain Web
Prinsip Dasar WebSite dalam Mendesain WebPrinsip Dasar WebSite dalam Mendesain Web
Prinsip Dasar WebSite dalam Mendesain Web
 
E-Site DESIGN
E-Site DESIGNE-Site DESIGN
E-Site DESIGN
 
Tik
TikTik
Tik
 
Prinsip dan Elemen Dasar dalam Desain Grafis
Prinsip dan Elemen Dasar dalam Desain GrafisPrinsip dan Elemen Dasar dalam Desain Grafis
Prinsip dan Elemen Dasar dalam Desain Grafis
 
persentasi melalui power point
persentasi melalui power pointpersentasi melalui power point
persentasi melalui power point
 
Media Pembelajaran RI 4.0 Universitas Negeri Medan Prodi PTO
Media Pembelajaran RI 4.0 Universitas Negeri Medan Prodi PTOMedia Pembelajaran RI 4.0 Universitas Negeri Medan Prodi PTO
Media Pembelajaran RI 4.0 Universitas Negeri Medan Prodi PTO
 
Materi DDG-UNSUR TATA LETAK PADA DESAIN GRAFIS.ppt
Materi DDG-UNSUR TATA LETAK PADA DESAIN GRAFIS.pptMateri DDG-UNSUR TATA LETAK PADA DESAIN GRAFIS.ppt
Materi DDG-UNSUR TATA LETAK PADA DESAIN GRAFIS.ppt
 
14198589.ppt
14198589.ppt14198589.ppt
14198589.ppt
 

Usability

  • 1.
  • 2. USABILITY Desain Website dari Sudut Pandang Man-Machine Interface as3pupun
  • 3. 1 | T I P S W E B D E S I G N | U S A B I L I T Y PENGANTAR ekedar coba-coba, mungkin itulah alasan pembuat situs amatiran. Kalau bagus, ya diteruskan. Jika sebaliknya, mungkin ditinggalkan. Maklum, jika tanpa panduan, membuat situs web bisa makan waktu lebih dari seminggu, sebulan, atau bahkan tak terselesaikan. Semestinya hal semacam itu tak perlu terjadi. Apalagi sekarang banyak bertebaran tutorial/ebook tentang website di internet. Anda bisa mempraktikan langsung cara mendesain web, membuat halaman template, bikin toko online, sampai menayangkan web Anda di internet. Harapan saya, ebook ini bisa menambah wawasan Anda, sehingga Anda bisa mewujudkan membangun website dengan hasil yang hebat. S Tank’s to : Puji syukur ke hadirat Allah SWT yang telah memberikan kekuatan bagi terwujudnya buku ini. Sholawat serta salam kepada Nabi Muhammad SAW yang telah membawa Islam ke muka bumi. Sehingga menjadi Islam sebagai semangat bagi hamba-hamba yang beriman untuk selalu berkarya. Orang tua, Anak (Ahmad Riyad Firdaus) dan Istri (Ai Yuliyawantini) tercinta yang senantiasa memberikan perhatian, kasih sayang dan doanya dalam setiap langkahku. Anda diperbolehkan untuk memberikan buku elektronik ini kepada siapa saja, selama anda tidak mengubah/mengedit isinya dan format digitalnya. Anda dapat men-donlot ebook ini di http:// punpage.blogspot.com as3pupun
  • 4. 2 | T I P S W E B D E S I G N | U S A B I L I T Y Siap Tayang Saatnya mempertonton- kan situs Anda kepada dunia. Berikut cara terbaik untuk mempromosikan- nya dan menarik perhatian banyak orang. Prinsip-Prinsip Desain Web  Seni Desain Cantik  Keseimbangan  Kontras  Konsistensi  Ruang Kosong Desain Web nan Hebat & Memikat Ada cara yang tak sulit untuk menjadikan situs web Anda menarik, sehingga pengunjung betah berlama-lama di dalamnya. USABILITY : Desain yang Brilian Penutup Dasar-dasar Desain Web  Warna  Tipografi  Bentuk  Layout (Tata Letak) Pendahuluan desain website yang semakin lama semakin mudah dibuat dan menarik karena fasilitas perangkat lunak yang semakin bagus dan …
  • 5. 3 | T I P S W E B D E S I G N | U S A B I L I T Y PENDAHULUAN esain website yang semakin lama semakin mudah dibuat dan menarik karena fasilita sperangkat lunak (software) yang semakin bagus dan bermacam- macam belum tentu dapat menarik banyak pengunjung, atau memikat pengunjung sehingga mau kembali ke situs tersebut. Faktor informasi yang ditawarkan (content) jelas merupakan faktor terpenting, akan tetapi ada faktor-faktor lain yang seringkali lupa dipertimbangkan pada saat mendesain suatu website. Website yang baik juga harus di desain berdasarkan prinsip interaksi manusia-komputer (man-machine interface) yang benar. Tulisan ini menyajikan beberapa prinsip desain website yang penting untuk diperhatikan dari sudut pandang tersebut. D
  • 6. 4 | T I P S W E B D E S I G N | U S A B I L I T Y P R I N S I P - P R I N S I P D E S A I N W E B Seni Desain Cantik Desain yang bagus adalah hasil kreasi seni yang tinggi. Seni adalah salah satu cara bago seseorang untuk berkomunikasi dan mengekspresikan dirinya. Seni memerlukan keretampilan (skill/bakat), pengetahuan tentang estetika, dan kemampuan untuk berkomunikasi. Estetika adalah kenyamanan bagi pengguna secara visual. Estetika merupakan keindahan dan kecantikan dalam suatu desain. Untuk menjiwai estetika memerlukan latihan dan perjuangan. Semua seni pada dasarnya harus dapat berkomunikasi, karena setap pemilihan baik itu warna, bentuk, tata letak dan lainnya, semuanya mempunyai arti yang berbeda yang akan mempengaruhi sebuah produk yang dihasilkan. Prinsip atau pegangan utama sebuah desain adalah kualitas atau karakteristik bawaan dalam berbagai bentuk seni, seperti keseimbangan, keserasian, kontras,konsistensi, variasi, ruang kosong dan gerak. Prinsip ini biasanya dipakai pada desain untuk menghasilkan desain yang baik dan efektif, walaupun tidak harus semuanya digunakan. Keseimbangan Sebuah objek yang tidak seimbang, tentulah tidak enak dipandangm seperti ada sesuatu yang kurang dan ganjil dalam objek tersebut. Misalnya pertarungan tinju antara Mike Tyson (kelas berat) melawan Mike Low (kelas ringan), tentu pertarungannya tidak menarik disaksikan, karena mungkin dengan sekali pukul Mike Low sudah KO tanpa perlawanan.
  • 7. 5 | T I P S W E B D E S I G N | U S A B I L I T Y P R I N S I P - P R I N S I P D E S A I N W E B Secara umum dapat didefinisikan, keseimbangan adalah hasil susunan satu atau lebih elemen dari desain yang sama antara yang satu dengan yang lainnya. Jika diperhatikan, setiap objek di alam mempunyai keseimbangan yang terstruktur, misalnya bentuk simetri pada bunga dan garis pada kulit rumah siput. Ada satu cara yang sederhana untuk menentukan keseimbangan elemen dalam suatu halaman, yaitu dengan membandingkan area yang satu dengan area lainnya, ini sangat membantu untuk menganalisa dan menentukan ruang dalam suatu area yang belum seimbang. Dengan cara ini, kita bisa melihat dengan jelas bobotnya dan menentukan intensitas dan posisinya sehingga mengetahui berapa ruang yang masih tersisa. Kontras Keberadaan kontras terlahir dari kombinasi yang saling bertolak belakang (berlawanan), seperti hidup-mati, terang-gelap, pria-wanita, baik-buruk, hitam-putih, dan sebagainya. Kontras dalam dunia desain adalah suatu prinsip yang mudah dipahami, yaitu dengan melihat dari dua objek yang berlainan, sehingga membuat kesan tampilan desain yang menonjol dan menarik perhatian. Pemberian kontras pada suatu objek haruslah kontras positif, karena jika kontras yang diberikan negatif, objek tersebut menjadi samar-samar atau tidak terlihat, terserap oleh backgroud, misalnya objek berwarna biru tua, background-nya berwarna hitam, apakah objek tersebut masih bisa terlihat dengan baik. Ketika sebuah halaman itu seimbang, elemen-eleman dan halaman menjadi satu kesatuan yang utuh, sehingga memudahkan pengunjung dalam membaca dan menikmati penjelajahannya dari halaman yang satu ke halaman lainnya.
  • 8. 6 | T I P S W E B D E S I G N | U S A B I L I T Y P R I N S I P - P R I N S I P D E S A I N W E B Konsistensi Jika kontras bisa membuat desain menjadi lebih menggairahkan, konsistensi dapat membuat pengunjung merasa nyaman seperti berada di rumah sendiri. Hal ini karena ketika pengunjung membuka suatu halaman situs yang konsisten, dia langsung tahu ke mana harus pergi mencari apa yang diinginkannya dengan cepat dan dia tahu berada di mana. Intinya, konsistensi membuat pengunjung menjelajahi situs dengan lebih mudah dan tidak membingungkan. Konsistensi dapat diterapkan pada margin, tata letak, huruf, warna dan terutama pada navigasi. Pengunjung situs bisa dibingungkan jika dihalaman utama navigasi diletakkan di kiri atas, tapi di halaman berikutnya di bagian bawah. Jadi, ketika membuat navigasi di bagian kiri atas halaman, seharusnya pada halaman-halaman lainnya juga diletakkan di bagian kiri atas, inilah yang disebut konsistensi. Dalam kasus lain, misalnya penggunaan huruf sebaiknya gunakan satu sampai tiga jenis saja, meskipun kita mempunyai ribuan jenis huruf dalam komputer kita. Begitu juga dengan warna, gunakan tiga sampai empat warna sudah cukup. Konsistensi biasanya sangat efektif digunakan untuk membangun brand suatu perusahaan. Misalnya, ketika melihat huruf M dengan warna kuning, apa yang ada dipikiran kita? Mc Donalds. Atau, ketika kita melihat buah apel dengan warna pelangi, itu adalah kepunyaan Apple Computer. Jadi, gunakanlah gambar (logo) dan tata letak yang sama pada setiap halaman, ini akan membantu pengunjung untuk mengingatnya. Ruang Kosong Ruang kosong biasanya disebut dengan ruang negatif, suatu istilah yang menggambarkan suatu ruang terbuka di antara elemen-elemen desain. Ini bisa ditemukan di antara kata, paragraf, huruf dari teks, bisa juga di antara gambar dan elemen di halaman web. Ini membantu dalam mengarahkan mata pembaca dari satu titik ke lainnya. Ruang kosong merupakan teknik tata letak yang penting, oleh karena tanpa jumlah ruang kosong yang memadai, maka teks tidak bisa terbaca dengan baik, gambar akan kehilangan keindahannya, dan elemen-elemen dalam halaman tersebut akan kehilangan keseimbangan. Terutama,
  • 9. 7 | T I P S W E B D E S I G N | U S A B I L I T Y P R I N S I P - P R I N S I P D E S A I N W E B ruang kosong akan membuat tata letak lebih menarik dengan menghilangkan “kegaduhan” pada halaman, mudah dibaca dan menambah kekuatan pesan yang ingin disampaikan.
  • 10. 8 | T I P S W E B D E S I G N | U S A B I L I T Y D A S A R - D A S A R D E S A I N W E B ada saat seseorang memasuki sebuah situs, kesan pertama sangatlah penting artinya. Cara paling jitu untuk menarik perhatian pengunjung adalah mengandalkan seorang desainer yang mampu menghadirkan desain yang baik.P
  • 11. 9 | T I P S W E B D E S I G N | U S A B I L I T Y D A S A R - D A S A R D E S A I N W E B Dasar dari desain yang baik setidaknya mencakup hal-hal berikut ini :  Tata letak (layout) yang rapi  Pewarnaan yang baik  Bentuk-bentuk yang menarik  Tipografi yang menarik  dan yang paling penting aksesnya cepat. Tata letak dapat digunakan untuk menata elemen-elemen dalam sebuah halaman agar lebih enak dilihat dan dibaca. Warna digunakan untuk penerangan dalam situs, informasi dan produk yang dimiliki. Tipografi (seni penggunaan huruf) digunakan untuk berkomunikasi dengan pengunjung. Bentuk digunakan untuk membentuk sebuah citra dan mengekspresikan sebuah informasi. Warna Warna adalah sebuah sensitivitas yang berhubungan dengan indera kita, seperti halnya rasa dan bau. Sensitivitas warna dihasilkan dari interaksi antara warna dengan indera sensitif warna yang ada pada kita.
  • 12. 10 | T I P S W E B D E S I G N | U S A B I L I T Y D A S A R - D A S A R D E S A I N W E B Penggunaan warna yang benar akan memberikan pengaruh yang kuat pada kejelasan pesan yang ingin disampaikan. Sebaiknya, pilihlah warna yang sesuai dengan tujuan situs yang di buat. Warna terdapat di sekeliling kita. Kemana pun kita pergi akan melihat dunia ini penuh warna. Dunia tanpa warna, maka hilanglah keindahannya. Warna dapat merebut perhatian kita, menarik, menolak, menggemaskan, bahkan warna bisa mempengaruhi emosi kita setiap saat. Peranan warna dalam mendesain web sangatlah penting, karena warna adalah hal yang pertama dilihat oleh pengunjung sebelum mereka mulai membaca isi dari situs. Jadi, warna merupakan elemen yang sangat penting untuk dipertimbangkan sebelum membuat situs, baik dari segi psikologi maupun dari segi kombinasi keserasian antara satu warna dengan warna yang lain. Tipografi Tipografi adalah seni dalam huruf yang meliputi pemilihan huruf, penentuan ukuran yang tepat, dimana teks dapat diputus, sepasi jarak, dan bagaimana teks dapat dengan mudah dibaca. Dalam desain web, huruf yang kita gunakan tidak bisa sembarangan dan seenaknya, karena kebanyakan ditentukan oleh web browser. Apabila huruf yang kita sediakan tidak tersedia di komputer 10
  • 13. 11 | T I P S W E B D E S I G N | U S A B I L I T Y D A S A R - D A S A R D E S A I N W E B pengunjung, akan merusak desain kita. Oleh karena itu, gunakanlah huruf yang standar (default), misalnya Times New Roman, Helvetica, Arial, dan lain-lain. Prinsip yang harus dipakai dalam tipografi adalah huruf atau teks yang ditampilkan harus mudah dibaca oleh pengunjung. Ada beberapa tips agar huruf dapat mudah dibaca dan enak dilihat, yaitu :  Buatlah kontras yang tinggi antara teks dengan background atau antara teks dengan gambar  Pilihlah jenis huruf yang mudah dibaca, biasanya jenis serif dan sans-serif  Aturlah spasi antar baris teks dan spasi antar huruf  Gunakanlah huruf standar yang terdapat pada semua komputer atau browser, seperti Times New Roman, Helvetica, Arial, dan Verdana Bentuk Elemen berikutnya yang digunakan untuk menarik perhatian pengunjung adalah bentuk. Penggunaan bentuk yang efektif akan memberikan motivasi, inspirasi, dan tantangan kepada pengunjung, walaupun ini terjadi tanpa disadari. Banyak bentuk yang dapat ditemukan dalam desain, tapi jika kita amati dengan seksama, hanya ada beberapa bentuk saja sebagai dasar dari bentuk-bentuk yang dibuat. Bentuk-bentuk dasar tersebut meliputi lingkaran, persegi/kotak dan segitiga. Apabila Anda sering memperhatikan dalam menggunakan program aplikasi pengolah grafik, bentuk-bentuk dasar ini pasti tersedia, dan dari bentuk dasar ini nanti akan terbentuk bentuk lainnya. Biasanya, bentuk dikombinasikan dengan bentuk lain untuk memberikan kesan yang kuat pada pengunjung, misalnya lingkaran dikombinasikan dengan segitiga menghasilkan kesan energik dan dinamik, atau lingkaran dikombinasikan dengan persegi menghasilkan kesan kehangatan dan kenyamanan.
  • 14. 12 | T I P S W E B D E S I G N | U S A B I L I T Y D A S A R - D A S A R D E S A I N W E B Layout (Tata Letak) Layout adalah proses penataan dan pengaturan teks atau grafik pada halaman. Teks atau grafik bisa ditempatkan di mana sajadengan berbagai cara. Namun, tata letak dan susunan yang baik dapat membuat halaman tampil lebih cantik dan seimbang, terutama enak dilihat dan mudah dibaca. Layout meliputi penyusunan, pembagian tempat dalam suatu halaman, pengaturan jarak spasi, pengelompokan teks dan grafik, dan penekanan pada suatu bagian tertentu. Sebagai catatan, yang terpenting dalam merancang tata letak gunakan prinsip keseimbangan, bagaimana suatu objek baik itu teks atau grafik dapat terlihat seimbang dalam sebuah halaman. Agar tidak terkesan terlalu monoton atau membosankan, gunakan keseimbangan asimetris.
  • 15. 13 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t Ada cara yang tidak sulit untuk menjadikan situs web Anda menarik, sehingga pengunjung betah berlama-lama di dalamnya.
  • 16. 14 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t Mengintip dan Meriset Ketika hendak membuat sebuah situs yang tidak untuk tujuan iseng, tentu Anda perlu merancangnya dengan lebih serius. Untuk itu, carilah sebanyak mungkin informasi untuk mematangkan gagasan Anda, sehingga hasilnya kelak sesuai dengan yang Anda impikan. Anda perlu menyediakan waktu untuk merumuskan dan menentukan tujuan situs Anda. Rasanya perlu juga untuk sedikit riset, setidaknya browsing di internet. Cari apa? Mencari situs-situs yang sekiranya serupa dengan yang ingin Anda kembangkan. Intiplah data-data semacam siapa yang menjadi target situs tersebut, bagaimana membuat kelompok demografis itu tertarik, dan sebagainya. Ketika tiba saatnya merancang desain situs Anda, ambilah secarik kertas dan pensil. Corat- coretlah, termasuk tulisan semua elemen yang hendak Anda sertakan dalam situs, seperti gambar, teks, animasi, sampai buku tamu. Juga pikirkan tentang navigasi yang mudah bagi pengunjung. Lalu, buatlah sketsa untuk setiap halaman web Anda, kemudian buatlah bagan yang menggambarkan alur serta keterkaitan antar halaman. Anda perlu merancangnya sedemikian rupa sehingga pengunjung tidak bingung ketika menjelajah. Kebutuhan untuk update di masa mendatang juga perlu Anda pikirkan sejak awal. Pastikan agar setiap elemen-elemen pada setiap halaman gampang di edit. Jika sudah terstruktur dengan baik, saatnya Anda menggabung- kan seluruh elemen dan ornamen lain yang diperlukan, seperti grafik, logo, database, teks, file, elemen flash dan lainnya. Kesemuanya itu tentu dibuat untuk menarik minat pengunjung situs. “Banyak desainer modern kelewat kreatif, membuat desain yang kadang-kadang rumit, mulai dari navigasi, teks sampai grafisnya. Maksudnya sih pamer kehebatan. Tapi apa gunanya hebat menurut diri sendiri, sementara pengunjung dibuat bingung?”
  • 17. 15 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t Grafik dan Desain Setelah merinci semuanya, kini saatnya Anda bermain-main dengan elemen visual. Membuat desain yang tepat juga bisa lumayan menguras pikiran. Yang paling penting adalah bagaimana membuat pengunjung terkesan pada tampilan situs Anda, ketika petama kali membukanya. Kemudian, bagaimana membuat mereka betah menjelajah di dalamnya. Ketika memikirkan layout halaman secara keseluruhan, Anda perlu mempertimbangkan empat komponen inti suatu situs, yaitu isi, bentuk, fungsi dan tujuan. Seimbangkan keempatnya, maka Anda akan memperoleh situs yang menarik. Banyak desainer modern kelewat kreatif, membuat desain yang kadang-kadang rumit, mulai dari navigasi, teks sampai grafisnya. Maksudnya sih pamer kehebatan. Tapi apa gunanya hebat menurut diri sendiri, sementara pengunjung dibuat bingung? Tetaplah berprinsip sederhana dan demi kepentingan pengunjung situs. Sekali lagi, galilah info atau data sebanyak mungkin untuk memperkaya tampilan dan isi situs Anda. Jangan ragu untuk melihat-lihat karya seni dari berbagai sumber, seperti situs, majalah, galeri seni, dan sebagainya. Batasan Desain Bagi para pemula, Anda perlu memperhatikan ukuran kanvas. Ingatlah bahwa situs Anda dapat diamati pada berbagai ukuran monitor mulai dari PDA hingga tampilan jumbo. Tidak mungkin kita dapat membuat situs yang tampil menarik pada semua browser untuk semua resolusi. Salah satu cara mengatasi masalah ini adalah menggunakan ukuran layar relatif dengan memakai tag <TABLE WIDTH = “100%”>, yang akan mengecilkan teks agar dapat masuk seluruhnya ke suatu halaman. Jika ragu, coba gunakan situs pemeriksa ukuran browser seperti www.applythis.com/browsersizer atau www.codo.com/browserola. Perbedaan utama lainnya antara desain web dengan desain tradisional adalah Anda dibatasi oleh palet warna. Agar warna tampil secara benar pada PC atau Mac, Anda harus tetap menggunakan 256 web-safe colours. Untungnya, pada program seperti
  • 18. 16 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t  Tips dari Pakar OLI SHAW, DEVELOPER SENIOR DI NOWWASHYOUR- HANDS (WWW.NOWWASHYOURHANDS.COM), MEMBERI SARAN TENTANG MERANCANG NAVIGASI HALAMAN WEB YANG EFEKTIF. “Ada beberapa pertanyaan mendasar yang harus Anda tanyakan pada diri sendiri sebelum memulai menyiapkan content atau memprogram halaman. Mula-mula, Anda harus menentukan untuk apa situs tersebut – apakah ini halaman pribadi, atau dimaksudkan untuk menyediakan informasi atau layanan? Lalu tentukan siapa yang akan menggunakannya, dengan mengira-ngira apa yang pengguna akan lakukan pada halaman ini. Mungkin hal terpenting yang harus dipikirkan adalah navigasi. Tiga pertanyaan yang harus Anda jawab dilihat dari sudut pandang pengguna adalah : di mana saya saat ini, dimana saya sebelumnya, dan ke mana saya akan melangkah? Harus ada sesuatu yang dapat memberitahu penggun di mana mereka saat itu pada suatu situs, dan sebaiknya pengguna juga perlu tahu bagian situs yang telah dikunjunginya, dengan membuat link. Navigasi juga harus jelas menunjukkan kepada pengguna ke mana mereka selanjutnya.” Dreamweaver disertakan dengan color picker, yang membantu Anda dalam memilih warna agar bisa ditampilkan secara akurat. Ketika menggunakan image atau grafik pada situs, hal terpenting yang perlu Anda perhatikan adalah agar ukurannya tetap kecil. Jika besar, pengunjung pasti bosan menunggu loading gambar Anda sampai tampil penuh. Tentukan sendiri batas ukuran file sekitar 100 KB untuk setiap halaman, yang kira-kira sama dengan waktu tunggu 10 detik bila menggunakan modem 56K. Selalu gunakan grafik terkompresi dalam format JPEG, GIF atau PNG. Jika Anda perlu menggunakan gambar berukuran besar, setidaknya ingatkan pengunjung Anda tentang hal ini, dengan menambahkan link ke gambar tersebut yang menerangkan total ukuran file tersebut. Kemudahan Penggunaan dan Aksesibilitas Dengan menyuguhkan gambar (kecil) yang cepat tersaji dan memastikan bahwa browser apapun akan menampilkan secara benar, Anda telah melakukan sebagian hal menyangkut usability atawa kemudahan penggunaan.
  • 19. 17 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t Begitulah memang seharusnya situs. Ia mudah digunakan dan dijelajahi. Elemen-elemen lain yang perlu diperhatikan antara lain link, kontras antara teks dan latar belakang, minimalisasi penggulungan layar baik horizontal maupun vertikal, serta navigasi yang simpel dan mudah. “Pengguna tentulah lebih berpengalaman dalam menjelajah situs-situs lain, sehingga mereka pun menjadi punya standar dan ekspektasi terhadap performa sebuah situs”, tutur Nielsen. Aksebilitas juga menjadi jargon penting di antara para pengunjung web. Kemudahan di akses juga menjadi unsur penting dalam membangun situs seperti halnya usability, jangan sampai hal tersebut terabaikan. Anda harus selalu memastikan agar navigasi dan content pada situs Anda jelas dan sesederhana mungkin. Gunakan tag Alt untuk menambahkan keterangan pada semua gambar situs dan “Flash menjadi penting ketika menyangkut masalah content interaktif, dan sangat cocok untuk memainkan online gaming, animasi, dan elemen navigasi.
  • 20. 18 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t menghindari ketergantungan berlebihan pada elemen visual. Peselancar dengan gangguan penglihatan sering kali menggunakan perangkat lunak pembaca layar khusus atau browser suara untuk mengakses online content, dan perangkat ini akan memperhatikan teks pada halaman web. Sebaiknya menggunakan skema warna yang jelas seperti merah dan hijau agar dapat dilihat semudah mungkin oleh pengunjung yang menderita buta warna. Tentu saja, selain itu masih banyak yang perlu dilakukan agar situs dapat diakses, dan ada sejumlah situs bermanfaat yang membahas topik ini secara lebih detail. Jakob Nielsen telah mencurahkan kehidupan profesionalnya untuk mendidik para pengembang situs mengenai seluk- beluk usability dan Anda dapat membaca lebih banyak tentang teorinya pada situs www.useit.com. Situs lainnya yang patut dilihat, yaitu usability.gov/guidelines dan usableweb.com. Daya Pikat Kini Anda telah membuat situs yang terorganisasi dengan baik, terlihat indah, dan user-  Tips dari Pakar DR JAKOB NIELSEN DARI ORACLE MENJELASKAN TENTANG RESIKO KEHILANGAN PENGUNJUNG, BILA ANDA GAGAL MEMBUAT WEB YANG MUDAH DIJELAJAHI. □ “Jika situs Anda tidak user friendly, tentulah para pengunjung atau pengguna enggan berkunjung lagi. Mereka akan berpaling ke situs lain yang mereka temu- kan lewat search engine (mesin pencari). Penggunaan yang menurut Anda sudah begitu mudah, belum tentu demikian bagi pengguna. Bahkan bisa saja mereka merasa bahwa situs Anda sangat membingungkan. Keterangan yang menurut Anda sudah jelas, seringkali tetap tidak bisa dipahami oleh pengguna. Inilah yang kian memantapkan keputusan mereka untuk meninggalkan situs Anda. Makanya, yang perlu Anda perhatikan benar- benar adalah masalah kemudahan penggunaan. Bagaimana Anda bisa tahu desain situs Anda gampang digunakan oleh calon pengguna? Lakukan saja semacam tes. Mintalah beberapa pengguna yang representatif untuk menjelajah situs tersebut, setidaknya selama tiga hari. Amati dan lakukanlah evaluasi.” friendly. Pekerjaan selesai? Tunggu dulu. Anda perlu memikirkan cara agar para pengunjung mau kembali berkunjung. Dengan
  • 21. 19 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t demikian, situs Anda mesti punya semacam perekat, atau sebut saja daya pikat. Ini jelas berkaitan dengan masalah kandungan situs, yang membuat orang menjadi ketagihan untuk membukanya. Lantas seperti apa daya pikat itu? Barangkali agak panjang-lebar untuk menjabarkannya. Makanya, langsung saja Anda lihat dua contoh konkret situs yang berdaya pikat, yakni eBay (www.ebay.com) dan Friends Reunited (www.friendsreunited.com). Perekat pada keduanya adalah adanya content yang tak bisa dilewatkan oleh para pengunjungnya. Kerekatan juga bisa dipupuk sejak prosedur registrasi, lalu pengunjung dilibatkan dengan meminta mereka aktif berpartisifasi pada situs tersebut. Dapat pula dilakukan dari halaman Home dengan menyediakan buku tamu, ruang diskusi, dan forum online, sehingga menimbulkan adanya rasa kebersamaan pada situs Anda. Pengguna pun merasa dirinya menjadi bagian dari sesuatu yang istimewa
  • 22. 20 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t Menambah Interaktivitas Kandungan interaktif seperti game, suguhan multimedia, dan kuis juga dapat menjadi daya pikat situs Anda. Portal seperti Blueyonder (www.blueyonder.co.uk) bisa menjadi contoh yang baik untuk tipe content tersebut. Online game-nya bikin ketagihan dan sajian audio-video yang sungguh menarik, mampu membuat penonton singgah lebih lama. Tidaklah sulit untuk menyertakan unsur-unsur interaktif pada halaman situs Anda. Teka-teki dan kuis dapat disusun dengan menggunakan DHTML atau JavaScript. Flash menjadi hal pokok ketika menyangkut masalah isian interaktif, bahkan pengunjung pun bakal bisa dibuat terhibur. Panduan lebih lanjut tentang pemrograman untuk mengembangkan interaktivitas, silahkan kunjungi situs Flashkit (www.flashkit.com) atau Flash Zone (www.flashzone.org). Dan jangan lupa, aspek lain yang juga krusial pada suatu situs adalah orisinalitasnya. Ada tawaran informasi bru yang Anda sodorkan, sehingga netter merasa ada yang kurang bila tak mengunjungi situs Anda. Tanpa itu, situs canggih yang tercipta pun akan sia-sia.  Tips dari Pakar TODD YARD, PROGRAMMER FLASH TERKEMUKA DI EGO 7 (WWW.EGO7.COM) MENUANGKAN GAGASAN TENTANG PENTINGNYA MENAMBAHKAN INTERAKTIVITAS PADA HALAMAN ANDA. □ “Interaktivitas pengguna menjadi jantung web. Pada mulanya, web hanya menawarkan situs berbasis teks. Disertakannyahyperlink dalam bentuk teks merupakan satu langkah lebih maju ketimbang versi cetaknya. Dengan beragam opsi multimedia yang kini tersedia, Anda dapat menawarkan berbagai cara pada pengguna untuk berinteraksi, mencari tahu dan menjelajahi content Anda. Gunakan umpan balik grafik untuk menginformasi- kan pengguna tentang elemen interaktif, seperti status tombol yang bergulung. Sertakan suara sebagai bentuk umpan balik tambahan agar content tidak terlihat membosankan. Juga perlu dipertimbangkan pemakaian animasi untuk menerangkan elemen penting, atau untuk meminta keikutsertaan pengunjung. Web merupakan medium yang unik karena kemampuannya untuk berinteraksi dengan pengguna dan menyajikan banyak informasi. Jadi, manfaatkanlah dan berpikirlah melampaui kekangan yang dialami oleh medium lain.”
  • 23. 21 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t  Hindarilah Lima hal utama yang harus Anda hindari dalam mendesain web × Hindari judul menu yang tak jelas. Jangan gunakan kata-kata yang arti tidak jelas, dan selalu tempatkan teks pada latar belakang yang kontras. × Jangan semata-mata tergantung pada Flash sebagai bentuk navigasi. Selalu sertakan alternatif HTML pada apapun yang Anda sajikan yang memerlukan plug-in. × Jangan penuhi halaman web dengan gambar berukuran besar. Halaman mungkin akan terlihat bagus, tetapi waktu download menjadi kian lama. × Jangan membuat desain yang rumit. Mungkin Anda menganggap desain yang rumit itu menunjukan kepiawaian Anda, tapi apa gunanya bila pengunjung menjadi jengkel karenanya. × Ingatlah untuk selalu meng-update situs Anda. Jangan anggap bahwa hanya karena situs Anda terlihat bagus, pengunjung lantas mengabaikan kebaruan informasinya.
  • 24. 22 | T I P S W E B D E S I G N | U S A B I L I T Y D E S A I N W E B nan H e b a t & M e m i k a t Nama situs : eBay URL : www.ebay.com Jika Anda mencari situs yang dapat membuat pengunjung lengket padanya, maka eBay merupakan contoh yang sangat jelas. Di sini pengguna menjelajah untuk melihat barang yang dilelang pada pasar online terbesar di dunia, lalu kembali berulang kali untuk memeriksa penawaran yang mereka buat. Nama situs : RNIB URL : www.rnib.org.uk Dirancang khusus agar dapat diakses oleh mereka yang menderita gangguan penglihatan. Situs RNIB memeragakan bagaimana menyediakan content bagi semua pihak. Situs ini dioptimalkan untuk alat pembaca layar, dan pengguna dapat mengubah setelan browser untuk mengganti font, ukuran, style, dan warna. Nama situs : Google URL : www.google.com Untuk melihat navigasi situs sederhana terbaik, Anda hanya perlu mengamati mesin pencari favorit semua orang. Antarmuka Google merupakan bukti mengapa navigasi yang sederhana mempermudah pengguna. Nama situs : Atom Films URL : http://atomfilms.shockwave. com Penuh dengan interaktivitas. Atom Films mewakili contoh bagaimana begitu banyak elemen flash dan content multimedia dapat digunakan untuk memikat para pengunjung. Bentuk webnya mudah dijelajahi, bersahabat pula dalam hal bandwidth-nya.
  • 25. 23 | T I P S W E B D E S I G N | U S A B I L I T Y USABILITY : Desain yang Brilian stilah usability ditemukan oleh Jakob Nielsen, yang sekarang disebut-sebut Bapaknya usability. Di dalam situsnya (www.useit.com), usability didefinisikan sebagai suatu pengalaman pengguna dalam berinteraksi dengan aplikasi atau situs web sampai pengguna dapat mengoperasikannya dengan mudah dan cepat. Dalam dunia web, usability lebih mengacu pada desain web itu sendiri, yaitu desain dari situs tersebut harus memenuhi lima syarat untuk mencapai tingkat usability yang ideal, antara lain :  Mudah untuk dipelajari Agar mudah dipelajari, letakkan isi yang paling penting pada bagian atas halaman, sehingga pengunjung dapat melihat apa yang mereka cari dengan cepat. Pelajarilah kemungkinan- kemungkinan tentang kebiasaan pengunjung, mengapa mereka berada di situs Anda dan apa yang mereka cari. Jangan sampai membuat pengunjung bingung dan menebak apa yang harus mereka lakukan ketika berada di situs Anda.  Efisiensi dalam penggunaan Situs yang efisien dapat menyajikan informasi dengan cepat. Jangan membuat link yang terlalu I
  • 26. 24 | T I P S W E B D E S I G N | U S A B I L I T Y USABILITY : Desain yang Brilian banyak, sediakan seperlunya dan hantarkan pengunjung untuk mencapai informasi yang mereka perlukan dengan mudah dan cepat.  Mudah untuk diingat Agar mudah diingat, sebuah situs sebaiknya jangan terlalu banyak melakukan perubahan- perubahan yang mencolok. Misalnya, pada navigasi, jangan terlalu sering melakukan penggantian tampilannya, pengunjung nanti akan perlu waktu untuk menyesuaikan dan mempelajarinya kembali.  Tingkat kesalahan rendah Jangan sampai ada link yang tidak berfungsi (broken link) atau halamannya masih dalam proses pembuatan (under construction). Sebaiknya, periksalah kembali link-link yang tidak bisa berfungsi dengan baik dan jangan cantumkan link tersebut jika belum ada isinya, karena ketika menemukan halaman yang kosong, mereka bisa kecewa.  Kepuasan pengguna Kepuasan adalah hal yang paling penting diinginkan oleh setiap pengguna, situs dapat dengan mudah digunakan dan dipelajari, pengguna dapat menemukan apa yang mereka cari dengan cepat, mengetahui dimana mereka berada dan bisa pergi ke mana saja dalam sebuah situs, dan dapat dengan mudah memberitahukan situs tersebut kepada teman- teman mereka. Pentingkah Usability dalam Desain Web? Usability penting dalam desain web. Mengapa? Mungkin banyak situs yang terlihat bagus, tapi kalau memerlukan waktu yang lama untuk menampilkannya atau terlalu sulit dipahami, tentunya pengunjung akan kabur dan pindah ke situs lainnya. Ini jelas sangat merugikan, karena akan menurunkan dan mengurangi pesan penting, produk, pelayanan dan terutama konsumen. Jadi, pengunjung hanya ingin mencari informasi yang mereka butuhkan, jika mereka tidak menemukannya dengan mudah dan cepat, mereka akan mencarinya di situs lain. Desain web yang bagus bukan hanya tentang situs web yang cantik, tapi juga tentang cara untuk dapat berkomunikasi dengan pengunjung, itulah tujuannya. Jika Anda mau memikirkan tentang
  • 27. 25 | T I P S W E B D E S I G N | U S A B I L I T Y USABILITY : Desain yang Brilian usability sebelum memulai mendesain proyek desain yang baru, dan memasukkannya ke dalam desain di tingkat pengembangannya, keduanya akan terlihat bagus dan mudah dioperasikan. Perhatikanlah pengunjung terlebih dahulu, karena kebanyakan pengunjung akan memperhatikan betapa bagusnya suatu situs kalau mereka tidak membuang-buang waktu untuk mempelajarinya dengan rumit. Di sisi lain, suatu situs yang di desain dengan jelek akan mengakibatkan :  Frustasi, karena pengunjung menunggu terlalu lama akses sebuah situs.  Bingung, karena pengunjung hanya bisa menebak di mana mereka berada dan mau ke mana, disebabkan sistem navigasi yang rumit.  Kabur atau pergi dan memilih ke situs yang lain.  Parahnya lagi, jika mereka memberitahukan kepada orang lain bahwa betapa jeleknya situs Anda. Tips Usability Usability memang penting, namun yang perlu diingat dan diperhatikan adalah untuk siapa Anda membuat situs? Siapa target pengunjungnya? Apa tujuan dari situs Anda? Semuanya tetap berpulang pada pertimbangan-pertimbangan tersebut karena untuk memenuhi semua syarat usability sangat sulit. Berikut ini ada beberapa tip yang dapat membantu sebuah situs untuk mencapai tingkat usability, yaitu: 1. Navigasi Navigasi merupakan aspek yang paling penting dalam mendesain web, pengunjung dapat melakukan interaktivitas. Navigasi dapat membantu pengunjung untuk menemukan jalan yang mudah ketika menjelajahi sebuah situs web, memberitahu di mana mereka berada, ke mana mereka bisa pergi, sehingga mereka dapat menemukan apa yang mereka cari dengan cepat dan mudah. Berikut ini ada beberapa tip untuk membuat navigasi yang baik, yaitu :  Buatlah navigasi yang jelas dan ringkas.  Umumnya navigasi diletakkan di sebelah kiri atau di atas dari sebuah halaman web.  Navigasi bisa berbentuk teks atau grafik. Apabila navigasi berbentuk grafik sertakan pula teks pada grafik tersebut.  Beri sedikit ruang dan jarak antar navigasi, jangan terlalu rapat.
  • 28. 26 | T I P S W E B D E S I G N | U S A B I L I T Y USABILITY : Desain yang Brilian  Hindari pemakaian frame untuk navigasi, karena kebanyakan menimbulkan link yang tidak berfungsi dan membuat desain terlihat statis.  Jaga konsistensi. Letakkan pada tempat yang sama di tiap halaman, gunakan warna yang sama, dan tempatkan pada tempat yang mudah untuk di lihat. 2. Link Bagi pengunjung, link adalah struktur dari halaman web. Pengunjung tidak peduli situs siapa yang mereka masuki, karena yang mereka butuhkan hanyalah informasi yang terdapat dalam situs tersebut. Berikut ini ada beberapa tip untuk membuat link yang standar, yaitu :  Gunakanlah selalu garis bawah untuk menandai sebuah link. Jangan sekali-kali menggaris bawahi teks yang bukan link, karena pengunjung akan menganggapnya sebagai link.  Umumnya sebuah link yang belum pernah dikunjungi atau belum di klik berwarna biru, sedangkan link yang sudah dikunjungi berwarna merah atau ungu.
  • 29. 27 | T I P S W E B D E S I G N | U S A B I L I T Y USABILITY : Desain yang Brilian  Jangan sampai ada link yang tidak berfungsi (broken link), Apabila di dalam link belum terdapat isinya, sebaiknya jangan dicantumkan.  Gunakan breadcrumb untuk mempermudah pengunjung menjelajahi situs dengan cepat. Misalnya : Home > eBook > Desain > Photoshop Pada breadcrumb di atas, pengunjung mengetahui di mana mereka berada (Photoshop) dan untuk kembali ke halaman sebelumnya (Desain atau eBook) lebih mudah atau kembali ke halaman depan lebih cepat. 3. Warna Buta Warna buta adalah kombinasi warna yang jelek, sehingga menghasilkan warna yang menyilaukan, mengaburkan, samar-samar, dan tidak terlihat. Ini bisa menyebabkan teks tidak bisa terbaca, navigasi tidak terpakai, dan elemen tidak terlihat. Berikut ini ada beberapa tip yang perlu diperhatikan untuk menghindari warna buta, yaitu :  Kebanyakan orang tidak bisa membedakan antara bayangan warna merah dan warna hijau.  Hindari menggunakan hanya warna merah dan warna hijau saja dalam desain.  Jangan menggunakan warna sebagai petunjuk. Gunakanlah petunjuk lain yang lebih dimengerti, misalnya dalam navigasi, gunakanlah panah untuk menghantarkan pengunjung ke halaman selanjutnya.  Buatlah kontras yang tinggi antara teks dengan background-nya.  Bacalah literatur tentang pewarnaan yang baik. 4. Grafik Grafik biasanya berupa gambar atau foto. Disamping membuat halaman lebih cantik dengan gambar-gambar yang menarik, grafik juga bisa memperlambat akses dengan memperbesar ukuran file. Berikut ini ada beberapa tip untuk memper- cepat akses grafik dalam sebuah situs, yaitu :
  • 30. 28 | T I P S W E B D E S I G N | U S A B I L I T Y USABILITY : Desain yang Brilian  Gunakan grafik dengan hemat atau secukupnya. Ini akan menambah kecepatan akses pemanggilan sebuah situs.  Jaga ukuran grafik agar berukuran kecil, kalau perlu gunakan fasilitas optimize pada aplikasi pengolah grafik.  Gunakan gambar dalam format GIF, karena format ini didukung oleh semua browser, ukuran file-nya lebih kecil, dan mempercepat akses. Namun, apabila gambar yang digunakan menggunakan warna yang kompleks seperti foto, gunakanlah format JPEG karena jika menggunakan format yang salah, bisa kelihatan titik-titiknya dan warna foto bisa kelihatan kabur. Apabila warna dalam suatu gambar di bawah 256 warna, gunakanlah format GIF.  Jangan gunakan grafik untuk navigasi yang menggunakan beberapa bahasa yang berlainan, karena sulit untuk pemeliharaan dan pengembangannya.  Gunakan atribut width dan height dalam tag img scr, ini akan mempercepat akses karena browser tidak perlu mendeteksi lagi berapa ukuran grafik yang akan ditampilkan. Tag img scr berfungsi untuk menampilkan grafik di halaman web. Misal : <img width=100 height=100 border=0 scr=gambar.gif>  Gunakan juga atribut border=0 pada tag img scr karena beberapa browser akan menampilkan border biru di sekeliling gambar apabila gambar dipakai sebagai link.  Gunakan atribut alt dalam tag img scr karena tidak semua pengunjung memiliki browser yang dapat menampilkan grafik, dengan adanya atribut alt akan memberikan keterangan dari grafik yang tidak bisa ditampilkan. Misal : <img scr=tombol.gif alt=ini adalah gambar tombol>
  • 31. 29 | T I P S W E B D E S I G N | U S A B I L I T Y USABILITY : Desain yang Brilian 5. Kesederhanaan Kesederhanaan adalah kunci untuk mencapai tingkat usability. Ada beberapa hal yang membuat situs terlihat sederhana, yaitu :  Gunakan judul dan sub judul untuk memisahkan bagian teks.  Gunakan ruang kosong secukupnya. Salah satu caranya adalah dengan membatasi bahwa dalam satu baris tidak lebih dari 12 kalimat.  Tulis isi dengan ringkas dan singkat, jangan berbentuk seperti karangan yang bertele-tele.  Berikan tanda terang pada kalimat yang dianggap penting dan memerlukan perhatian yang lebih.  Gunakan background yang gelap dengan teks yang terang atau sebaliknya.  Hindari warna yang tidak serasi, gunakan kombinasi yang enak dilihat dan mudah dibaca.  Jangan membuat situs yang sangat bergantung pada teknologi yang baru, karena user akan kehilanagn waktunya untuk mengakses plug-in terbaru. 6. Konsistensi Konsistensi berati tetap. Desain yang buruk membuat pengunjung bingung dan berpikir keras ketika berada di dalam situs. Di sinilah pentingnya konsistensi untuk membuat pengunjung merasa nyaman dalam menjelajah dari halaman yang satu ke halaman lainnya. Beberapa hal yang membuat konsistensi pada situs, yaitu :  Pastikan untuk menjaga letak elemen desain berada di lokasi yang sama (konsisten) pada tiap halaman, misalnya navigasi, logo, judul dan lainnya. Ini akan mempercepat prose belajar pengunjung, karena mereka hanya perlu belajar sekali saja.  Kebanyakan situs meletakkan logonya di ujung atas sebelah kiri halaman.  Warna untuk link yang belum dikunjungi (klik) berwarna biru dan yang sudah dikunjungi berwarna merah atau ungu.  Pergunakan jenis huruf yang sama. Gunakan satu atau dua jenis huruf saja (maksimal tiga jenis huruf).  Pergunakan jenis huruf standar, misalnya roman, verdana, arial dan helvetica.  Link seharusnya mempunyai garis bawah dan mempunyai warna yang sama.  Jangan memakai terlalu banyak warna yang berbeda, selain terlihat norak juga membuat mata alergi.
  • 32. 30 | T I P S W E B D E S I G N | U S A B I L I T Y USABILITY : Desain yang Brilian Usability terus berkembang seiring dengan pengalaman pengunjung dalam berinteraksi dengan situs. Di samping itu, perkembangan teknologi yang semakin maju juga sangat berpengaruh, sehingga muncul istilah accesibility, yang berarti bahwa halaman web harus bisa dipakai oleh setiap orang, baik anak-anak, tua dan muda. Halaman web harus dapat ditampilkan oleh semua komputer, browser, platform, sistem operasi, plug-in, dan lain-lain. Jadi, halaman web dapat terlihat bagus pada komputer Macintosh maupun PC, browser Internet Explorer atau Netscape, monitor dengan resolusi 800x600 atau 1024x768, dan sebagainya.
  • 33. 31 | T I P S W E B D E S I G N | U S A B I L I T Y S I A P T A Y A N G Siap Tayang Saatnya mempertontonkan situs Anda kepada dunia. Berikut cara terbaik untuk mempromosikannya dan menarik perhatian banyak orang. Pada akhir tahun 1990-an, ketika Anda menguasai dasar-dasar HTML, Anda dapat membujuk insvestor untuk menghabiskan banyak uang untuk Anda. Demikianlah optimisme yang timbul pada dunia internet yang baru berkembang saat itu. Posisi desainer web sedang naik daun kala itu. Dengan pengetahuan dan keahliannya, mereka bisa mengeruk penghasilan yang lumayan besar. Urusan online memang baru menjadi primadona. Meskipun demikian, e-enterpreneur tidaklah segampang dan seoptimistik yang kita bayangkan.
  • 34. 32 | T I P S W E B D E S I G N | U S A B I L I T Y S I A P T A Y A N G Web hanyalah sebuah alat bantu untuk melakukan bisnis. Membuat situs web yang berhasil pun bisa dibilang setara dengan mengembangkan bisnis secara offline. Diperlukan perhatian yang besar untuk memastikan Anda membuat sesuatu yang dapat memenuhi kebutuhan, dan dapat menarik minat orang-orang untuk mengunjunginya. Jika Anda membangun sendiri situs yang patut mendapat perhatian, maka Anda harus mengimplementasikan strategi promosi terstruktur. Di sini, dijelaskan beberapa langkah sederhana untuk menjadikan situs Anda menarik dan selanjutnya bisa menjadi mesin uang bagi Anda. Menentukan Nama Membuat situs mirip dengan melahirkan seorang bayi. Salah satu yang perlu Anda lakukan setelah bayi itu lahir ke dunia, adalah memberikan nama yang cocok. Nama domain yang mudah diingat tentu menjadi nilai plus untuk menarik pengunjung. Jadi coba deh Anda pikirkan masak-masak tentang nama tersebut. Sebisa mungkin nama tersebut mencerminkan situs atau bisnis Anda. Menamai situs sesuai nama domain-nya merupakan cara yang tepat. Pengunjung akan lebih mudah mengingat alamat situs Anda. Mendapatkan domain sendiri, yang menggunakan akhiran com, tentulah butuh biaya. Mahal atau tidaknya, itu relatif. Namun kalau Anda tak ingin yang berbayar, carilah paket hosting yang menawarkan domain gratis. Memilih Host Tawaran web hosting gratisan memang menggiurkan. Janganlah terjebak oleh iming-iming layanan gratis, karena hal itu seringkali tidak handal. Untuk keperluan yang lebih serius, Anda perlu melanggani host yang cepat dan menyediakan fasilitas pembayaran yang aman. Pastikan pula
  • 35. 33 | T I P S W E B D E S I G N | U S A B I L I T Y S I A P T A Y A N G bahwa layanan tersebut didukung teknologi scripting terbaru. Jika Anda khawatir hanya akan mendapatkan paket hosting di bawah standar, periksalah kontraknya sebelum mendaftar. Beberapa host memperbolehkan Anda menghentikan kontrak kapan pun. Ini berarti Anda tidak perlu harus meneruskan pemakaian layanan yang tidak Anda senangi. Mendapatkan Peringkat lebih Tinggi Begitu Anda telah menetapkan nama dan mantap dengan situs Anda, kini saatnya Anda menyebarluaskannya. Tempat terbaik agar situs Anda diperhatikan di web adalah meletakkannya pada mesin pencari (search engine), karena di sinilah orang-orang mulai meminta informasi online. Dengan membuat situs Anda tercantum setinggi mungkin pada mesin pencari yang populer, kemungkinan besar Anda akan mampu menarik perhatian banyak orang. Pasalnya, content yang Anda tawarkan bakal relevan dengan yang mereka cari. Dengan milyaran halaman di internet, Anda tak bisa berharap banyak pada situs-situs pencari sepertiGoogle, Alta Vista dan Ask Jeeves, apalagi memberikan tingkat expose yang memadai untuk situs Anda. Hasil dari suatu pencarian biasanya sangat banyak, dan yang paling relevan dari yang dicari paling-paling hanya 10 biji. Inilah yang muncul di halaman pertama hasil pencarian. Makanya, sangatlah penting untuk mengoptimalkan situs Anda, supaya dapat muncul di bagian awal di halaman depan. Ada sejumlah taktik yang dapat Anda terapkan untuk itu. Anda harus menggunakan tag Meta untuk menyisipkan keyword target secara strategis ke dalam halaman web Anda, agar automated crawler yang digunakan oleh mesin pencarian mengambilnya. Setelah Anda menentukan keyword, maka keyword ini harus muncul pada lokasi penting di halaman Anda. Sebagian besar mesin pencari utama menggunakan analisis link sebagai bagian dari sistem penentuan peringkat. Cara ini berguna bagi mereka untuk memutuskan halaman mana yang cocok untuk topik tertentu.
  • 36. 34 | T I P S W E B D E S I G N | U S A B I L I T Y S I A P T A Y A N G Halaman yang dihubungkan oleh situs yang berperingkat tinggi kemungkinan besar akan diminati pengunjung. Jadi, mesin pencarian akan memberi perhatian lebih padanya. Kunjungilah mesin pencarian utama untuk melakukan pencarian bagi keyword target Anda. Perhatikanlah halaman yang muncul pada bagian atas hasil pencarian. Kunjungi halaman ini dan mintalah pemilik situs untuk membuat link ke situs Anda. Mereka mungkin menyetujui permintaan Anda, khususnya jika sebagai imbalannya Anda setuju untuk membuat link ke situsnya. Dalam upaya untuk mendaftarkan situs Anda, Anda dapat menggunakan perangkat lunak seperti Axandra (www.axandra.com), TrafficSeeker (www.trafficseeker.com) atau Netrics (www.netrics.com); atau daftarkan pada perusahaan yang mengkhusus diri melakukan hal ini, seperti www.businessnet.freesavers.com. Dengan banyaknya mesin pencarian besar seperti Google, Lycos dan Yahoo!, Anda perlu mengajukan halaman Anda secara manual. Isilah detail tentang situs Anda pada mesin pencari itu. Anda juga boleh mempertimbangkan link bersponsor, seperti layaanan “AdWords” Google. Ini dimaksudkan agar halaman Anda tercantum pada bagian utama mesin pencarian. Anda harus membayar untuk setiap klik (pay-per-click basis). Menyebar Berita Membuat pengunjung datang ke situs Anda adalah satu hal, membuat mereka kembali lagi adalah hal lain. Asalkan Anda memiliki situs dinamis yang di-update secara teratur, Anda dapat membuat pelanggan Anda kembali dan melihat content baru. Anda dapat menggunakan iklan berbasis web untuk meningkatkan awareness terhadap brand (merek) Anda. Tetapi, banner dan pop- up cenderung menjeng- kelkan pengguna. Untuk itu, sebaiknya Anda mencoba merumuskan metode untuk menjangkau pelanggan. Salah satu cara untuk menyampaikan pesan Anda secara pribadi ke
  • 37. 35 | T I P S W E B D E S I G N | U S A B I L I T Y S I A P T A Y A N G target-target tertentu adalah langsung menyampaikan content ke inbox pengguna melalui commercial newsletter atau melalui media social networking semisal facebook atau twitter. Mempersiapkan Keberhasilan Anda perlu berbincang dengan para pelanggan secara teratur, agar mereka tahu tentang perkem- bangan terbaru situs Anda. Dan, doronglah mereka untuk menyebarluaskannya kepada teman- temannya. Bergabunglah dengan forum tempat berkumpulnya para pelanggan potensial, dan bangun reputasi Anda dengan memajang pesan bantuan dan dukungan, dengan meninggalkan link ke situs Anda setiap kali Anda memajang pesan. Jika ini adalah komunitas yang sedang berkembang, berita ini akan segera tersebar dan Anda akan berhasil meraih perhatian pengunjung. Bila situs Anda sudah menjadi terkenal jangan- lah terburu berpuas diri. Kunci keberhasilan situs terletak pada upaya mendengarkan para pelanggan dan mengembangkan situs Anda, sesuai dengan kebutuhan yang terus berubah. Hanya karena Anda telah membangun situs hebat, yang tampaknya akan banyak dilirik orang, jangan anggap ini akan berlangsung seterusnya. Anda harus terus memperbaharui content dan desain halaman Anda, karena inilah yang membedakan antara sukses sesaat dan sukses online yang berkesinambungan.
  • 38. 36 | T I P S W E B D E S I G N | U S A B I L I T Y S I A P T A Y A N G Nama : Search Engine Watch URL : www.searchenginewatch.com Situs ini ideal bagi Anda yang ingin mencari tahu seluk beluk mesin pencarian (search engine) dan memuat panduan lengkap untuk mendapatkan peringkat setinggi mungkin pada mesin pencari utama. Nama : Zeus Internet Marketing Robot URL : www.cyber-robotics.com Bertukar link dengan situs-situs web serupa dan langsung melonjak ke puncak daftar halaman hasil pencarian. Situs ini mengotomasi proses perdagangan link, membantu Anda untuk menjangkau banyak orang dengan usaha seminimal mungkin.
  • 39. 37 | T I P S W E B D E S I G N | U S A B I L I T Y Penutup khirnya, semuanya tetap berpulang pada internet itu sendiri karena internet adalah komunikasi antar individu. Ini tentang pertukaran informasi, ide, pemikiran, pengalaman dan berbagai peristiwa. Dengan mengetahui aturan dari desain web, setiap orang dapat berkomunikasi dengan baik, menyampaikan berbagai pesan dan berinteraksi dengan banyak orang (komunitas). Perhatikanlah kebutuhan dan kebiasaan pengunjung tersebut (memandang dari kacamata pengunjung). Ada empat hal untuk mewujudkannya, yaitu komunikasi, isi (content), konsistensi dan kontras. Informasi lebih lanjut tentang usability pada desain web dan contoh buruk desain web dapat Anda peroleh setidaknya di alamat-alamat berikut ini :  www.useit.com  www.webpagesthatsuck.com  www.usableweb.com  http://usability.gov/guidelines/  http://ijhcs.open.ac.uk/ A