Start with Question

Pernahkah Anda menutup sebuah website

karena waktu loading yang lama?
Seberapa sering Anda menemukan
website yang
tidak (atau sulit) terbaca isinya?
sulit mempelajari struktur web?
tidak berisi informasi yang Anda butuhkan?
Pernahkah anda membaca detail isi
sebuah website pada awal membukanya?
1
Website adalah Informasi
Tujuan kita membuat website adalah
menyediakan informasi
Bagaimana membuat informasi tersebut
dapat diakses (dengan baik dan mudah)
oleh user (pengguna)?
Bagaimana membuat informasi yang
bermanfaat bagi user?
User yang menentukan apakah website
tersebut mau dibaca atau di-close
2
Kesan Pertama itu Penting!
Kesan Pertama Begitu Menggoda,
selanjutnya: Baca [scroll] atau Close [x]

Kesan Pertama didapatkan dari:

1. Waktu Loading Website
2. Konten yang bermanfaat
3. Aksesibilitas
4. Tampilan
3
Loading Time

Ditentukan oleh kapasitas akses user

(bandwidth, komputer)
Ukuran file halaman web + file-file lainnya
(image, audio, style, animasi, dll)
Penggunaan komponen web (banner,
icon, image navigasi) yang tidak konsisten
dapat memperlambat Loading Time

4
Konten
Orisinal
Dibutuhkan / bermanfaat bagi orang lain
Global atau justru Lokal
Valuable
Struktur yang baik

Contoh: Detik.com, Orisinal.com, DLL.

5
Website yang Baik

Keseimbangan antara aspek Disain dan Usefulness

6
Design & Usefulness
Design:
Estetika: Warna, Layout, Elemen, Tipografi
Informasi: Isi (Konten), Penyampaian Pesan,
Pembentukan Citra
Usefulness:
Utility: Fungsionalitas, Aksesibilitas, teknologi
yang tepat
Usability: Kemudahan penggunaan, waktu
belajar, kecepatan kinerja, tingkat kesalahan,
daya ingat dan kepuasan subyektif
7
Design Tidak Pernah Salah!

Desain adalah kreatifitas, tidak ada yang

salah selama tidak merugikan orang lain
Desain adalah rasa estetika
Nilai estetika ditentukan dari apresiasi dan
persepsi setiap orang (user)
Buatlah website yang memenuhi nilai
estetika kebanyakan orang! (disain grafis)
8
Mana Disain yang Lebih Bagus?

9
Aksesibillitas
Aksesibilitas: kemampuan sistem agar
dapat diakses oleh pengguna yang
memiliki keterbatasan.

10
Aksesibilitas
Tujuan utama Web adalah informasi, dan harus
dapat diakses oleh seluas-luasnya pengguna.
Siapa saja pengguna itu?
Setiap orang bebas dan berhak untuk
memperoleh informasi baik itu dalam televisi,
surat kabar, radio, dan tentu saja Web.
Tapi tidak seluruhnya dapat dimanfaatkan oleh
setiap orang, Mis: orang yang cacat
pendengaran tidak dapat menikmati radio dan
orang yang buta tidak dapat menikmati televisi.

11
Aksesibilitas
Setiap orang dapat menikmati informasi
yang Ada dalam sebuah situs tak
terkecuali bagi orang-orang dengan
keterbatasan (fisik, teknologi, dll).
Dalam pembangunan sebuah situs Web
kita tidak dapat gegabah agar hasil yang
diperoleh lebih maksimal dan dapat
dinikmati dalam berbagai keadaan
audiens (user).
12
Top 10 Mistakes in Web Design*
1. Bad Search
2. File PDF untuk Online
Reading
3. Tidak merubah warna
Visited Link
4. Non-scannable text
5. Ukuran Font yang Fixed
6. Title yang tidak bermakna
7. Elemen yang terlihat
seperti Advertisement
(iklan)
8. Pelanggaran konvensi
disain
9. Link yang Membuka
Window Browser Baru
1o.Tidak Menjawab
Pertanyaan Users
13
Top 10 Mistakes in Web Design
(2005)*
Legibility Problems Cumbersome Forms
Non-Standard Links No Contact
Flash Information or Other
Content That's Not Company Info
Written for the Web Frozen Layouts with
Bad Search Fixed Page Widths
Browser Inadequate Photo
Incompatibility Enlargement

14
Kesalahan Kode HTML
Hampir 99% halaman Web berisikan kode-kode
yang tidak standar digunakan. Dari 2,4 juta
halaman Web hanya 0.007% halaman yang
valid. (Riset Dagfinn Parnas)
Kesalahan utama dalam sebuah halaman Web
adalah:
1. Tidak ada pendeklarasian dokumen (DTD)
2. Tidak mencantumkan atribut yang diharuskan.
3. Atribut tag tidak standar
4. Menghilangkan tag akhir
5. Tidak ada tag awal
15
 Browser paling populer (>60%), Internet
Explorer, memaklumi kesalahan-kesalahan tadi,
sehingga bila sebuah halaman Web berisi
banyak kesalahan dalam kode maka ia akan
tetap tampil baik pada IE.
Tetapi dapat menjadi problem pada browser
selain IE (Mozilla, Opera, Safari, dll)
Jangan sampai Anda kehilangan potensial user
hanya karena mereka tidak menggunakan IE!
Akibat lain: Kesulitan indexing yang dilakukan
oleh robot Search Engine.

16
Dari Mana Kesalahan Berasal?

Kesalahan yang paling utama adalah

penggunaan WYSIWYG Editor untuk
membuat Web secara instan.
Tag yang tidak standar atau empty tag
(tag kosong).

17
 User tidak akan membaca teks kata-per-
kata secara runtut
Dua Paragraf awal harus berisi informasi
yang paling penting
Awali subheads, paragraphs, dan bullet
points dengan kata-kata yang informatif
dan bermakna.

18
19
Back to Basics in Web
Design
Meskipun fitur baru dalam disain web selalu
bermunculan dan menjadi topik yang ramai
dibahas di forum diskusi, mailing list maupun
seminar, user tidak terlalu perduli dengan
teknologi dan fitur tersebut
Meskipun halaman web bisa memuat berbagai
jenis konten multimedia: gambar, audio, video
dan animasi; tidak berarti semua harus
digunakan! Gunakan secara efisien dan efektif!

20
 User hanya menginginkan perbaikan
kualitas pada hal dasar:
Teks yang bisa terbaca dengan jelas
Konten yang menjawab kebutuhan user
Navigasi dan search yang membantu
menemukan apa yang dibutuhkan user
Form yang sederhana dan singkat

21
XHTML & CSS

Web dapat diakses dengan baik pada berbagai perangkat

dan browser
22
 Usabilitas

Usabilitas: kemampuan sistem agar

mudah digunakan dan sederhana
dalam pengoperasiannya
Learnability: Kemudahan penggunaan
dan waktu belajar
Efficiency: kecepatan kinerja
Memorability: daya ingat
Errors: tingkat kesalahan
Satisfaction: kepuasan subyektif 23
Kenapa Usabilitas Penting
Jika sebuah website sulit untuk digunakan
Jika sebuah website tidak berisi informasi
yang dicari user
JIka sebuah website tidak membantu
menuntun user apa yang harus dilakukan
Jika user tersesat pada sebuah website

Maka tombol close [x] pasti di-klik!

24
Tips untuk Usabilitas
Letakkan Nama & Logo pada setiap halaman
dan dapat diklik (Home)
Sediakan Search jika halaman > 100 atau
minimal sediakan Site Map
Gunakan foto asli: produk atau kegiatan
Sediakan gambar dalam resolusi kecil jangan
merubah size gambar asli (thumbnail)

25
Tips untuk Usabilitas

Letakkan Navigasi pada lokasi yang

konsisten pada halaman web. Tempatkan
pada lokasi yang familiar (Diatas, Kiri,
atau Bawah)
Hindari scrolling secara horisontal.
Jika teks ditampilkan centered, gunakan
hanya satu titik simetri

26
Kesimpulan

Gunakan XHTML & CSS sebagai standar

dokumen web saat ini
Buatlah website yang dapat diakses
semua user dengan baik dan mudah
Buatlah konten website yang memiliki
value dan bermanfaat bagi orang lain

27
Referensi HTML & CSS
CSS-1: http://www.w3.org/TR/CSS1
CSS-2: http://www.w3.org/TR/CSS2
HTML: http://www.w3.org/TR/html41
XHTML: http://www.w3.org/TR/xhtml11

28
 Kelompok 2

Indah Pritikasayu (05052631)

Tomy Mala (05052675)
Antonius Y. S. Kadu (05052655)