1 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?

2 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

3 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

4 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

5 Konten • Orisinal • Dibutuhkan / bermanfaat bagi orang lain • Global atau justru Lokal • Valuable • Struktur yang baik • Contoh: Detik.com, Orisinal.com, DLL.

6 Website yang Baik • Keseimbangan antara aspek Disain dan Usefulness

7 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

8 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)‏

9 Mana Disain yang Lebih Bagus?

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

11 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.

12 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).

13 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

14 Top 10 Mistakes in Web Design (2005)* • Legibility Problems • Non-Standard Links • Flash • Content That's Not Written for the Web • Bad Search • Browser Incompatibility • Cumbersome Forms • No Contact Information or Other Company Info • Frozen Layouts with Fixed Page Widths • Inadequate Photo Enlargement

15 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

16 • 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.

17 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).

18 • 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.

19

20 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!

21 • 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

22 XHTML & CSS • Web dapat diakses dengan baik pada berbagai perangkat dan browser

23 Usabilitas • Learnability: Kemudahan penggunaan dan waktu belajar • Efficiency: kecepatan kinerja • Memorability: daya ingat • Errors: tingkat kesalahan • Satisfaction: kepuasan subyektif Usabilitas: kemampuan sistem agar mudah digunakan dan sederhana dalam pengoperasiannya

24 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!

25 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)‏

26 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

27 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

28 Referensi HTML & CSS • CSS-1: • CSS-2: • HTML: • XHTML:

• Kelompok 2 • Indah Pritikasayu ( ) • Tomy Mala ( ) • Antonius Y. S. Kadu ( )