Evaluasi Weblog Mandiri

Noted: Thursday, April 15, 2010 at 23:41:14. Words count: 686.
Last updated: Wednesday, June 30, 2010 at 17:57:41.

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.

Tabel 1. Evaluasi kebergunaan dan aksesibilitas Weblog
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.

Dani Iswara, [myfirstnamelastname]@gmail.com.

19 comments to "Evaluasi Weblog Mandiri"

  1. ardianzzz

    Saya setuju dengan argumen di atas. Sebuah desain yang baik tidak hanya berdasarkan kreativitas saja. Nice! Informasinya komplit, bisa dijadikan referensi.
    :)

  2. dani

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

  3. Aldy

    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 ? ;)

  4. Aldy

    Bli Dani,
    [OOT] apa karena menggunakan Web Browser 2.28.1 yang menggunakan engine webkit, sehingga browsernya terdeteksi sebagai safari ?

  5. dani

    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.

  6. rismaka

    Penggunaan div (di zaman sekarang) tapi semantik? Wah kayaknya susah tuh dok… Permintaan pasar bukan semantiknya, tapi bagus/tidaknya tampilan :)

  7. dani

    rismaka,
    targetnya memang di HTML5 nanti. :)

  8. iskandaria

    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 :)

  9. iskandaria

    Wah, komentar saya ilang :(

    Mau ralat, mungkin yang benar adalah jumlah kata per paragraf maksimal 80 – 100 kata ya? :)

  10. dani

    iskandaria,
    maaf, saya yang salah. Terima kasih koreksinya, Mas Is. :) Maksud saya memang jumlah 80-120 kata dalam satu baris yang umum direkomendasikan.

  11. Ardianzzz

    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.

  12. dani

    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.

  13. Tinjauan Blog PersonField.Web.Id - Unessential Weblog

    […] 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 […]

  14. Dibuka, Review Blog Manual - Unessential Weblog

    […] 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. […]

  15. Validome dan Validator XHTML W3C - Unessential Weblog

    […] 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 […]

  16. Belajar Web Accessibility - Unessential Weblog

    […] Apakah halaman/aplikasi Web masih logis dan mudah diakses? Saya membuat daftar periksanya di Evaluasi Weblog Mandiri (Dani Iswara […]

  17. Seberapa Aksesibel Sebuah Situs Web - Unessential Weblog

    […] coba dan terbukti lolos pelbagai tes aksesibilitas (dan 'usability')? Atau hanya lolos Evaluasi Weblog Mandiri (Dani Iswara […]

  18. Meninjau Aksesibilitas Situs Web – Unessential Weblog

    […] navigasi. Apa lagi yang diperiksa? Hasil apa yang direkomendasikan? Saya mencoba menyusunnya di Evaluasi Weblog Mandiri (Dani Iswara […]

  19. Tinjauan Blog RudyAzhar.com - Unessential Side - Tidak Penting

    […] ini disesuaikan dengan Evaluasi Weblog Mandiri versi saya (Dani Iswara […]