Membangun Web yang baik (lanjutan)

Presentasi berjudul: "Membangun Web yang baik (lanjutan)"— Transcript presentasi:

1 Membangun Web yang baik (lanjutan)

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

3 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

4 Kesan Pertama itu Penting!
Kesan Pertama Begitu Menggoda, selanjutnya: Baca [scroll] atau Close [x] Kesan Pertama didapatkan dari: Waktu Loading Website Konten yang bermanfaat Aksesibilitas Tampilan

5 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

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

7 Detik.com

8 jawapos.com

9 Website yang Baik Keseimbangan antara aspek Disain dan Usefulness

10 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

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

12 Mana Disain yang Lebih Bagus?

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

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

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

16 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

17 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: Tidak ada pendeklarasian dokumen (DTD)‏ Tidak mencantumkan atribut yang diharuskan. Atribut tag tidak standar Menghilangkan tag akhir Tidak ada tag awal

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

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

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

21

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

23 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

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

25 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

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

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

28 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

29 Arsitektur Informasi Arsitektur Informasi (Information Architecture) menjelaskan bagaimana sebuah situs web dan setiap halamannya dapat diorganisasikan, diberi nama/label, dan dinavigasi untuk mendukung browsing dan pencarian. Pada umumnya, sebuah situs web minimal harus mempunyai: Halaman utama Halaman bantuan Halaman perusahaan Halaman transaksi (jika berupa e-Commerce) Halaman konten Beberapa bagian yang harus ada dalam situs web bisnis: Propaganda promosi. Penjelasan cara berbelanja. Katalog produk yang ditawarkan. Jaminan keamanan dan kenyamanan dalam berbelanja.

30 HOMEPAGE Homepage merupakan beranda situs secara keseluruhan berisi :
Miliki daftar opt-in. Isi/konten yang relevan. Headline yang menjual. Tata bahasa dan ejaan. Sistem navigasi. Singkat dan fokus. Kreativitas. Tempat untuk promosi. Penjelasan cara berbelanja. Katalog Produk/Jasa.

31 Struktur hirarki web

32 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