11

Start with QuestionStart with Question

• Pernahkah Anda menutup sebuah Pernahkah Anda menutup sebuah website karena waktu loading yang lama?website karena waktu loading yang lama?

• Seberapa sering Anda menemukan Seberapa sering Anda menemukan website yang website yang – tidak (atau sulit) terbaca isinya?tidak (atau sulit) terbaca isinya?– sulit mempelajari struktur web?sulit mempelajari struktur web?– tidak berisi informasi yang Anda butuhkan?tidak berisi informasi yang Anda butuhkan?

• Pernahkah anda membaca detail isi Pernahkah anda membaca detail isi sebuah website pada awal membukanya?sebuah website pada awal membukanya?

22

Website adalah InformasiWebsite adalah Informasi

• Tujuan kita membuat website adalah Tujuan kita membuat website adalah menyediakan informasimenyediakan informasi

• Bagaimana membuat informasi Bagaimana membuat informasi tersebut dapat diakses (dengan baik tersebut dapat diakses (dengan baik dan mudah) oleh dan mudah) oleh user user (pengguna)?(pengguna)?

• Bagaimana membuat informasi yang Bagaimana membuat informasi yang bermanfaat bagi bermanfaat bagi useruser??

• User yang menentukan apakah website User yang menentukan apakah website tersebut mau dibaca atau di-tersebut mau dibaca atau di-closeclose

33

Kesan Pertama itu Penting!Kesan Pertama itu Penting!

Kesan Pertama Begitu MenggodaKesan Pertama Begitu Menggoda,,selanjutnya: selanjutnya: Baca Baca [scroll][scroll] atau atau Close Close [x][x]

Kesan Pertama didapatkan dari:Kesan Pertama didapatkan dari:1.1. Waktu Loading WebsiteWaktu Loading Website2.2. Konten yang bermanfaatKonten yang bermanfaat3.3. AksesibilitasAksesibilitas4.4. TampilanTampilan

44

Loading TimeLoading Time

• Ditentukan oleh kapasitas akses user Ditentukan oleh kapasitas akses user (bandwidth, komputer)(bandwidth, komputer)

• Ukuran file halaman web + file-file Ukuran file halaman web + file-file lainnya (image, audio, style, animasi, dll)lainnya (image, audio, style, animasi, dll)

• Penggunaan komponen web (banner, Penggunaan komponen web (banner, icon, image navigasi) yang tidak icon, image navigasi) yang tidak konsisten dapat memperlambat Loading konsisten dapat memperlambat Loading TimeTime

55

KontenKonten• OrisinalOrisinal• Dibutuhkan / bermanfaat bagi orang Dibutuhkan / bermanfaat bagi orang

lainlain• Global atau justru LokalGlobal atau justru Lokal• ValuableValuable• Struktur yang baikStruktur yang baik

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

66

Website yang BaikWebsite yang Baik

• Keseimbangan antara aspek Disain dan UsefulnessKeseimbangan antara aspek Disain dan Usefulness

77

Design & UsefulnessDesign & Usefulness

Design:Design:• Estetika: Warna, Layout, Elemen, TipografiEstetika: Warna, Layout, Elemen, Tipografi• Informasi: Isi (Konten), Penyampaian Pesan, Informasi: Isi (Konten), Penyampaian Pesan,

Pembentukan CitraPembentukan CitraUsefulness:Usefulness:• Utility: Fungsionalitas, Aksesibilitas, teknologi Utility: Fungsionalitas, Aksesibilitas, teknologi

yang tepatyang tepat• Usability: Kemudahan penggunaan, waktu Usability: Kemudahan penggunaan, waktu

belajar, kecepatan kinerja, tingkat kesalahan, belajar, kecepatan kinerja, tingkat kesalahan, daya ingat dan kepuasan subyektifdaya ingat dan kepuasan subyektif

88

Design Tidak Pernah Salah!Design Tidak Pernah Salah!

• Desain adalah kreatifitas, tidak ada yang Desain adalah kreatifitas, tidak ada yang salah selama tidak merugikan orang lainsalah selama tidak merugikan orang lain

• Desain adalah ‘rasa’ Desain adalah ‘rasa’ estetika estetika

• Nilai estetika ditentukan dari apresiasi dan Nilai estetika ditentukan dari apresiasi dan persepsi setiap orang (user)persepsi setiap orang (user)

• Buatlah website yang memenuhi nilai Buatlah website yang memenuhi nilai estetika kebanyakan orang! (disain grafis)estetika kebanyakan orang! (disain grafis)

99

Mana Disain yang Lebih Mana Disain yang Lebih Bagus?Bagus?

1010

• AksesibilitasAksesibilitas: kemampuan sistem : kemampuan sistem agar dapat diakses oleh pengguna agar dapat diakses oleh pengguna yang memiliki keterbatasan.yang memiliki keterbatasan.

AksesibillitasAksesibillitas

1111

AksesibilitasAksesibilitas

• ““Tujuan utama Web adalah informasi, dan Tujuan utama Web adalah informasi, dan harus dapat diakses oleh seluas-luasnya harus dapat diakses oleh seluas-luasnya pengguna”. Siapa saja pengguna itu? pengguna”. Siapa saja pengguna itu?

• Setiap orang bebas dan berhak untuk Setiap orang bebas dan berhak untuk memperoleh informasi baik itu dalam televisi, memperoleh informasi baik itu dalam televisi, surat kabar, radio, dan tentu saja Web. surat kabar, radio, dan tentu saja Web.

• Tapi tidak seluruhnya dapat dimanfaatkan Tapi tidak seluruhnya dapat dimanfaatkan oleh setiap orang, Mis: orang yang cacat oleh setiap orang, Mis: orang yang cacat pendengaran tidak dapat menikmati radio dan pendengaran tidak dapat menikmati radio dan orang yang buta tidak dapat menikmati orang yang buta tidak dapat menikmati televisi. televisi.

1212

AksesibilitasAksesibilitas

• Setiap orang dapat menikmati Setiap orang dapat menikmati informasi yang Ada dalam sebuah situs informasi yang Ada dalam sebuah situs tak terkecuali bagi orang-orang dengan tak terkecuali bagi orang-orang dengan keterbatasan (fisik, teknologi, dll). keterbatasan (fisik, teknologi, dll).

• Dalam pembangunan sebuah situs Web Dalam pembangunan sebuah situs Web kita tidak dapat gegabah agar hasil kita tidak dapat gegabah agar hasil yang diperoleh lebih maksimal dan yang diperoleh lebih maksimal dan dapat “dinikmati” dalam berbagai dapat “dinikmati” dalam berbagai keadaan audiens (user). keadaan audiens (user).

1313

Top 10 Mistakes in Web Top 10 Mistakes in Web Design*Design*1. Bad Search1. Bad Search2. File PDF untuk Online 2. File PDF untuk Online

ReadingReading3. Tidak merubah warna 3. Tidak merubah warna

Visited LinkVisited Link4. Non-scannable text4. Non-scannable text5. Ukuran Font yang 5. Ukuran Font yang

FixedFixed6. Title yang tidak 6. Title yang tidak

bermaknabermakna

7. Elemen yang terlihat 7. Elemen yang terlihat seperti Advertisement seperti Advertisement (iklan) (iklan)

8. Pelanggaran konvensi 8. Pelanggaran konvensi disain disain

9. Link yang Membuka 9. Link yang Membuka Window Browser BaruWindow Browser Baru

1o.Tidak Menjawab 1o.Tidak Menjawab Pertanyaan UsersPertanyaan Users

1414

Top 10 Mistakes in Web Design Top 10 Mistakes in Web Design (2005)*(2005)*

• Legibility Problems Legibility Problems • Non-Standard Links Non-Standard Links • Flash Flash • Content That's Not Content That's Not

Written for the Web Written for the Web • Bad Search Bad Search • Browser Browser

Incompatibility Incompatibility

• Cumbersome Forms Cumbersome Forms

• No Contact No Contact Information or Other Information or Other Company Info Company Info

• Frozen Layouts with Frozen Layouts with Fixed Page WidthsFixed Page Widths

• Inadequate Photo Inadequate Photo Enlargement Enlargement

1515

Kesalahan Kode HTMLKesalahan Kode HTML

• Hampir 99% halaman Web berisikan kode-Hampir 99% halaman Web berisikan kode-kode yang tidak standar digunakan. Dari 2,4 kode yang tidak standar digunakan. Dari 2,4 juta halaman Web hanya 0.007% halaman juta halaman Web hanya 0.007% halaman yang valid. (Riset yang valid. (Riset Dagfinn Parnas)Dagfinn Parnas)

• Kesalahan utama dalam sebuah halaman Web Kesalahan utama dalam sebuah halaman Web adalah:adalah:1.1. Tidak ada pendeklarasian dokumen (DTD)Tidak ada pendeklarasian dokumen (DTD)2.2. Tidak mencantumkan atribut yang diharuskan.Tidak mencantumkan atribut yang diharuskan.3.3. Atribut tag tidak standarAtribut tag tidak standar4.4. Menghilangkan tag akhirMenghilangkan tag akhir5.5. Tidak ada tag awalTidak ada tag awal

1616

• Browser paling populer (>60%), Internet Browser paling populer (>60%), Internet Explorer, memaklumi kesalahan-kesalahan Explorer, memaklumi kesalahan-kesalahan tadi, sehingga bila sebuah halaman Web tadi, sehingga bila sebuah halaman Web berisi banyak kesalahan dalam kode maka ia berisi banyak kesalahan dalam kode maka ia akan tetap tampil baik pada IE.akan tetap tampil baik pada IE.

• Tetapi dapat menjadi problem pada browser Tetapi dapat menjadi problem pada browser selain IE (Mozilla, Opera, Safari, dll)selain IE (Mozilla, Opera, Safari, dll)

• Jangan sampai Anda kehilangan potensial Jangan sampai Anda kehilangan potensial user hanya karena mereka tidak user hanya karena mereka tidak menggunakan IE!menggunakan IE!

• Akibat lain: Kesulitan “indexing” yang Akibat lain: Kesulitan “indexing” yang dilakukan oleh robot Search Engine. dilakukan oleh robot Search Engine.

1717

Dari Mana Kesalahan Dari Mana Kesalahan Berasal?Berasal?

• Kesalahan yang paling utama adalah Kesalahan yang paling utama adalah penggunaan WYSIWYG Editor untuk penggunaan WYSIWYG Editor untuk membuat Web secara instan. membuat Web secara instan.

• Tag yang tidak standar atau empty Tag yang tidak standar atau empty tag (tag kosong).tag (tag kosong).

1818

• User tidak akan membaca teks kata-User tidak akan membaca teks kata-per-kata secara runtutper-kata secara runtut

• Dua Paragraf awal harus berisi Dua Paragraf awal harus berisi informasi yang paling pentinginformasi yang paling penting

• Awali subheads, paragraphs, dan Awali subheads, paragraphs, dan bullet points dengan kata-kata yang bullet points dengan kata-kata yang informatif dan bermakna. informatif dan bermakna.

1919

2020

Back to Basics in Web Back to Basics in Web DesignDesign• Meskipun fitur baru dalam disain web selalu Meskipun fitur baru dalam disain web selalu

bermunculan dan menjadi topik yang ramai bermunculan dan menjadi topik yang ramai dibahas di forum diskusi, mailing list maupun dibahas di forum diskusi, mailing list maupun seminar, user tidak terlalu perduli dengan seminar, user tidak terlalu perduli dengan teknologi dan fitur tersebutteknologi dan fitur tersebut

• Meskipun halaman web bisa memuat berbagai Meskipun halaman web bisa memuat berbagai jenis konten multimedia: gambar, audio, video jenis konten multimedia: gambar, audio, video dan animasi; tidak berarti semua harus dan animasi; tidak berarti semua harus digunakan! Gunakan secara efisien dan digunakan! Gunakan secara efisien dan efektif!efektif!

2121

• User hanya menginginkan perbaikan User hanya menginginkan perbaikan kualitas pada hal dasar:kualitas pada hal dasar:• Teks yang bisa terbaca dengan jelasTeks yang bisa terbaca dengan jelas• Konten yang menjawab kebutuhan userKonten yang menjawab kebutuhan user• Navigasi dan Navigasi dan searchsearch yang membantu yang membantu

menemukan apa yang dibutuhkan usermenemukan apa yang dibutuhkan user• Form yang sederhana dan singkat Form yang sederhana dan singkat

2222

XHTML & CSSXHTML & CSS

• Web dapat diakses dengan baik pada berbagai Web dapat diakses dengan baik pada berbagai perangkat dan browserperangkat dan browser

2323

UsabilitasUsabilitas

• Learnability: Learnability: Kemudahan Kemudahan penggunaanpenggunaan dandan waktu belajarwaktu belajar

• Efficiency: Efficiency: kecepatan kinerjakecepatan kinerja

• Memorability: Memorability: daya ingat daya ingat

• Errors: Errors: tingkat kesalahantingkat kesalahan

• Satisfaction: Satisfaction: kepuasan subyektifkepuasan subyektif

Usabilitas: kemampuan sistem Usabilitas: kemampuan sistem agar mudah digunakan dan agar mudah digunakan dan sederhana dalam sederhana dalam pengoperasiannyapengoperasiannya

2424

Kenapa Usabilitas PentingKenapa Usabilitas Penting

• Jika sebuah website sulit untuk Jika sebuah website sulit untuk digunakandigunakan

• Jika sebuah website tidak berisi Jika sebuah website tidak berisi informasi yang dicari userinformasi yang dicari user

• JIka sebuah website tidak membantu JIka sebuah website tidak membantu menuntun user apa yang harus menuntun user apa yang harus dilakukandilakukan

• Jika user tersesat pada sebuah websiteJika user tersesat pada sebuah website

• Maka tombol close [x] pasti di-klik! Maka tombol close [x] pasti di-klik!

2525

Tips untuk UsabilitasTips untuk Usabilitas

• Letakkan Nama & Logo pada setiap Letakkan Nama & Logo pada setiap halaman dan dapat diklik (Home)halaman dan dapat diklik (Home)

• Sediakan Search jika halaman > 100 atau Sediakan Search jika halaman > 100 atau minimal sediakan Site Mapminimal sediakan Site Map

• Gunakan foto asli: produk atau kegiatanGunakan foto asli: produk atau kegiatan

• Sediakan gambar dalam resolusi kecil Sediakan gambar dalam resolusi kecil jangan merubah size gambar asli jangan merubah size gambar asli (thumbnail)(thumbnail)

2626

Tips untuk UsabilitasTips untuk Usabilitas

• Letakkan Navigasi pada lokasi yang Letakkan Navigasi pada lokasi yang konsisten pada halaman web. konsisten pada halaman web. Tempatkan pada lokasi yang familiar Tempatkan pada lokasi yang familiar (Diatas, Kiri, atau Bawah)(Diatas, Kiri, atau Bawah)

• Hindari Hindari scrollingscrolling secara horisontal. secara horisontal.

• Jika teks ditampilkan Jika teks ditampilkan centeredcentered, , gunakan hanya satu titik simetrigunakan hanya satu titik simetri

2727

KesimpulanKesimpulan

• Gunakan XHTML & CSS sebagai Gunakan XHTML & CSS sebagai standar dokumen web saat inistandar dokumen web saat ini

• Buatlah website yang dapat diakses Buatlah website yang dapat diakses semua user dengan baik dan mudahsemua user dengan baik dan mudah

• Buatlah konten website yang Buatlah konten website yang memiliki value dan bermanfaat bagi memiliki value dan bermanfaat bagi orang lainorang lain

2828

Referensi HTML & CSSReferensi HTML & CSS

• CSS-1: CSS-1: http://www.w3.org/TR/CSS1

• CSS-2: CSS-2: http://www.w3.org/TR/CSS2

• HTML: HTML: http://www.w3.org/TR/html41

• XHTML: XHTML: http://www.w3.org/TR/xhtml11

• Kelompok 2 Kelompok 2

• Indah Pritikasayu (05052631)Indah Pritikasayu (05052631)

• Tomy Mala (05052675)Tomy Mala (05052675)

• Antonius Y. S. Kadu (05052655)Antonius Y. S. Kadu (05052655)