Diperbarui 30 Juni 2010 oleh Dani Iswara
Daftar periksa ini memuat elemen-elemen situs Web dan blog yang umumnya mendapat perhatian khusus. Sesuaikan dengan target pengguna. Dapat dimanfaatkan untuk memeriksa kualitas situs Web secara mandiri. Terutama dari sisi kebergunaan/usability dan aksesibilitas Web. Atau sekadar untuk menguji templat pilihan terbaru.
Rekomendasi disusun berdasarkan pengalaman pribadi sebagai pengguna biasa. Bukan desainer, pengembang, atau profesional Web. Dikombinasikan dengan rekomendasi dari Web Content Accessibility Guidelines 2.0 atau WCAG 2.0. Usable mengandung makna mudah digunakan dan dimengerti oleh kebanyakan pengguna. Aksesibilitas Web bermakna lebih luas. Bukan hanya kemudahan akses bagi difabel, logisnya alur dokumen, tapi juga pelbagai perangkat dan ‘user agents’, modalitas koneksi, pengguna lanjut usia, termasuk mesin telusur Internet/’search engine’.
Saat menilai kebergunaan dan aksesibilitas Web, coba dengan kombinasi kondisi:
- tampilan CSS non aktif,
- tampilan gambar non aktif,
- fungsi ‘javascript’ non aktif.
- tes tampilan dan fungsi situs di pelbagai peramban Web terpopuler. Misalnya Mozilla Firefox (bermesin Gecko), Internet Explorer (Trident), Google Chrome (WebKit), Opera (Presto), dan Opera Mini.
Pemeriksaan bisa dilakukan manual dan/atau dibantu peranti lunak semi-otomatis semacam validator dan ‘checker’ daring maupun luring.
Tentu tidak semuanya berlaku mutlak. Ada pengecualian di beberapa kondisi. Jika ada yang kurang jelas, silakan konsultasikan dengan desainer dan pengembang Weblog anda.
| No. | Item | Rekomendasi | Keterangan |
|---|---|---|---|
| 1 | Nama domain | Unik, mudah diingat dan dipakai. | |
| 2 | Punya ‘favicon’ | Unik, mudah ditemukan di multitab, deskriptif, bukan animasi yang mengganggu mata. | |
| 3 | ‘Post/page permalink’ | Mudah, ringkas, deskriptif. | |
| 4 | Waktu muat/’loading time’ | Cepat. | |
| 5 | DOCTYPE |
Sesuai standar W3C. | Tidak memakai ‘inline’ CSS jika memilih doctype ‘Strict’. |
| 6 | Logo | Unik, aksesibel, ‘clickable’ ke laman/’homepage’. | |
| 7 | Menu navigasi | Mudah+aksesibel, konsisten. | |
| 8 | Menu ‘Skip to main content’ | Mudah+aksesibel. | Berpeluang bermanfaat bagi semua pengguna jika disetel ‘visible’. |
| 9 | Informasi tentang/’about’ dan kontak | Mudah+aksesibel. | |
| 10 | Judul+’tag line’ Weblog | Mudah+aksesibel, deskriptif. | |
| 11 | Kotak pencarian | Mudah+aksesibel. | |
| 12 | ‘Breadcrumb’ (jika diperlukan) | Mudah+aksesibel. | Terutama jika navigasi kompleks, banyak submenu. |
| 13 | Langganan ‘Feed’ | Mudah+aksesibel. | Sebaiknya berikan pasokan/umpan/’feed’ penuh, bukan ringkasan/’summary’/’excerpt’. |
| 14 | Langganan via surel | Mudah+aksesibel. | |
| 15 | Struktur judul halaman–nama situs | Mudah dikenali di multitab. | |
| 16 | Struktur ‘headings’ (h1-h6) | Mudah+aksesibel, logis pemunculannya, deskriptif. | |
| 17 | Kontras warna teks dan latar | Mudah+aksesibel sesuai WCAG 2.0. | Teks variasi gelap di atas latar pastel lebih dianjurkan. |
| 18 | Waktu ‘posting’/pemutakhiran | Mudah diketahui. | Lebih mudah dikenali jika ada di atas konten. |
| 19 | Perataan teks | Tepi kiri. | Pengecualian pada beberapa kondisi. Misal: huruf Arab, puisi, pantun. |
| 20 | Tipe huruf konten | Sans-serif (Verdana, Arial). | Pengecualian pada beberapa kondisi. Tergantung banyak baris, jarak antar huruf, antar kata, dan ukuran huruf. |
| 21 | Jumlah kata per baris | Maksimal sekitar 8-12 kata. | |
| 22 | Jarak antar baris | Ada ‘whitespace’ secukupnya. | |
| 23 | Susunan kalimat | Blok paragraf, kalimat aktif, pendek, mudah dipahami. | |
| 24 | Teks tidak monoton | Teks dan grafis saling mendukung. | |
| 25 | Elemen penekanan (strong dan em) |
Semantik+mudah (‘scanning’, ‘skimming’, ‘fast reading’)+aksesibel. | |
| 26 | Kuotasi (q, blockquote) |
Mudah dikenali, semantik. | Bukan sekadar untuk menampilkan blok teks yang berbeda. |
| 27 | ‘Listings’ (ul, ol, li) |
Mudah dikenali (walau tanpa gambar), semantik. | |
| 28 | Teks ‘anchor’ | Mudah dikenali, ‘clickable’, deskriptif. | Teks bergaris/berbatas bawah seharusnya ‘clickable’ kan? |
| 29 | Pranala eksternal | Mudah+aksesibel. | Sesuai konteks. Lebih baik jika jelas dibedakan mana yang eksternal/internal. |
| 30 | ‘Broken links’ | Tidak ada. Semua pranala berfungsi baik. | |
| 31 | Pranala/URL terbuka di jendela baru. | Mudah+aksesibel. Sebaiknya ada peringatan bagi pengguna. | RAM/memori internal peranti ‘mobile’ sudah cukup andal mengatasi multitab? |
| 32 | Atribut alt (jika diperlukan) |
Informatif/deskriptif, logis sesuai konteks, tidak duplikasi. | |
| 33 | Atribut title (jika diperlukan) |
Informatif, tidak duplikasi. | |
| 34 | Kontras berkas multimedia (jika ada) | Mudah+aksesibel sesuai WCAG 2.0. | Misal: kontras suara latar dengan narasi, warna latar gambar dengan teks. |
| 35 | Berkas multimedia | Ada tombol kendali, pranala ke pengaya/add-ons yang dibutuhkan, dan teks alternatif. | |
| 36 | Tabel data | Punya <table summary="..."> dan <caption>. |
|
| 37 | Formulir komentar (jika ada) | Mudah (ada tombol ‘reply’)+aksesibel, urutannya logis walau tanpa CSS. | |
| 38 | Langganan komentar via surel | Mudah, posisinya logis–sebelum tombol ‘submit’. | |
| 39 | Antispam (jika ada) | Mudah+aksesibel. | Beberapa sistem ‘captcha’ dan antispam tergantung pada gambar dan/atau ‘javascript’. |
| 40 | Navigasi dengan papan ketik/’keyboard tabbing’ | Aksesibel, logis, tabindex tidak lagi wajib digunakan. |
Tabindex kadang tidak logis. |
| 41 | Menu ‘Go to top’ | Mudah+aksesibel. | |
| 42 | Elemen berkedip/’blinking’, animasi | Aksesibel, bisa dikontrol pengguna. | |
| 43 | Elemen sejenis ‘marquee’ | Aksesibel, bisa dikontrol pengguna. | |
| 44 | Versi ‘mobile’ | Mudah+aksesibel. | Menghilangkan fitur yang ada di versi desktop? |
| 45 | Versi cetak/’print’ | Mudah+aksesibel. | Pranala/URL tercetak ‘inline’. |
| 46 | Halaman 404 | Mudah, tetap informatif. | |
| 47 | Pesan kesalahan | Mudah, informatif. | Misal: saat pengisian formulir. |
| 48 | Tag meta (‘description’, ‘keywords’) | Semantik, aksesibel, logis. | |
| 49 | Pemakaian elemen <div> |
Semantik. | Div bukan pengganti <table> kan? |
| 50 | ‘Pop-ups’ (jika ada) | Mudah+aksesibel. Ada peringatan pada pengguna jika akan memunculkan ‘pop-ups’. | Di ‘small screen’ ada ‘pop-ups’? |
| 51 | Robots.txt | Aksesibel bagi mesin telusur Internet. | |
| 52 | Sitemap | Mudah+aksesibel. | |
| 53 | Versi mesin weblog | Terkini/terstabil. | |
| 54 | Log masuk | Tidak mudah ditebak. Nama pengguna bukan ‘admin’. | Perlukah menampilkan pranala/tautan log masuk? |
| 55 | Proteksi direktori | Beberapa direktori penting sebaiknya tidak terbaca publik. |
Nomor urut dapat berubah sewaktu-waktu saat pemutakhiran.
19 tanggapan untuk “Evaluasi Weblog Mandiri”
Saya setuju dengan argumen di atas. Sebuah desain yang baik tidak hanya berdasarkan kreativitas saja. Nice! Informasinya komplit, bisa dijadikan referensi.
:)
ardianzzz,
biasanya ini saya pake sendiri kok, Mas. Kalo ada yang minta review, silakan dicoba dulu daftar ini sendiri. Kalo belum puas, saya bisa bantuin meninjau. :)
Bli, kayaknya bisa menjadi referansi lanjutan untuk review di blog saya.
Nah masalahnya bli dani minta direview, sementara sebagian ref-nya saya ambil disini. Apa nggak kebalik ? ;)
Bli Dani,
[OOT] apa karena menggunakan Web Browser 2.28.1 yang menggunakan engine webkit, sehingga browsernya terdeteksi sebagai safari ?
Pak Aldy,
ngga apa-apa pak, kan sudut pandangnya bisa berbeda tiap pengguna dan peninjau/pe-review. Esensi tinjauan kan sebenarnya memang dari sisi pengguna. Jadi silakan ditambahkan atau dikurangi sesuai kebutuhan dan preferensi peninjau.
Ini saya juga nyoba make Epiphany 2.30 di GNOME Linux + WebKit.
Penggunaan div (di zaman sekarang) tapi semantik? Wah kayaknya susah tuh dok… Permintaan pasar bukan semantiknya, tapi bagus/tidaknya tampilan :)
rismaka,
targetnya memang di HTML5 nanti. :)
Mengenai jumlah kata per baris, sepertinya 80-100 kata itu kebanyakan Bli. Bisa bikin klenger kalo sebanyak itu dalam satu baris. Bukannya maksimal sekitar 8-12 kata dalam setiap baris jika diukur dari tingkat kenyamanan baca?
Atau mungkin saya salah paham nih dalam menafsirkan jumlah kata per baris yang masih memenuhi standar kenyamanan baca :)
Wah, komentar saya ilang :(
Mau ralat, mungkin yang benar adalah jumlah kata per paragraf maksimal 80 – 100 kata ya? :)
iskandaria,
maaf, saya yang salah. Terima kasih koreksinya, Mas Is. :) Maksud saya memang jumlah 80-120 kata dalam satu baris yang umum direkomendasikan.
Bicara mengenai penggunaan jumlah kata, mungkin juga perlu diperhatikan lebar paragraf. Paragraf yang terlalu lebar mungkin bisa berdampak buruk pada user experience. Kalau saya pribadi, biasanya menggunakan lebar paragraf sebesar 400px-500px untuk font 16px. Dan yang jelas, artikelnya tidak terlalu panjang.
Ardianzzz,
yak setuju, ergonomi sudut lapang pandang mata untuk membaca sepertinya memang enak segitu itu. Jumlah kata per baris itu pun maksudnya serupa. Kecuali nanti ada perubahan penerimaan pengguna seiring zaman.
Untuk peramban mobile, silakan menyesuaikan. Apakah memberi ‘user experience’ yang berbeda dengan versi desktop (perlakuan khusus untuk tiap peramban ‘mobile’), atau biarkan server ‘mobile’ melakukan tugas kompresi otomatisnya. :)
Untuk panjang pendeknya konten, biasanya disiasati dengan paging atau berseri.
[…] Arch (beberapa huruf proprietari Windows terpasang) dan peramban Web Firefox (fx). Dengan bantuan daftar periksa Web yang saya buat, berikut ini pendapat saya sebagai pengguna. Gambar 1. Desain minimalis blog Pak […]
[…] Bakal seperti apa tinjauannya? Contoh bisa dilihat di tag review, di blog Dani Iswara .Net. Item yang akan diperiksa ada di tabel 'checklist' evaluasi Web. […]
[…] perlu, gunakan keduanya. Baik juga jika digabungkan dengan Evaluasi Weblog Mandiri (Dani Iswara .com). Tidak ada peranti yang benar-benar sempurna. Hubungi tim mereka jika menemukan […]
[…] Apakah halaman/aplikasi Web masih logis dan mudah diakses? Saya membuat daftar periksanya di Evaluasi Weblog Mandiri (Dani Iswara […]
[…] coba dan terbukti lolos pelbagai tes aksesibilitas (dan 'usability')? Atau hanya lolos Evaluasi Weblog Mandiri (Dani Iswara […]
[…] navigasi. Apa lagi yang diperiksa? Hasil apa yang direkomendasikan? Saya mencoba menyusunnya di Evaluasi Weblog Mandiri (Dani Iswara […]
[…] ini disesuaikan dengan Evaluasi Weblog Mandiri versi saya (Dani Iswara […]